:root {
--leftbarwidth: 35px;
--leftbarexpanded: 170px;
--headerbarheight: 35px;
--whitefilter: brightness(0) invert(1);
--offlinesvg: url("data:image/svg+xml,");
}
@media (prefers-color-scheme: light) {
:root {
--mainbody: #f2f2f2;
--underline: #000;
--textcolor: #000;
--menucolor: #fff;
--highlightbg: #ebebeb;
--colorbg: #F8F8F8;
--blockcontenthdrbg: #0088ce;
--blockcontenthdrtext: #fff;
--lighterbg: #dff4ff;
--darkerbg: #005294;
--headerbg: #fff;
--qabgcolor:#e8ef8a;
--dismisscolor: #04b8ff;
--themesvgcolourfilter: brightness(0) saturate(100%);
--dnatasvg: url("data:image/svg+xml,");
--usersvg: url("data:image/svg+xml,");
--homesvg: url("data:image/svg+xml,");
--agentsvg: url("data:image/svg+xml,");
--lossesssvg: url("data:image/svg+xml,");
--crisissvg: url("data:image/svg+xml,");
--refundssvg: url("data:image/svg+xml,");
--staffcommsvg: url("data:image/svg+xml,");
--rexsvg: url("data:image/svg+xml,");
--coressvg: url("data:image/svg+xml,");
--overridessvg: url("data:image/svg+xml,");
--dashsvg: url("data:image/svg+xml,");
--responsibilitysvg: url("data:image/svg+xml,");
--ittimesheetssvg: url("data:image/svg+xml,");
--dispatcheroldsvg: url("data:image/svg+xml,");
--dispatchersvg: url("data:image/svg+xml,");
--adminsvg: url("data:image/svg+xml,");
--copysvg: url("data:image/svg+xml,");
--appssvg: url("data:image/svg+xml,");
--superuserssvg: url("data:image/svg+xml,");
--icon-color: black;
}
}
@media (prefers-color-scheme: dark) {
:root {
--mainbody: #111111;
--underline: #fff;
--textcolor: #fff;
--menucolor: #000;
--highlightbg: #555;
--colorbg: #212529;
--blockcontenthdrbg: #0088ce;
--blockcontenthdrtext: #fff;
--darkerbg: #005294;
--lighterbg: #dff4ff;
--headerbg: #000;
--qabgcolor:#f34646;
--dismisscolor: #04b8ff;
--themesvgcolourfilter: brightness(0) saturate(100%) invert(100%);
--dnatasvg: url("data:image/svg+xml,");
--usersvg: url("data:image/svg+xml,");
--homesvg: url("data:image/svg+xml,");
--agentsvg: url("data:image/svg+xml,");
--lossesssvg: url("data:image/svg+xml,");
--crisissvg: url("data:image/svg+xml,");
--refundssvg: url("data:image/svg+xml,");
--staffcommsvg: url("data:image/svg+xml,");
--rexsvg: url("data:image/svg+xml,");
--coressvg: url("data:image/svg+xml,");
--overridessvg: url("data:image/svg+xml,");
--dashsvg: url("data:image/svg+xml,");
--responsibilitysvg: url("data:image/svg+xml,");
--ittimesheetssvg: url("data:image/svg+xml,");
--dispatcheroldsvg: url("data:image/svg+xml,");
--dispatchersvg: url("data:image/svg+xml,");
--adminsvg: url("data:image/svg+xml,");
--copysvg: url("data:image/svg+xml,");
--appssvg: url("data:image/svg+xml,");
--superuserssvg: url("data:image/svg+xml,");
--icon-color: white;
}
.block-content-header.qa .offline-icon::before {
filter: var(--whitefilter);
}
}
.dnata-icon::before {
display: inline-block;
content: var(--dnatasvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.dnatafull-icon::before {
display: inline-block;
content: var(--dnatafullsvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
padding-top: 10px
}
body:not(.offline) .offline-icon {
display: none;
}
.offline-icon::before {
display: inline-block;
content: var(--offlinesvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.user-icon::before {
display: inline-block;
content: var(--usersvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.home-icon::before {
display: inline-block;
content: var(--homesvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.agent-icon::before {
display: inline-block;
content: var(--agentsvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.losses-icon::before {
display: inline-block;
content: var(--lossesssvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.crisis-icon::before {
display: inline-block;
content: var(--crisissvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.refunds-icon::before {
display: inline-block;
content: var(--refundssvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.staffcomm-icon::before {
display: inline-block;
content: var(--staffcommsvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.rex-icon::before {
display: inline-block;
content: var(--rexsvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.cores-icon::before {
display: inline-block;
content: var(--coressvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.overrides-icon::before {
display: inline-block;
content: var(--overridessvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.dash-icon::before {
display: inline-block;
content: var(--dashsvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.responsibility-icon::before {
display: inline-block;
content: var(--responsibilitysvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.ittimesheets-icon::before {
display: inline-block;
content: var(--ittimesheetssvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.dispatcher-icon::before {
display: inline-block;
content: var(--dispatchersvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.admin-icon::before {
display: inline-block;
content: var(--adminsvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.copy-icon::after {
display: inline-block;
content: var(--copysvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
margin-left: 5px;
}
.apps-icon::after {
display: inline-block;
content: var(--appssvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.superuser-icon::after {
display: inline-block;
content: var(--superuserssvg);
vertical-align: -.125em;
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
@media (min-width: 768px) {
.left-bar.expanded .portal-icon {
margin-right: 11px;
}
.left-bar.expanded {
width: var(--leftbarexpanded);
}
.left-bar-li.exclude {
opacity: 0.4;
}
.left-bar:not(.expanded):hover .left-bar-li {
padding-left: 10px;
}
.left-bar:not(.expanded):not(:hover) span.hide-expanded {
opacity: 0;
visibility: hidden;
width: 0px;
}
.left-bar:not(.expanded):hover {
width: var(--leftbarexpanded);
}
.left-bar:not(.expanded):not(:hover)
, .left-bar:not(.expanded):not(:hover) .left-bar-li {
width: var(--leftbarwidth) !important;
padding-right: 0px !important;
}
.left-bar:not(.expanded):hover div.left-bar-li:not(.exclude) .hide-expanded {
opacity: 1;
visibility: visible;
width: unset;
}
/* .left-bar:not(.expanded):hover div.left-bar-li.exclude .hide-expanded {
opacity: 0.4;
visibility: visible;
width: unset;
} */
.left-bar:not(.expanded):not(.exclude):hover .hide-expanded {
opacity: 1;
visibility: visible;
width: unset;
}
/* .left-bar.exclude:not(.expanded):hover .hide-expanded {
opacity: 0.4;
visibility: visible;
width: unset;
} */
/* .left-bar:not(.expanded):hover .left-bar-apps
, .left-bar.expanded .left-bar-apps {
width: 100vw;
pointer-events: all;
} */
/* .left-bar:not(.expanded) .hide-expanded {
opacity: 0;
transition: opacity 0.2s ease-in-out;
} */
.left-bar:not(.expanded) .dropup .hide-expanded {
display: none;
}
.block-content {
position: absolute;
top: 0;
overflow-x: hidden;
height: 100vh;
left: var(--leftbarwidth);
width: calc(100vw - var(--leftbarwidth));
}
.block-content.nosidebar {
left: 0;
width: 100vw;
}
.block-content:not(.expanded):not(.nosidebar) {
left: var(--leftbarwidth);
width: calc(100vw - var(--leftbarwidth));
}
.block-content:not(.nosidebar).expanded {
left: var(--leftbarexpanded);
width: calc(100vw - var(--leftbarexpanded));
}
.left-bar-overlay:not(.expanded) {
position: fixed;
top: 0;
left: var(--leftbarwidth);
width: calc(100% - var(--leftbarwidth));
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
z-index: 1029;
}
.left-bar:not(.expanded):hover ~ .left-bar-overlay {
opacity: 1;
pointer-events: auto;
}
body:has(.left-bar.expanded) #offline-message {
left: calc(var(--leftbarexpanded) + 20px);
}
body:has(.left-bar:not(.expanded)) #offline-message {
left: calc(var(--leftbarwidth) + 20px);
}
}
@media (max-width: 767.98px) {
.left-bar:not(:hover) span.hide-expanded {
opacity: 0;
visibility: hidden;
width: 0px;
}
.left-bar .left-bar-li.exclude {
opacity: 0.4;
}
.left-bar:not(:hover) {
width: var(--leftbarwidth);
}
.left-bar:hover {
width: var(--leftbarexpanded);
}
.left-bar:hover .left-bar-li {
padding-left: 10px;
}
.left-bar:not(:hover)
, .left-bar:not(:hover) .left-bar-li {
width: var(--leftbarwidth) !important;
padding-right: 0px !important;
}
/* .left-bar:hover .left-bar-apps {
width:100vw;
pointer-events: all;
} */
.block-content:not(.nosidebar) {
position: relative;
left: var(--leftbarwidth);
width: calc(100vw - var(--leftbarwidth));
}
.block-content.nosidebar {
position: relative;
left: 0;
width: 100vw;
}
.left-bar-overlay {
position: fixed;
top: 0;
left: var(--leftbarwidth);
width: calc(100% - var(--leftbarwidth));
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
z-index: 1029;
}
.left-bar:hover ~ .left-bar-overlay {
opacity: 1;
pointer-events: auto;
}
#offline-message {
left: calc(var(--leftbarwidth) + 20px);
}
}
.block-content.expanded {
position: absolute;
top: 0;
overflow-x: auto;
height: 100vh;
}
.left-bar:hover .portal-icon {
margin-right: 11px;
}
.left-bar {
transition: all 0.5s;
z-index: 1030 !important;
position: fixed;
top: 0;
left: 0;
height: 100vh;
background-color: var(--colorbg);
font-size: smaller;
}
.left-bar a {
text-decoration: none;
}
span.hide-expanded {
white-space: nowrap;
transition: opacity 0.5s ease-in-out 0.3s;
padding-left: 10px;
text-decoration: none;
color: var(--underline);
}
div:not(.exclude) .app-icon
, div:not(.exclude) .hide-expanded
, div.exclude.request .app-icon
, div.exclude.request .hide-expanded {
cursor: pointer;
}
div.exclude:not(.request) .app-icon
, div.exclude:not(.request) .hide-expanded {
cursor: not-allowed;
/* opacity: 0.4 !important; */
}
.left-bar .app-icon {
padding-left: 5px;
}
button:hover .underline-animate::after
, a:hover .underline-animate::after {
width: 100%;
left: 0;
}
.underline-animate {
color: var(--underline);
display: inline-block;
padding-bottom: 2px;
position: relative;
text-decoration: none;
}
.underline-animate:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: var(--underline);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.wrapper
, .left-bar-dropdown {
position: relative;
}
.left-bar-dropdown
, .left-bar-li {
display: inline-block;
width: fit-content;
}
.left-bar-li {
display: inline-block;
padding-left: 5px;
padding-right: 10px;
transition: all 0.3s ease-in-out;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
.left-bar-menu {
visibility: hidden;
display: none;
position: absolute;
background-color: var(--menucolor);
color: var(--textcolor) !important;
border: 1px;
border-radius: 5px;
border-color: var(--underline);
border-style:solid;
padding-top: 15px;
padding-bottom: 15px;
z-index: 1031;
opacity: 0;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
overflow:hidden
}
.left-bar-menu a {
color: var(--textcolor) !important;
}
.left-bar-menu:not(.logout) {
top: 0;
left: 100%;
}
.left-bar-menu.logout {
bottom: 100%;
left: 75%;
}
.logout .left-bar-li span.text-truncate {
max-width: 150px;
}
.left-bar-menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left-bar-menu li a {
padding-left: 15px !important;
padding-right: 15px !important;
}
.left-bar-menu li:hover *
, .left-bar-li:hover
, .left-bar-menu:hover ~ .left-bar-li {
/* background-color: var(--highlightbg); */
background: linear-gradient(to right, var(--highlightbg) 70%, var(--colorbg) 100%);
}
.left-bar-dropdown:hover .left-bar-menu
, .left-bar-menu:hover {
opacity: 1;
visibility: visible;
display: block;
}
.left-bar-expander {
position: absolute;
bottom: calc(50% - 15px);
left: 100%;
background-color: white;
border: 1px solid #ccc;
border-radius: 0px 10px 10px 0px;
z-index: 1030;
width: 20px;
height: 30px;
}
.left-bar-apps li {
position: relative;
/* width: fit-content */
}
/* .left-bar-apps {
flex-wrap: nowrap;
overflow-y: auto ;
scrollbar-width: none;
-ms-overflow-style: none;
}
.left-bar-apps::-webkit-scrollbar {
display: none;
} */
.block-content-header {
position: relative;
/* top: 0;
left: 0; */
width: 100%;
background-color: var(--headerbg);
height: var(--headerbarheight);
/* padding-left: var(--leftbarwidth); */
color: #fff;
font-size: medium;
border-bottom: 2px solid var(--blockcontenthdrbg);
}
.block-content-header.qa {
background-color: var(--qabgcolor);
}
.block-content-body {
padding-left: 0px;
padding-right: 0px;
max-height: calc(100% - var(--headerbarheight));
position: relative;
width: 100%;
height: calc(100vh - var(--headerbarheight));
}
.center-svg {
padding-top: 3px;
}
.center-bi {
padding-top: 3px;
color: var(--textcolor);
}
.left-bar-apps {
flex-wrap: nowrap;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
width: fit-content;
padding-bottom:150px;
}
.left-bar-apps:has(.left-bar-li:hover)
, .left-bar-apps:has(.left-bar-menu:hover) {
width: 100vw;
}
.left-bar-apps::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
flex-wrap: nowrap;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.copy-icon {
cursor: pointer;
}
.sidebar-link {
color: var(--textcolor);
}
#offline-message {
position: absolute;
bottom: 20px;
z-index: 3000;
background-color: var(--darkerbg);
color: var(--blockcontenthdrtext);
padding: 5px 10px 5px 20px;
border-radius: 50px;
border-color: var(--darkerbg);
border-style: solid;
border-width: 1px;
}
#offline-message.hide
, body:not(.offline) #offline-message {
display: none !important;
}
#offline-message button {
color: var(--dismisscolor);
}
#offline-message span.offline-icon {
filter: var(--whitefilter);
}