/* Template Name: Conquer - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0.2 Version: 1.5.1 Author: KeenThemes Website: http://www.keenthemes.com/ Purchase: http://themeforest.net/item/conquer-responsive-admin-dashboard-template/3716838?ref=keenthemes */ /*** Reset and overrides ***/ /* general body settings */ body { color: #000; font-family: 'Open Sans', sans-serif; padding: 0px !important; margin: 0px !important; font-size:12px; direction: ltr; } /* Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix. */ @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /* Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */ @-ms-viewport { width: auto !important; } /* Page print */ @media print { body { background-color: #fff !important; } .header { display: none; } .page-sidebar { display: none; } .theme-panel { display: none; } .hidden-print { display: none; } .footer { display: none; } .no-page-break { page-break-after: avoid; } .page-bar { display: none; } .page-container { margin: 0px !important; padding: 0px !important; } .page-content { padding: 0 !important; min-height: 300px !important; padding: 0px 20px 20px !important; margin: 0 !important; } } /*** General typography ***/ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #444; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; font-weight: 300 !important; } h1.block, h2.block, h3.block, h4.block, h5.block, h6.block { padding-top: 10px; padding-bottom: 10px; } a { text-shadow: none !important; color: #0d638f; } /*** Fix link outlines after click ***/ a,a:focus, a:hover, a:active { outline: 0; } /*** Font Awesome Icons ***/ [class^="fa-"], [class*=" fa-"] { display: inline-block; margin-top: 1px; font-size: 14px; *margin-right: .3em; line-height: 14px; } /*** Make font awesome icons fixed width(latest version issue) ***/ li [class^="fa-"], li [class*=" fa-"] { display: inline-block; width: 1.25em; text-align: center; } li [class^="fa-"].icon-large, li [class*=" fa-"].icon-large { /* increased font size for icon-large */ width: 1.5625em; } /*** Close icon used for modal dialog and other UI element close buttons ***/ .close { display: inline-block; margin-top: 0px; margin-right: 0px; width: 9px; height: 9px; text-indent: -10000px; background-repeat: no-repeat !important; background-image: url("../img/remove-icon-small.png") !important; } /*** General HR ***/ hr { margin: 20px 0; border: 0; border-top: 1px solid #E0DFDF; border-bottom: 1px solid #FEFEFE; } /*** Tools ***/ .display-none, .display-hide { display: none; } .no-space { margin: 0px !important; padding: 0px !important; } .margin-bottom-5 { margin-bottom: 5px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-bottom-15 { margin-bottom: 15px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-top-20 { margin-top: 20px !important; } .margin-bottom-25 { margin-bottom: 25px !important; } .margin-right-10 { margin-right: 10px !important; } .bold { font-weight: 700 !important; } .thin { font-weight: 300 !important; } .uppercase { text-transform: uppercase !important; } .fix-margin { margin-left: 0px !important } .border { border: 1px solid red; } .inline { display: inline; } /*** ie8 & ie9 modes ***/ .visible-ie8 { display: none; } .ie8 .visible-ie8 { display: inherit !important; } .visible-ie9 { display: none; } .ie9 .visible-ie9 { display: inherit !important; } .hidden-ie8 { display: inherit; } .ie8 .hidden-ie8 { display: none !important; } .hidden-ie9 { display: inherit; } .ie9 .hidden-ie9 { display: none !important; } /******************** GENERAL LAYOUT *********************/ /*** Header and header elements. ***/ .header { width: 100%; padding: 0 20px 0 20px; margin: 0; border: 0px; padding: 0px; box-shadow: none; height: 45px; min-height: 45px; } .header.navbar-fixed-top { z-index: 9995 !important; } .header .navbar-brand { display: inline-block; margin-right: 0; padding-left: 0; padding-right: 0; width: 215px; height: 45px; } .header .page-logo { float: left; display: block; width: 225px; height: 45px; padding-left: 20px; padding-right: 20px; } .header .page-logo img { margin: 16px 0 0 0; } /* quick search */ .header .search-form, .page-sidebar-menu .search-form { display: inline-block; margin-top: 7px; margin-left: 25px; } .header .search-form { float: left; } .header .search-form .form-control, .page-sidebar-menu .search-form .form-control { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding-top: 6px; border: 0; } .header .search-form .input-icon > i, .page-sidebar-menu .search-form .input-icon > i { margin-top: 9px; } .header .search-form .input-icon > i:hover, .page-sidebar-menu .search-form .input-icon > i:hover { cursor: pointer; } .page-sidebar-menu .search-form { margin: 15px 10px 15px 15px; } /* sidebar toggle */ .header .navbar-toggle { margin: 10px 6px 9px 6px; padding: 0; padding-top:2px; padding-bottom: 6px; background-image: none; filter:none; box-shadow: none; color: #fff; border: 0; } .header .navbar-toggle:hover { text-decoration: none; background: none; } .header .navbar-nav { height: 45px; margin-right: 20px; display: block; } .header .navbar-nav > li { margin: 0px !important; padding: 0px !important; } .header .navbar-nav > li.devider { margin-left: 10px !important; margin-right: 5px !important; height: 45px; width: 1px !important; } .header .navbar-nav > li.dropdown, .header .navbar-nav > li.dropdown > a { padding-left: 4px; padding-right: 4px; } .header .navbar-nav > li.dropdown > a:last-child { padding-right: 0; } .header .navbar-nav > li.dropdown:last-child { padding-right: 2px; } .header .navbar-nav > li.dropdown .dropdown-toggle { padding: 14px 12px 10px 12px; margin: 0 2px; } .header .navbar-nav > li.dropdown .dropdown-toggle > i { font-size: 18px; } .header .navbar-nav > li.dropdown .dropdown-menu > li > a > i { font-size: 14px; } .header .navbar-nav > li.dropdown.user .dropdown-toggle { margin: 0 !important; padding: 12px 8px 12px 8px; } .header .navbar-nav > li.dropdown.user .dropdown-toggle .username { display: inline-block; } .header .navbar-nav > li.dropdown.user .dropdown-toggle:hover { text-decoration: none; } .header .navbar-nav li.dropdown.user .dropdown-toggle img { float: left; display: inline-block; margin-top: -4px; margin-right: 5px; } .header .navbar-nav li.dropdown.user .dropdown-toggle i { display: inline-block; margin-top: 5px; margin: 0; font-size: 13px; } .header .navbar-nav > li.dropdown.user .dropdown-menu i { display: inline-block; } .header .navbar-nav li.dropdown.user img { border-radius: 50%; } .header .navbar-nav > li.dropdown .dropdown-toggle .badge { position: absolute; top: 10px; right: 2px; border-radius: 2px !important; font-weight: 300px; padding: 1px 4px 0px 4px; height: 14px; } /* language bar */ .header .navbar-nav > li.dropdown.language { padding-left: 0; padding-right: 0; margin: 0 !important; } .header .navbar-nav > li.dropdown.language > a { color: #ddd; font-size: 13px; padding: 12px 2px 13px 5px; } .header .navbar-nav > li.dropdown.language > a > img { margin-bottom: 2px; } .header .navbar-nav > li.dropdown.language > a > i { font-size: 16px; } .header .navbar-nav > li.dropdown.language > .dropdown-menu > li > a > img { margin-bottom: 2px; } .header .navbar-nav .dropdown-menu { margin-top: 3px; } /*** Page container ***/ .page-container { margin: 0px; padding: 0px; position: relative; } .page-container:before, .page-container:after { display: table; content: " "; } .page-container:after { clear: both; } .page-header-fixed .page-container { margin-top: 45px; } /*** IE 8 Fixes ***/ /*** Page sidebar ***/ .ie8 .page-sidebar { width: 225px; float: left; position: relative; margin-left: -100%; } /*** Page content ***/ .ie8 .page-content-wrapper { float: left; width: 100%; } .ie8 .page-content { margin-left: 225px; margin-top: 0px; min-height: 760px; padding: 25px 20px 20px 20px; } /*** IE 8 Fixes ***/ .page-sidebar.navbar-collapse { padding: 0; } .page-sidebar-menu { list-style: none; margin: 0; padding: 0; margin: 0; padding: 0; } .page-sidebar-menu > li { display: block; margin: 0; padding: 0; border: 0px; } .page-sidebar-menu > li.sidebar-toggler-wrapper, .page-sidebar-menu > li.sidebar-search-wrapper { margin: 0; padding: 0; border-bottom: 0; } .page-sidebar-menu > li.start > a { border-top-color: transparent !important; } .page-sidebar-menu > li:last-child > a, .page-sidebar-menu > li.last > a { border-bottom-color: transparent !important; } .page-sidebar-menu > li > a { border-right: 4px solid transparent; display: block; position: relative; margin: 0; padding: 10px 13px 10px 15px; text-decoration: none; font-size: 14px; font-weight: 300; } .page-sidebar-fixed .page-sidebar-menu > li > a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .page-sidebar-reversed.page-sidebar-fixed .page-sidebar-menu > li > a{ -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .page-sidebar-menu > li > a i { font-size: 16px; margin-right: 5px; text-shadow:none; } .page-sidebar-menu.page-sidebar-menu-circle-icons > li > a i { font-size: 12px; margin-right: 5px; text-shadow:none; border-radius: 50%; border: 1px solid #555; height: 25px; width: 25px; text-align: center; padding: 5px 5px 5px 5px; } .page-sidebar-menu > li.break { margin-bottom: 20px; } .page-sidebar-menu > li.active > a { border: none; text-shadow:none; border-right: 4px solid #d12610; } .page-sidebar ul > li > a > .arrow:before { float: right; margin-top: 0px; margin-right: 5px; display: inline; font-size: 16px; font-family: FontAwesome; height: auto; content: "\f104"; font-weight: 300; text-shadow:none; } .page-sidebar ul.page-sidebar-menu-circle-icons > li > a > .arrow:before { margin-top: 3px; } .page-sidebar ul > li.active > a > .arrow:before { margin-right: 1px; } .page-sidebar-menu > li > a > .arrow.open:before { float: right; margin-top: 0px; margin-right: 3px; display: inline; font-family: FontAwesome; height: auto; font-size: 16px; content: "\f107"; font-weight: 300; text-shadow:none; } /* bagin: sidebar menu badges */ .page-sidebar-menu li > a .badge { float: right; margin-top: 1px; margin-right: 13px; } /* end: sidebar menu badges */ .page-sidebar-menu .sub-menu { padding: 0; } .page-sidebar-menu > li > ul.sub-menu { display: none; list-style: none; clear: both; margin: 8px 0px 8px 0px; } .page-sidebar-menu > li.active > ul.sub-menu { display: block; } .page-sidebar-menu > li > ul.sub-menu > li { background: none; margin: 0px; padding: 0px; margin-top: 1px !important; } .page-sidebar-menu > li > ul.sub-menu > li > a { display: block; margin: 0px 0px 0px 0px; padding: 5px 0px; padding-left: 35px !important; text-decoration: none; font-size: 14px; font-weight: 300; background: none; } /* 3rd level sub menu */ .page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu { display: none; list-style: none; clear: both; margin: 0px 0px 0px 0px; } .page-sidebar-menu > li > ul.sub-menu li > a > .arrow:before { float: right; margin-top: 1px; margin-right: 20px; display: inline; font-size: 16px; font-family: FontAwesome; height: auto; content: "\f104"; font-weight: 300; text-shadow:none; } .page-sidebar-menu > li > ul.sub-menu li > a > .arrow.open:before { float: right; margin-top: 1px; margin-right: 18px; display: inline; font-family: FontAwesome; height: auto; font-size: 16px; content: "\f107"; font-weight: 300; text-shadow:none; } .page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu { display: block; } .page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu li { background: none; margin: 0px; padding: 0px; margin-top: 1px !important; } .page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a { display: block; margin: 0px 0px 0px 0px; padding: 5px 0px; text-decoration: none; font-size: 14px; font-weight: 300; background: none; } .page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { padding-left: 60px; } .page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { padding-left: 80px; } .page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu { display: block; } .page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a > i { font-size: 13px; } /*** Sidebar toggler(show/hide) ***/ .sidebar-toggler { -webkit-border-radius: 4px 0px 0px 4px; -moz-border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px; cursor: pointer; display: block; float: right; margin: 0; border: 0; margin-top: 15px; margin-bottom: 15px; width: 24px; height: 23px; margin-right: -1px; background-color: #FcFcFc; } .sidebar-toggler:before { margin: 0px 2px 3px 8px; display: inline-block; font-size: 18px; font-family: FontAwesome; height: auto; content: "\f104"; font-weight: 300; text-shadow:none; } .page-sidebar-closed .sidebar-toggler:before { content: "\f105"; margin: 0px 2px 3px 10px; } .page-sidebar-reversed.page-sidebar-closed .sidebar-toggler:before { content: "\f104"; margin: 0px 4px 3px 8px; } .page-sidebar-reversed .sidebar-toggler:before { content: "\f105"; } .page-sidebar-reversed .sidebar-toggler { margin-right: 0; margin-left: -1px; float: left; -webkit-border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px; } .ie .page-sidebar-reversed .sidebar-toggler { margin-left: -1px; } /*** Page content ***/ .page-content { margin-top: 0px; padding: 0px; background-color: #FaFaFa; border-radius: 0 0 0 4px; } .page-sidebar-reversed .page-content { border-radius: 0 0 4px 0; } .page-content-no-pattern .page-content { background-image: none !important; } .page-sidebar-reversed.page-boxed .page-content, .page-boxed .page-content, .page-sidebar-fixed .page-content { border-radius: 0 0 0 4px; } .ie8 .page-content { padding: 20px; margin-left: 215px; margin-top: 0px; min-height: 760px; } .ie8 .page-sidebar-fixed .page-content { min-height: 600px; } .ie8 .page-content.no-min-height { min-height: auto; } .page-full-width .page-content { margin-left: 0px !important; } /*** Page title ***/ .page-title { padding: 0px; font-size: 26px; letter-spacing: -1px; display: block; color: #666; margin: 0px 0px 15px 0px; font-weight: 300; font-family: 'Open Sans', sans-serif; } .page-title small { font-size: 14px; letter-spacing: 0px; font-weight: 300; color: #888; } /*** Page breadcrumb ***/ /* Page breadcrumb */ .page-bar { border: 0; padding: 0px; background-color: #eee; margin-bottom: 25px; margin-left: -20px; margin-right: -20px; padding-left: 10px; padding-right: 20px; } .page-boxed .page-bar { margin-right: -19px; } .page-bar:before, .page-bar:after { content: " "; display: table; } .page-bar:after { clear: both; } .page-bar .page-breadcrumb { display: inline-block; float: left; padding: 8px; margin: 0; list-style: none; } .page-bar .page-breadcrumb > li { display: inline-block; } .page-bar .page-breadcrumb > li > a, .page-bar .page-breadcrumb > li > span { color: #666; font-size: 14px; text-shadow: none; } .page-bar .page-breadcrumb > li > i { color: #999; font-size: 14px; text-shadow: none; } .page-bar .page-breadcrumb > li > i[class^="icon-"], .page-bar .page-breadcrumb > li > i[class*="icon-"] { color: gray; } .page-bar .page-toolbar { display: inline-block; float: right; padding: 0; } .page-bar .page-toolbar .btn-fit-height { padding-top: 8px; padding-bottom: 8px; border-radius: 0; } .page-bar .page-toolbar .btn.default { background-color: #ddd; } /*** Footer ***/ .footer { padding: 10px 20px 5px 20px; font-size: 12px; } .footer:after, .footer:before { content: ""; display: table; line-height: 0; } .footer:after { clear: both; } .footer .footer-inner { float: left; display: inline-block; } .footer .footer-tools { float: right; display: inline-block; } .footer .footer-tools .go-top { display: block; text-decoration: none; cursor: pointer; margin-top: -4px; margin-right: 0px; margin-bottom: 0px; font-size: 16px; padding: 2px 6px 0px 6px; height: 25px; width: 25px; border-radius: 50%; } .footer .footer-tools .go-top i { font-size: 22px; margin-bottom: 7px; } /******************** GENERAL UI ELEMENTS *********************/ /*** Icon stuff ***/ i.icon, a.icon { color: #999; margin-right: 5px; font-weight: normal; font-size: 13px; } i.icon-black { color: #000 !important; } a.icon:hover { text-decoration: none; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; opacity: .4; filter:alpha(opacity=40); } a.icon.huge i{ font-size: 16px !important; } i.big { font-size: 20px; } i.warning { color: #d12610; } i.critical { color: #37b7f3; } i.normal { color: #52e136; } /* input with left aligned icons */ .input-icon { position: relative; } .input-icon input { padding-left: 33px !important; } .input-icon i { color: #ccc; display: block; position: absolute; margin: 6px 2px 4px 10px; width: 16px; height: 16px; font-size: 16px; text-align: center; } .input-icon.right input { padding-left: 12px !important; padding-right: 33px !important; } .input-icon.right i { right:6px; float: right; } .has-success .input-icon > i { color: #468847; } .has-warning .input-icon > i { color: #c09853; } .has-error .input-icon > i { color: #b94a48; } /*** Portlets ***/ .portlet { clear: both; margin-top: 0px; margin-bottom: 25px; padding: 0px; -webkit-box-shadow1: 0 1px 4px rgba(0, 0, 0, 0.07); box-shadow1: 0 1px 4px rgba(0, 0, 0, 0.07); border: 1px solid #ddd; border-radius: 4px; } .portlet > .portlet-title { background-color: #eee; border-radius: 4px 4px 0 0; padding:10px 10px 2px 10px; height: 38px; } .portlet > .portlet-title:after, .portlet > .portlet-title:before { content: ""; display: table; line-height: 0; } .portlet > .portlet-title:after { clear: both; } .portlet > .portlet-title > .caption { color: #333; float: left; display: inline-block; font-size: 16px; line-height: 16px; font-weight: 400; margin: 0; padding: 0; margin-top: 1px; } .portlet > .portlet-title .bootstrap-switch { margin-top: -10px !important; } .portlet > .portlet-title > .caption > i { float: left; margin-top: 2px; display: inline-block !important; font-size: 13px; margin-right: 5px; color: #666; } .portlet > .portlet-title > .tools, .portlet > .portlet-title > .actions { display: inline-block; padding: 0; margin: 0; margin-top: 3px; float: right; } .portlet > .portlet-title > .tools { margin-top: 0px; } .portlet > .portlet-title > .tools > a { display: inline-block; height: 16px; margin-left:5px; } .portlet > .portlet-title > .actions > .dropdown-menu i { color: #000 !important; } .portlet > .portlet-title > .tools > a.remove { margin-bottom: 2px; background-image:url(../img/portlet-remove-icon.png); background-repeat: no-repeat; width: 11px; } .portlet > .portlet-title > .tools > a.config { margin-bottom: 2px; background-image:url(../img/portlet-config-icon.png); background-repeat: no-repeat; width: 12px; } .portlet > .portlet-title > .tools > a.reload { margin-bottom: 2px; background-image:url(../img/portlet-reload-icon.png); width: 13px; } .portlet > .portlet-title > .tools > a.expand { margin-bottom: 2px; background-image:url(../img/portlet-expand-icon.png); width: 14px; } .portlet > .portlet-title > .tools > a.collapse { margin-bottom: 2px; background-image:url(../img/portlet-collapse-icon.png); width: 14px; } .portlet > .portlet-title > .tools > a:hover { text-decoration: none; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; opacity:.6; filter:'alpha(opacity=60)'; } .portlet > .portlet-title > .actions > .btn-group { margin-top: -8px; } .portlet > .portlet-title > .actions > .btn { padding: 4px 10px; margin-top: -10px; } .portlet > .portlet-title > .actions > .btn-group > .btn { padding: 4px 10px; margin-top: -1px; } .portlet > .portlet-title > .actions > .btn.btn-sm { padding: 3px 8px; margin-top: -10px; } .portlet > .portlet-title > .actions > .btn-group > .btn-sm { padding: 3px 8px; margin-top: -1px; } .portlet > .portlet-title > .pagination.pagination-sm { float: right !important; display: inline-block !important; margin: 0px; margin-top: -6px; } .portlet > .portlet-body { clear: both; padding: 10px; background-color: #fff; border-radius: 0px 0px 4px 4px; } /* jQuery UI Draggable Portlets */ .portlet-sortable > .portlet-title { cursor: move; } .portlet-sortable-placeholder { border: 2px dashed #eee; border-radius: 4px; margin-bottom: 25px; } .portlet-sortable-empty { height: 45px; border: 0; background: none; } /*** Charts and statistics ***/ .chart, .pie, .bars { overflow: hidden; height: 300px; } /*** Statistic lists ***/ .item-list.table .percent { width: 30px; float: right; margin-right: 10px; margin-top: 3px; } .item-list.table .title { padding-top: -5px; } /*** Chart tooltips ***/ .chart-tooltip { clear: both; z-index: 100; background-color: #736e6e !important; padding: 5px !important; color: #fff; } .chart-tooltip .label { clear: both; display: block; margin-bottom: 2px; } /*** Mini chart containers ***/ .bar-chart { display: none } .line-chart { display: none } .create_skips{ font-size:14px !important; } /*** Custom icon buttons ***/ .red_color {color:#dd4b39; font-size:18px !important;} .green_color {color:#a5cf4e; font-size:18px !important;} .orange_color {color:#ec5924; font-size:18px !important;} .blue_color {color:#9DCFF7; font-size:18px !important;} .dash_box{ height: 55px; width: 100px; margin-top: -30px; background-image: linear-gradient(#244F7D, #418AC9) !important; border: none; } .dash_box i{ color: #ec5924 !important; padding-left:10px; } .icon-btn { height: 55px; min-width: 100px; margin: 5px 0 0 0; border: 1px solid #ddd; padding: 12px 0px 0px 0px; background-image: none !important; filter:none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; display:inline-block !important; color: #646464 !important; text-shadow: none !important; text-align: center; cursor: pointer; position: relative; border-radius: 4px; -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; transition: all 0.3s ease !important; } .icon-btn i { font-size: 18px; } .ie8 .icon-btn:hover { filter: none !important; } .icon-btn:hover { text-decoration: none !important; border-color: #999 !important; color: #444 !important; text-shadow: 0 1px 0px rgba(255, 255, 255, 1) !important; -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; transition: all 0.3s ease !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .icon-btn:hover .badge { -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; transition: all 0.3s ease !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .icon-btn div { font-family: 'Open Sans', sans-serif; margin-top: 5px; margin-bottom: 20px; color: #000; font-size: 12px; font-weight: 300; } .icon-btn .badge { position: absolute; font-family: 'Open Sans', sans-serif; font-size: 11px !important; font-weight: 300; top: -5px; right: -5px; padding: 3px 6px 3px 6px; color: white !important; text-shadow: none; border-width: 0; border-style: solid; -webkit-border-radius: 12px !important; -moz-border-radius: 12px !important; border-radius: 12px !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* extended dropdowns */ .dropdown-menu.extended { padding: 0 0 4px 0; border-radius: 4px !important; min-width: 160px !important; max-width: 300px !important; width: 233px !important; background-color: #ffffff !important; } .dropdown-menu.extended:before, .dropdown-menu.extended:after { border-bottom-color: #eee !important; } .dropdown-menu.extended li a{ display: block; padding: 5px 10px !important; clear: both; font-weight: normal; line-height: 20px; white-space: normal !important; } .dropdown-menu.extended li i{ margin-right: 3px; } .dropdown-menu.extended li a{ font-size: 13px; padding: 5px !important; /* background-color: #ffffff;*/ } .dropdown-menu.extended li a:hover { background-image: none; /* background-color: #f5f5f5;*/ color: #000; filter:none; } .dropdown-menu.extended li p { border-radius: 4px 4px 0px 0px !important; padding: 10px; background-color: #eee; margin: 0px; font-size: 14px; font-weight: 300; color: #333; } .dropdown-menu.extended li a{ padding: 7px 0 5px 0px; list-style: none; border-bottom: 1px solid #f4f4f4 !important; font-size: 12px; text-shadow: none; } .dropdown-menu.extended li:first-child a { border-top: none; border-bottom: 1px solid #f4f4f4 !important; } .dropdown-menu.extended li:last-child a { /* border-top: 1px solid white !important; border-bottom: 1px solid #f4f4f4 !important;*/ } .dropdown-menu.extended li.external > a { font-size: 13px; font-weight: 400; border-bottom: 0 !important; } /* header notifications dropdowns */ .dropdown-menu .dropdown-menu-list.scroller { padding-right: 0 !important; padding-left: 0; list-style: none; } .dropdown-menu.notification li > a .time { font-size: 12px; font-weight: 600; text-align: right; font-style: italic; } .dropdown-menu.notification li > a > .label-icon { padding: 4px 2px 4px 5px; } .dropdown-menu.notification li > a > .label-icon > i { margin: 0; color: #fff; } /* header inbox dropdowns */ .dropdown-menu.inbox li > a .photo { float: left; padding-right: 6px; } .dropdown-menu.inbox li > a .photo > img { height: 40px; width: 40px; } .dropdown-menu.inbox li > a .subject { display: block; } .dropdown-menu.inbox li > a .subject .from { font-size: 14px; font-weight: 400; color: #02689b; } .dropdown-menu.inbox li > a .subject .time { font-size: 12px; font-weight: 600; font-style: italic; position: relative; float: right; } .dropdown-menu.inbox li > a .message { display: block !important; font-size: 12px; } /* header tasks */ .dropdown-menu.tasks .task { margin-bottom: 5px; } .dropdown-menu.tasks .task .desc { font-size: 13px; font-weight: 300; } .dropdown-menu.tasks .task .percent { font-size: 14px; font-weight: 600; font-family: 'Open Sans', sans-serif; float: right; display: inline-block; } .dropdown-menu.tasks .progress { display: block; height: 11px; margin: 0px; } /*** General list for item with image ***/ .item-list li .img { height: 50px; width: 50px; float: left; margin-top: 3px; margin-right: 5px; } .item-list { margin: 0px; list-style: none; } .item-list li { padding: 7px 0 5px 0px; list-style: none; border-top: 1px solid white; border-bottom: 1px solid #EBEBEB; font-size: 12px; } .item-list li:first-child { border-top: none; border-bottom: 1px solid #EBEBEB; } .item-list li:last-child { border-top: none; border-bottom: none; } .item-list li .label { margin-right: 5px; } .item-list.todo li .label { position: absolute; right: 80px; } .item-list.todo li .actions { position: absolute; right: 45px; } /*** Custom tables ***/ .table-toolbar { margin-bottom: 15px; } .table.table-full-width { width: 100% !important; } .table .m-btn { margin-top: 0px; margin-left: 0px; margin-right: 5px; } .table thead tr th { font-size: 14px; font-weight: 600; } .table-advance { margin-bottom: 10px !important; } .table-advance thead { color: #999; } .table-advance thead tr th{ background-color: #DDD; font-size: 14px; font-weight: 400; color: #666; } .table-advance div.success, .table-advance div.info, .table-advance div.important, .table-advance div.warning, .table-advance div.danger { position: absolute; margin-top:-5px; float: left; width: 2px; height: 30px; margin-right: 20px !important; } .table-advance tr td { border-left-width: 0px; } .table-advance tr td:first-child { border-left-width: 1px !important; } .table-advance tr td.highlight:first-child a { margin-left: 15px; } .table-advance td.highlight div.success { border-left: 2px solid #66ee66; } .table-advance td.highlight div.info { border-left: 2px solid #87ceeb; } .table-advance td.highlight div.important { border-left: 2px solid #f02c71; } .table-advance td.highlight div.warning { border-left: 2px solid #fdbb39; } .table-advance td.highlight div.danger { border-left: 2px solid #e23e29; } /*** Star rating ***/ .rating { unicode-bidi: bidi-override; direction: rtl; font-size: 30px; } .rating span.star { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; } .rating span.star:hover { cursor: pointer; } .rating span.star:before { content: "\f006"; padding-right: 5px; color: #999999; } .rating span.star:hover:before, .rating span.star:hover ~ span.star:before { content: "\f005"; color: #e3cf7a; } /*** Item block with details shown on hover ***/ .item { overflow: hidden; display: block; margin-bottom: 20px; } .item .details { width: 100%; display: none; background-color: #000; color: #fff !important; padding: 5px; text-align: center; position: relative; bottom:30px; margin-bottom:-30px; overflow: hidden; z-index: 6; } .item:hover .details { display: block; opacity: 0.7; filter: alpha(opacity = 70); } .item:hover .zoom-icon{ opacity:0.5; filter: alpha(opacity = 50); } /*** Zoom icon overlay on images ***/ .zoom { cursor: pointer; width: 100%; height: 100%; position: relative; z-index: 5; } .zoom .zoom-icon { background-image:url("../img/overlay-icon.png"); background-color: #222; background-repeat: no-repeat; background-position: 50%; position: absolute; width: inherit; height: inherit; opacity: 0; filter: alpha(opacity = 0); z-index: 6; top:0; } /*** Chats ***/ .chats { margin:0; padding: 0; margin-top: -15px; margin-right: 10px; } .chats li { list-style: none; padding: 5px 0; margin: 10px 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; } .chats li .name { color:#3590c1; font-size: 13px; font-weight: 400; } .chats li .datetime { color:#333; font-size: 13px; font-weight: 400; } .chats li.out img.avatar { float: right; margin-left: 10px; } .chats li .message { display: block; padding: 5px; position: relative; } .chats li.in .message { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: left; border: 1px solid #ddd; margin-left: 65px; background: #fafafa } .chats li.in .message .arrow { display: block; position: absolute; top: 5px; left: -8px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #ddd; } .chats li.out .message .arrow { display: block; position: absolute; top: 5px; right: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #ddd; } .chats li.out .message { border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-right: 65px; text-align: right; } .chats li.out .name, .chats li.out .datetime { text-align: right; } .chats li .message .body { display: block; } .chat-form { margin-top: 15px; padding: 10px; background-color: #e9eff3; overflow: hidden; clear: both; } .chat-form .input-cont { margin-right: 40px; } .chat-form .input-cont .form-control { width: 100% !important; margin-bottom: 0px; } .chat-form .input-cont input{ border: 1px solid #ddd; width: 100% !important; margin-top: 0; } .chat-form .input-cont input { background-color: #fff !important; } .chat-form .input-cont input:focus{ border: 1px solid #4b8df9 !important; } .chat-form .btn-cont { margin-top: -42px; position: relative; float: right; width:44px; } .chat-form .btn-cont .arrow { position: absolute; top: 17px; right: 43px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #428bca; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .chat-form .btn-cont:hover .arrow { border-right-color: #0362fd; } .chat-form .btn-cont:hover .btn { background-color: #0362fd; } .chat-form .btn-cont .btn { border-radius: 0px 4px 4px 0px; margin-top: 8px; } /*** System feeds ***/ .feeds { margin: 0px; padding: 0px; list-style: none; } .feeds li { background-color: #fafafa; margin-bottom: 7px; } .feeds li:before, .feeds li:after { display: table; line-height: 0; content: ""; } .feeds li:after { clear: both; } .feeds li:last-child { margin-bottom: 0px; } .feeds .col1 { float:left; width:100%; clear: both; } .feeds .col2 { float:left; width:75px; margin-left:-75px; } .feeds .col1 .cont { float:left; margin-right:75px; overflow:hidden; } .feeds .col1 .cont .cont-col1 { float:left; margin-right:-100%; } .feeds .col1 .cont .cont-col1 .label { display: inline-block; padding: 5px 4px 6px 5px; vertical-align: middle; text-align: center; } .feeds .col1 .cont .cont-col1 .label > i { text-align: center; font-size: 14px; } .feeds .col1 .cont .cont-col2 { float:left; width:100%; } .feeds .col1 .cont .cont-col2 .desc { margin-left:35px; padding-top: 4px; padding-bottom: 5px; overflow:hidden; } .feeds .col2 .date { padding: 4px 9px 5px 4px; text-align: right; font-style: italic; color:#c1cbd0; } /*** Users ***/ .user-info { margin-bottom: 10px !important; } .user-info img { float: left; margin-right: 5px; } .user-info .details { display: inline-block; } .user-info .label { font-weight: 300; font-size: 11px; } /*** Accordions ***/ .accordion-heading { background:#eee; } .accordion-heading a { text-decoration:none; } .accordion-heading a:hover { text-decoration:none; } /*** Vertical inline menu ***/ .ver-inline-menu { padding: 0; margin: 0; list-style: none; } .ver-inline-menu li { position:relative; margin-bottom:1px; } .ver-inline-menu li i { width: 37px; height: 37px; display: inline-block; color:#b9cbd5; font-size:15px; padding:12px 10px 10px 8px; margin:0 8px 0 0; text-align: center; background:#e0eaf0 !important; } .ver-inline-menu li a { font-size: 13px; color:#557386; display:block; background:#f0f6fa; border-left:solid 2px #e0eaf0; border-radius: 4px; } .ver-inline-menu li.active a, .ver-inline-menu li:hover a { font-size: 13px; } .ver-inline-menu li.active a, .ver-inline-menu li:hover a { border-left:solid 2px #0c91e5; } .ver-inline-menu li.active a, .ver-inline-menu li:hover a, .ver-inline-menu li.active i, .ver-inline-menu li:hover i { color:#fff; background:#169ef4; text-decoration:none; } .ver-inline-menu li.active i, .ver-inline-menu li:hover i { background:#0c91e5 !important; } .ver-inline-menu li.active:after { content: ''; display: inline-block; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid #169ef4; position: absolute; top: 12px; right: -5px; } /*** Custom tabs ***/ .tabbable-custom { margin-bottom: 15px; padding: 0px; overflow: hidden; } .tabbable-custom > .nav-tabs { border: none; margin: 0px; } .tabbable-custom > .tab-content { background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 2px; padding: 10px; } /*** Custom portlet tabs ***/ .portlet-tabs > .nav-tabs { position: relative; top: -41px; margin-right: 10px; overflow: hidden; } .portlet-tabs > .nav-tabs > li { float: right; } .portlet-tabs > .nav-tabs { border-bottom: none; } .portlet-tabs > .nav-tabs > li > a { padding-top: 8px; padding-bottom: 10px; line-height: 16px; margin-top: 6px; margin-left: 0px; margin-right: 0px; border-left: 0; border-right: 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .portlet-tabs > .nav-tabs > li:last-child > a { border-right:0; } .portlet-tabs > .nav-tabs > li { margin-left: 1px; } .portlet-tabs > .nav-tabs > li.active { color: #333; border-top-color: transparent; } .portlet-tabs > .nav-tabs > li.active > a { margin-bottom: 0px; border-bottom: 0; margin-left: 0px; margin-right: 0px; border-left: 0; border-right: 0; background-color: none !important; border-top-color:transparent !important; } .portlet-tabs > .nav-tabs > li > a:hover { color: #333; margin-bottom: 0; border-bottom-color: transparent; margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; background-color: none !important; border-top-color:transparent; background-color: #fff; } .portlet-tabs > .nav-tabs > .active > a { color: #555555; cursor: default; background-color: #fff; } .portlet-tabs > .nav-tabs > .active > a:hover { background-color: #fff !important; } .portlet-tabs > .tab-content { padding: 10px !important; margin: 0px; margin-top: -50px !important; } .portlet.tabbable .portlet-body { padding: 0px; } .tab-pane > p:last-child { margin-bottom: 0px; } /* general purpose block with css3 gradient background */ .stat-block { background-color: #F6F6F6; border: 1px solid #dedede; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: 18px; margin: 0 0 20px 0; padding: 10px; } /*** Dashboard container ***/ #dashboard { overflow: hidden; } /*** Dashboard stats ***/ .stats-overview-cont { padding-top: 10px; padding-bottom: 6px; } .stat_head{ border-bottom: 1px solid #b9b4b4 } .stat_head p{ margin: 0px;font-size: 10px } .stats-overview { background: #fff; clear: both; padding: 10px 10px 0px 10px; margin: 0px; margin-bottom: 5px; height: 100px; } .stats-overview .display { margin-right: -30px; float: left; } .stats-overview .details { color:#888; } .stats-overview .details .title { color: #37b7f3; font-size: 11px; font-weight: 550; margin-bottom: 3px; } .stats-overview .details .title i { color: #999; margin-right: 2px; } .stats-overview .details .numbers { color: navy; font-size: 16px; font-weight: 300; margin-bottom: 6px; } .stats-overview .progress { height: 10px; margin-bottom:10px !important; background: #e6e6e6; } /* charts & stats */ .chart, .pie, .bars { overflow: hidden; height: 300px; } .stat { margin: 0px; padding: 0px; } .item-list.table .percent { width: 30px; float: right; margin-right: 10px; margin-top: 3px; } .item-list.table .title { padding-top: -5px; } .stat .title { margin-left: 10px; margin-right: 10px; font-size1: 13px; } .stat.good .percent { color: #52e136; font-size: 16px; font-weight: bold; } .stat.bad .percent { color: #d12610; font-size: 16px; font-weight: bold; } .stat.ok .percent { margin-top: 10px; } .icon_stat{ width: 40% } /* Circle stats */ .circle-stat .knobify { border: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 300 !important; width: 46px !important; margin-left: -72px !important; background: #F6F6F6 !important; } .ie8 .knobify { display: none; } .circle-stats { position: relative; margin: 10px 0px 10px 0px; } .circle-stat { padding:2px; } .circle-stat canvas { } .circle-stat:before, .circle-stat:after { display: table; line-height: 0; content: ""; } .circle-stat:after { clear: both; } .circle-stat .visual { display: block; float: left; } .circle-stat .details { display: block; float: left; margin-left: 5px; padding-top: 7px; } .circle-stat .details .title { margin: 10px 0px 5px 0px !important; padding: 0px !important; font-size: 16px; color: #777; } .ie8 .circle-stat .details .title { margin-top:5px !important; } .ie8 .circle-stat .details { padding-top: 0px !important; margin-bottom: 5px !important; } .circle-stat .details .title i { margin-top:2px !important; color: #52e136; font-size: 16px; } .circle-stat .details .title i.down { color: #b63625; } .circle-stat .details .number { margin: 0px !important; margin-bottom: 7px !important; font-size: 24px; padding: 0px; font-weight: 300; text-shadow: 0 1px rgba(244, 244, 244, 0.85); color: #999; } @media (max-width: 1024px) { .circle-stat .details .title { font-size: 14px; } .circle-stat .details .title i { font-size: 12px; } .circle-stat .details .number { font-size: 16px; } .circle-stat .details { margin-bottom: 7px; padding-top: 0; } } /*** Theme Panel ***/ .theme-panel { width: 320px; margin-top: -20px; margin-right: 1px; z-index: 999; float: right; position:relative; } .theme-panel > .toggler { top:5px; right:2px; padding:11px 12px 9px 12px; cursor:pointer; position:absolute; z-index: 1; background:#c9c9c9; border-radius: 4px 4px 4px 4px; } .theme-panel > .toggler.open { background:#fff; } .theme-panel > .toggler > i { font-size: 18px; } .theme-panel > .toggler:hover { background-color: #c1c1c1 !important; } .theme-panel > .toggler-close:hover { background-color:#222 !important; } .theme-panel > .theme-options { top:3px; right:0px; display:none; position:absolute; background-color: #fff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .theme-panel > .theme-options > .theme-option { color:#333; padding: 15px; border-top:1px solid #eee; margin-top: 0px; margin-bottom: 0px; } .theme-panel > .theme-options > .theme-option.theme-colors { border-top: 0; } .theme-panel > .theme-options > .theme-option > span { display: inline-block; width: 120px; font-size: 14px; } .theme-panel > .theme-options > .theme-option.theme-colors > span { display: block; width: auto; } .theme-panel > .theme-options > .theme-option > select.form-control { display: inline; width: 100px; text-transform: lowercase; } .theme-panel > .theme-options > .theme-option.theme-colors > ul { list-style:none; padding: 0; display: block; margin-bottom: 1px !important; margin-top: 10px; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li { width:39px; height:39px; margin:0 6px; cursor:pointer; list-style:none; float: left; border-radius: 2px; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li:first-child { margin-left: 0; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li:hover, .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.current { border:solid 2px #999; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-black { background:#333438; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-grey { background:#908f8f; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-blue { background:#124f94; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-red { background:#5a3128; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-light { background:#e1e1e1; } /*** Top bar menu ***/ /* enable arrow for dropdown menu */ .header .nav > li > .dropdown-menu:before { position: absolute; top: -7px; right: 9px; display: inline-block !important; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .header .nav > li > .dropdown-menu:after { position: absolute; top: -6px; right: 10px; display: inline-block !important; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; content: ''; } /*** Top News Blocks(new in v1.2.2) ***/ .top-news { color: #fff; margin: 8px 0; } .top-news a, .top-news em, .top-news span { display: block; text-align: left; } .top-news a { padding: 10px; position: relative; margin-bottom: 10px; } .top-news a .top-news-icon { right: 8px; bottom: 15px; opacity:0.3; font-size: 35px; position: absolute; filter: alpha(opacity=30); /*For IE8*/ } .top-news em { margin-bottom: 0; font-style: normal; } .top-news span { font-size: 18px; margin-bottom: 5px; } /*** Block Images(new in v1.2.2) ***/ .blog-images { margin-bottom: 0; } .blog-images li { padding: 0; margin: 0; display: inline; } .blog-images li a:hover { text-decoration: none; } .blog-images li img { border-radius: 2px; width: 50px; height: 50px; opacity: 0.6; margin: 0 2px 8px; } .blog-images li img:hover { opacity: 1; box-shadow: 0 0 0 4px #72c02c; transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; } /*Sidebar Tags*/ ul.sidebar-tags a { color: #555; font-size:12px; padding:3px 5px; background:#eee; margin:0 2px 5px 0; display:inline-block; border-radius: 2px; } ul.sidebar-tags a:hover, ul.sidebar-tags a:hover i { background: #ddd; text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } ul.sidebar-tags a i { color:#777; } ul.sidebar-tags li { padding: 0; } /*** Social Icons(new in v1.2.2) ***/ .social-icons { padding: 0; margin:0; } .social-icons:after, .social-icons:before { content: ""; display: table; } .social-icons:after { clear: both; } .social-icons li { float:left; display:inline; list-style:none; margin-right:5px; margin-bottom:5px; text-indent:-9999px; } .social-icons li a, a.social-icon { width:28px; height:28px; display:block; border-radius: 2px; background-position:0 0; background-repeat:no-repeat; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .social-icons li:hover a { background-position:0 -38px; } .social-icons-color li a { opacity: 0.7; background-position:0 -38px !important; } .social-icons-color li a:hover { opacity: 1; } .social-icons .amazon {background: url(../img/social/amazon.png) no-repeat;} .social-icons .behance {background: url(../img/social/behance.png) no-repeat;} .social-icons .blogger {background: url(../img/social/blogger.png) no-repeat;} .social-icons .deviantart {background: url(../img/social/deviantart.png) no-repeat;} .social-icons .dribbble {background: url(../img/social/dribbble.png) no-repeat;} .social-icons .dropbox {background: url(../img/social/dropbox.png) no-repeat;} .social-icons .evernote {background: url(../img/social/evernote.png) no-repeat;} .social-icons .facebook {background: url(../img/social/facebook.png) no-repeat;} .social-icons .forrst {background: url(../img/social/forrst.png) no-repeat;} .social-icons .github {background: url(../img/social/github.png) no-repeat;} .social-icons .googleplus {background: url(../img/social/googleplus.png) no-repeat;} .social-icons .jolicloud {background: url(../img/social/jolicloud.png) no-repeat;} .social-icons .last-fm {background: url(../img/social/last-fm.png) no-repeat;} .social-icons .linkedin {background: url(../img/social/linkedin.png) no-repeat;} .social-icons .picasa {background: url(../img/social/picasa.png) no-repeat;} .social-icons .pintrest {background: url(../img/social/pintrest.png) no-repeat;} .social-icons .rss {background: url(../img/social/rss.png) no-repeat;} .social-icons .skype {background: url(../img/social/skype.png) no-repeat;} .social-icons .spotify {background: url(../img/social/spotify.png) no-repeat;} .social-icons .stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;} .social-icons .tumblr {background: url(../img/social/tumblr.png) no-repeat;} .social-icons .twitter {background: url(../img/social/twitter.png) no-repeat;} .social-icons .vimeo {background: url(../img/social/vimeo.png) no-repeat;} .social-icons .wordpress {background: url(../img/social/wordpress.png) no-repeat;} .social-icons .xing {background: url(../img/social/xing.png) no-repeat;} .social-icons .yahoo {background: url(../img/social/yahoo.png) no-repeat;} .social-icons .youtube {background: url(../img/social/youtube.png) no-repeat;} .social-icons .vk {background: url(../img/social/vk.png) no-repeat;} .social-icons .instagram {background: url(../img/social/instagram.png) no-repeat;} .social-icons .reddit {background: url(../img/social/reddit.png) no-repeat;} /*** Inline Social Icons ***/ .social-icon { display:inline-block !important; width:28px; height:28px; border-radius: 2px; background-position:0 0; background-repeat:no-repeat; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .social-icon.amazon {background: url(../img/social/amazon.png) no-repeat;} .social-icon.behance {background: url(../img/social/behance.png) no-repeat;} .social-icon.blogger {background: url(../img/social/blogger.png) no-repeat;} .social-icon.deviantart {background: url(../img/social/deviantart.png) no-repeat;} .social-icon.dribbble {background: url(../img/social/dribbble.png) no-repeat;} .social-icon.dropbox {background: url(../img/social/dropbox.png) no-repeat;} .social-icon.evernote {background: url(../img/social/evernote.png) no-repeat;} .social-icon.facebook {background: url(../img/social/facebook.png) no-repeat;} .social-icon.forrst {background: url(../img/social/forrst.png) no-repeat;} .social-icon.github {background: url(../img/social/github.png) no-repeat;} .social-icon.googleplus {background: url(../img/social/googleplus.png) no-repeat;} .social-icon.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;} .social-icon.last-fm {background: url(../img/social/last-fm.png) no-repeat;} .social-icon.linkedin {background: url(../img/social/linkedin.png) no-repeat;} .social-icon.picasa {background: url(../img/social/picasa.png) no-repeat;} .social-icon.pintrest {background: url(../img/social/pintrest.png) no-repeat;} .social-icon.rss {background: url(../img/social/rss.png) no-repeat;} .social-icon.skype {background: url(../img/social/skype.png) no-repeat;} .social-icon.spotify {background: url(../img/social/spotify.png) no-repeat;} .social-icon.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;} .social-icon.tumblr {background: url(../img/social/tumblr.png) no-repeat;} .social-icon.twitter {background: url(../img/social/twitter.png) no-repeat;} .social-icon.vimeo {background: url(../img/social/vimeo.png) no-repeat;} .social-icon.wordpress {background: url(../img/social/wordpress.png) no-repeat;} .social-icon.xing {background: url(../img/social/xing.png) no-repeat;} .social-icon.yahoo {background: url(../img/social/yahoo.png) no-repeat;} .social-icon.youtube {background: url(../img/social/youtube.png) no-repeat;} .social-icon.vk {background: url(../img/social/vk.png) no-repeat;} .social-icon.instagram {background: url(../img/social/instagram.png) no-repeat;} .social-icon.reddit {background: url(../img/social/reddit.png) no-repeat;} .social-icon:hover { background-position:0 -38px; } .social-icon-color { opacity: 0.7; background-position:0 -38px !important; } .social-icon-color:hover { opacity: 1; } /*** Notes ***/ /* Common styles for all types */ .note { margin: 0 0 20px 0; padding: 15px 30px 15px 15px; border-left: 5px solid #eee; border-radius: 0px 4px 4px 0; } .note h1, .note h2, .note h3, .note h4 { margin-top: 0; } .note p:last-child { margin-bottom: 0; } .note code, .note .highlight { background-color: #fff; } /* Variations */ .note-danger { background-color: #FAEAE6; border-color: #ed4e2a; } .note-warning { background-color: #FCF3E1; border-color: #fcb322; } .note-info { background-color: #E8F6FC; border-color: #57b5e3; } .note-success { background-color: #EBFCEE; border-color: #3cc051; } /*** Demo Utils ***/ .scrollspy-example { position: relative; height: 200px; margin-top: 10px; overflow: auto; } .util-btn-margin-bottom-5 .btn { margin-bottom: 5px !important; } .util-btn-group-margin-bottom-5 .btn-group { margin-bottom: 5px !important; } .fontawesome-demo i { font-size: 18px; } .fontawesome-demo li { padding-top: 5px; padding-bottom: 5px; } .glyphicons-demo ul { padding-left: 0; padding-bottom: 1px; margin-bottom: 20px; list-style: none; overflow: hidden; } .bs-glyphicons { padding-left: 0; padding-bottom: 1px; margin-bottom: 20px; list-style: none; overflow: hidden; } .glyphicons-demo ul li { float: left; width: 25%; height: 115px; padding: 10px; margin: 0 -1px -1px 0; font-size: 12px; line-height: 1.4; text-align: center; border: 1px solid #ddd; } .glyphicons-demo .glyphicon { display: block; margin: 5px auto 10px; font-size: 24px; } .glyphicons-demo ul li:hover { background-color: rgba(86,61,124,.1); } @media (min-width: 768px) { .glyphicons-demo ul li { width: 12.5%; } } /*** Forms ****/ input.placeholder, textarea.placeholder { color: #aaa !important; } .help-block { margin-top: 5px; margin-bottom: 5px; } .form-inline input { margin-bottom: 0px !important; } .control-label { margin-top: 2px; } .form-control-static { font-size: 14px; padding-top: 7px; } .control-label .required { color: #e02222; font-size: 12px; padding-left: 2px; } .switch-wrapper { display: inline-block; } .form { padding: 0 !important; } .form-body { padding: 10px; } .form-actions { padding: 20px 10px; margin-top: 20px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; border-radius: 0 0 4px 4px; *zoom: 1; } .form-actions.nobg { background-color: transparent; } .form-actions.top { margin-top: 0; margin-bottom: 20px; border-top: 0; border-bottom: 1px solid #e5e5e5; border-radius: 0; } .form-actions.fluid { padding: 20px 0; } .form-actions.fluid > [class^="col-"] { padding-left: 13px; } .form-actions:before, .form-actions:after { display: table; line-height: 0; content: ""; } .form-actions:after { clear: both; } .form-section { margin: 30px 0px 25px 0px; padding-bottom: 5px; border-bottom: 1px solid #eee; } .form .form-section:first-child { margin-top: 5px; } .help-inline { font-size: 13px; color: #737373; display: inline-block; padding: 5px; } /* left, right aligned form actions */ .form-actions.right { padding-left: 0; padding-right: 10px; text-align: right; } .form-actions.left { padding-left: 10px; padding-right: 0; text-align: left; } /* Checkboxes */ .form-group .checkbox { padding-left: 0; } .checkbox-list > label { display: block; } .checkbox-list > label.checkbox-inline { display: inline-block; } .checkbox-list > label.checkbox-inline:first-child { padding-left: 0; } /* Radios */ .radio-list > label { display: block; } .radio-list > label.radio-inline { display: inline-block; } .radio-list > label.radio-inline:first-child { padding-left: 0; } .form-horizontal .radio-list .radio { padding-top: 1px; } /* Rows seperated form layout */ .form-row-seperated .form-group { margin: 0; border-bottom: 1px solid #efefef; padding: 10px 10px 10px 0px; } .form-row-seperated .form-group.last { border-bottom: 0; margin-bottom: 0; padding-bottom: 10px; } .form-row-seperated .form-actions { margin-top: 0; } .form-row-seperated .form-body { padding: 0; margin-top: 0; } .form-row-seperated .help-block { margin-bottom: 0; } /* form bordered */ .form-bordered .form-body { margin: 0; padding: 0; } .form-bordered .form-actions { margin-top: 0; } .form-bordered .form-group { margin: 0; border-bottom: 1px solid #efefef; } .form-bordered .form-group.last { border-bottom: 0; } .form-bordered .help-block { margin-bottom: 0; } .form-bordered .control-label { padding-top: 16px; } .form-bordered .form-group > div { padding: 10px; border-left: 1px solid #efefef; } .form-bordered .form-actions.fluid > .row > div { padding-left: 10px; } .form-horizontal.form-bordered.form-row-stripped .form-group:nth-child(even) { background-color: #fcfcfc; } .form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) { background-color: #fcfcfc; } .form-horizontal.form-bordered.form-row-stripped .form-control { background: #fff !important; } .form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) > div { background-color: #ffffff; } /*** Bordered form layout ***/ .form-bordered .form-control { margin: 0; } /*** Disabled Menu Link ***/ /* Disabled Navigation Link */ .disabled-link .disable-target { opacity: 0.5 !important; filter: alpha(opacity=50) !important; } .disabled-link:hover { cursor: not-allowed !important; } /*** Responsive & Scrollable Tables ***/ .table-scrollable { width: 100%; overflow-x: auto; overflow-y: auto; border: 1px solid #dddddd; margin: 10px 0 !important; } .table-scrollable > .table { width: 100% !important; margin: 0 !important; margin-bottom: 0; background-color: #fff; } .table-scrollable > .table > thead > tr > th, .table-scrollable > .table > tbody > tr > th, .table-scrollable > .table > tfoot > tr > th, .table-scrollable > .table > thead > tr > td, .table-scrollable > .table > tbody > tr > td, .table-scrollable > .table > tfoot > tr > td { white-space: nowrap; } .table-scrollable > .table-bordered { border: 0; } .table-scrollable > .table-bordered > thead > tr > th:first-child, .table-scrollable > .table-bordered > tbody > tr > th:first-child, .table-scrollable > .table-bordered > tfoot > tr > th:first-child, .table-scrollable > .table-bordered > thead > tr > td:first-child, .table-scrollable > .table-bordered > tbody > tr > td:first-child, .table-scrollable > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .table-scrollable > .table-bordered > thead > tr > th:last-child, .table-scrollable > .table-bordered > tbody > tr > th:last-child, .table-scrollable > .table-bordered > tfoot > tr > th:last-child, .table-scrollable > .table-bordered > thead > tr > td:last-child, .table-scrollable > .table-bordered > tbody > tr > td:last-child, .table-scrollable > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .table-scrollable > .table-bordered > thead > tr:last-child > th, .table-scrollable > .table-bordered > tbody > tr:last-child > th, .table-scrollable > .table-bordered > tfoot > tr:last-child > th, .table-scrollable > .table-bordered > thead > tr:last-child > td, .table-scrollable > .table-bordered > tbody > tr:last-child > td, .table-scrollable > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; } /*** Responsive Flip Scroll Tables ***/ .flip-scroll table { width: 100%; } @media only screen and (max-width: 800px) { .flip-scroll .flip-content:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .flip-scroll * html .flip-content { zoom: 1; } .flip-scroll *:first-child+html .flip-content { zoom: 1; } .flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; } .flip-scroll th, .flip-scroll td { margin: 0; vertical-align: top; } .flip-scroll th { text-align: left; border: 0 !important; border-bottom: 1px solid #ddd !important; border-right: 1px solid #ddd !important; font-size: 13px !important; padding: 5px; width: auto !important; } .flip-scroll table { display: block; position: relative; width: 100%; } .flip-scroll thead { display: block; float: left; } .flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } .flip-scroll thead tr { display: block; border: !important; } .flip-scroll th { display: block; text-align: right; } .flip-scroll tbody tr { display: inline-block; vertical-align: top; margin-left: -5px; } .flip-scroll td { display: block; min-height: 1.25em; text-align: left; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important} .flip-scroll td:first-child {} /* sort out borders */ .flip-scroll th { border-bottom: 0; border-left: 0; } .flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; } .flip-scroll tbody tr { border-left: 1px solid #ddd; } .flip-scroll th:last-child, .flip-scroll td:last-child { border-bottom: 1px solid #ddd; } } .menucolor { background-color: #c9c9c9 !important; border-right: 4px solid #169ef4; } .pdr0 { padding-right:0px !important; } .pdl0 { padding-left:0px !important; } .enter-icon { position: relative; width: 100%; } .enter-icon:after { color: #979797; content: "\21B5"; display: block; font-family: "FontAwesome"; font-size: 18px; margin: auto; position: absolute; right: 8px; top: 0px; } .form-focus .enter-icon:after { top: 15px; } .upload-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .view-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: linear-gradient(135deg, #20c997 0%, #38b2ac 100%); /* sea green tones */ color: white; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(56, 178, 172, 0.4); width:100%; } .search-box { position: relative; } .search-input { width: 100%; padding:8px; border: 2px solid #e0e7ff; border-radius: 12px; font-size: 16px; transition: all 0.3s ease; background: white; } .search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #667eea; font-size: 20px; } .filter-select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; transition: border-color 0.3s ease; } .search-btn:hover { background: #5a67d8; transform: translateY(-2px); } .search-btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .reset-btn { background: #6c757d; color: white; border: none; padding: 15px 20px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .status-card { background: white; /* border-radius: 20px; padding: 32px 24px; */ text-align: center; position: relative; /* transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */ border: 2px solid transparent; overflow: hidden; } .status-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent-color); transform: scaleX(0); transition: transform 0.3s ease; } .status-card:hover::before { transform: scaleX(1); } .status-card:hover { /* transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); */ /* border-color: var(--accent-color); */ } .open-card { --accent-color: #4ade80; } .close-card { --accent-color: #f87171; } .status-icon { width: 39px; height: 35px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; position: relative; transition: all 0.3s ease; } .open-card .status-icon { background: linear-gradient(135deg, #34d399 0%, #059669 100%); } .close-card .status-icon { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); } .status-card:hover .status-icon { transform: scale(1.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .status-label { font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .status-count { font-size: 20px; font-weight: 800; color: black; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .status-description { font-size: 14px; color: #6b7280; margin-top: 12px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .status-card:hover .status-description { opacity: 1; transform: translateY(0); } /* FOLLOWUP MODAL CSS */ /* .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 24px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); width: 100%; max-width: 600px; height: fit-content; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.2); animation: modalSlideIn 0.3s ease-out; } */ @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-body { padding: 24px 32px; } .modal-header { background: #eaeaea !important; color: black; padding: 10px 32px; position: relative; overflow: hidden; } .modal-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .modal-title { font-size: 24px; font-weight: 700; position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; } /* .modal-title::before { content: '📅'; font-size: 20px; } */ */ .close-btn { position: absolute; top: 20px; right: 24px; background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; z-index: 2; } .close-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); } /* .form-grid { display: grid; gap: 16px; } .form-group { position: relative; } */ .form-label-enq { display: block; font-weight: 600; color: #374151; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } /* .required { color: #ef4444; margin-left: 4px; } */ .form-input-enq, .form-select-enq, .form-textarea-enq { width: 100%; padding: 1px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 14px; background: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; outline: none; font-family: inherit; } .form-input-enq:focus, .form-select-enq:focus, .form-textarea-enq:focus { border-color: #6366f1; background: white; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); transform: translateY(-2px); } .form-select-enq { padding: 9px 16px; } .form-textarea-enq{ resize: vertical; min-height: 80px; font-family: inherit; } .datetime-grid { display: flex; justify-content: center; text-align: center; gap: 10px; } .current-info { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border: 2px solid #0ea5e9; border-radius: 12px; padding: 2px 16px; margin-bottom: 20px; } .current-info h3 { color: #0369a1; font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .current-info h3::before { content: 'ℹ️'; } .current-details { display: flex; justify-content: center; text-align: center; gap: 10px; } .current-item { background: rgba(255, 255, 255, 0.6); border-radius: 8px; font-size: 13px; padding: 10px 10px !important; } .current-item strong { color: #0369a1; display: block; margin-bottom: 4px; } .followup-section { box-shadow: -8px 12px 18px 0 #dadee8; border-radius: 12px; padding: 18px; margin-top: 20px; } .followup-section h3 { color: #92400e; font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; } .followup-section h3::before { content: '🎯'; } .actions { display: flex; gap: 2px; justify-content: flex-end; padding: 10px 0px; border-top: 1px solid rgba(229, 231, 235, 0.5); } /* .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); } .btn-secondary { background: rgba(107, 114, 128, 0.1); color: #374151; border: 2px solid #e5e7eb; } .btn-secondary:hover { background: rgba(107, 114, 128, 0.2); transform: translateY(-1px); } .btn:active { transform: translateY(0); }*/ .input-icon-enq { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; pointer-events: none; font-size: 14px; } .date-input-wrapper { position: relative; } .form-input { padding: 4px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s ease; background: white; width: 100%; } .form-input[disabled], .form-input[readonly], fieldset[disabled] .form-input { cursor: not-allowed; background-color: #FBFBCE; } .quick-actions { display: flex; gap: 10px; flex-wrap: wrap; } .filter-chip { background: white; border: 2px solid #e0e7ff; padding: 5px 16px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; } .filter-chip.active { background: #667eea; color: white; border-color: #667eea; } .btn-primary-purple{ background: #667eea; color: white; } .btn-primary-purple:hover{ background: #6a7fdc; color: white; } /* new enquiry screen css */ /* *{box-sizing:border-box} body{margin:0;background:linear-gradient(#fff,var(--bg));color:#0f172a;} .wrap{margin:0 auto;} */ .input-new-class { padding: 4px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.2s ease; background: white; width: 100%; } .input-new-class[disabled], .input-new-class[readonly], fieldset[disabled] .input-new-class { cursor: not-allowed; background-color: #FBFBCE; } /* Title */ .title-row{display:flex;align-items:center;gap:12px;margin-bottom:14px} .title-badge{background:#4963ff;color:#fff;border-radius:10px;padding:6px 10px;font-weight:700;box-shadow:0 10px 30px rgba(15, 23, 42, .08)} .subtitle{color:#6b7280} .reset {margin-left: auto;} /* Filters bar */ .filters{display:grid;grid-template-columns:1fr repeat(3, max-content);gap:10px;align-items:center;background:#ffffff;border:1px solid #e6e8ee;border-radius:16px;padding:10px} .filters input[type="text"], .filters select{border:1px solid #e6e7eb;border-radius:999px;padding:10px 12px;outline:none} .filters input[type="text"]{min-width:260px} .new-btn{border:1px solid #e6e8ee;background:#fff;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer} .new-btn.primary{background:#4963ff;border-color:#4963ff;color:#fff} .new-btn:hover{text-decoration: none;} /* Quick range buttons */ .quick{display:flex;gap:10px;margin:12px 0} .quick .pill{border:1px solid #e6e8ee;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer} .quick .pill.active{background:#4963ff;border-color:#4963ff;color:#fff} /* Stat cards */ /* .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 18px} */ /* 3 columns now */ /* 5 in one row */ .stats{ display: grid; grid-template-columns: repeat(5, 1fr); /* was 6 */ gap: 12px; margin: 8px 0 18px; } /* compact card (unchanged) */ .stats-wrap{ overflow-x:auto; } .stats{ grid-template-columns: repeat(5, minmax(180px, 1fr)); min-width: calc(5 * 180px + 4 * 12px); } .stat-new{ display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid #e6e8ee; border-radius:10px; padding:12px; box-shadow:0 10px 30px rgba(15, 23, 42, .08); } .stat-new .ic{ width:34px;height:34px;display:grid;place-items:center; border-radius:50%;font-size:18px;color:#fff; } .stat-new h4{margin:0;font-size:11px;letter-spacing:.06em;color:#6b7280;white-space:nowrap;} .stat-new .val{font:700 18px/1 system-ui;margin-top:2px;} /* Follow-ups breakdown (smaller) */ .fu-breakdown{ margin-top:2px; /* was 4px */ font-size:11px; /* was 12px */ color:#6b7280; } .fu-over{ color:#ef4444; font-weight:700; } .fu-today{ color:#f59e0b; font-weight:700; } .fu-up{ color:#0f172a; font-weight:700; } /* Icon colors (unchanged) */ .followups .ic { background: #4963ff; } .open .ic { background: #22c55e; } .closed .ic { background: #ef4444; } /* Actions row */ .actions{display:flex;justify-content:flex-start;margin-bottom:10px} /* Table */ .table-wrap{background:#ffffff;border:1px solid #e6e8ee;border-radius:16px;overflow:auto} .table-wrap table{border-collapse:separate;border-spacing:0;width:100%;min-width:1000px} .table-wrap thead th{position:sticky;top:0;background:#f9fafb;border-bottom:1px solid #e6e8ee;text-align:left;padding:10px 12px;font-weight:700;color:#1f2937} .table-wrap tbody td{border-bottom:1px solid #e6e8ee;padding:10px 12px;vertical-align:top} .table-wrap tbody tr:nth-child(odd){background:#fcfdff} .table-wrap tbody tr:hover{background:#f1f5ff} .badge{display:inline-block;padding:3px 8px;border-radius:999px;font-weight:700;font-size:12px} .badge.open{background:#d1fae5;color:#065f46} .badge.closed{background:#fee2e2;color:#991b1b} .link{color:#3344cc;text-decoration:none} .follow{font-size:12px;color:#111} .follow.over{color:#ef4444;font-weight:700} /* Responsive */ @media (max-width:860px){ .filters{grid-template-columns:1fr 1fr;} .filters select, .btn.search{justify-self:start} } .new-edit-btn{ border: 1px solid #e6e8ee; background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; } /* status colors for emoji circles */ .followups .ic { background: #4963ff; } .open .ic { background: #22c55e; } .process .ic { background: #f59e0b; } /* amber */ .converted .ic { background: #10b981; } /* teal/green */ .closed .ic { background: #ef4444; } .spam .ic { background: #6b7280; } /* gray */ /* make emoji look crisp inside the circle */ .stat-new .ic { font-size: 18px; line-height: 1; } /* Follow-ups breakdown (smaller) */ .fu-breakdown{ margin-top:2px; /* was 4px */ font-size:11px; /* was 12px */ color:#6b7280; } .fu-over{ color:#ef4444; font-weight:700; } .fu-today{ color:#f59e0b; font-weight:700; } .fu-up{ color:#0f172a; font-weight:700; } /* Icon colors (unchanged) */ .followups .ic { background: #4963ff; } .open .ic { background: #22c55e; } .closed .ic { background: #ef4444; } /* Actions row */ .actions{display:flex;justify-content:flex-start;margin-bottom:10px} .follow{font-size:12px;color:#111} .follow.over{color:#ef4444;font-weight:700} /* Responsive */ @media (max-width:860px){ .filters{grid-template-columns:1fr 1fr;} .filters select, .btn.search{justify-self:start} } .new-edit-btn{ border: 1px solid #e6e8ee; background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; } /* status colors for emoji circles */ .followups .ic { background: #4963ff; } .open .ic { background: #22c55e; } .process .ic { background: #f59e0b; } /* amber */ .converted .ic { background: #10b981; } /* teal/green */ .closed .ic { background: #ef4444; } .spam .ic { background: #6b7280; } /* gray */ /* make emoji look crisp inside the circle */ .stat-new .ic { font-size: 18px; line-height: 1; } /* task managemnt css */ /* Base quickbox (matches your existing buttons) */ .quickbox{ display:inline-block; /* min-width:140px; height:68px; */ padding:10px 10px; margin:0 8px 0 0; border-radius:8px; background:linear-gradient(180deg,#3b82c4,#2667a7); /* fallback gradient */ color:#fff; text-decoration:none !important; box-shadow:0 2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1); position:relative; vertical-align:top; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; } .quickbox:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); filter:saturate(1.08); color:white; } .quickbox:active{ transform:translateY(0); } /* Icon + text layout */ .qb-icon{ font-size:26px; line-height:1; display:inline-block; margin-right:10px; } .qb-text{ display:inline-block; line-height:1.1; } .qb-text strong{ display:block; font-weight:600; font-size:16px; letter-spacing:.2px; } .qb-text small{ display:block; opacity:.9; font-size:11px; margin-top:2px; } /* Count badge */ .qb-badge{ position:absolute; top:-8px; right:-8px; background:#ff4757; color:#fff; font-weight:700; font-size:11px; line-height:18px; min-width:18px; height:18px; text-align:center; border-radius:18px; padding:0 6px; box-shadow:0 2px 6px rgba(0,0,0,.25); } /* Task-specific (distinct, premium feel) */ .quickbox-task{ background:linear-gradient(180deg,#7c3aed,#5b21b6); } .quickbox-task .qb-icon{ width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.12); display:inline-grid; place-items:center; } /* Optional caret (if you add a dropdown later) */ .quickbox .caret{ border-top-color:#fff; margin-left:6px; opacity:.9; } /* Responsive tweak */ @media (max-width: 991px){ .quickbox{ min-width:120px; height:64px; } .qb-text strong{ font-size:15px; } } .task-header{display:flex;align-items:center;gap:12px;margin-bottom:20px} .logo-new{width:40px;height:40px;border-radius:14px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700} /* h1{font-size:24px;margin:0} */ .muted{color:#6b7280} /* Tabs */ .new-tabs{display:flex;gap:8px;background:#fff;border:1px solid #e6e8ee;border-radius:999px;padding:4px;width:fit-content} .new-tab{appearance:none;border:0;background:none;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:600;color:#6b7280} .new-tab.active{background:#2fa0ac;;color:#fff} /* Toolbar */ .toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .toolbar .grow{flex:1 1 280px;display:flex;align-items:center;background:#fff;border:1px solid #e6e8ee;border-radius:999px;padding:8px 12px;gap:8px} .toolbar input[type="search"]{border:0;outline:0;flex:1;background:transparent} .black-btn{border:1px solid #e6e8ee;background:#fff;border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:600} .black-btn.primary{background:#048e9c;color:#fff;border-color:#048e9c} .black-btn.ghost{background:transparent} /* input[type=file]{display:none} */ .file-label{border:1px solid #e6e8ee;padding:8px 12px;border-radius:12px;background:#fff;cursor:pointer;font-weight:600} /* Grid */ .grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px} @media (min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}} /* Column */ .column{background:#ffffff;border:1px solid #e6e8ee;border-radius:16px;padding:10px;min-height:240px} .col-head{display:flex;align-items:center;gap:8px;padding:4px 6px} .count{margin-left:auto;color:#6b7280;font-size:12px} /* Task card */ .task{background:#fff;border:1px solid #e6e8ee;border-radius:14px;padding:10px;margin-top:10px;box-shadow:0 10px 30px rgba(15, 23, 42, .08);cursor:grab} .task h4{margin:0 0 6px 0;font-size:14px} .desc{color:#6b7280;font-size:12px;margin-bottom:6px} .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .tag{background:#f3f4f6;border:1px solid #e6e8ee;border-radius:999px;padding:2px 8px;font-size:11px} .priority{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700} .p-high{background:#fee2e2;color:#991b1b} .p-med{background:#fef3c7;color:#92400e} .p-low{background:#dcfce7;color:#065f46} .danger{color:#ef4444;font-weight:700} .actions{margin-left:auto;display:flex;gap:6px} /* .icon-btn{border:0;background:transparent;cursor:pointer;color:#6b7280} */ /* Assignee + Follow-up */ .avatar{width:22px;height:22px;border-radius:50%;background:#111114;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700} .follow{padding:2px 8px;border-radius:999px;border:1px solid #e6e8ee} .follow.due{background:#fef3c7;color:#92400e;border-color:var(--amber)} .follow.over{background:#fee2e2;color:#991b1b;border-color:#ef4444} /* Ideas */ .idea-form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;margin-top:16px} @media (max-width:900px){.idea-form{grid-template-columns:1fr}} .board{position:relative;height:440px;border:1px dashed #e6e8ee;border-radius:16px;padding:8px;background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.06) 1px, transparent 0) 0 0/20px 20px;overflow:hidden} .note{position:absolute;width:180px;height:120px;border-radius:12px;border:1px solid rgba(0,0,0,.2);padding:8px;box-shadow:0 10px 30px rgba(15, 23, 42, .08);user-select:none;cursor:move} .note .top{display:flex;align-items:center;justify-content:space-between;font-size:11px} .note .chips{display:flex;gap:4px;flex-wrap:wrap} .chip{background:#fff;border:1px solid #e6e8ee;border-radius:999px;padding:2px 6px;font-size:10px} .note .text{margin-top:4px;font-size:13px;font-weight:600;line-height:1.25} .c-yellow{background:#fff7cc} .c-pink{background:#ffd6e7} .c-blue{background:#dbeafe} .c-green{background:#d1fae5} .c-purple{background:#ede9fe} /* Dialog */ /* Centering: works for BS3 & BS5 */ .modal-dialog.custom-center{ /* BS5 already has .modal-dialog-centered; this ensures BS3 too */ display:flex; align-items:center; min-height:100vh; margin:0 auto; } /* Dialog shell */ .new-dialog{ border:1px solid #e6e8ee; border-radius:18px; box-shadow:0 10px 30px rgba(15, 23, 42, .08); overflow:hidden; display:flex; flex-direction:column; /* Height controls (~560px target) */ height:560px; min-height:500px; max-height:600px; width:min(560px, 96vw); background:#fff; } /* Header / Footer */ .new-dialog-header{ display:flex; align-items:center; justify-content:space-between; padding:0px 16px; border-bottom:1px solid #e6e8ee background-color:#D4DFF5; } .btn-close-x{ background:transparent; border:0; font-size:20px; line-height:1; opacity:.6; } .btn-close-x:hover{ opacity:1; } /* Scrollable body to make rows fit */ .new-dialog-body{ padding:12px 16px; overflow:auto; /* enables internal scroll */ flex:1; /* take remaining height */ } /* Footer pinned */ .new-dialog-footer{ padding:10px 16px; border-top:1px solid #e6e8ee; display:flex; gap:8px; justify-content:flex-end; } /* Fields & inputs */ .field{ display:flex; flex-direction:column; gap:6px; margin:6px 0; } .field label{ font-size:12px; color:#6b7280; } .field input,.field select{ border:1px solid #e6e8ee; border-radius:10px; padding:8px; width:100%; outline:none;} .field textarea{ border:1px solid #e6e8ee; border-radius:10px; padding:8px; width:100%; outline:none; } .field input:focus,.field select:focus,.field textarea:focus{ box-shadow:0 0 0 3px rgba(59,130,246,.15); border-color:#93c5fd; } /* Two-column rows with wrap on small screens */ .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0; } @media (max-width:640px){ .row2{ grid-template-columns:1fr; } } /* DnD helpers */ .dropzone { min-height: 180px; } .dropzone.drag-over { outline: 2px dashed #5a8dee; background: rgba(90,141,238,.06); } .task.dragging { opacity: .6; transform: scale(.98); } /* .icon-btn { pointer-events: auto; } */ .board { position: relative; /* needed for absolute children */ width: 100%; height: 600px; /* adjust as needed */ border: 1px dashed #ccc; background: #fafafa; overflow: hidden; } .note { position: absolute; width: 200px; min-height: 140px; height:auto; padding: 10px; border-radius: 15px; box-shadow: 2px 2px 8px rgba(0,0,0,0.15); cursor: move; font-family: sans-serif; overflow-wrap: break-word; } .note .text { font-size: 14px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; /* preserves line breaks */ } /* .btn-back{ background: #6b7280; border: 1px solid var(--back); color: #fff; padding: .45rem .8rem; border-radius: .5rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; line-height: 1; transition: background .15s ease, filter .15s ease, box-shadow .15s ease; } */ /* Base pill button (your exact sizing & layout) */ .btn-pill{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; color:#fff; border:none; border-radius:12px; font-size:11px; font-weight:600; cursor:pointer; background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%); box-shadow: 0 4px 15px 0 10px 30px rgba(15, 23, 42, .08); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn-pill:hover{ transform: translateY(-1px); filter:brightness(.98); color:white; text-decoration:none;} .btn-pill:active{ transform: translateY(0); filter:brightness(.94); } .btn-pill:focus{ outline:0; box-shadow:0 0 0 3px rgba(0,0,0,.08), 0 4px 15px 0 10px 30px rgba(15, 23, 42, .08); } /* Variants (just colors) */ .btn-save{ --bg-start:#22c55e; /* green */ --bg-end:#16a34a; --shadow:rgba(34,197,94,.45); } .btn-quit{ --bg-start:#ef4444; /* red */ --bg-end:#dc2626; --shadow:rgba(239,68,68,.45); } .btn-back{ --bg-start:#64748b; /* slate */ --bg-end:#475569; --shadow:rgba(100,116,139,.45); } .btn-add{ --bg-start:#4f46e5; /* indigo */ --bg-end:#3b82f6; /* blue */ --shadow:rgba(59,130,246,.45); } .field-highlight{ outline: 1px solid #0d6efd; /* primary blue */ box-shadow: 0 0 0 3px rgba(13,110,253,.25); /* soft glow */ border-color:#0d6efd !important; } .card-glow { box-shadow: 0 0 12px 3px #00ffcc; /* glow color */ border-radius: 8px; /* optional, softer corners */ transition: box-shadow 0.3s ease; animation: pulseGlow 1.5s infinite; } @keyframes pulseGlow { 0% { box-shadow: 0 0 6px 2px #00ffcc; } 50% { box-shadow: 0 0 16px 4px #00ffcc; } 100% { box-shadow: 0 0 6px 2px #00ffcc; } } .quickbox-enquiry { /* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */ background: linear-gradient(135deg, #5c7c89 0%, #3a506b 100%); color: #fff; border-radius: 12px; padding: 15px 14px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .quickbox-enquiry:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(37, 117, 252, 0.4); } .quickbox-enquiry .qb-icon { font-size: 20px; } .quickbox-enquiry .qb-text strong { font-size: 14px; display: block; } .quickbox-enquiry .qb-text small { font-size: 11px; display: block; } .quickbox-enquiry .qb-badge { background: #ff4d4f; color: #fff; font-size: 11px; font-weight: bold; border-radius: 50%; padding: 1px 7px; position: absolute; top: -5px; right: -5px; } .contact-label { cursor: pointer; color: #333; font-weight: 500; text-decoration: underline; transition: color 0.3s; } .contact-label:hover { color: #0056b3; } .active-contact { color: #007bff; font-weight: 600; text-decoration: underline; } .title-row { display: flex; align-items: center; gap: 12px; } .title-badge { /* background-color: #5386bd; */ color: #fff; /* border-radius: 10px; */ padding: 6px 10px; font-weight: 700; font-size:20px; }.subtitle { color: #6b7280; } .reset { margin-left: auto; } /* Panel heading background and border */ .panel-heading-gray { background-color: #f5f5f5; /* Light gray background */ border-radius: 4px; /* Optional rounded corners */ margin-bottom: 5px; } /* Optional: Add hover effect */ .panel-heading-gray:hover { background-color: #e8e8e8; } /* Make the panel title flex for alignment */ .newpanel-title { display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Style the checkbox on the right */ .boxsize { flex-shrink: 0; margin-left: 10px; transform: scale(1.2); /* Optional: enlarge checkbox */ cursor: pointer; } @keyframes blink-bg { 0% { background-color: #f8d7da; } /* light red */ 50% { background-color: #ffffff; } /* white */ 100% { background-color: #f8d7da; } } #select_type.blink { animation: blink-bg 1s infinite; } input[type="checkbox"] { accent-color: green; } .border-cls tr td{ border:none !important; } .read-notification { background: #f5f5f5 !important; opacity: 0.6; } .read-notification a { color: #999 !important; } .nav-icon-mini { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 7px 9px !important; color: white; } .nav-icon-mini:hover{ color: white; } .nav-icon-mini i { font-size: 15px; color: white; } /* make icon container relative */ .nav-icon-badge { position: relative; } /* badge styling */ .nav-icon-badge .badge { position: absolute; top: -5px; right: -6px; font-size: 10px; padding: 3px 5px; border-radius: 10px; line-height: 1; } .idea-date { position: absolute; bottom: 6px; right: 8px; font-size: 11px; color: #fff; opacity: 0.8; padding: 5px; font-size: 8px !important; } .reportingto{ background-color: #f08cef; padding: 6px; border-radius: 12px; color: ; color: #420942; } .desc-attach-inner { display: flex; gap: 12px; align-items: flex-start; } .meta span:empty { display: none; } /* add pipe automatically */ .meta span:not(:empty)::after { content: " | "; } /* remove last pipe */ .meta span:last-child::after { content: ""; } /* Calendar container */ #new_calendar { background: #ffffff; padding: 12px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); } /* Event style */ .fc-event { border: none !important; border-radius: 8px !important; padding: 4px 8px !important; font-size: 12px; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,0.12); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Hover effect */ .fc-event:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.18); cursor: pointer; } /* Event title */ .fc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Date numbers */ .fc-day-number { font-weight: 600; color: #555; } /* Popup shell */ .mini-calendar-popup { border-radius: 16px !important; box-shadow: 0 18px 45px rgba(0,0,0,0.2); font-family: 'Inter', 'Segoe UI', sans-serif; } /* Layout */ .mini-event-popup { text-align: left; } /* Title */ .event-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1f2937; margin-bottom: 6px; } .event-title i { color: #5bc0de; } /* Description */ .event-desc { font-size: 13.5px; color: #374151; margin-bottom: 10px; line-height: 1.45; } /* Meta wrapper */ .event-meta-wrap { display: flex; flex-direction: column; gap: 4px; } /* Meta rows */ .event-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7280; } /* Icons subtle */ .event-meta i { color: #9ca3af; min-width: 14px; } .select-width .select2-container{ padding-left: 0px !important; padding-right: 0px !important; width:100% !important; } .newcontrol-ht { height: 30px !important; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .blink-bell { animation: blink 1s infinite; color: #ec5924 !important; } @keyframes blinkBell { 50% { opacity: 0.3; transform: scale(1.15); } } /* chat popup css */ #discussiontask .modal-dialog { width: min(480px, 92vw); margin: 30px auto; display: flex; align-items: center; justify-content: center; } #discussiontask .discussion-modal-content { width: 100%; border-radius: 14px; overflow: hidden; border: 0.5px solid #e0e0e0; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } #discussiontask .disc-header { background: #f7f7f7; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 0.5px solid #e0e0e0; } #discussiontask .disc-avatar { width: 42px; height: 42px; border-radius: 50%; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 15px; color: #1e40af; flex-shrink: 0; overflow: hidden; } #discussiontask .disc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: none; } #discussiontask .disc-avatar img.loaded { display: block; } #discussiontask .disc-avatar span { display: block; } #discussiontask .disc-user-info { flex: 1; min-width: 0; } #discussiontask .disc-user-info .disc-name { margin: 0; font-weight: 600; font-size: 15px; color: #111; } #discussiontask .disc-user-info .disc-meta { margin: 0; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #discussiontask .disc-close-btn { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; } #discussiontask .disc-close-btn:hover { background: #f0f0f0; color: #374151; } #discussiontask .disc-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: #fff; min-height: 280px; max-height: 380px; } /* Message bubbles */ #discussiontask .disc-msg-row { display: flex; flex-direction: column; gap: 2px; } #discussiontask .disc-msg-row.sent { align-items: flex-end; } #discussiontask .disc-msg-row.received { align-items: flex-start; } #discussiontask .disc-bubble { padding: 9px 14px; font-size: 14px; line-height: 1.45; max-width: 72%; word-break: break-word; } #discussiontask .disc-msg-row.sent .disc-bubble { background: #dcf7c5; color: #1a3a1a; border-radius: 14px 14px 3px 14px; } #discussiontask .disc-msg-row.received .disc-bubble { background: #f3f4f6; color: #111827; border-radius: 14px 14px 14px 3px; border: 0.5px solid #e5e7eb; } #discussiontask .disc-timestamp { font-size: 11px; color: #9ca3af; } /* Input area */ #discussiontask .disc-footer { padding: 12px 16px; border-top: 0.5px solid #e5e7eb; display: flex; align-items: center; gap: 10px; background: #fff; } #discussiontask .disc-input { flex: 1; border: 0.5px solid #d1d5db; border-radius: 22px; padding: 9px 16px; font-size: 14px; background: #f9fafb; color: #111; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } #discussiontask .disc-input:focus { border-color: #6b7280; box-shadow: 0 0 0 3px rgba(107,114,128,0.1); } #discussiontask .disc-send-btn { background: #0f6e56; border: none; color: #fff; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, transform 0.1s; } #discussiontask .disc-send-btn:hover { background: #0d5e49; transform: scale(1.05); } #discussiontask .disc-send-btn:active { transform: scale(0.97); } #discussiontask .disc-cancel-btn { background: none; border: 0.5px solid #d1d5db; color: #6b7280; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; flex-shrink: 0; } #discussiontask .disc-cancel-btn:hover { background: #fee2e2; border-color: #f87171; color: #b91c1c; } #discussiontask .disc-loader { display: none; } #discussiontask .disc-loader.show_loader_responsible { display: flex; align-items: center; } /* task css */ #discussiontask .disc-user-info { min-width: 0; } #discussiontask .disc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } #discussiontask .disc-meta-badge { display: none; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; } #discussiontask .disc-meta-badge:not(:empty) { display: inline-flex; } #discussiontask .disc-meta-badge-loc { background: #e8f4fb; color: #0170bb; border: 1px solid #b9dbef; } #discussiontask .disc-meta-badge-desg { background: #eef9f2; color: #256847; border: 1px solid #cfead9; } #discussiontask .disc-meta-badge-dept { background: #fff5ea; color: #9b5c11; border: 1px solid #f2ddbf; } #discussiontask .disc-body { padding: 14px 20px; } #discussiontask .disc-msg-row { display: flex; width: 100%; margin-bottom: 12px; } #discussiontask .disc-msg-row-out { justify-content: flex-end; } #discussiontask .disc-msg-row-in { justify-content: flex-start; } #discussiontask .disc-msg-stack { display: flex; flex-direction: column; max-width: 100%; } #discussiontask .disc-msg-stack-out { align-items: flex-end; } #discussiontask .disc-msg-stack-in { align-items: flex-start; } #discussiontask .disc-msg-bubble { display: inline-block; width: auto; max-width: 100%; padding: 10px 16px; border-radius: 18px; color: #333; word-break: break-word; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } #discussiontask .disc-msg-bubble-out { background: #d8fdd8; border-top-right-radius: 6px; } #discussiontask .disc-msg-bubble-in { background: #cfe4f7; border-top-left-radius: 6px; } #discussiontask .disc-msg-main { font-size: 13px; line-height: 1.45; white-space: pre-wrap; } #discussiontask .disc-msg-time { margin-top: 4px; font-size: 9px; line-height: 1.2; color: #6f7c8d; white-space: nowrap; } #discussiontask .disc-msg-time-out { text-align: right; } #discussiontask .disc-msg-time-in { text-align: left; } #discussiontask .disc-msg-time-sep { display: inline-block; margin: 0 1px; } @media (max-width: 767px) { #discussiontask .modal-dialog { width: min(94vw, 480px); margin: 16px auto; } #discussiontask .disc-msg-stack { max-width: 88%; } #discussiontask .disc-meta { gap: 4px; } } /**/ /* ===== ENHANCED DASHBOARD ===== */ :root { --db-bg: #f5f3ef; --db-card: #ffffff; --db-text: #1a1a1a; --db-muted: #6b6b6b; --db-accent: #e85d26; --db-accent2: #1d9e75; --db-border: #e5e2dc; --db-hover: #faf8f5; --db-blue: #2563eb; --db-purple: #7c3aed; --db-amber: #d97706; --db-green: #059669; --db-red: #dc2626; --db-teal: #0d9488; --db-cyan: #0891b2; --db-pink: #db2777; } .enhanced-dash { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--db-text); } .enhanced-dash *, .enhanced-dash *::before, .enhanced-dash *::after { box-sizing: border-box; } .dash-topbar { background: linear-gradient(#244F7D, #418AC9); color: #fff; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 0; margin: -15px -15px 0 -15px; } .dash-topbar h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; margin: 0; color: #fff; } .dash-topbar .dt-sub { font-size: 10px; color: rgba(255,255,255,.55); font-family: 'Space Mono', monospace; margin-top: 1px; } .dash-badge { background: var(--db-accent); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 20px; font-family: 'Space Mono', monospace; } .dash-container { padding: 10px 0; } /* KPI Grid */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .kpi-card { background: var(--db-card); border: 1px solid var(--db-border); border-radius: 10px; padding: 10px 14px; position: relative; overflow: hidden; transition: all .2s; cursor: pointer; text-decoration: none !important; } .kpi-card:hover { transform: translateY(-1px); border-color: var(--db-muted); box-shadow: 0 2px 12px rgba(0,0,0,.06); } .kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .kpi-label { font-size: 9.5px; font-weight: 500; color: var(--db-muted); text-transform: uppercase; letter-spacing: 0.6px; font-family: 'Space Mono', monospace; } .kpi-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon svg { width: 14px; height: 14px; } .kpi-value { font-size: 20px; font-weight: 700; letter-spacing: -1px; line-height: 1; margin-bottom: 3px; } .kpi-meta { font-size: 10px; color: var(--db-muted); font-family: 'Space Mono', monospace; } .kpi-split { display: flex; gap: 0; margin-top: 6px; border-top: 1px solid var(--db-border); padding-top: 6px; } .kpi-split-item { flex: 1; text-align: center; font-size: 10px; font-family: 'Space Mono', monospace; color: #6b6b6b; line-height: 1.3; } .kpi-split-item + .kpi-split-item { border-left: 1px solid var(--db-border); } .kpi-split-item .split-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.4px; color: #999; display: block; } .kpi-split-item .split-val { font-weight: 600; font-size: 11px; color: #333; display: block; margin-top: 1px; } .kpi-split-item.split-intl .split-val { color: #2563eb; } .kpi-split-item.split-dom .split-val { color: #7c3aed; } /* Chart cards */ .chart-card { background: var(--db-card); border: 1px solid var(--db-border); border-radius: 10px; padding: 14px; } .chart-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--db-text); } .chart-sub { font-size: 10px; color: var(--db-muted); font-family: 'Space Mono', monospace; margin-bottom: 10px; } /* Age Section */ .age-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-bottom: 12px; } .age-summary { background: linear-gradient(135deg, #fef5f0 0%, #fff 100%); border: 1px solid #fde2d4; border-radius: 8px; padding: 10px; margin-bottom: 10px; } .age-summary .summary-label { font-size: 9px; font-weight: 500; color: var(--db-accent); text-transform: uppercase; letter-spacing: 0.6px; font-family: 'Space Mono', monospace; margin-bottom: 3px; } .age-summary .summary-value { font-size: 19px; font-weight: 700; color: var(--db-accent); letter-spacing: -1px; } .age-summary .summary-meta { font-size: 10px; color: var(--db-muted); margin-top: 2px; } .age-buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .age-bucket { background: var(--db-bg); border: 1px solid var(--db-border); border-radius: 8px; padding: 8px; text-align: center; transition: all .2s; position: relative; overflow: hidden; } .age-bucket::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .age-bucket:hover { transform: translateY(-1px); } .bucket-label { font-size: 9px; font-weight: 500; color: var(--db-muted); text-transform: uppercase; letter-spacing: 0.6px; font-family: 'Space Mono', monospace; margin-bottom: 3px; } .bucket-value { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; } .bucket-pct { font-size: 9px; color: var(--db-muted); font-family: 'Space Mono', monospace; margin-top: 1px; } .bucket-fresh::before { background: var(--db-green); } .bucket-fresh .bucket-value { color: var(--db-green); } .bucket-warn::before { background: var(--db-amber); } .bucket-warn .bucket-value { color: var(--db-amber); } .bucket-critical::before { background: var(--db-red); } .bucket-critical .bucket-value { color: var(--db-red); } /* Breakdown row */ .breakdown-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } /* Monthly section */ .monthly-card { background: var(--db-card); border: 1px solid var(--db-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .monthly-controls { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; } .monthly-controls select { padding: 5px 10px; border: 1px solid var(--db-border); border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 12px; background: var(--db-hover); outline: none; cursor: pointer; transition: border-color .2s; color: var(--db-text); } .monthly-controls select:focus { border-color: var(--db-accent2); } .search-btn-new { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--db-accent2); border: none; border-radius: 6px; color: #fff; cursor: pointer; transition: all .15s; } .search-btn-new:hover { background: #17865f; } .loader-new { display: none; font-size: 11px; color: var(--db-muted); font-family: 'Space Mono', monospace; } .loader-new.show { display: inline-block; } .snapshot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; } .snap-cell { background: var(--db-bg); border: 1px solid var(--db-border); border-radius: 8px; padding: 10px; position: relative; overflow: hidden; } .snap-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .snap-label { font-size: 9px; font-weight: 500; color: var(--db-muted); text-transform: uppercase; letter-spacing: 0.6px; font-family: 'Space Mono', monospace; margin-bottom: 3px; } .snap-value { font-size: 15px; font-weight: 700; font-family: 'Space Mono', monospace; } .snap-sub { font-size: 9px; color: var(--db-muted); margin-top: 1px; } .snap-export::before { background: var(--db-blue); } .snap-domestic::before { background: var(--db-purple); } .snap-pi::before { background: var(--db-cyan); } .snap-total { background: #fef5f0; border-color: #fde2d4; } .snap-total::before { background: var(--db-accent); } .snap-total .snap-value { color: var(--db-accent); } /* Legend items */ .chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; font-size: 11px; color: var(--db-muted); } .chart-legend span { display: flex; align-items: center; gap: 4px; } .legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } /* Data table within monthly */ .detail-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; } .detail-table th { background: var(--db-bg); padding: 6px 10px; text-align: right; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--db-muted); font-family: 'Space Mono', monospace; border-bottom: 1px solid var(--db-border); } .detail-table th:first-child { text-align: left; } .detail-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--db-border); color: var(--db-text); } .detail-table td:first-child { text-align: left; font-weight: 500; } .detail-table tr:hover td { background: var(--db-hover); } /* Responsive */ @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .age-section, .breakdown-row { grid-template-columns: 1fr; } .snapshot-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .kpi-grid, .snapshot-grid { grid-template-columns: 1fr; } .age-buckets { grid-template-columns: 1fr; } .dash-topbar { padding: 14px 16px; flex-wrap: wrap; gap: 10px; } } /* ------- BUYER ORDER REGISTER ------- */ .bo-reg-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; } .bo-reg-header h3 { font-size: 16px; font-weight: 600; color: var(--db-text); margin: 0; } .bo-reg-badge { font-size: 11px; padding: 5px 12px; border-radius: 6px; background: var(--db-hover); color: var(--db-accent); font-weight: 600; font-family: 'Space Mono', monospace; } .bo-reg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; } .bo-mc { border-radius: 8px; padding: 0.9rem 1rem; } .bo-mc-inr { background: #dbeafe; } .bo-mc-usd { background: #dcfce7; } .bo-mc-all { background: var(--db-hover); } .bo-mc-lbl { font-size: 9.5px; font-weight: 600; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; font-family: 'Space Mono', monospace; } .bo-mc-inr .bo-mc-lbl { color: #1d4ed8; } .bo-mc-usd .bo-mc-lbl { color: #15803d; } .bo-mc-all .bo-mc-lbl { color: var(--db-muted); } .bo-mc-val { font-size: 20px; font-weight: 700; } .bo-mc-inr .bo-mc-val { color: #1e3a8a; } .bo-mc-usd .bo-mc-val { color: #14532d; } .bo-mc-all .bo-mc-val { color: var(--db-text); } .bo-mc-sub { font-size: 11px; margin-top: 3px; } .bo-mc-inr .bo-mc-sub { color: #3b82f6; } .bo-mc-usd .bo-mc-sub { color: #22c55e; } .bo-mc-all .bo-mc-sub { color: var(--db-muted); } .bo-reg-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .bo-reg-tab { padding: 7px 18px; border-radius: 6px; border: 1px solid var(--db-border); font-size: 13px; font-weight: 500; cursor: pointer; background: var(--db-card); color: var(--db-muted); transition: all 0.15s; font-family: 'DM Sans', sans-serif; } .bo-reg-tab:hover { background: var(--db-hover); } .bo-tab-active-all { background: var(--db-hover); color: var(--db-text); border-color: var(--db-muted); } .bo-tab-active-inr { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; } .bo-tab-active-foreign { background: #dcfce7; color: #15803d; border-color: #86efac; } .bo-reg-group { margin-bottom: 12px; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .bo-reg-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; } .bo-grp-inr { background: #dbeafe; } .bo-grp-usd { background: #dcfce7; } .bo-grp-title { font-size: 13px; font-weight: 600; } .bo-grp-inr .bo-grp-title { color: #1e3a8a; } .bo-grp-usd .bo-grp-title { color: #14532d; } .bo-grp-meta { font-size: 12px; margin-left: auto; font-weight: 600; white-space: nowrap; } .bo-grp-inr .bo-grp-meta { color: #1d4ed8; } .bo-grp-usd .bo-grp-meta { color: #15803d; } .bo-ccy-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; } .bo-ccy-inr { background: #93c5fd; color: #1e3a8a; } .bo-ccy-usd { background: #86efac; color: #14532d; } .bo-reg-table-wrap { overflow-x: auto; background: var(--db-card); } .bo-reg-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } .bo-reg-table th { text-align: left; font-size: 9.5px; font-weight: 600; color: var(--db-muted); padding: 8px 10px; border-bottom: 1px solid var(--db-border); background: var(--db-hover); text-transform: uppercase; letter-spacing: 0.04em; font-family: 'Space Mono', monospace; } .bo-reg-table td { padding: 9px 10px; border-bottom: 1px solid var(--db-hover); color: var(--db-text); vertical-align: middle; } .bo-reg-table tr:last-child td { border-bottom: none; } .bo-reg-table tr:hover td { background: var(--db-hover); } .bo-num { font-family: 'Courier New', monospace; font-size: 12px; color: var(--db-muted); } .bo-buyer { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bo-desc { font-size: 12px; color: var(--db-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bo-amt { font-weight: 600; text-align: right; white-space: nowrap; } .bo-amt-inr { color: #1d4ed8; } .bo-amt-usd { color: #15803d; } .bo-subtotal-row td { background: var(--db-hover); font-weight: 700; border-top: 1px solid var(--db-border) !important; } @media (max-width: 600px) { .bo-reg-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .bo-reg-metrics { grid-template-columns: 1fr; } } .nav-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px !important; border-radius: 20px; color: #fff !important; font-weight: 600; margin-top: 8px; margin-left: 6px; } /* Enquiry Button */ .enquiry-btn { background: linear-gradient(45deg, #ff7e5f, #ff3d00); } /* Task Button */ .task-btn { background: linear-gradient(45deg, #36d1dc, #5b86e5); } /* Icon spacing */ .nav-btn i { font-size: 14px; } /* Hover effect */ .nav-btn:hover { opacity: 0.85; text-decoration: none; } /* Theme Panel Quick Nav UI */ .theme-panel-quicknav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .theme-panel-quicknav-wrap { display: flex; align-items: flex-start; } .theme-panel-meta-col { display: flex; justify-content: flex-end; } .theme-panel-meta-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: 100%; } .theme-panel-meta-card { display: inline-flex; justify-content: flex-end; width: 100%; margin-top: 2px; } .theme-panel-meta-card__body { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid #dbe3ef; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); min-width: 290px; } .theme-panel-meta-card__title { margin: 0 !important; font-size: 12px !important; line-height: 1.3; font-weight: 700 !important; color: #1e40af !important; text-align: right; } .theme-panel-meta-card__period { margin: 0 !important; } .theme-panel-meta-card__period strong { font-size: 13px; color: #16a34a; font-weight: 700; } .theme-panel-meta-card--employee .theme-panel-meta-card__body { background: linear-gradient(180deg, #ffffff 0%, #fff8f2 100%); } .theme-panel-meta-card__eyebrow { margin: 0 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8 !important; } .theme-panel-meta-card__employee-name { margin: 0 !important; font-size: 14px !important; line-height: 1.3; font-weight: 700 !important; color: #0f172a !important; } .theme-panel-meta-card__employee-role { margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #d85a30 !important; } .theme-panel-tile-group { margin-right: 0; position: relative; } .theme-panel-tile-group.open .theme-panel-tile, .theme-panel-tile:focus, .theme-panel-tile:hover { text-decoration: none; } .theme-panel-tile { width: 110px; height: 80px; min-height: 80px; padding: 10px 8px 8px !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.1) !important; background: #fff !important; box-shadow: none; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #111827 !important; transition: border-color .15s ease, background .15s ease, transform .1s ease, color .15s ease; position: relative; overflow: hidden; } .theme-panel-tile:hover, .theme-panel-tile-group.open .theme-panel-tile { transform: none; background: #f5f7fa !important; box-shadow: none; border-color: rgba(0,0,0,0.2) !important; } .theme-panel-tile:active { transform: scale(0.97); } .theme-panel-tile::after { content: ''; position: absolute; right: -10px; bottom: -16px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%); pointer-events: none; } .theme-panel-tile__icon { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .theme-panel-tile__label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; line-height: 1.2; color: #111 !important; } .theme-panel-tile__caret { margin-left: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: #999; transform: translateY(1px); } .theme-panel-tile__caret svg { display: block; } .theme-panel-quicknav .dropdown-menu { min-width: 205px; margin-top: 10px; padding: 6px; border: 1px solid #dbe3ef; border-radius: 14px; background: #ffffff; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06); } .theme-panel-quicknav .dropdown-menu > li { padding: 0; } .theme-panel-quicknav .dropdown-menu > li > a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: #334155; transition: background .15s ease, color .15s ease, transform .15s ease; line-height: 1.2; } .theme-panel-quicknav .dropdown-menu > li > a i { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: #94a3b8; transition: color .15s ease, background .15s ease; } .theme-panel-quicknav .dropdown-menu > li > a:hover, .theme-panel-quicknav .dropdown-menu > li > a:focus { background: #f8fafc; color: #0f172a; text-decoration: none; } .theme-panel-quicknav .dropdown-menu > li > a:hover i, .theme-panel-quicknav .dropdown-menu > li > a:focus i { color: #475569; } .theme-panel-quicknav .dropdown-menu .padding8 { padding: 0; } .theme-panel-quicknav .dropdown-submenu { position: relative; } .theme-panel-quicknav .dropdown-submenu > a { display: flex; align-items: center; gap: 10px; padding-right: 28px !important; position: relative; } .theme-panel-quicknav .dropdown-submenu > a::after { content: ''; width: 8px; height: 8px; border-top: 1.5px solid #94a3b8; border-right: 1.5px solid #94a3b8; transform: rotate(45deg); position: absolute; right: 12px; top: 50%; margin-left: 0; margin-top: -4px; flex-shrink: 0; } .theme-panel-quicknav .dropdown-submenu > .dropdown-menu { top: 0; left: calc(100% + 8px); margin-top: 0; } .theme-panel-quicknav .dropdown-submenu:hover > .dropdown-menu { display: block; } .theme-panel-menu--employee > li > a i { background: #faece7; color: #D85A30; } .theme-panel-menu--attendance > li > a i { background: #eaf3de; color: #639922; } .theme-panel-menu--salary > li > a i { background: #fbeaf0; color: #D4537E; } .theme-panel-menu--process > li > a i { background: #e6f1fb; color: #378ADD; } .theme-panel-menu--employee > li > a:hover i, .theme-panel-menu--employee > li > a:focus i { background: #f7e2da; color: #c64d25; } .theme-panel-menu--employee > li > a:hover, .theme-panel-menu--employee > li > a:focus { background: #fff5ef; } .theme-panel-menu--attendance > li > a:hover i, .theme-panel-menu--attendance > li > a:focus i { background: #dfefd0; color: #5a8b1f; } .theme-panel-menu--attendance > li > a:hover, .theme-panel-menu--attendance > li > a:focus { background: #f4faec; } .theme-panel-menu--salary > li > a:hover i, .theme-panel-menu--salary > li > a:focus i { background: #f8dfe9; color: #c4426c; } .theme-panel-menu--salary > li > a:hover, .theme-panel-menu--salary > li > a:focus { background: #fff2f7; } .theme-panel-menu--process > li > a:hover i, .theme-panel-menu--process > li > a:focus i { background: #dcecff; color: #2c79c8; } .theme-panel-menu--process > li > a:hover, .theme-panel-menu--process > li > a:focus { background: #f1f7ff; } .theme-panel-tile--employee .theme-panel-tile__icon { background: #faece7; } .theme-panel-tile--employee { background: linear-gradient(180deg, #fffdfa 0%, #fff5ef 100%) !important; } .theme-panel-tile--attendance .theme-panel-tile__icon { background: #edf8e9; } .theme-panel-tile--attendance { background: linear-gradient(180deg, #fefff9 0%, #f2f9ea 100%) !important; } .theme-panel-tile--salary .theme-panel-tile__icon { background: #fdebf3; } .theme-panel-tile--salary { background: linear-gradient(180deg, #fffdfd 0%, #fff2f7 100%) !important; } .theme-panel-tile--process .theme-panel-tile__icon { background: #ecf5ff; } .theme-panel-tile--process { background: linear-gradient(180deg, #fcfeff 0%, #eef6ff 100%) !important; } .theme-panel-tile--employee.theme-panel-tile-active { border-color: #D85A30 !important; border-width: 1.5px !important; box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.10); } .theme-panel-tile--attendance.theme-panel-tile-active { border-color: #639922 !important; border-width: 1.5px !important; box-shadow: 0 0 0 3px rgba(99, 153, 34, 0.10); } .theme-panel-tile--salary.theme-panel-tile-active { border-color: #D4537E !important; border-width: 1.5px !important; box-shadow: 0 0 0 3px rgba(212, 83, 126, 0.10); } .theme-panel-tile--process.theme-panel-tile-active { border-color: #378ADD !important; border-width: 1.5px !important; box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.10); } .theme-panel-tile--employee.theme-panel-tile-active .theme-panel-tile__label, .theme-panel-tile--employee.theme-panel-tile-active .theme-panel-tile__caret, .theme-panel-tile--employee .theme-panel-tile__icon i { color: #D85A30 !important; } .theme-panel-tile--attendance.theme-panel-tile-active .theme-panel-tile__label, .theme-panel-tile--attendance.theme-panel-tile-active .theme-panel-tile__caret, .theme-panel-tile--attendance .theme-panel-tile__icon i { color: #639922 !important; } .theme-panel-tile--salary.theme-panel-tile-active .theme-panel-tile__label, .theme-panel-tile--salary.theme-panel-tile-active .theme-panel-tile__caret, .theme-panel-tile--salary .theme-panel-tile__icon i { color: #D4537E !important; } .theme-panel-tile--process.theme-panel-tile-active .theme-panel-tile__label, .theme-panel-tile--process.theme-panel-tile-active .theme-panel-tile__caret, .theme-panel-tile--process .theme-panel-tile__icon i { color: #378ADD !important; } @media (max-width: 768px) { .theme-panel-quicknav { gap: 10px; } .theme-panel-meta-col { justify-content: flex-start; margin-top: 10px; } .theme-panel-meta-card { justify-content: flex-start; } .theme-panel-meta-stack { align-items: flex-start; } .theme-panel-meta-card__body { align-items: flex-start; min-width: auto; width: 100%; } .theme-panel-meta-card__title { text-align: left; } .theme-panel-quicknav .dropdown-menu { min-width: 190px; } .theme-panel-tile { width: 110px; height: 80px; min-height: 80px; } } .stats-overview-cont .portlet-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; } .stats-overview-cont .theme-panel-tile-group { float: none; display: inline-block; vertical-align: top; margin: 0; } .stats-overview-cont .theme-panel-tile { width: 122px; min-height: 84px; margin-top: 0 !important; padding: 8px 8px !important; border-radius: 18px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; white-space: normal; } .stats-overview-cont .theme-panel-tile.btn-lg, .stats-overview-cont .theme-panel-tile.nmt5, .stats-overview-cont .theme-panel-tile.dash_box, .stats-overview-cont .theme-panel-tile.theme_btn { min-height: 84px; margin-top: 0 !important; line-height: 1.2; } .stats-overview-cont .theme-panel-tile__icon { display: flex; align-items: center; justify-content: left; width: 38%; min-height: 30px; text-align: center; padding-left: 1px !important; } .stats-overview-cont .theme-panel-tile__label { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 20px; text-align: center; line-height: 1.2; } .stats-overview-cont .theme-panel-tile__caret { display: inline-flex; align-items: center; } /* Billing dashboard css */ .billing-dashboard-page { background: #ffffff; } .billing-dashboard-shell { max-width: 1760px; margin: 0 auto; padding: 18px 8px 28px; color: #16213b; font-family: "DM Sans", "Open Sans", Arial, sans-serif; } .billing-card, .billing-dashboard-topbar { background: #ffffff; border: 1px solid #dbe3f0; border-radius: 18px; } .billing-dashboard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; margin-bottom: 22px; } .billing-dashboard-brand { display: flex; align-items: center; gap: 14px; } .billing-dashboard-brand__logo { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(180deg, #4565ff 0%, #3351e6 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .billing-dashboard-brand__title { font-size: 22px; font-weight: 700; color: #0f1e43; letter-spacing: -0.3px; } .billing-dashboard-brand__subtitle { margin-top: 3px; font-size: 12px; font-weight: 600; color: #8a95ad; text-transform: uppercase; letter-spacing: 1px; } .billing-dashboard-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .billing-dashboard-pill, .billing-dashboard-select, .billing-dashboard-iconbtn { height: 44px; border: 1px solid #dbe3f0; border-radius: 12px; background: #ffffff; color: #4d5d80; } .billing-dashboard-pill { display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 13px; font-weight: 600; } .billing-dashboard-pill i { color: #3259ff; } .billing-dashboard-select { min-width: 118px; padding: 0 14px; font-size: 13px; font-weight: 700; outline: none; } .billing-dashboard-iconbtn { width: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } .billing-dashboard-iconbtn:hover, .billing-dashboard-pill:hover, .billing-dashboard-select:hover, .billing-tabs__btn:hover, .billing-section-head__action:hover { border-color: #3259ff; color: #3259ff; } .billing-dashboard-stats, .billing-dashboard-split { display: grid; gap: 20px; margin-bottom: 22px; } .billing-dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .billing-dashboard-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .billing-dashboard-split--wide { grid-template-columns: 1.35fr 1fr; } .billing-card { padding: 24px; } .billing-stat-card { position: relative; overflow: hidden; min-height: 220px; } .billing-stat-card__stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; } .billing-stat-card--blue .billing-stat-card__stripe { background: #3b5cff; } .billing-stat-card--green .billing-stat-card__stripe { background: #21b884; } .billing-stat-card--amber .billing-stat-card__stripe { background: #f59f0a; } .billing-stat-card--red .billing-stat-card__stripe { background: #f04b50; } .billing-stat-card__icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 23px; margin-bottom: 26px; } .billing-stat-card--blue .billing-stat-card__icon { background: #eef2ff; color: #3b5cff; } .billing-stat-card--green .billing-stat-card__icon { background: #e8fbf3; color: #21b884; } .billing-stat-card--amber .billing-stat-card__icon { background: #fff8e6; color: #f59f0a; } .billing-stat-card--red .billing-stat-card__icon { background: #fff0f0; color: #f04b50; } .billing-stat-card__value { font-size: 36px; line-height: 1; font-weight: 700; color: #132246; margin-bottom: 10px; letter-spacing: -0.7px; } .billing-stat-card__label { font-size: 15px; color: #576682; margin-bottom: 14px; } .billing-stat-card__change { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; margin-bottom: 24px; } .billing-stat-card__change--up { background: #e8fbf3; color: #18a96f; } .billing-stat-card__change--down { background: #fff0f0; color: #f04b50; } .billing-stat-card__spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; } .billing-stat-card__spark span { flex: 1 1 0; min-width: 8px; border-radius: 3px; opacity: 0.95; } .billing-stat-card--blue .billing-stat-card__spark span { background: #dfe6ff; } .billing-stat-card--green .billing-stat-card__spark span { background: #c9f4dd; } .billing-stat-card--amber .billing-stat-card__spark span { background: #ffefb9; } .billing-stat-card--red .billing-stat-card__spark span { background: #f9d6d8; } .billing-card__header, .billing-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .billing-card__title, .billing-section-head__title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #556788; } .billing-section-head__title { text-transform: none; letter-spacing: 0; font-size: 19px; color: #101e3f; } .billing-card__title i, .billing-section-head__title i { margin-right: 8px; } .billing-tabs { background: #f5f7fb; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; gap: 4px; } .billing-tabs__btn { border: none; background: transparent; border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 700; color: #5c6b87; cursor: pointer; } .billing-tabs__btn.active { background: #ffffff; color: #132246; box-shadow: 0 2px 8px rgba(15, 30, 67, 0.08); } .billing-badge { padding: 7px 12px; border-radius: 999px; background: #eef2ff; color: #345cff; font-size: 12px; font-weight: 700; text-transform: uppercase; } .billing-received-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: 8px; padding: 8px 2px 0; } .billing-received-chart__col { display: grid; grid-template-rows: auto 190px auto; align-items: end; text-align: center; } .billing-received-chart__value { font-size: 14px; font-weight: 700; color: #132246; margin-bottom: 18px; min-height: 20px; } .billing-received-chart__bar { height: 0; width: 100%; max-width: 150px; margin: 0 auto; min-height: 20px; border-radius: 8px 8px 6px 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1); align-self: end; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); } .billing-received-chart__bar-local { display: block; width: 100%; background: #3b5cff; } .billing-received-chart__bar-intl { display: block; width: 100%; background: #8457ea; } .billing-received-chart__label { margin-top: 12px; font-size: 13px; color: #7c8aa5; font-weight: 700; min-height: 20px; } .billing-legend { display: flex; align-items: center; gap: 20px; margin-top: 20px; padding-top: 6px; font-size: 13px; color: #51627f; flex-wrap: wrap; } .billing-legend i { color: #3b5cff; margin-right: 6px; } .billing-legend__intl i { color: #8457ea; } .billing-currency-list { display: flex; flex-direction: column; gap: 12px; } .billing-currency-item { display: grid; grid-template-columns: 54px 60px minmax(120px, 1fr) auto 48px; align-items: center; gap: 12px; background: #f7f9fc; border-radius: 14px; padding: 18px 18px; } .billing-currency-item__flag { font-size: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .billing-currency-item__code { font-size: 16px; font-weight: 800; color: #132246; } .billing-currency-item__name, .billing-currency-item__share { font-size: 14px; color: #8a95ad; } .billing-currency-item__amount { font-size: 16px; font-weight: 700; color: #132246; } .billing-section-head { padding-bottom: 18px; border-bottom: 1px solid #e8edf5; } .billing-section-head__action { color: #345cff; font-size: 14px; font-weight: 700; text-decoration: none; } .billing-aging-list { display: flex; flex-direction: column; gap: 14px; } .billing-aging-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 116px; gap: 14px; align-items: center; } .billing-aging-row__label { font-size: 15px; color: #465776; font-weight: 600; } .billing-aging-row__track { background: #f4f6fb; border-radius: 10px; height: 40px; overflow: hidden; } .billing-aging-row__fill { height: 100%; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; color: #ffffff; font-size: 13px; font-weight: 700; } .billing-aging-row__fill--green { background: #1fb782; } .billing-aging-row__fill--blue { background: #3b5cff; } .billing-aging-row__fill--amber { background: #f9a406; } .billing-aging-row__fill--orange { background: #ff7b13; } .billing-aging-row__fill--red { background: #f14447; } .billing-aging-row__fill--deepred { background: #b11d22; } .billing-aging-row__amount { text-align: right; font-size: 15px; font-weight: 700; color: #132246; } .billing-aging-note { margin-top: 18px; padding: 14px 16px; background: #fff8e9; border-radius: 12px; color: #b4670d; font-size: 14px; } .billing-aging-note i { margin-right: 8px; } .billing-pending-list { display: flex; flex-direction: column; gap: 12px; } .billing-pending-item { border: 1px solid #e6ebf4; border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .billing-pending-item__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .billing-pending-item__icon--blue { background: #eef2ff; color: #3b5cff; } .billing-pending-item__icon--purple { background: #f4efff; color: #8457ea; } .billing-pending-item__icon--teal { background: #ecfcf8; color: #21b9a4; } .billing-pending-item__name { font-size: 16px; font-weight: 700; color: #101e3f; margin-bottom: 4px; } .billing-pending-item__meta, .billing-pending-item__due { font-size: 13px; color: #8a95ad; } .billing-pending-item__amount { text-align: right; } .billing-pending-item__value { font-size: 16px; font-weight: 700; color: #132246; margin-bottom: 4px; } .billing-pending-item__due--late { color: #f04b50; } .billing-tag { display: inline-block; padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; margin-right: 6px; } .billing-tag--local { background: #eef2ff; color: #345cff; } .billing-tag--intl { background: #f4efff; color: #8457ea; } .billing-performance-card { margin-bottom: 22px; } .billing-section-head--table { align-items: center; } .billing-table-wrap { overflow-x: auto; } .billing-performance-table { width: 100%; border-collapse: collapse; min-width: 1080px; } .billing-performance-table th, .billing-performance-table td { padding: 18px 14px; border-bottom: 1px solid #e8edf5; text-align: left; } .billing-performance-table th { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: #8a95ad; } .billing-performance-table td { font-size: 15px; font-weight: 600; color: #132246; } .billing-client { display: flex; align-items: center; gap: 14px; } .billing-client__avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 17px; font-weight: 700; } .billing-client__avatar--blue { background: #3b5cff; } .billing-client__avatar--purple { background: #8457ea; } .billing-client__avatar--teal { background: #23b9aa; } .billing-client__avatar--green { background: #1fb782; } .billing-client__avatar--orange { background: #ff7b13; } .billing-client__avatar--indigo { background: #6366f1; } .billing-client__name { font-size: 16px; font-weight: 700; color: #101e3f; } .billing-client__meta { margin-top: 3px; font-size: 13px; color: #8a95ad; } .billing-performance-table__warn { color: #ff5754 !important; } .billing-performance-table__amber { color: #f9a406 !important; } .billing-performance-table__good { color: #18b97e !important; } .billing-score { display: inline-flex; align-items: center; gap: 10px; } .billing-score__track { width: 74px; height: 7px; background: #edf1f7; border-radius: 999px; overflow: hidden; } .billing-score__fill { display: block; height: 100%; border-radius: 999px; } .billing-score__fill--green { background: #20b67f; } .billing-score__fill--amber { background: #f9a406; } .billing-score__fill--red { background: #f04b50; } .billing-status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .billing-status i { font-size: 12px; } .billing-status--green { color: #20b67f; } .billing-status--amber { color: #f9a406; } .billing-status--red { color: #f04b50; } .billing-dashboard-footer { text-align: center; border-top: 1px solid #e8edf5; padding: 16px 8px 0; color: #8a95ad; font-size: 12px; } @media (max-width: 1400px) { .billing-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .billing-dashboard-split, .billing-dashboard-split--wide { grid-template-columns: 1fr; } } @media (max-width: 767px) { .billing-dashboard-shell { padding: 14px 0 22px; } .billing-dashboard-topbar { padding: 18px; } .billing-dashboard-topbar, .billing-dashboard-brand, .billing-dashboard-toolbar { flex-direction: column; align-items: flex-start; } .billing-dashboard-stats { grid-template-columns: 1fr; } .billing-card { padding: 18px; } .billing-received-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } .billing-received-chart__col { grid-template-rows: auto 140px auto; } .billing-aging-row { grid-template-columns: 52px minmax(0, 1fr) 84px; gap: 10px; } .billing-aging-row__amount, .billing-aging-row__label, .billing-pending-item__meta, .billing-pending-item__due, .billing-performance-table td, .billing-performance-table th { font-size: 12px; } .billing-pending-item { grid-template-columns: 44px minmax(0, 1fr); } .billing-pending-item__amount { grid-column: 2; text-align: left; } } /* Notification page css */ .notification-settings-page { background: #ffffff !important; } .notification-settings-shell { max-width: none; width: 100%; margin: 0; padding: 16px 18px 32px; color: #1f2937; font-family: "DM Sans", "Open Sans", Arial, sans-serif; min-height: calc(100vh - 120px); background: #ffffff; } .notification-settings-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; } .notification-settings-title { margin: 0; font-size: 28px; font-weight: 700; color: #14213d; } .notification-settings-subtitle { margin: 6px 0 0; font-size: 14px; color: #6b7280; } .notification-settings-actions { display: flex; align-items: center; gap: 10px; } .notification-btn { border: 1px solid #d7dfef; border-radius: 8px; background: #ffffff; color: #14213d; font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer; } .notification-btn--primary { background: #214e9b; border-color: #214e9b; color: #ffffff; } .notification-btn:hover { border-color: #9fb4da; } .notification-settings-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; width: 100%; } .notification-panel { background: #ffffff; border: 1px solid #d8e0ef; border-radius: 12px; padding: 18px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05); } .notification-panel__eyebrow { font-size: 11px; color: #7d8aa5; text-transform: uppercase; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 14px; } .notification-category-list { display: flex; flex-direction: column; gap: 8px; } .notification-category-item { border: none; background: transparent; color: #1f2937; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; } .notification-category-item:hover, .notification-category-item.active { background: #f4f7fc; } .notification-category-item__count { min-width: 28px; text-align: center; padding: 3px 8px; border-radius: 999px; background: #eef2f8; color: #61708c; font-size: 12px; } .notification-category-item--hidden { display: none; } .notification-panel--main { padding: 18px 18px 16px; } .notification-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .notification-stat-card { background: #f7f9fc; border: 1px solid #dce4f2; border-radius: 10px; padding: 12px 14px; } .notification-stat-card__label { font-size: 11px; color: #7b879d; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .notification-stat-card__value { margin-top: 6px; font-size: 28px; line-height: 1; font-weight: 700; color: #14213d; } .notification-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .notification-panel__title { margin: 0; font-size: 26px; color: #14213d; font-weight: 700; } .notification-panel__desc { margin: 5px 0 0; font-size: 14px; color: #6b7280; } .notification-filter-tabs { display: inline-flex; align-items: center; gap: 4px; background: #f5f7fb; border: 1px solid #dce4f2; border-radius: 8px; padding: 4px; } .notification-filter-tabs__btn { border: none; background: transparent; color: #63708a; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 6px; cursor: pointer; } .notification-filter-tabs__btn.active { background: #ffffff; color: #214e9b; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08); } .notification-matrix { border: 1px solid #dce4f2; border-radius: 10px; overflow: hidden; background: #ffffff; } .notification-matrix__head, .notification-row { display: grid; grid-template-columns: minmax(210px, 1.8fr) repeat(5, 56px) 86px; align-items: center; gap: 0; } .notification-matrix--billing .notification-matrix__head, .notification-matrix--billing .notification-row { grid-template-columns: minmax(250px, 1.8fr) repeat(5, 56px) minmax(118px, 1fr) 92px; } .notification-matrix__head { background: #f7f9fc; color: #7b879d; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; padding: 11px 14px; } .notification-matrix__head > div:not(.notification-matrix__head-event) { text-align: center; } .notification-row { padding: 14px; border-top: 1px solid #e5ebf4; } .notification-row__event { padding-right: 12px; } .notification-row__title { font-size: 15px; font-weight: 700; color: #14213d; margin-bottom: 3px; } .notification-row__meta { font-size: 13px; color: #7c879b; } .notification-chip { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .notification-chip--local { background: #e8f7e8; color: #2f8f34; } .notification-chip--intl { background: #e8f1fd; color: #2c6dc7; } .notification-check { display: flex; align-items: center; justify-content: center; cursor: pointer; } .notification-check input { display: none; } .notification-check span { width: 16px; height: 16px; border-radius: 2px; border: 1px solid #bcc8db; background: #ffffff; display: inline-block; position: relative; } .notification-check input:checked + span { background: #1792ff; border-color: #1792ff; } .notification-check input:checked + span:after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .notification-priority { justify-self: end; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .notification-priority--high { background: #fff3cd; color: #a66d00; } .notification-priority--normal { background: #eef2f7; color: #607086; } .notification-priority--critical { background: #fde8e9; color: #c33c40; } .notification-recipient { font-size: 12px; line-height: 1.35; color: #5a6a84; font-weight: 600; text-align: left; padding: 0 8px; } .notification-global-rules { padding-top: 18px; margin-top: 18px; border-top: 1px solid #e3e9f2; } .notification-global-rules__title { font-size: 15px; font-weight: 700; color: #14213d; margin-bottom: 14px; } .notification-form-grid { display: grid; gap: 14px; } .notification-form-grid--billing { grid-template-columns: repeat(2, minmax(0, 1fr)); } .notification-field-group label { display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px; font-weight: 600; } .notification-time-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .notification-time-range__sep { color: #7f8ea7; font-size: 13px; font-weight: 600; } .notification-input { min-height: 42px; border: 1px solid #d7dfef; border-radius: 8px; background: #ffffff; color: #14213d; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 14px; font-weight: 600; } .notification-input i { color: #7f8ea7; } .notification-settings-note { margin-top: 16px; background: #edf5ff; border: 1px solid #cfe0fb; color: #345b93; border-radius: 10px; padding: 13px 16px; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; } .notification-settings-note i { margin-top: 2px; color: #4e86da; } @media (max-width: 1100px) { .notification-settings-layout { grid-template-columns: 1fr; } .notification-settings-sidebar { order: 2; } .notification-settings-main { order: 1; } } @media (max-width: 900px) { .notification-settings-topbar { flex-direction: column; align-items: flex-start; } .notification-matrix { overflow-x: auto; } .notification-matrix__head, .notification-row { min-width: 620px; } .notification-matrix--billing .notification-matrix__head, .notification-matrix--billing .notification-row { min-width: 860px; } } @media (max-width: 640px) { .notification-settings-shell { padding: 12px 12px 24px; } .notification-settings-title { font-size: 22px; } .notification-settings-actions { width: 100%; flex-wrap: wrap; } .notification-btn { flex: 1 1 140px; text-align: center; } .notification-panel, .notification-panel--main { padding: 14px; } .notification-panel__header { flex-direction: column; } .notification-stats-grid, .notification-form-grid--billing { grid-template-columns: 1fr; } } .select2-container .select2-choice { height: 39px !important; padding: 6px 0 0 8px !important; }