/* Generated 2025-06-28T19:15:22.9053094Z, WL: 1034, worker: , nonce: 78 */
/* IMPORTANT :
* ===================================================================================================
* DON'T EDIT ANY CODE HERE, JUST LEAVE IT.
*
* You may edit the default color scheme.
* You may change the variable value inside the _variables.SCSS file and re-compiling using this file.
*
* If you make changes directly in the CSS and/ or SCSS-files from Nifty,
* it will be hard to update if I release an update. So I would recommend to create a new CSS/ SCSS-file for this purpose.
*/
:root {
--default-text-color: $dark;
}
html, body {
min-width: 290px;
-ms-overflow-style: scrollbar;
}
body {
background-color: white;
font-family: "proxima-soft", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
font-family: "proxima-soft", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background: white;
color: #1f313d;
}
body.with-header #content-container {
padding-top: 60px;
}
body.with-primarynav #content-container {
padding-left: 240px;
padding-top: 70px;
}
@media screen and (min-width: 1200px) {
body.with-primarynav #content-container {
padding-left: 60px;
padding-bottom: 20px;
}
}
body.with-primarynav.lock-mininav #content-container {
padding-left: 60px;
}
body.with-primarynav.lock-mininav #subheader {
padding-left: 60px;
}
body.with-primarynav.lock-mininav #outage-notification {
left: 60px;
width: calc(100% - 60px);
}
body.with-primarynav #navbar {
top: 0;
}
body.with-primarynav #subheader {
top: 0;
}
body.with-primarynav #outage-notification {
top: 0;
}
body.with-primarynav.with-header #subheader {
top: 60px;
}
body.with-primarynav.with-header #outage-notification {
top: 60px;
}
body.with-primarynav.with-header #content-container {
padding-top: 120px;
}
body.with-primarynav.with-header #navbar {
top: 60px;
}
body.with-primarynav.with-header.hide-breadcrumbs #content-container {
padding-top: 70px;
}
body.with-primarynav.hide-breadcrumbs #content-container {
padding-top: 10px;
}
input, button, select, textarea {
font-family: "proxima-soft", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[data-icon]:before {
line-height: 1.4;
}
[class^=kpi-]:before,
[class*=" kpi-"]:before {
line-height: 1.4;
}
.smartbanner-show {
margin-top: 0px !important;
}
.smartbanner-show #navbar {
top: 140px;
}
.smartbanner-show #subheader {
top: 140px;
}
.smartbanner-show #header {
top: 80px;
}
.smartbanner-show #content-container.with-subheader {
padding-top: 200px;
}
.smartbanner-show .smartbanner {
position: fixed;
}
.smartbanner-show #outage-notification {
top: 140px;
}
#container {
min-height: 100vh;
height: auto;
position: relative;
min-width: 290px;
background: white;
}
#container.with-navbar {
padding-left: 240px;
}
#container.menu-mobile-on #content-container {
transform: translateX(280px);
}
#container.menu-mobile-on #navbar {
transform: translateX(0px);
width: 280px;
top: 0;
}
#content-container {
padding-top: 10px;
min-height: 100vh;
background: white;
z-index: 9;
transform: translateX(0px);
transition: all ease 0.5s;
}
#content-container.with-subheader {
padding-top: 120px;
}
@media screen and (min-width: 768px) {
#content-container {
transform: translateX(0px) !important;
}
}
#outage-notification {
position: fixed;
z-index: 10;
width: 100%;
}
.menu-mobile-on #content-container {
position: fixed;
overflow: hidden;
z-index: 0;
width: 100%;
}
.settings-container {
display: flex;
flex-direction: row;
}
.settings-container .settings-nav-container {
width: 250px;
padding-right: 20px;
box-sizing: border-box;
}
.settings-container .settings-nav-container .well {
padding: 8px 0;
}
@media screen and (max-width: 767px) {
.settings-container .settings-nav-container {
transition: width 500ms ease;
width: 0;
padding-right: 0;
transform: translatex(-250px);
}
}
.settings-container .settings-body {
flex: 1;
}
.settings-container .settings-body legend {
padding: 10px 0;
}
.settings-container.menu-mobile-on .settings-nav-container {
transition: width 500ms ease;
width: 250px;
padding-right: 20px;
transform: translatex(0);
}
.settings-container.business-employee {
padding-left: 0;
}
.settings-content-container.business-employee {
margin-left: 0px;
}
.page-title {
padding: 10px 15px;
width: 100%;
color: #1f313d;
position: relative;
}
.page-header {
border: 0 none;
font-size: 1.7em;
font-weight: normal;
margin: 0;
padding: 10px 0;
}
.page-header > button {
margin-left: 15px;
}
@media screen and (max-width: 767px) {
.page-header {
font-size: 1.6rem;
}
}
.panel {
border-radius: 4px;
border: 1px solid #F3F5F7;
}
.panel-body {
padding: 0;
}
.panel-body > .row {
margin: 0;
}
.panel-body .single-row {
height: 50px;
padding: 0px 15px;
}
.panel-body .single-row .single-row-content {
line-height: 50px;
}
.panel-heading {
position: relative;
height: 50px;
padding: 0;
color: #2b425b;
border-bottom: 1px solid transparent;
background: #DBE2E5;
}
.panel-bodyheading {
font-size: 14px;
height: 40px;
border-bottom: 1px solid #F3F5F7;
}
.panel-bodyheading h5 {
font-weight: bold;
margin: 0;
color: #5E6871;
line-height: 40px;
padding: 0 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-title {
font-weight: bold;
padding: 0 13px 0 13px;
font-size: 14px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-title i {
font-size: 12px;
position: relative;
top: 1px;
margin-right: 5px;
}
.panel-control {
height: 100%;
position: relative;
float: right;
padding: 0 15px;
}
.panel-control:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
left: -1em;
position: relative;
}
.panel-control .btn-transparent {
background: transparent;
color: #5E6871;
}
.panel-control .icon-md {
position: relative;
top: 5px;
}
.panel-accordion-title {
position: relative;
height: 50px;
padding: 0;
color: #2b425b;
border-bottom: 1px solid #F3F5F7;
background: #FFF;
}
.panel-accordion-title:hover {
background: rgb(252.45, 252.45, 252.45);
}
.panel-accordion-title h3, .panel-accordion-title h4 {
font-size: 14px;
color: #5E6871;
letter-spacing: 0px;
margin: 0;
font-weight: bold;
padding: 0 15px 0 15px;
font-size: 14px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-accordion-title h3 a, .panel-accordion-title h4 a {
color: #5E6871 !important;
display: block;
text-decoration: none;
}
.panel-accordion-title h3 a.collapsed .panel-control .kpi-arrow-down:before, .panel-accordion-title h4 a.collapsed .panel-control .kpi-arrow-down:before {
display: inline-block;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-accordion-title.big-title h3 {
font-size: 18px;
}
.menu-accordion .panel-heading {
height: 50px;
background-color: #DBE2E5;
}
.menu-accordion .panel-heading .panel-title {
height: 50px;
line-height: 50px;
text-transform: uppercase;
font-size: 12px;
}
.menu-accordion .panel-heading .panel-title a {
text-decoration: none;
}
.menu-accordion .panel-heading .panel-title a .panel-control {
padding: 0 10px;
}
.menu-accordion .panel-heading .panel-title a.collapsed .panel-control .kpi-arrow-down:before {
display: inline-block;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu-accordion .panel-heading .panel-title.with-caret {
padding-right: 0;
}
.menu-accordion .panel-body {
border-top: 0px !important;
padding: 8px 0px;
}
.menu-accordion .table tbody tr td {
font-size: 14px;
border: none;
padding: 12px 15px;
color: #fc9809;
width: 100%;
}
.menu-accordion .table tbody tr td.active {
background-color: #fc9809;
}
.menu-accordion .table tbody tr td.active a.active {
color: black;
font-weight: bold;
}
.card {
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
background: #FFFFFF;
box-shadow: 0px 4px 14px 0px rgba(34, 34, 34, 0.3);
border-radius: 4px;
}
@media screen and (max-width: 320px) {
.card {
margin: 0;
}
}
.card.card-container {
max-width: 360px;
}
@media screen and (max-width: 320px) {
.card.card-container {
max-width: 100%;
}
}
/* fluid 5 columns */
.grid-sizer,
.grid-item {
width: calc(33.333% - 15px);
}
/* 2 columns wide */
.grid-item--width2 {
width: calc(66.666% - 15px);
}
/* 3 columns wide */
.grid-item--width3 {
width: 100%;
}
@media screen and (max-width: 767px) {
.grid-item {
width: 100%;
}
.grid-item--width2 {
width: 100%;
}
}
/* NAVBAR
/*====================================*/
#navbar {
position: fixed;
width: 240px;
z-index: 11;
background-color: #51c40e;
left: 0;
top: 60px;
height: 100%;
padding: 10px 0px;
}
#navbar.nav-icon-color-dark .nav-container .nav-list {
cursor: pointer;
}
#navbar.nav-icon-color-dark .nav-container .nav-list.active {
background: rgba(0, 0, 0, 0.2);
}
#navbar.nav-icon-color-dark .nav-container .nav-list:hover {
background: rgba(0, 0, 0, 0.1);
}
#navbar.nav-icon-color-dark .nav-container .nav-list a.nav-icon {
color: rgb(0, 0, 0);
}
#navbar.nav-icon-color-dark .nav-container .nav-list a.nav-icon:hover {
color: rgb(0, 0, 0);
text-decoration: none;
}
#navbar.nav-icon-color-dark .nav-container .nav-list a.nav-icon:hover > .menu-hover {
opacity: 1;
}
#navbar.nav-icon-color-dark .nav-container .nav-list.active a.nav-icon {
color: rgb(0, 0, 0);
}
@media screen and (max-width: 767px) {
#navbar.nav-icon-color-dark .nav-container .nav-list.active a.nav-icon {
color: rgb(0, 0, 0);
}
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover {
border-color: rgba(0, 0, 0, 0.1);
border-left-width: 1px;
border-left-style: solid;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover {
background-color: #51c40e;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover {
background-color: #51c40e;
}
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover .dropdown-header {
padding: 5px 20px;
color: rgba(0, 0, 0, 0.6);
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover .dropdown-title {
color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.1);
height: 51px;
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover .dropdown-title span, #navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover .dropdown-title a {
padding: 10px 20px;
font-size: 1.1em;
font-weight: 600;
display: block;
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover .divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.3);
padding: 0;
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover li a {
color: rgb(0, 0, 0);
}
#navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover:hover {
color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.3);
text-decoration: none;
}
#navbar.nav-icon-color-light .nav-container .nav-list.active {
background: rgba(255, 255, 255, 0.2);
}
#navbar.nav-icon-color-light .nav-container .nav-list:hover {
background: rgba(255, 255, 255, 0.1);
}
#navbar.nav-icon-color-light .nav-container .nav-list a.nav-icon {
color: rgb(255, 255, 255);
}
#navbar.nav-icon-color-light .nav-container .nav-list a.nav-icon:hover {
color: rgb(255, 255, 255);
text-decoration: none;
}
#navbar.nav-icon-color-light .nav-container .nav-list a.nav-icon:hover > .menu-hover {
opacity: 1;
}
#navbar.nav-icon-color-light .nav-container .nav-list.active a.nav-icon {
color: rgb(255, 255, 255);
}
@media screen and (max-width: 767px) {
#navbar.nav-icon-color-light .nav-container .nav-list.active a.nav-icon {
color: rgb(255, 255, 255) !important;
}
}
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover {
border-color: rgba(255, 255, 255, 0.1);
border-left-width: 1px;
border-left-style: solid;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover {
background-color: #51c40e;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover {
background-color: #51c40e;
}
}
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover .dropdown-header {
padding: 5px 20px;
color: rgba(255, 255, 255, 0.6);
}
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover .dropdown-title {
color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.1);
height: 51px;
}
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover .dropdown-title span, #navbar.nav-icon-color-light .nav-container .nav-list .menu-hover .dropdown-title a {
padding: 15px 20px;
font-size: 1.1em;
font-weight: 600;
display: block;
}
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover .divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.3);
padding: 0;
}
#navbar.nav-icon-color-light .nav-container .nav-list .menu-hover li a {
color: rgb(255, 255, 255);
}
#navbar .nav-container .nav-list {
position: relative;
cursor: pointer;
margin-bottom: 2px;
}
@media screen and (max-width: 767px) {
#navbar .nav-container .nav-list {
padding: 0px 0px 0px 15px;
}
}
#navbar .nav-container .nav-list .menu-hover {
position: static;
top: 0;
left: 0px;
padding: 0;
min-width: auto;
border-top: 1px solid;
margin: 0px 20px;
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#navbar .nav-container .nav-list .menu-hover {
visibility: hidden;
opacity: 1;
left: 40px;
min-width: 220px;
padding: 10px 20px;
border-radius: 4px;
z-index: 99;
position: absolute;
}
#navbar .nav-container .nav-list .menu-hover .in {
visibility: visible;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#navbar .nav-container .nav-list .menu-hover {
visibility: hidden;
opacity: 1;
left: 40px;
min-width: 220px;
padding: 10px 20px;
border-radius: 4px;
z-index: 99;
position: absolute;
}
#navbar .nav-container .nav-list .menu-hover .in {
visibility: visible;
}
}
@media screen and (max-width: 767px) {
#navbar .nav-container .nav-list .menu-hover {
transition: all ease 0.3s;
visibility: visible;
opacity: 1;
position: static;
top: 0;
left: 0px;
min-width: auto;
}
}
#navbar .nav-container .nav-list .menu-hover li {
padding: 0;
}
#navbar .nav-container .nav-list .menu-hover li a {
transition: background-color ease 0.3s;
font-size: 14px;
font-weight: 600;
display: block;
}
#navbar .nav-container .nav-list .menu-hover li a.link-withicon {
text-decoration: none;
}
#navbar .nav-container .nav-list .menu-hover li a.link-withicon i[class*=kpi-] {
margin-right: 5px;
position: relative;
top: 2px;
}
#navbar .nav-container .nav-list .menu-hover li:last-child {
margin-bottom: 16px;
}
#navbar .nav-container .nav-list .menu-hover li:only-child {
margin-bottom: 0;
}
#navbar .nav-container .nav-list:hover .menu-hover.in {
visibility: visible;
opacity: 1;
}
#navbar .nav-container .nav-list a.nav-icon {
padding: 14px 0px 7px 0;
display: table;
margin: 0 auto;
width: 240px;
text-align: center;
transition: all ease 0.3s;
position: relative;
text-decoration: none;
}
#navbar .nav-container .nav-list a.nav-icon i {
display: table-cell;
width: 100%;
font-size: 1.5em;
}
#navbar .nav-container .nav-list a.nav-icon span {
display: table-cell;
}
#navbar .nav-container .nav-list a.nav-icon .open-submenu {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#navbar .nav-container .nav-list a.nav-icon .open-submenu {
display: none;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#navbar .nav-container .nav-list a.nav-icon .open-submenu {
display: none;
}
}
#navbar .nav-container .nav-list a.nav-icon.collapsed .open-submenu {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#navbar .nav-container .nav-list a.nav-icon {
width: 55px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#navbar .nav-container .nav-list a.nav-icon {
width: 55px;
}
}
@media screen and (max-width: 767px) {
#navbar .nav-container .nav-list a.nav-icon {
text-align: left;
color: rgba(255, 255, 255, 0.8);
padding: 10px 0px;
font-size: 1.6rem;
font-weight: 600;
}
}
#navbar .nav-container .nav-list a.nav-icon span {
display: inline-block;
margin-left: 10px;
font-weight: 600;
}
@media screen and (max-width: 767px) {
#navbar .nav-container .nav-list a.nav-icon span {
display: inline-block;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#navbar .nav-container .nav-list a.nav-icon span {
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#navbar .nav-container .nav-list a.nav-icon span {
display: none;
}
}
.lock-mininav #navbar {
width: 60px !important;
}
.lock-mininav #navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover {
background-color: #51c40e;
}
.lock-mininav #navbar.nav-icon-color-dark .nav-container .nav-list .menu-hover li a:hover {
color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.3);
}
.lock-mininav #navbar.nav-icon-color-light .nav-container .nav-list .menu-hover {
background-color: #51c40e;
}
.lock-mininav #navbar.nav-icon-color-light .nav-container .nav-list .menu-hover li a:hover {
color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.3);
}
.lock-mininav #navbar .nav-container .nav-list .menu-hover {
visibility: hidden;
opacity: 1;
left: 40px;
min-width: 220px;
padding: 0;
border-radius: 0 4px 4px 0;
z-index: 99;
position: absolute;
}
.lock-mininav #navbar .nav-container .nav-list .menu-hover .in {
visibility: visible;
}
.lock-mininav #navbar .nav-container .nav-list .menu-hover li a {
padding: 5px 20px;
text-decoration: none;
}
.lock-mininav #navbar .nav-container .nav-list a.nav-icon {
width: 55px;
}
.lock-mininav #navbar .nav-container .nav-list a.nav-icon .open-submenu {
display: none;
}
.lock-mininav #navbar .nav-container .nav-list a.nav-icon span {
display: none;
}
.lock-mininav #navbar .nav-container .nav-list a.nav-icon span.badge {
display: block;
position: absolute;
right: 5px;
bottom: 7px;
}
.bs2 #navbar i {
line-height: 30px;
}
.bs2 #navbar .dropdown-title {
box-sizing: border-box;
}
.bs2 #navbar .menu-hover {
left: 41px;
}
#header {
position: fixed;
top: 0;
left: 0;
height: 60px;
width: 100%;
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 11;
}
#header.text-dark {
color: rgba(0, 0, 0, 0.6);
}
#header.text-dark a.btn-transparent {
color: rgba(0, 0, 0, 0.6);
}
#header.text-dark a.btn-transparent:hover {
background-color: white !important;
}
#header.text-dark .dropdown-menu {
background: #ffffff;
}
#header.text-dark .dropdown-menu .dropdown-header {
color: rgba(0, 0, 0, 0.6);
}
#header.text-dark .dropdown-menu .divider {
background: rgb(242.25, 242.25, 242.25);
}
#header.text-dark .dropdown-menu > li > a:hover {
background-color: rgb(242.25, 242.25, 242.25);
}
#header.text-light {
color: rgba(255, 255, 255, 0.8);
}
#header.text-light a.btn-transparent {
color: rgba(255, 255, 255, 0.8);
}
#header.text-light a.btn-transparent:hover {
color: rgb(255, 255, 255);
background-color: white !important;
}
#header.text-light .dropdown-menu {
background: #ffffff;
}
#header.text-light .dropdown-menu .dropdown-header {
color: rgba(255, 255, 255, 0.8);
}
#header.text-light .dropdown-menu .divider {
background: white;
}
#header.text-light .dropdown-menu > li > a {
color: rgb(255, 255, 255);
}
#header.text-light .dropdown-menu > li > a:hover {
background-color: white;
}
#header a.logo {
padding: 12px 0 12px 18px;
height: 60px;
display: block;
}
#header a.logo img.brand {
height: 36px;
}
@media screen and (max-width: 320px) {
#header a.logo img.brand {
max-width: 138px;
}
}
@media screen and (min-width: 321px) and (max-width: 400px) {
#header a.logo img.brand {
max-width: 178px;
}
}
#header .username {
float: right;
white-space: nowrap;
line-height: 40px;
}
#header .img-user {
width: 38px;
height: 38px;
}
#subheader {
position: fixed;
top: 60px;
height: 60px;
width: 100%;
background: white;
z-index: 10;
padding-left: 240px;
border-bottom: 1px solid #F3F5F7;
}
@media screen and (max-width: 767px) {
#subheader {
padding-left: 0;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#subheader {
padding-left: 60px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#subheader {
padding-left: 60px;
}
}
.navbar-top-links > li {
float: left;
}
.navbar-top-links > li > a {
display: table-cell;
padding: 0 12px;
vertical-align: middle;
height: 59px;
color: #758697;
transition: all 0.4s;
border-radius: 0;
}
.mobile-ham-menu {
width: 40px;
height: 60px;
vertical-align: top;
padding-left: 10px;
display: none;
outline: none !important;
border: none !important;
}
@media screen and (max-width: 767px) {
.mobile-ham-menu {
display: inline-block;
}
}
.mobile-ham-menu span {
width: 15px;
background: #D3D7DB;
height: 2px;
border-radius: 3px;
display: block;
margin-left: 15px;
position: relative;
top: 30px;
transition: all ease 0.5s;
outline: none;
}
.mobile-ham-menu span:before {
content: "";
width: 15px;
background: #D3D7DB;
height: 2px;
position: absolute;
top: -5px;
transition: all ease 0.5s;
}
.mobile-ham-menu span:after {
content: "";
width: 15px;
background: #D3D7DB;
height: 2px;
position: absolute;
top: 5px;
transition: all ease 0.5s;
}
.mobile-ham-menu.active span {
background: transparent;
}
.mobile-ham-menu.active span:before {
transform: rotate(45deg);
top: 0px;
}
.mobile-ham-menu.active span:after {
transform: rotate(-45deg);
top: 0px;
}
/* CALENDAR
/*====================================*/
.fc-basic-view .fc-week-number, .fc-basic-view .fc-day-number {
padding: 7px 7px 0px 7px;
}
.fc-toolbar {
margin-bottom: 0;
position: relative;
height: 50px;
padding: 0;
color: #2b425b;
border-bottom: 1px solid transparent;
background: #DBE2E5;
border-radius: 4px 4px 0px 4px;
}
.fc-toolbar .fc-left h2 {
font-weight: bold;
padding: 0 15px 0 15px;
font-size: 14px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-toolbar .fc-right {
float: right;
height: 50px;
line-height: 50px;
}
.fc-right {
padding-right: 15px;
}
.fc-right button {
height: 50px;
background: transparent;
border: none;
outline: none;
box-shadow: none;
opacity: 0.8;
}
.fc-right button:hover {
opacity: 1;
}
.fc-right .fc-today-button {
padding: 0px 12px;
text-transform: capitalize;
}
.fc-unthemed .fc-today {
background: rgb(254.4578313253, 236.3855421687, 210.5421686747);
}
.fc-day-header {
padding: 5px 0px !important;
background: white;
}
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td {
border-color: #F3F5F7;
}
.fc-event, .fc-event-dot {
background-color: #fc9809;
padding: 3px 7px;
}
.fc-state-default {
text-transform: capitalize;
color: #5E6871;
}
.fc-state-active {
font-weight: bold;
color: #1f313d;
}
.fc-event {
font-weight: 600;
border-radius: 4px;
}
.fc-event {
position: relative;
display: block;
font-size: 0.85em;
line-height: 1.3;
border-radius: 3px;
border: 0px solid #3a87ad;
font-weight: 600;
}
.fc-event.leave-approved {
background-color: rgb(234.9183673469, 225.5469387755, 243.4530612245);
}
.fc-event.leave-approved .fc-content {
color: #874fba;
}
.fc-event.leave-pending {
background: repeating-linear-gradient(45deg, rgb(222.4285714286, 207.2285714286, 236.2714285714), rgb(222.4285714286, 207.2285714286, 236.2714285714) 10px, rgb(234.9183673469, 225.5469387755, 243.4530612245) 10px, rgb(234.9183673469, 225.5469387755, 243.4530612245) 20px);
}
.fc-event.leave-pending .fc-content {
color: #874fba;
}
.fc-event.leave-other-employees {
background-color: rgb(234.9183673469, 225.5469387755, 243.4530612245);
}
.fc-event.leave-other-employees .fc-content {
color: #874fba;
}
.fc-event.unavailability {
background-color: rgb(248.527638191, 215.472361809, 219.4020100503);
}
.fc-event.unavailability .fc-content {
color: #e35465;
}
.fc-event.public-holiday {
background-color: rgb(225.0163934426, 246.6147540984, 201.3852459016);
}
.fc-event.public-holiday .fc-content {
color: #7ed321;
}
.fc-event.shift {
cursor: pointer;
background-color: #DBE2E5;
}
.fc-event.shift .fc-content {
color: #5E6871;
}
.fc-event.shift.pending-shift {
cursor: pointer;
background: repeating-linear-gradient(135deg, #F3EDE0, #F3EDE0 10px, #FDF7EA 10px, #FDF7EA 20px) !important;
color: #5E6871;
border-color: #ECE8DF;
}
.fc-event.shift.pending-swap {
background: repeating-linear-gradient(135deg, #E1E9F3, #E1E9F3 10px, #EAF9FD 10px, #EAF9FD 20px) !important;
border-color: #E1E9F3;
}
.fc-event.shift.proposed-swap {
background: repeating-linear-gradient(-135deg, #E1E9F3, #E1E9F3 10px, #EAF3FD 10px, #EAF3FD 20px) !important;
border-color: #E1E9F3;
}
.fc-event.shift.biddable-shift {
background: repeating-linear-gradient(135deg, rgb(233.4975609756, 157.1268292683, 124.5024390244), rgb(233.4975609756, 157.1268292683, 124.5024390244) 10px, rgb(237.1048780488, 173.5463414634, 146.3951219512) 10px, rgb(237.1048780488, 173.5463414634, 146.3951219512) 20px) !important;
border-color: #b0491d;
}
.fc-event.shift.biddable-shift .fc-content {
color: rgb(88.4292682927, 36.6780487805, 14.5707317073);
}
.fc-event.past-event {
opacity: 0.4;
}
.fc-event.payday {
background-color: rgb(202.6935483871, 206.7741935484, 238.3064516129) !important;
}
.fc-event.payday .fc-content {
color: #2d388d;
}
.calendar-pending-shifts-indicator {
cursor: pointer;
}
.calendar-pending-shifts-indicator span:not(.badge) {
font-weight: normal !important;
text-decoration: underline;
}
/* ASIDE */
/* ===================================== */
#aside-panel {
box-shadow: 0;
padding: 0;
position: absolute;
width: 400px;
height: auto;
left: auto;
right: -400px;
top: 0;
bottom: 0;
min-height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
z-index: 11;
background: white;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
transition: all ease 0.5s;
}
@media screen and (max-width: 400px) {
#aside-panel {
width: 100%;
}
}
#container.aside-in #aside-panel {
right: 0;
left: auto;
box-shadow: 7px 2px 40px 0px rgba(0, 0, 0, 0.12);
}
.aside-header {
border-bottom: 1px solid #F3F5F7;
height: 60px;
}
.aside-header h3 {
font-size: 20px;
font-weight: 500p;
color: #5E6871;
margin: 0px;
line-height: 45px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.aside-header h3 i {
color: #fc9809;
}
.aside-header h3 span {
position: relative;
top: -2px;
margin-left: 5px;
}
.aside-footer {
width: 100%;
height: auto;
border-top: 1px solid #F3F5F7;
}
@keyframes hover-color {
from {
border-color: #C0C9D2;
}
to {
border-color: #fc9809;
}
}
.magic-radio,
.magic-checkbox {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.magic-radio:checked + label:before, .magic-radio:checked + span.validationMessage + label:before, .magic-radio:checked + span.field-validation-error + label:before,
.magic-checkbox:checked + label:before,
.magic-checkbox:checked + span.validationMessage + label:before,
.magic-checkbox:checked + span.field-validation-error + label:before {
animation-name: none;
}
.magic-radio:checked + label:after, .magic-radio:checked + span.validationMessage + label:after, .magic-radio:checked + span.field-validation-error + label:after,
.magic-checkbox:checked + label:after,
.magic-checkbox:checked + span.validationMessage + label:after,
.magic-checkbox:checked + span.field-validation-error + label:after {
display: block;
}
.magic-radio[disabled],
.magic-checkbox[disabled] {
cursor: not-allowed;
}
.magic-radio[disabled] + label, .magic-radio[disabled] + span.validationMessage + label, .magic-radio[disabled] + span.field-validation-error + label,
.magic-checkbox[disabled] + label,
.magic-checkbox[disabled] + span.validationMessage + label,
.magic-checkbox[disabled] + span.field-validation-error + label {
cursor: not-allowed;
color: #c0c9d2;
}
.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, .magic-radio[disabled] + span.validationMessage + label:hover, .magic-radio[disabled] + span.validationMessage + label:before, .magic-radio[disabled] + span.validationMessage + label:after, .magic-radio[disabled] + span.field-validation-error + label:hover, .magic-radio[disabled] + span.field-validation-error + label:before, .magic-radio[disabled] + span.field-validation-error + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after,
.magic-checkbox[disabled] + span.validationMessage + label:hover,
.magic-checkbox[disabled] + span.validationMessage + label:before,
.magic-checkbox[disabled] + span.validationMessage + label:after,
.magic-checkbox[disabled] + span.field-validation-error + label:hover,
.magic-checkbox[disabled] + span.field-validation-error + label:before,
.magic-checkbox[disabled] + span.field-validation-error + label:after {
cursor: not-allowed;
}
.magic-radio[disabled] + label:hover:before, .magic-radio[disabled] + span.validationMessage + label:hover:before, .magic-radio[disabled] + span.field-validation-error + label:hover:before,
.magic-checkbox[disabled] + label:hover:before,
.magic-checkbox[disabled] + span.validationMessage + label:hover:before,
.magic-checkbox[disabled] + span.field-validation-error + label:hover:before {
border: 1px solid #c0c9d2;
animation-name: none;
}
.magic-radio[disabled] + label:before, .magic-radio[disabled] + span.validationMessage + label:before, .magic-radio[disabled] + span.field-validation-error + label:before,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + span.validationMessage + label:before,
.magic-checkbox[disabled] + span.field-validation-error + label:before {
border-color: #c0c9d2;
}
.magic-radio:focus-visible + label:before, .magic-radio + span.validationMessage + label:before, .magic-radio + span.field-validation-error + label:before,
.magic-checkbox:focus-visible + label:before,
.magic-checkbox + span.validationMessage + label:before,
.magic-checkbox + span.field-validation-error + label:before {
outline: 2px solid #fc9809;
}
.magic-radio + label, .magic-radio + span.validationMessage + label, .magic-radio + span.field-validation-error + label,
.magic-checkbox + label,
.magic-checkbox + span.validationMessage + label,
.magic-checkbox + span.field-validation-error + label {
position: relative;
display: block;
padding-left: 30px;
cursor: pointer;
vertical-align: middle;
}
.magic-radio + label:hover:before, .magic-radio + span.validationMessage + label:hover:before, .magic-radio + span.field-validation-error + label:hover:before,
.magic-checkbox + label:hover:before,
.magic-checkbox + span.validationMessage + label:hover:before,
.magic-checkbox + span.field-validation-error + label:hover:before {
animation-duration: 0.4s;
animation-fill-mode: both;
animation-name: hover-color;
}
.magic-radio + label:before, .magic-radio + span.validationMessage + label:before, .magic-radio + span.field-validation-error + label:before,
.magic-checkbox + label:before,
.magic-checkbox + span.validationMessage + label:before,
.magic-checkbox + span.field-validation-error + label:before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
content: "";
border: 1px solid #C0C9D2;
background: white;
}
.magic-radio + label:after, .magic-radio + span.validationMessage + label:after, .magic-radio + span.field-validation-error + label:after,
.magic-checkbox + label:after,
.magic-checkbox + span.validationMessage + label:after,
.magic-checkbox + span.field-validation-error + label:after {
position: absolute;
display: none;
content: "";
}
.small .magic-radio + label, .small .magic-radio + span.validationMessage + label, .small .magic-radio + span.field-validation-error + label,
.small .magic-checkbox + label,
.small .magic-checkbox + span.validationMessage + label,
.small .magic-checkbox + span.field-validation-error + label {
margin-bottom: 0;
padding-left: 24px;
line-height: 1.6;
}
.small .magic-radio + label:before, .small .magic-radio + span.validationMessage + label:before, .small .magic-radio + span.field-validation-error + label:before,
.small .magic-checkbox + label:before,
.small .magic-checkbox + span.validationMessage + label:before,
.small .magic-checkbox + span.field-validation-error + label:before {
transform: scale(0.8);
}
.small .magic-radio + label:after, .small .magic-radio + span.validationMessage + label:after, .small .magic-radio + span.field-validation-error + label:after,
.small .magic-checkbox + label:after,
.small .magic-checkbox + span.validationMessage + label:after,
.small .magic-checkbox + span.field-validation-error + label:after {
transform: scale(0.8) rotate(45deg);
}
.magic-radio + label:before, .magic-radio + span.validationMessage + label:before, .magic-radio + span.field-validation-error + label:before {
border-radius: 50%;
}
.magic-radio + label:after, .magic-radio + span.validationMessage + label:after, .magic-radio + span.field-validation-error + label:after {
top: 6px;
left: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fc9809;
}
.magic-radio:checked + label:before, .magic-radio:checked + span.validationMessage + label:before, .magic-radio:checked + span.field-validation-error + label:before {
border: 1px solid #fc9809;
}
.magic-radio:checked[disabled] + label:before, .magic-radio:checked[disabled] + span.validationMessage + label:before, .magic-radio:checked[disabled] + span.field-validation-error + label:before {
border: 1px solid rgb(252.6144578313, 173.0963855422, 59.3855421687);
}
.magic-radio:checked[disabled] + label:after, .magic-radio:checked[disabled] + span.validationMessage + label:after, .magic-radio:checked[disabled] + span.field-validation-error + label:after {
background: rgb(252.6144578313, 173.0963855422, 59.3855421687);
}
.magic-checkbox + label:before, .magic-checkbox + span.validationMessage + label:before, .magic-checkbox + span.field-validation-error + label:before {
border-radius: 3px;
}
.magic-checkbox + label:after, .magic-checkbox + span.validationMessage + label:after, .magic-checkbox + span.field-validation-error + label:after {
top: 2px;
left: 7px;
box-sizing: border-box;
width: 6px;
height: 12px;
transform: rotate(45deg);
border-width: 2px;
border-style: solid;
border-color: #F3F5F7;
border-top: 0;
border-left: 0;
}
.magic-checkbox:checked + label:before, .magic-checkbox:checked + span.validationMessage + label:before, .magic-checkbox:checked + span.field-validation-error + label:before {
border: #fc9809;
background: #fc9809;
}
.magic-checkbox:checked[disabled] + label:before, .magic-checkbox:checked[disabled] + span.validationMessage + label:before, .magic-checkbox:checked[disabled] + span.field-validation-error + label:before {
border: rgb(252.6144578313, 173.0963855422, 59.3855421687);
background: rgb(252.6144578313, 173.0963855422, 59.3855421687);
}
/* [PD] the bootstrap print styles remove all background colours. they are actually functional for the magic checkbox/magic radio so I have added them back in.
* bootstrap also makes everything black in print mode so I have maintained that, although if we were to review it (eg: switching to chromium pdf printing), then
* this decision is up for grabs.
*/
@media print {
.magic-checkbox:checked + label:before, .magic-checkbox:checked + span.validationMessage + label:before {
border: #000 !important;
background: #000 !important;
}
.magic-checkbox:checked[disabled] + label:before, .magic-checkbox:checked[disabled] + span.validationMessage + label:before {
border: #000 !important;
background: #000 !important;
}
.magic-radio + label:after, .magic-radio + span.validationMessage + label:after {
background: #000 !important;
}
.magic-radio:checked + label:before, .magic-radio:checked + span.validationMessage + label:before {
border: 1px solid #000 !important;
}
.magic-radio:checked[disabled] + label:before, .magic-radio:checked[disabled] + span.validationMessage + label:before {
border: 1px solid #000 !important;
}
.magic-radio:checked[disabled] + label:after, .magic-radio:checked[disabled] + span.validationMessage + label:after {
background: #000 !important;
}
}
/**
* IMPORTANT
*
* iOS Switcher uses Bootstrap grid (http://getbootstrap.com/css/#grid)
*/
/* line 21, ../sass/switcher.scss */
.form-switcher input[type=checkbox] {
display: none;
}
/* line 23, ../sass/switcher.scss */
.form-switcher input[type=checkbox]:disabled + .switcher {
opacity: 0.8;
cursor: not-allowed;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
/* line 28, ../sass/switcher.scss */
.form-switcher input[type=checkbox]:checked:disabled + .switcher {
border-color: #cccccc !important;
-moz-box-shadow: 0px 0px 0px 15px #cccccc inset !important;
-webkit-box-shadow: 0px 0px 0px 15px #cccccc inset !important;
box-shadow: 0px 0px 0px 15px #cccccc inset !important;
}
/* line 32, ../sass/switcher.scss */
.form-switcher input[type=checkbox]:checked + .switcher {
-moz-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out 0.02s;
-o-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out 0.02s;
-webkit-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
-webkit-transition-delay: 0s, 0.02s;
transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out 0.02s;
}
/* line 36, ../sass/switcher.scss */
.form-switcher .switcher {
background: #ffffff;
border: 2px solid #e6e6e6;
padding: 0;
position: relative;
display: inline-block;
cursor: pointer;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-transition: box-shadow 0.2s ease-out 0.02s, border-color 0.2s ease-out;
-o-transition: box-shadow 0.2s ease-out 0.02s, border-color 0.2s ease-out;
-webkit-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
-webkit-transition-delay: 0.02s, 0s;
transition: box-shadow 0.2s ease-out 0.02s, border-color 0.2s ease-out;
}
.switcher-label {
display: inline-block;
vertical-align: top;
padding: 6px;
color: #1f313d;
font-weight: 400;
}
/* line 45, ../sass/switcher.scss */
.form-switcher .switcher:after {
background: #ffffff;
position: absolute;
top: 0;
left: 0;
content: "";
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher .switcher {
width: 43px;
height: 25px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher .switcher:hover:active:after {
width: 28.35px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher .switcher:after {
height: 21px;
width: 21px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher input[type=checkbox]:disabled + .switcher:after {
height: 21px !important;
width: 21px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(18px) !important;
-ms-transform: translateX(18px) !important;
-webkit-transform: translateX(18px) !important;
transform: translateX(18px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 12.5px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 12.5px #16b85f inset;
box-shadow: 0px 0px 0px 12.5px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(18px);
-ms-transform: translateX(18px);
-webkit-transform: translateX(18px);
transform: translateX(18px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(10.65px);
-ms-transform: translateX(10.65px);
-webkit-transform: translateX(10.65px);
transform: translateX(10.65px);
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm .switcher {
width: 31px;
height: 18px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm .switcher:hover:active:after {
width: 18.9px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm .switcher:after {
height: 14px;
width: 14px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm input[type=checkbox]:disabled + .switcher:after {
height: 14px !important;
width: 14px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(13px) !important;
-ms-transform: translateX(13px) !important;
-webkit-transform: translateX(13px) !important;
transform: translateX(13px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 9px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 9px #16b85f inset;
box-shadow: 0px 0px 0px 9px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(13px);
-ms-transform: translateX(13px);
-webkit-transform: translateX(13px);
transform: translateX(13px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(8.1px);
-ms-transform: translateX(8.1px);
-webkit-transform: translateX(8.1px);
transform: translateX(8.1px);
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg .switcher {
width: 53px;
height: 30px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg .switcher:hover:active:after {
width: 35.1px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg .switcher:after {
height: 26px;
width: 26px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg input[type=checkbox]:disabled + .switcher:after {
height: 26px !important;
width: 26px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(23px) !important;
-ms-transform: translateX(23px) !important;
-webkit-transform: translateX(23px) !important;
transform: translateX(23px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 15px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 15px #16b85f inset;
box-shadow: 0px 0px 0px 15px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(23px);
-ms-transform: translateX(23px);
-webkit-transform: translateX(23px);
transform: translateX(23px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(13.9px);
-ms-transform: translateX(13.9px);
-webkit-transform: translateX(13.9px);
transform: translateX(13.9px);
}
@media (max-width: 767px) {
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone .switcher {
width: 31px;
height: 18px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone .switcher:hover:active:after {
width: 18.9px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone .switcher:after {
height: 14px;
width: 14px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone input[type=checkbox]:disabled + .switcher:after {
height: 14px !important;
width: 14px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(13px) !important;
-ms-transform: translateX(13px) !important;
-webkit-transform: translateX(13px) !important;
transform: translateX(13px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 9px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 9px #16b85f inset;
box-shadow: 0px 0px 0px 9px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(13px);
-ms-transform: translateX(13px);
-webkit-transform: translateX(13px);
transform: translateX(13px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-phone input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(8.1px);
-ms-transform: translateX(8.1px);
-webkit-transform: translateX(8.1px);
transform: translateX(8.1px);
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone .switcher {
width: 43px;
height: 25px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone .switcher:hover:active:after {
width: 28.35px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone .switcher:after {
height: 21px;
width: 21px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone input[type=checkbox]:disabled + .switcher:after {
height: 21px !important;
width: 21px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(18px) !important;
-ms-transform: translateX(18px) !important;
-webkit-transform: translateX(18px) !important;
transform: translateX(18px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 12.5px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 12.5px #16b85f inset;
box-shadow: 0px 0px 0px 12.5px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(18px);
-ms-transform: translateX(18px);
-webkit-transform: translateX(18px);
transform: translateX(18px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-phone input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(10.65px);
-ms-transform: translateX(10.65px);
-webkit-transform: translateX(10.65px);
transform: translateX(10.65px);
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone .switcher {
width: 53px;
height: 30px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone .switcher:hover:active:after {
width: 35.1px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone .switcher:after {
height: 26px;
width: 26px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone input[type=checkbox]:disabled + .switcher:after {
height: 26px !important;
width: 26px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(23px) !important;
-ms-transform: translateX(23px) !important;
-webkit-transform: translateX(23px) !important;
transform: translateX(23px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 15px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 15px #16b85f inset;
box-shadow: 0px 0px 0px 15px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(23px);
-ms-transform: translateX(23px);
-webkit-transform: translateX(23px);
transform: translateX(23px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-phone input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(13.9px);
-ms-transform: translateX(13.9px);
-webkit-transform: translateX(13.9px);
transform: translateX(13.9px);
}
}
@media (max-width: 991px) {
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet .switcher {
width: 31px;
height: 18px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet .switcher:hover:active:after {
width: 18.9px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet .switcher:after {
height: 14px;
width: 14px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet input[type=checkbox]:disabled + .switcher:after {
height: 14px !important;
width: 14px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(13px) !important;
-ms-transform: translateX(13px) !important;
-webkit-transform: translateX(13px) !important;
transform: translateX(13px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 9px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 9px #16b85f inset;
box-shadow: 0px 0px 0px 9px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(13px);
-ms-transform: translateX(13px);
-webkit-transform: translateX(13px);
transform: translateX(13px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-sm-tablet input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(8.1px);
-ms-transform: translateX(8.1px);
-webkit-transform: translateX(8.1px);
transform: translateX(8.1px);
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet .switcher {
width: 43px;
height: 25px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet .switcher:hover:active:after {
width: 28.35px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet .switcher:after {
height: 21px;
width: 21px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet input[type=checkbox]:disabled + .switcher:after {
height: 21px !important;
width: 21px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(18px) !important;
-ms-transform: translateX(18px) !important;
-webkit-transform: translateX(18px) !important;
transform: translateX(18px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 12.5px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 12.5px #16b85f inset;
box-shadow: 0px 0px 0px 12.5px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(18px);
-ms-transform: translateX(18px);
-webkit-transform: translateX(18px);
transform: translateX(18px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-md-tablet input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(10.65px);
-ms-transform: translateX(10.65px);
-webkit-transform: translateX(10.65px);
transform: translateX(10.65px);
}
/* line 9, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet .switcher {
width: 53px;
height: 30px;
}
/* line 12, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet .switcher:hover:active {
-moz-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
-webkit-box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
box-shadow: 0px 0px 0px 13px #e6e6e6 inset;
}
/* line 14, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet .switcher:hover:active:after {
width: 35.1px !important;
}
/* line 18, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet .switcher:after {
height: 26px;
width: 26px;
}
/* line 25, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet input[type=checkbox]:disabled + .switcher:after {
height: 26px !important;
width: 26px !important;
}
/* line 31, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet input[type=checkbox]:disabled:checked + .switcher:after {
-moz-transform: translateX(23px) !important;
-ms-transform: translateX(23px) !important;
-webkit-transform: translateX(23px) !important;
transform: translateX(23px) !important;
}
/* line 35, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet input[type=checkbox]:checked + .switcher {
border-color: #16b85f;
-moz-box-shadow: 0px 0px 0px 15px #16b85f inset;
-webkit-box-shadow: 0px 0px 0px 15px #16b85f inset;
box-shadow: 0px 0px 0px 15px #16b85f inset;
}
/* line 38, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet input[type=checkbox]:checked + .switcher:after {
-moz-transform: translateX(23px);
-ms-transform: translateX(23px);
-webkit-transform: translateX(23px);
transform: translateX(23px);
}
/* line 42, ../sass/_switcher-mixin.scss */
.form-switcher.form-switcher-lg-tablet input[type=checkbox]:checked + .switcher:hover:active:after {
-moz-transform: translateX(13.9px);
-ms-transform: translateX(13.9px);
-webkit-transform: translateX(13.9px);
transform: translateX(13.9px);
}
}
/* SWITCHERY
/*====================================*/
.timesheet-notifs {
border-bottom: 1px solid #F3F5F7;
}
.timesheet-notifs > div {
border-right: 1px solid #F3F5F7;
}
.timesheet-notifs > div:last-child {
border-right: none;
}
.timesheet-notifs h3 {
font-size: 20px;
}
.timesheet-notifs p {
font-size: 12px;
font-weight: 400;
}
.timesheet-notifs div:first-child h3 {
color: #7ED321;
}
.timesheet-notifs div:nth-child(3) h3 {
color: #E35465;
}
.showmore a {
display: block;
width: 100%;
text-align: center;
font-size: 14px;
color: #5E6871;
}
.notif {
display: block;
background: transparent;
overflow: hidden;
zoom: 1;
border-bottom: 1px solid #F3F5F7;
color: #5E6871;
}
.notif .notif-left, .notif .notif-body, .notif .notif-right {
display: table-cell;
vertical-align: top;
}
.notif .notif-left {
padding-right: 10px;
}
.notif .notif-body {
overflow: hidden;
zoom: 1;
padding-top: 2px;
}
.mood .panel-body .mood-btn {
color: #5E6871;
display: block;
padding-top: 25px;
border-radius: 4px;
}
.mood .panel-body .mood-btn:hover {
background: #F3F5F7;
text-decoration: none;
text-decoration: none;
}
.mood .panel-body .mood-btn img {
display: block;
margin: 0 auto;
margin-bottom: 10px;
}
.mood .panel-body .mood-btn.active {
background: #F3F5F7;
}
.img-placeholder {
overflow: hidden;
border-radius: 4px;
border: 1px solid #DBE2E5;
}
.img-placeholder img {
display: block;
width: 80px;
height: auto;
}
.login-or {
position: relative;
font-size: 18px;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.login-or hr {
background-color: #F3F5F7;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.login-or span {
display: block;
position: absolute;
left: 50%;
top: 2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
font-size: 12px;
}
.login-infos {
margin-left: -25px;
margin-right: -25px;
margin-bottom: -31px;
margin-top: 20px;
padding: 16px 20px 5px;
border-radius: 0px 0px 4px 4px;
background: #F3F5F7;
}
.login-infos p {
text-align: center;
color: #C0C9D2;
}
.bg-fs {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
width: 100%;
height: 100%;
}
.bg-fs.overlay-b:before {
content: "";
background: rgba(0, 0, 0, 0.6);
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.floating-button {
display: none;
position: fixed;
z-index: 10;
top: 100px;
right: 13px;
}
@media screen and (max-width: 767px) {
.floating-button {
display: block;
}
}
.floating-button button {
width: 40px;
height: 40px;
font-size: 1.5rem;
border-radius: 50%;
box-shadow: 0px 6px 15px 0px #D0D6DE;
}
.links-misc li a {
font-size: 12px;
color: #C0C9D2;
}
.roster-details {
margin: 10px 0px;
}
.roster-shift-container .roster-shift-timeslot {
margin-bottom: 20px;
}
.roster-shift-container .roster-shift-timeslot .time-line {
position: relative;
display: inline-block;
}
.roster-shift-container .roster-shift-timeslot .time-line:before {
content: "";
width: 21px;
height: 21px;
border-radius: 50%;
border-width: 3px;
border-style: solid;
border-color: #7ED321;
position: absolute;
top: 0px;
left: 0px;
background-color: white;
z-index: 2;
}
.roster-shift-container .roster-shift-timeslot .roster-shift-start {
position: relative;
padding-bottom: 7px;
}
.roster-shift-container .roster-shift-timeslot .roster-shift-start:after {
content: "";
position: absolute;
left: 9px;
top: 0;
height: 100%;
width: 3px;
background-color: #7ED321;
z-index: 1;
}
.roster-shift-container .roster-shift-timeslot .time p {
font-size: 14px;
text-transform: uppercase;
color: #1f313d;
margin: 0;
}
.roster-shift-container .roster-shift-timeslot .time span {
font-size: 10px;
color: #5E6871;
margin-top: 0px;
display: block;
}
.roster-shift-container .roster-shift-timeslot .details .start {
font-size: 12px;
text-transform: uppercase;
color: #1f313d;
margin: 0;
}
.roster-shift-container .roster-shift-timeslot .details p.desc {
font-size: 14px;
line-height: 1.6;
font-weight: 400;
margin: 0;
}
.roster-shift-container .roster-shift-timeslot .details p.note {
font-size: 12px;
line-height: 1.6;
font-weight: 400;
margin: 0;
}
.roster-shift-container .roster-shift-timeslot.break .time-line:before {
border-color: #EDAC24;
}
.roster-shift-container .roster-shift-timeslot.break .roster-shift-start:after {
background-color: #EDAC24;
}
.roster-shift-biddable {
color: #D95820;
font-size: 14px;
line-height: 20px;
font-family: "proxima-soft", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: flex;
}
.roster-shift-biddable .bidding-icon {
align-self: center;
}
.table-sidepanel-container {
margin-bottom: 30px;
}
.table-sidepanel-container .table-sidepanel-inner:first-child {
border-radius: 4px 4px 0px 0px;
}
.table-sidepanel-inner {
display: table;
width: 100%;
background: #F3F5F7;
padding: 5px 5px 5px 10px;
margin-bottom: 1px;
}
.table-sidepanel-inner h6 {
margin: 7px 0px 3px;
font-weight: 700;
}
.table-sidepanel-inner p {
font-weight: 400;
font-size: 14px;
margin: 0;
}
.table-sidepanel-inner div {
vertical-align: top;
}
.table-sidepanel-inner .table-sidepanel-button {
padding-top: 10px;
}
.table-sidepanel-big-button {
display: block;
background: #F3F5F7;
width: 100%;
height: 53px;
padding: 6px;
border-radius: 0px 0px 4px 4px;
}
.table-sidepanel-big-button.active {
border-radius: 0px;
}
.table-sidepanel-big-button button {
width: 100%;
text-align: left;
padding: 10px;
font-weight: bold;
}
.table-sidepanel-big-button button span {
position: relative;
font-size: 18px;
}
.table-sidepanel-big-button button b {
position: relative;
top: -4px;
padding-left: 5px;
}
.table-sidepanel-panel {
padding: 10px;
border: 1px solid #F3F5F7;
border-radius: 4px;
display: none;
}
.table-sidepanel-panel.open {
border-radius: 0px 0px 4px 4px;
display: block;
}
.search-bar {
position: relative;
}
.search-bar .input-control {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.search-bar.active span.kpi-cross {
display: block;
}
.search-bar span.kpi-cross {
display: none;
position: absolute;
right: 0;
top: 0;
font-size: 1rem;
cursor: pointer;
padding: 12px;
}
@media screen and (max-width: 767px) {
.search-bar-container {
position: absolute !important;
left: 0;
right: 50px;
z-index: 10;
}
}
.search-bar-container.show {
display: block !important;
}
.search-results {
background: #FFFFFF;
box-shadow: 0 4px 14px 0 rgba(34, 34, 34, 0.3);
border-radius: 4px;
visibility: hidden;
opacity: 0;
display: none;
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-o-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.search-results.show {
visibility: visible;
opacity: 1;
display: block;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.search-results li {
padding: 0px;
border-bottom: 1px solid #F3F5F7;
}
.search-results li a {
padding: 5px;
display: block;
color: #1f313d;
}
.search-results li a:hover {
background: #F3F5F7;
}
.search-results .user {
padding-top: 5px;
}
.search-results .user b {
font-size: 2rem;
}
.search-results .user-details h5 {
margin-bottom: 3px;
}
li.select2-result-selectable.select2-results:hover {
color: #fc9809;
background-color: #F3F5F7;
}
/*.select2-results li:hover {
color: $brand-primary-color;
background-color: $gray-light;
}*/
.select2-results__option--highlighted, .select2-highlighted, .select2-results__option[aria-selected=true] {
color: #fc9809 !important;
background-color: #F3F5F7 !important;
}
/* Context panel/ modal; specific positioning, make modal look like context panel
Needs to override modal for correct positioning */
.modal.contextPanelModal {
width: 500px;
left: auto;
right: 0;
height: 100%;
margin-right: 0;
}
.modal.contextPanelModal .modal-dialog {
width: 500px;
}
.modal.contextPanelModal.fade.in {
/*Auto or 0 doesn't work.'*/
top: 1px;
}
.modal.contextPanelModal .modal-footer {
background-color: white;
border: none;
}
.modal.contextPanelModal .modal-header {
padding: 9px 15px;
width: 470px;
}
.modal.contextPanelModal .modal-header .close {
margin-top: 2px;
}
@media (min-width: 768px) {
.modal.contextPanelModal .modal-dialog {
margin: 0;
}
}
.bs2 .row > [class*=span] {
margin-left: 0px;
box-sizing: border-box;
padding: 0px 7.5px;
}
div.span1,
div.span2,
div.span3,
div.span4,
div.span5,
div.span6,
div.span7,
div.span8,
div.span9,
div.span10,
div.span11,
div.span12 {
float: left;
box-sizing: border-box;
}
div.span12 {
width: 100% !important;
}
div.span11 {
width: 91.6666666667% !important;
}
div.span10 {
width: 83.3333333333% !important;
}
div.span9 {
width: 75% !important;
}
div.span8 {
width: 66.6666666667% !important;
}
div.span7 {
width: 58.3333333333% !important;
}
div.span6 {
width: 50% !important;
}
div.span5 {
width: 41.6666666667% !important;
}
div.span4 {
width: 33.3333333333% !important;
}
div.span3 {
width: 25% !important;
}
div.span2 {
width: 16.6666666667% !important;
}
div.span1 {
width: 8.3333333333% !important;
}
@media (max-width: 767px) {
div.span1,
div.span2,
div.span3,
div.span4,
div.span5,
div.span6,
div.span7,
div.span8,
div.span9,
div.span10,
div.span11,
div.span12 {
float: none;
width: 100% !important;
}
}
.visible-xs {
display: none !important;
}
@media screen and (max-width: 767px) {
.visible-xs {
display: block !important;
}
}
/* BOOTSTRAP'S COMPONENTS */
/*======================================*/
a {
color: #fc9809;
}
a:hover {
color: rgb(207.4698795181, 123.1325301205, 2.5301204819);
text-decoration: underline;
}
a:focus {
color: rgb(207.4698795181, 123.1325301205, 2.5301204819);
}
a.underline {
text-decoration: underline;
}
a.underline:hover {
text-decoration: underline;
}
a.muted {
color: #5E6871;
}
a.muted:hover, a.muted:focus, a.muted:active {
color: rgb(70.8405797101, 78.3768115942, 85.1594202899) !important;
text-decoration: none !important;
}
a.disabled {
opacity: 0.4;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 600;
}
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-weight: 600;
line-height: 1;
color: #999999;
}
.h1.subheading, .h2.subheading, .h3.subheading, .h4.subheading, .h5.subheading, .h6.subheading, h1.subheading, h2.subheading, h3.subheading, h4.subheading, h5.subheading, h6.subheading {
font-weight: 400;
}
.row {
margin-right: 7.5px;
margin-left: 7.5px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 7.5px;
padding-left: 7.5px;
}
.btn {
display: inline-block;
padding: 9px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #5E6871;
}
.btn.btn-sm {
padding: 4px 12px;
font-size: 14px;
}
.btn.btn-xs {
padding: 3px 12px;
font-size: 12px;
}
.btn:focus, .btn:active {
border-color: transparent !important;
outline: none !important;
}
.btn-default, .btn-page-header {
color: #5E6871;
background-color: #F3F5F7;
border-color: rgb(227.7, 232.25, 236.8) !important;
}
.btn-default:hover, .btn-page-header:hover {
background-color: rgb(227.7, 232.25, 236.8);
border-color: rgb(227.7, 232.25, 236.8) !important;
}
.btn-default:focus, .btn-page-header:focus, .btn-default:active, .btn-page-header:active {
background-color: rgb(227.7, 232.25, 236.8) !important;
border-color: rgb(227.7, 232.25, 236.8) !important;
outline: none !important;
}
.btn-primary {
color: #fff;
background-color: #fc9809;
}
.btn-primary:hover {
background-color: rgb(207.4698795181, 123.1325301205, 2.5301204819);
border-color: transparent;
}
.btn-primary:focus, .btn-primary:active {
background-color: rgb(207.4698795181, 123.1325301205, 2.5301204819) !important;
border-color: transparent !important;
outline: none !important;
}
.btn-success {
color: #fff;
background-color: #7ED321;
}
.btn-success:hover {
background-color: rgb(99.6639344262, 166.8975409836, 26.1024590164);
border-color: transparent;
}
.btn-success:focus, .btn-success:active {
background-color: rgb(99.6639344262, 166.8975409836, 26.1024590164) !important;
border-color: transparent !important;
outline: none !important;
}
.btn-danger {
color: #fff;
background-color: #E35465;
}
.btn-danger:hover {
background-color: rgb(219.824120603, 40.175879397, 61.5326633166);
border-color: transparent;
}
.btn-danger:focus, .btn-danger:active {
background-color: rgb(219.824120603, 40.175879397, 61.5326633166) !important;
border-color: transparent !important;
outline: none !important;
}
.btn-warning {
color: #fff;
background-color: #EDAC24;
}
.btn-warning:hover {
background-color: rgb(205.1392405063, 144.253164557, 16.8607594937);
border-color: transparent;
}
.btn-warning:focus, .btn-warning:active {
background-color: rgb(205.1392405063, 144.253164557, 16.8607594937) !important;
border-color: transparent !important;
outline: none !important;
}
.btn-info {
color: #fff;
background: #17A2BF;
}
.btn-info:hover {
background-color: rgb(17.5186915888, 123.3925233645, 145.4813084112);
border-color: transparent;
}
.btn-info:focus, .btn-info:active {
background-color: rgb(17.5186915888, 123.3925233645, 145.4813084112) !important;
border-color: transparent !important;
outline: none !important;
}
.btn-transparent {
background: transparent !important;
color: #1f313d;
border: none !important;
font-weight: bold;
}
.btn-transparent:hover {
color: rgb(13.8152173913, 21.8369565217, 27.1847826087);
}
.btn-transparent:focus, .btn-transparent:active {
outline: none !important;
border: none !important;
box-shadow: none;
}
.btn-transparent.red {
color: #E35465;
}
.btn-transparent.red:hover {
color: rgb(219.824120603, 40.175879397, 61.5326633166);
}
.btn-social {
position: relative;
padding-left: 44px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-social > i {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50px;
line-height: 43px;
font-size: 1.3em;
text-align: center;
}
.btn-social.facebook {
background: #3B5998;
color: white;
}
.btn-social.outlook {
background: #0173C6;
color: white;
}
.btn-social.google {
background: #DD4B39;
color: white;
}
.btn-page-header {
background-color: #F8FAFB;
width: 42px;
border: none;
outline: none;
border-radius: 15%;
}
.btn-page-header:hover {
background-color: #EEF2F4;
}
.btn-page-header:focus {
background-color: #EAEBEC;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-page-header.btn-page-header-left {
border-top-right-radius: 0%;
border-bottom-right-radius: 0%;
margin-right: 1px;
border-right: 1px solid #EEF2F4;
}
.btn-page-header.btn-page-header-centre {
border-radius: 0%;
}
.btn-page-header.btn-page-header-right {
border-top-left-radius: 0%;
border-bottom-left-radius: 0%;
}
.btn-page-header .icon-page-header {
color: #BAC4CE;
padding-left: 4px;
}
.breadcrumb {
padding: 8px 15px;
margin-top: 12px;
list-style: none;
background-color: #FFF;
border-radius: 4px;
}
.breadcrumb a {
color: #fc9809;
}
.breadcrumb > .active {
color: #5E6871;
}
.breadcrumb-container .breadcrumb {
margin: 0 0;
}
.text-muted, a.text-muted:hover, a.text-muted:focus {
color: #5E6871;
}
.text-warning {
color: #EDAC24;
}
.text-primary {
color: #fc9809;
}
.bg-primary {
background-color: #fc9809;
}
.bg-warning {
background-color: #EDAC24;
}
.list-group {
margin: 0;
}
.list-group .list-group-item {
position: relative;
display: block;
padding: 15px 15px;
margin-bottom: 0px;
background-color: #F8FAFB;
border: 1px solid #ddd;
border: 0px solid #F3F5F7;
border-bottom: 1px solid #F3F5F7;
}
.list-group .list-group-item:first-child {
border-radius: 0px;
}
.list-group .list-group-item:nth-child(odd) {
background-color: #FFFFFF;
}
.list-group .list-group-item.active {
background-color: #fc9809;
border-color: #fc9809;
}
.list-group .list-group-item .pull-right {
position: relative;
top: -2px;
}
.list-group .list-group-item .pull-right .btn-xs {
padding: 3px 12px;
font-size: 12px;
}
.table {
margin-bottom: 0px;
color: #5E6871;
}
.table thead tr th, .table thead tr td, .table tbody tr th, .table tbody tr td {
padding: 10px 15px;
border-bottom: 1px solid #E5EBF2;
}
.table thead tr th, .table tbody tr th {
color: #1f313d;
}
.table thead tr td, .table tbody tr td {
font-weight: 400;
}
.table.table-payrun thead tr th, .table.table-payrun thead tr td, .table.table-payrun tbody tr th, .table.table-payrun tbody tr td {
padding: 9px 6px;
font-size: 13px;
letter-spacing: -0.4px;
}
@media screen and (max-width: 1050px) {
.table.table-payrun thead tr th, .table.table-payrun thead tr td, .table.table-payrun tbody tr th, .table.table-payrun tbody tr td {
padding: 2px 4px;
font-size: 12px;
letter-spacing: -0.5px;
vertical-align: middle;
}
}
.table.table-payrun thead tr th h5, .table.table-payrun thead tr td h5, .table.table-payrun tbody tr th h5, .table.table-payrun tbody tr td h5 {
font-size: 13px;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 0px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: none;
}
}
.label {
display: inline;
padding: 0.2em 0.6em 0.3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.35em;
text-transform: uppercase;
}
.label.label-default {
background-color: #C0C9D2;
}
.label.label-primary {
background-color: #fc9809;
}
.label.label-success {
background-color: #7ED321;
}
.label.label-warning {
background-color: #EDAC24;
}
.label.label-danger {
background-color: #E35465;
}
.label.label-info {
background-color: #17A2BF;
}
.label.label-success-v2 {
background: rgba(126, 211, 33, 0.5);
color: #558E16;
}
.label.label-warning-v2 {
background: #F6D591;
color: #825D11;
}
.label.label-danger-v2 {
background: rgba(227, 84, 101, 0.5);
color: #A6313F;
}
.label.label-normal-v2 {
background: #F0F3F7;
color: #5E6871;
}
.badge {
display: inline-block;
padding: 0.25em 0.6em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
.badge.badge-default {
background-color: #C0C9D2;
}
.badge.badge-primary, .badge.badge-page-header {
background-color: #fc9809;
}
.badge.badge-success {
background-color: #7ED321;
}
.badge.badge-warning {
background-color: #EDAC24;
}
.badge.badge-danger {
background-color: #E35465;
}
.badge.badge-page-header {
padding: 2px 5px;
border-radius: 50%;
top: -12px;
right: 16px;
}
.form-horizontal .form-group {
margin-right: -7.5px;
margin-left: -7.5px;
}
.form-horizontal .control-label {
padding-top: 11px;
}
.form-horizontal .form-control-static {
padding-top: 11px;
padding-bottom: 0;
}
.form-control {
box-shadow: none;
height: 40px;
border: 1px solid #DBE2E5;
}
.form-control:focus {
border-color: #fc9809;
}
.form-control.input-sm {
height: 30px;
}
.form-group.form-footer {
margin: 0;
text-align: right;
border-top: 1px solid #F3F5F7;
margin-right: -15px;
margin-left: -15px;
padding: 15px 15px 5px 15px;
}
.form-group.form-footer.without-line {
border-top: 0px;
padding-top: 0px;
}
.input-group.validated input.form-control {
border: 1px solid #7ED321;
}
.input-group.validated .input-group-addon {
background: #7ED321;
border: 1px solid #7ED321;
color: white;
}
.input-group.refused input.form-control {
border: 1px solid #E35465;
}
.input-group.refused .input-group-addon {
background: #E35465;
border: 1px solid #E35465;
color: white;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #F3F5F7;
border: 1px solid #DBE2E5;
vertical-align: middle !important;
}
label {
color: #5E6871;
font-weight: 400;
}
.dropdown-menu {
font-size: 14px;
border: none;
background: #FFFFFF;
box-shadow: 0px 4px 14px 0px rgba(34, 34, 34, 0.3);
border-radius: 4px;
margin: 0px 5px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #fc9809, #fc9809);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fc9809), to(#fc9809));
background-image: -webkit-linear-gradient(top, #fc9809, #fc9809);
background-image: -o-linear-gradient(top, #fc9809, #fc9809);
background-image: linear-gradient(to bottom, #fc9809, #fc9809);
background-repeat: repeat-x;
}
.alert-default {
color: #555;
background-color: #F3F5F7;
border: 1px solid #DBE2E5;
}
.navbar-form {
margin-right: 0px;
margin-left: 0px;
}
.popover {
font-family: "proxima-soft", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {
color: #ffffff;
background-color: rgb(232.6626506024, 138.0843373494, 2.8373493976);
}
.pagination li a, .pagination li span {
padding: 8px 14px;
color: #5E6871;
border: 1px solid #DBE2E5;
}
.pagination li a.active, .pagination li span.active {
background: #D3D7DB;
color: #fc9809;
font-weight: bold;
}
.has-error .form-control, .has-error .form-control:focus {
border-color: #E35465;
}
.has-error .magic-checkbox + label, .has-error .magic-radio + label {
color: #E35465;
}
.panel {
color: #5E6871;
}
.panel .panel-header {
position: relative;
height: 50px;
padding: 0;
color: #1F313D;
border-bottom: 1px solid transparent;
background-color: #DBE2E5;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
border-color: #C0C9D2;
}
.select2-container--bootstrap .select2-results__group {
white-space: pre-wrap;
}
.select2-results__option {
color: #fc9809;
}
span.select2-selection.select2-selection--multiple {
border: 1px solid #DBE2E5;
box-shadow: none;
}
.select2-results__option.select2-results__option--highlighted {
color: #ffffff !important;
background-color: #fc9809 !important;
}
.select2-container--open .select2-selection.select2-selection--single {
background-color: rgb(243, 245, 247);
}
.panel-default > .panel-header {
background-color: #F0F3F7;
}
.visible-xs-table-cell {
display: none !important;
}
@media screen and (max-width: 767px) {
.visible-xs-table-cell {
display: table-cell !important;
}
}
.list-style-none li {
list-style-type: none;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.inline-block.top {
vertical-align: top;
}
.media-object {
display: block;
}
.block {
display: block;
}
/*======================================*/
.border-0 {
border: 0px;
}
.border-bottom-0 {
border-bottom: 0;
}
.border-top-0 {
border-top: 0;
}
/*======================================*/
.marg-no {
margin: 0;
}
.marg-top {
margin-top: 10px;
}
.marg-top.big {
margin-top: 25px;
}
.marg-btm {
margin-bottom: 10px;
}
.marg-btm.big {
margin-bottom: 25px;
}
.marg-lft {
margin-left: 10px;
}
.marg-lft.big {
margin-left: 25px;
}
.marg-rgt {
margin-right: 10px;
}
.marg-rgt.big {
margin-right: 25px;
}
/* CONTENT PADDING */
/*======================================*/
.pad-no {
padding: 0;
}
.pad-all {
padding: 10px 15px;
}
.pad-top {
padding-top: 15px;
}
.pad-btm {
padding-bottom: 15px;
}
.pad-lft {
padding-left: 15px;
}
.pad-rgt {
padding-right: 15px;
}
.pad-hor {
padding-left: 15px;
padding-right: 15px;
}
.pad-ver {
padding-top: 15px;
padding-bottom: 15px;
}
.pad-no-left {
padding-left: 0;
}
.pad-no-right {
padding-right: 0;
}
.text-overflow {
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.indent-1 {
padding-left: 20px !important;
}
.indent-2 {
padding-left: 40px;
}
.icon {
text-decoration: none !important;
}
.icon-big {
font-size: 3rem;
}
.icon-md {
font-size: 2rem;
}
.icon-sm {
font-size: 1rem;
}
.icon-btn {
cursor: pointer;
}
.colour-brand {
color: #fc9809 !important;
}
.colour-red {
color: #E35465 !important;
}
.colour-green {
color: #7ED321 !important;
}
.colour-yellow {
color: #EDAC24 !important;
}
.colour-gray {
color: #5E6871;
}
.colour-gray-light {
color: #F3F5F7;
}
.with-caret {
padding-right: 0 !important;
}
.font-light {
font-weight: 200 !important;
}
.font-semi {
font-weight: 500 !important;
}
.font-bold {
font-weight: 700 !important;
}
.multiple-columns .form-group {
padding-right: 0;
}
.multiple-columns .form-group:first-child {
padding-left: 0;
}
.multiple-columns .form-group:last-child {
padding-right: 0;
}
.row-no-padding [class*=col-] {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.vh-100 {
height: 100vh;
}
.secondary-nav {
z-index: 100;
background-color: #F0F3F7;
border: none;
padding: 0;
}
.secondary-nav a {
color: #5E6871;
}
.secondary-nav a.router-link-exact-active {
color: #ffffff;
background-color: #fc9809;
}
.secondary-nav-header {
padding: 18px 0 6px 18px;
color: #5E6871;
font-weight: 600;
}
.nav-link {
padding: 3px 18px;
display: block;
}
.nav-link:hover, .nav-link:focus {
text-decoration: none;
}
.nav-link:hover {
background-color: #E5EBF2;
}
.nav-icon {
display: inline-block;
min-width: 1rem;
}