/* Copyright notice */
/* Copyright 2024, TELESTAT */
/* External resources */
@import url("/assets/vendors/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css");
@import url("/assets/vendors/flag-icons-7.0.0/css/flag-icons.min.css");
/* VARIABLES */
:root {
/* base color variables */
--color-red--base: #DB1D6D;
--color-silver--base: #C0C3C7;
--color-blue--base: #4C4E67;
--color-white--base: #FFFFFF;
--color-green--base: #9DD147;
--color-orange--base: #FCB114;
--color-black--base: #303132;
/* altertative base 'silver/gray' color variable */
--color-silver--alt: #F0F4F9;
/* base state\info color variables */
--color-warning: var(--color-orange--base);
--color-error: var(--color-red--base);
--color-success: var(--color-green--base);
/* RED color tints - lighter versions of the color (addition of white) */
--color-red--light-10: #DF347C;
--color-red--light-20: #E24A8A;
--color-red--light-30: #E66199;
--color-red--light-40: #E977A7;
--color-red--light-50: #ED8EB6;
--color-red--light-60: #F1A5C5;
--color-red--light-70: #F4BBD3;
--color-red--light-80: #F8D2E2;
--color-red--light-90: #FBE8F0;
/* RED color shades - darker versions of the color (adding black) */
--color-red--dark-10: #C51A62;
--color-red--dark-20: #AF1757;
--color-red--dark-30: #99144C;
--color-red--dark-40: #831141;
--color-red--dark-50: #6E0F37;
--color-red--dark-60: #580C2C;
--color-red--dark-70: #420921;
--color-red--dark-80: #2C0616;
--color-red--dark-90: #16030B;
/* SILVER color tints - lighter versions of the color (addition of white) */
--color-silver--light-10: #D8DCE0;
--color-silver--light-20: #F2F5FA;
--color-silver--light-30: #F3F6FA;
--color-silver--light-40: #F5F7FB;
--color-silver--light-50: #F6F8FB;
--color-silver--light-60: #F8FAFC;
--color-silver--light-70: #F9FBFD;
--color-silver--light-80: #FBFCFD;
--color-silver--light-90: #FCFDFE;
/* SILVER color shades - darker versions of the color (adding black) */
--color-silver--dark-10: #A8ABAE;
--color-silver--dark-20: #909295;
--color-silver--dark-30: #787A7D;
--color-silver--dark-40: #606264;
--color-silver--dark-50: #48494B;
--color-silver--dark-60: #303132;
--color-silver--dark-70: #181819;
--color-silver--dark-80: #0C0C0C;
--color-silver--dark-90: #000000;
/* BLUE color tints - lighter versions of the color (addition of white) */
--color-blue--light-10: #5E6076;
--color-blue--light-20: #707185;
--color-blue--light-30: #828395;
--color-blue--light-40: #9495A4;
--color-blue--light-50: #A6A7B3;
--color-blue--light-60: #B7B8C2;
--color-blue--light-70: #C9CAD1;
--color-blue--light-80: #DBDCE1;
--color-blue--light-90: #EDEDF0;
/* BLUE color shades - darker versions of the color (adding black) */
--color-blue--dark-10: #44465D;
--color-blue--dark-20: #3D3E52;
--color-blue--dark-30: #353748;
--color-blue--dark-40: #2E2F3E;
--color-blue--dark-50: #262734;
--color-blue--dark-60: #1E1F29;
--color-blue--dark-70: #17171F;
--color-blue--dark-80: #0F1015;
--color-blue--dark-90: #08080A;
/* SILVER-ALT color tints - lighter versions of the color (addition of white) */
--color-silver--alt-light-10: #F2F5FA;
--color-silver--alt-light-20: #F3F6FA;
--color-silver--alt-light-30: #F5F7FB;
--color-silver--alt-light-40: #F6F8FB;
--color-silver--alt-light-50: #F8FAFC;
--color-silver--alt-light-60: #F9FBFD;
--color-silver--alt-light-70: #FBFCFD;
--color-silver--alt-light-80: #FCFDFE;
--color-silver--alt-light-90: #FEFEFE;
/* SILVER-ALT color shades - darker versions of the color (adding black) */
--color-silver--alt-dark-10: #D8DCE0;
--color-silver--alt-dark-20: #C0C3C7;
--color-silver--alt-dark-30: #A8ABAE;
--color-silver--alt-dark-40: #909295;
--color-silver--alt-dark-50: #787A7D;
--color-silver--alt-dark-60: #606264;
--color-silver--alt-dark-70: #48494B;
--color-silver--alt-dark-80: #303132;
--color-silver--alt-dark-90: #181819;
/* Text color variables */
--text-color--base: var(--color-black--base);
--text-color--secondary: var(--color-silver--dark-40);
--text-color--muted: var(--color-silver--dark-10);
--text-color--light: var(--color-silver--alt-light-30);
--text-color--red: var(--color-red--base);
/* Font size variables */
--font-size--11: 0.688rem;
--font-size--12: 0.75rem;
--font-size--14: 0.875rem;
--font-size--16: 1rem;
--font-size--20: 1.25rem;
/* Font weigth variables */
--font-weight--light: 300;
--font-weight--regular: 400;
--font-weight--medium: 500;
--font-weight--semibold: 600;
/* Font familys variables */
--font-family--montserrat: 'Montserrat', sans-serif;
--font-family--roboto: 'Roboto';
/* Sidebar icons */
/* https://www.svgbackgrounds.com/tools/svg-to-css/ */
--sidebar-menu-icon--logo: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAyMyAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjIwNDkgMzIuMDg4QzIwLjU3MjkgMzMuMDE2IDE4LjM0ODkgMzMuNDggMTUuNTMyOSAzMy40OEMxMS44NTI5IDMzLjQ4IDkuMDIwOTQgMzIuNiA3LjAzNjk0IDMwLjg0QzUuMDUyOTQgMjkuMDQ4IDQuMDYwOTQgMjYuMzc2IDQuMDYwOTQgMjIuODI0VjE2LjEwNEgwLjQ2MDkzOFY4LjE4Mzk2SDQuMDYwOTRWMC44Mzk5NjZIMTQuOTA4OVY4LjE4Mzk2SDIwLjI4NDlWMTYuMTA0SDE0LjkwODlWMjIuNzI4QzE0LjkwODkgMjMuNTI4IDE1LjExNjkgMjQuMTUyIDE1LjUzMjkgMjQuNkMxNS45NDg5IDI1LjA0OCAxNi40OTI5IDI1LjI3MiAxNy4xNjQ5IDI1LjI3MkMxOC4wOTI5IDI1LjI3MiAxOC45MDg5IDI1LjAzMiAxOS42MTI5IDI0LjU1MkwyMi4yMDQ5IDMyLjA4OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
/*28px*/
--sidebar-menu-icon--cdr-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--cdr-hover-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--call-center-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--call-center-hover-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--contacts-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--contacts-hover-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--tasks-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--tasks-hover-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--sms-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--sms-hover-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--reports-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--reports-hover-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--modules-28px: url('data:image/svg+xml,');
--sidebar-menu-icon--modules-hover-28px: url('data:image/svg+xml,');
/*24px*/
--sidebar-menu-icon--cdr-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--cdr-hover-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--call-center-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--call-center-hover-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--contacts-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--contacts-hover-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--tasks-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--tasks-hover-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--sms-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--sms-hover-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--reports-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--reports-hover-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--modules-24px: url('data:image/svg+xml,');
--sidebar-menu-icon--modules-hover-24px: url('data:image/svg+xml,');
/*BS OVERRIDE - BORDER COLOUR FOR DROPDOWN*/
--bs-border-color-translucent: rgba(216,220,224, 0.8);
/* ANIMATION */
--animation-transition--base: all 0.3s ease-out;
}
/* GLOBAL SETTINGS */
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
text-rendering: optimizeLegibility;
}
body {
padding: 0px;
margin: 0px;
border: 0px;
height: 100%;
color: var(--text-color--base);
font-family: var(--font-family--roboto);
font-size: 16px;
font-weight: var(--font-weight--regular);
}
/* TEXT STYLES */
/* font-familys and styles */
.font-size--11 {
font-size: var(--font-size--11);
}
.font-size--12 {
font-size: var(--font-size--12);
}
.font-size--14 {
font-size: var(--font-size--14);
}
.font-weight--light{
font-weight: var(--font-weight--light);
}
.font-size--16 {
font-size: var(--font-size--16);
}
.font-size--20 {
font-size: var(--font-size--20);
}
.font-weight--regular{
font-weight: var(--font-weight--regular);
}
.font-weight--medium{
font-weight: var(--font-weight--medium);
}
.font-weight--semibold{
font-weight: var(--font-weight--semibold);
}
.font-family--roboto {
font-family: var(--font-family--roboto);
}
.font-family--montserrat {
font-family: var(--font-family--montserrat);
}
.text-color--black {
color: var(--text-color--base);
}
.text-color--secondary {
color: var(--text-color--secondary);
}
.text-color--muted {
color: var(--text-color--muted);
}
.text-color--light {
color: var(--text-color--light);
}
.text-color--red {
color: var(--text-color--red);
}
/* UI OVERRIDE of BOOTSTRAP default styles and classes */
/* hr */
.hr-light {
color: var(--color-silver--base);
position: relative;
margin: .75rem 0;
}
/* custom button 'border' */
.border {
border: 1px solid var(--color-silver--alt-dark-10);
}
/* custom button 'light' */
.btn-light--custom {
background: var(--color-silver--light-50)!important;
}
.btn-light--custom:hover {
background: var(--color-silver--alt)!important;
border: 1px solid var(--color-silver--alt-dark-10);
color: var(--color-red--base);
}
/* custom button link */
.btn-link--custom {
font-size: var(--font-size--14);
font-family: var(--font-family--roboto);
color: var(--text-color--base);
justify-content: space-between;
align-items: center;
display: flex;
}
.btn-link--custom:hover {
color: var(--color-red--base);
}
.btn-link--custom.bg-gray {
background-color: var(--color-silver--alt-light-20);
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
background: var(--color-silver--light-50);
}
.dropdown-menu--custom {
font-size: var(--font-size--14);
font-family: var(--font-family--roboto);
color: var(--text-color--base);
}
/*custom dropdown menu items padding*/
.dropdown-menu--custom li a.dropdown-item {
padding-block: 0.55rem;
}
.btn.btn-link--custom.show, :not(.btn-check)+.btn.btn-link--custom:active {
color: var(--color-red--base);
}
/* dropdown indicator (caret) for '.btn-link select' */
.dropdown .dropdown-toggle::after, .dropdown-center .dropdown-toggle::after {
font-family:'Bootstrap-icons';
content: "\f282";
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
vertical-align: 0;
font-size: var(--font-size--11);
color: var(--text-color--muted);
font-weight: var(--font-weight--semibold);
}
/* dropdown active item BG*/
li a.dropdown-item.active, li a.dropdown-item:active {
color: var(--text-color--base);
text-decoration: none;
background-color: var(--color-silver--light-20);
}
/* LAYOUT SETUP */
/* global wrapper, 1 column */
.wrapper {
display: grid;
height: 100%;
background: var(--color-white--base);
}
.wrapper.boxed {
grid-template-columns: minmax(400px, 1265px) minmax(0, 1fr); /*2 columns, main content and white space on big screens*/
}
.wrapper.fluid {
grid-template-columns: 1fr; /* full w.layout (only one, fluid column) */
overflow: auto;
}
/* layout columns wrapper, 2 columns: sidebar and main content */
.col-wrapper {
display: grid;
height: 100%;
background: var(--color-silver--light-60);
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.col-wrapper.boxed {
grid-template-columns: 65px minmax(400px, 1200px); /*sidebar, main content*/
}
.col-wrapper.fluid {
grid-template-columns: 65px 1fr; /*sidebar, main content*/
}
/* inner layout wrapper: header, navbar, content, footer */
.inner-layout {
display: grid;
grid-column: 2 / 3;
grid-template-rows: 65px 65px 1fr auto; /*header, navbar, content, footer*/
height: 100%;
}
.header {
min-height: 65px;
max-height: 65px;
background: var(--color-white--base);
z-index: 50;
overflow-x: clip;
}
.header-inner--container {
height:65px;
box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.1);
}
.header-inner--container.p-40 {
padding: 0 40px 0 40px;
}
.header-inner--container.p-32 {
padding: 0 32px 0 32px;
}
.header-inner--container.p-24 {
padding: 0 24px 0 24px;
}
.second-navbar {
min-height: 65px;
max-height: 65px;
background: var(--color-white--base);
z-index: 40;
border-bottom: 1px solid var(--color-silver--alt);
}
@media only screen and (max-width: 991px) {
.second-navbar {
max-height: 300px;
}
}
.report-content {
background: var(--color-white--base);
border-radius: 0.5rem;
height: auto; /*height: calc(100vh - 100px);*/
margin-top: 2rem;
margin-bottom: 2rem;
padding: 1.5rem 1rem 1.5rem 1rem;
box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.05);
}
.footer-wrapper {
margin-top: auto;
min-height: 70px;
background: var(--color-white--base);
overflow-x: clip;
z-index: 20;
}
.footer-container {
min-height:70px;
box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.1);
background: var(--color-white--base);
}
.footer-container.p-40 {
padding: 0 40px 0 40px;
}
.footer-container.p-32 {
padding: 0 32px 0 32px;
}
.footer-container.p-24 {
padding: 0 24px 0 24px;
}
.white-space {
grid-column: 2 / 3;
height: 100%;
background: var(--color-silver--light-30);
}
/* Example of padding change in header, content, footer elements when selecting fluid or boxed layout style for element .col-wrapper col-wrapper (.col-wrapper .fluid) or
(.col-wrapper .boxed) */
/*.col-wrapper.fluid > .inner-layout .header .header-inner--container, .col-wrapper.fluid > .inner-layout .content, .col-wrapper.fluid > .inner-layout .footer-wrapper .footer-container {
padding: 0 24px 0 24px;
}*/
/* content layout wrapper: reports\tables\filters container */
.content {
margin-bottom: auto;
height: 100%;
}
.content.p-40 {
padding: 0 40px 0 40px;
}
.content.p-32 {
padding: 0 32px 0 32px;
}
.content.p-24 {
padding: 0 24px 0 24px;
}
/* SIDEBAR */
/* layout */
.sidebar {
display: grid;
grid-column: 1 /2;
grid-template-rows: 65px 1fr;
height: 100%;
background: var(--color-blue--dark-10);
text-align: center;
z-index: 20;
}
.sidebar-inner {
box-shadow: 5px 0px 16px rgba(0, 0, 0, 0.1);
color: white;
display: grid;
grid-template-columns: 1fr;
}
/* logo */
.logo {
width: 65px;
height: 65px;
background: var(--color-red--base);
background-image: var(--sidebar-menu-icon--logo);
background-repeat: no-repeat;
background-position: center;
color: white;
font-family: var(--font-family--montserrat);
font-style: normal;
font-weight: 900;
font-size: 3rem;
line-height: 59px;
text-align: center;
z-index: 20;
}
/* navigation elements */
.box {
background-color: var(--color-blue--dark-10);
height: 65px;
width: 65px;
overflow: hidden;
font-family: var(--font-family--roboto);
font-size: var(--font-size--11);
}
.box:hover {
background-color: var(--color-blue--dark-30);
cursor: pointer;
transition: var(--animation-transition--base);
}
.sidebar-inner ul li a {
text-decoration: none;
color: var(--color-silver--dark-10);
min-width: -webkit-fill-available;
min-height: -webkit-fill-available;
transition: var(--animation-transition--base);
}
.sidebar-inner ul li:hover a {
text-decoration: none;
color: var(--color-white--base);
transition: var(--animation-transition--base);
}
.sidebar-inner ul li.box.active a {
color: var(--color-white--base);
transition: var(--animation-transition--base);
}
.sidebar-inner ul li.box.active {
background-color: var(--color-blue--dark-30);
cursor: pointer;
transition: var(--animation-transition--base);
}
/* sidebar icons */
.sidebar a[data-value]::after {
text-align: center;
z-index: 20;
transition: var(--animation-transition--base);
}
.sidebar a[data-value] span::after {
position: relative;
margin-top: auto;
top: 0.75rem;
display: table-caption;
margin-bottom: 0.5rem;
transition: var(--animation-transition--base);
text-align: center;
z-index: 20;
}
.sidebar ul li.box:is(:hover, .active) {
transition: var(--animation-transition--base);
}
.sidebar a[data-value="cdr"] .cdr::after {
content: var(--sidebar-menu-icon--cdr-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="cdr"] .cdr::after {
content: var(--sidebar-menu-icon--cdr-hover-24px);
}
.sidebar a[data-value="call-center"] .call-center::after {
content: var(--sidebar-menu-icon--call-center-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="call-center"] .call-center::after {
content: var(--sidebar-menu-icon--call-center-hover-24px);
}
.sidebar a[data-value="contacts"] .contacts::after {
content: var(--sidebar-menu-icon--contacts-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="contacts"] .contacts::after {
content: var(--sidebar-menu-icon--contacts-hover-24px);
}
.sidebar a[data-value="tasks"] .tasks::after {
content: var(--sidebar-menu-icon--tasks-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="tasks"] .tasks::after {
content: var(--sidebar-menu-icon--tasks-hover-24px);
}
.sidebar a[data-value="sms"] .sms::after {
content: var(--sidebar-menu-icon--sms-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="sms"] .sms::after {
content: var(--sidebar-menu-icon--sms-hover-24px);
}
.sidebar a[data-value="reports"] .reports::after {
content: var(--sidebar-menu-icon--reports-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="reports"] .reports::after {
content: var(--sidebar-menu-icon--reports-hover-24px);
}
.sidebar a[data-value="modules"] .modules::after {
content: var(--sidebar-menu-icon--modules-24px);
}
.sidebar ul li.box:is(:hover, .active) a[data-value="modules"] .modules::after {
content: var(--sidebar-menu-icon--modules-hover-24px);
}
/* HEADER */
/* calls counter */
.header-inner--container .online-calls--container {
column-gap: 0.5rem;
}
.header-inner--container .online-calls--container .online-calls--call-destination-icon {
font-size: 1rem;
}
.header-inner--container .online-calls--container .online-calls--call-destination-counter {
font-size: 0.75rem;
font-weight: var(--font-weight--medium);
font-family: var(--font-family--roboto);
width: 2.3rem;
}
.header-inner--container .online-calls--container .online-calls--call-destination-icon--wait {
color: var(--color-red--base);
}
.header-inner--container .online-calls--container .online-calls--call-destination-icon--online {
color: var(--color-green--base);
}
.header-inner--container .online-calls--container .online-calls--call-destination-icon--outgoing {
color: var(--color-orange--base);
}
/* system options navigation */
/* layout */
.header-inner--container .user-menu {
column-gap: 2.5rem;
}
/*.selected-lang--container {
width: 3.5rem;
}*/
/* user current online status indicator */
.current-user--status-indicstor {
width: 8px;
height: 8px;
border-radius: 6px;
position: relative;
}
.current-user--status-indicstor.unknown {
background: var(--color-silver--base);
transition: var(--animation-transition--base);
}
.current-user--status-indicstor.online {
background: var(--color-green--base);
transition: var(--animation-transition--base);
}
.current-user--status-indicstor.pause {
background: var(--color-orange--base);
transition: var(--animation-transition--base);
}
.current-user--status-indicstor.offline {
background: var(--color-red--base);
transition: var(--animation-transition--base);
}
/* user profile button */
.current-user {
font-weight: var(--font-weight--medium);
color: var(--color-red--base);
font-size: var(--font-size--14);
}
.current-user:hover {
color: var(--color-red--dark-30);
}
/* user profile menu dropdown */
.header-inner--container .dropdown-menu{
min-width: auto;
}
.header-inner--container .dropdown-menu.show {
box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.05);
}
.current-user-profile--menu {
min-width: 18.75rem; /*300px*/
padding: 1rem 0.75rem 1rem 0.75rem;
}
@media only screen and (max-width: 991px) {
.current-user-profile--menu {
min-width: 10rem;
}
}
/* user profile dropdown - contacts block */
.current-user-profile--contacts-block {
/*padding: 0 0.25rem 0 0.25rem;*/
row-gap: 0.25rem;
}
.current-user-profile--user-name {
font-weight: var(--font-weight--semibold);
font-size: var(--font-size--16);
}
.current-user-profile--department {
font-weight: var(--font-weight--regular);
font-size: var(--font-size--14);
font-family: var(--font-family--roboto);
color: var(--text-color--secondary);
}
.current-user-profile--user-email {
font-weight: var(--font-weight--regular);
font-size: var(--font-size--12);
font-family: var(--font-family--roboto);
color: var(--text-color--muted);
}
/* user profile dropdown - online status & sip selection block */
.current-user-profile--current-status-block {
/*padding: 0 0.25rem 0 0.25rem;*/
column-gap: 0.75rem;
}
.lable-text-regular {
font-size: var(--font-size--12);
font-family: var(--font-family--roboto);
font-weight: var(--font-weight--regular);
color: var(--text-color--base);
}
#current-user-status, #sipExtensionList {
font-size: var(--font-size--14);
font-family: var(--font-family--roboto);
font-weight: var(--font-weight--regular);
color: var(--text-color--base);
}
/* user profile dropdown - links and access level status */
.current-user-profile--links-block {
/*padding: 0 0.25rem 0 0.25rem;*/
row-gap: 0.25rem;
}
.profile--link a {
font-family: var(--font-family--roboto);
font-size: var(--font-size--14);
color: var(--color-red--base);
}
.profile--link a:hover, .profile--link a:active, .profile--link a:checked {
color: var(--color-red--dark-30);
}
.profile--link-info {
font-family: var(--font-family--roboto);
font-size: var(--font-size--11);
color: var(--text-color--muted);
}
.selected-lang {
font-weight: var(--font-weight--medium);
color: var(--color-red--base);
}
/* LANG SELECT BUTTON */
.selected-lang {
font-weight: var(--font-weight--medium);
color: var(--color-red--base);
font-size: var(--font-size--14);
}
.selected-lang:hover {
color: var(--color-red--dark-30);
}
.selected-lang--lang-list li .fi {
width: 0.8rem;
}
.selected-lang--lang-list li * {
font-size: var(--font-size--12);
font-weight: var(--font-weight--medium);
font-family: var(--font-family--roboto);
}
.selected-lang--lang-list li a.dropdown-item.active, .selected-lang--lang-list li a.dropdown-item:active {
color: var(--text-color--base);
text-decoration: none;
background-color: var(--color-silver--light-20);
}
/* SETTINGS & LOG-OUT ICONS */
.header-inner--container .user-menu .system-settings .dropdown-toggle i, .header-inner--container .user-menu .system-log-out i {
color: var(--color-blue--light-40);
}
.header-inner--container .user-menu .system-settings:hover .dropdown-toggle i, .header-inner--container .user-menu .system-log-out:hover i {
color: var(--color-blue--light-20);
}
/* system settings ::after */
.system-settings .dropdown .dropdown-toggle::after, .system-settings .dropdown-center .dropdown-toggle::after {
display: none;
}
/* system settings menu dropdown */
.system-settings--menu {
min-width: 18.75rem; /*300px*/
padding: 1rem 0.75rem 1rem 0.75rem;
}
@media only screen and (max-width: 991px) {
.system-settings--menu {
min-width: 10rem;
}
}
/* system settings dropdown - QA buttons */
.system-settings--quick-actions-block {
/*padding: 0 0.25rem 0 0.25rem;*/
row-gap: 0.25rem;
}
.system-settings--quick-actions-buttons--block ul li a.nav-link {
color: var(--text-color--secondary);
font-size: var(--font-size--12);
}
.system-settings--quick-actions-buttons--block ul li a.nav-link:hover {
background: var(--color-silver--light-50);
border-radius: 0.375rem; /* 6px */
color: var(--text-color--base);
transition: var(--animation-transition--base);
font-weight: var(--font-weight--medium);
}
.system-settings--quick-actions-buttons--block ul li a.nav-link div i {
margin-top: -0.5rem;
color: var(--color-blue--light-40); /* color: var(--color-blue--light-20); */
transition: var(--animation-transition--base);
}
.system-settings--quick-actions-buttons--block ul li a.nav-link:hover div i {
color: var(--color-red--base)!important;
transition: var(--animation-transition--base);
}
.system-settings--quick-actions-buttons--block ul li a.nav-link:active div i, .system-settings--quick-actions-buttons--block ul li a.nav-link:checked div i {
color: var(--color-red--dark-30)!important;
transition: var(--animation-transition--base);
}
.quick-actions-button--inner {
width: 100px;
height: 100px;
}
/* NAVBAR */
@media only screen and (max-width: 991px) {
.navbar-collapse {
position: absolute;
top: 66px;
width: calc(100vw - 65px); /*width: 100%;*/
}
}
.navbar--block .nav-item {
height: 64px;
background-color: var(--color-white--base);
border-bottom: 0px;
transition: border-bottom 0.1s ease;
font-style: normal;
font-weight: 600;
font-size: 0.875rem;
line-height: 20px;
color: var(--text-color--muted);
border-bottom: 3px solid transparent;
padding: 0 24px 0px 24px;
transition: var(--animation-transition--base);
}
.navbar--block .nav-item .nav-link.active, .navbar--block .nav-item .nav-link.show {
color: var(--text-color--base);
}
.navbar--block .nav-item .nav-link {
color: var(--text-color--muted);
}
.navbar--block .nav-item:has(.nav-link.active) {
border-bottom: var(--color-red--base) 3px solid;
}
.navbar--block .nav-item:hover {
height: 64px;
cursor: pointer;
font-style: normal;
font-weight: 600;
line-height: 20px;
color: var(--text-color--base);
border-bottom: var(--color-red--light-90) 3px solid;
transition: var(--animation-transition--base);
}
.navbar--block .nav-item:hover a {
color: var(--text-color--secondary);
transition: var(--animation-transition--base);
}
/* FOOTER */
.footer-copyright-text {
font-size: var(--font-size--12);
}
.footer-contacts-phone {
font-size: var(--font-size--14);
font-weight: var(--font-weight--medium);
}
.footer-contacts-email a {
font-size: var(--font-size--12);
text-decoration: none;
}
.footer-contacts-email a {
color: var(--color-red--base);
}
.footer-contacts-email a:hover, .footer-contacts-email a:visited {
color: var(--color-red--dark-30);
}