:root {
    --font-color: #5F6368;
    --font-color-dark: #202124;
    --background-color: #F1F3F4;

    --primary-color-1: #f57e23;
    --primary-color-2: #ff9645;
    --primary-color-3: #f7a96d;
    --primary-color-4: #FFE9C9;

    --secondary-color-1: #DEE1E6;
    --secondary-color-2: #cacbcb;
    --secondary-color-3: #BABCBE;
    --secondary-color-4: #535353;
}
.welcome_all {
    background: url(../images/backgroundr7.png);
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
}
.welcome_all:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* backdrop-filter: brightness(0.8); */
    content: "";
}
.welcome-login {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    padding: 50px;
    width: 30vw;
    backdrop-filter: blur(2px);
    box-shadow: 8px 12px 20px 20px #00000029;
    border-radius: 20px;
}
.welcome-login .big_logo {
    all: unset;
    display: flex;
    flex-direction: column;
}
.welcome-login .big_logo > img {
    background-image: url(/images/orig_logo.png);
    width: 235px;
}
.welcome-login .title {
    text-align: center;
}
.welcome-login input {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    box-shadow: 4px 8px 20px 4px #00000029;
}
.welcome-login .el-icon-user {
    margin-top: 1px;
}
.welcome-login .el-icon-key {
    margin-top: 2px;
}
.login-div > form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.login-form {
    all: unset;
}
.login-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
}
.login-form input {
    width: 200px;
    margin: 15px 0;
}
.welcome-login button {
    margin: 0;
}
.login .content, .help .content {padding: 0;}
.login .breadcrumbs { display: none; }
.welcome-login button { 
    border-color: transparent;
    background-color: var(--primary-color-1);
    color: var(--background-color); 
    text-shadow: none;
    box-shadow: 4px 8px 20px 4px #00000029;
    border-radius: 5px;
}
.welcome-login button:hover {
    background-color: var(--primary-color-2);
    color: #fff;
}
.welcome-login .language-selector {
    all: unset;
}
.welcome-login .language-selector .el-input--small .el-input__inner{
    height: 40px;
    line-height: 40px;
}
.otp { all: unset; }
.otp form {
    margin-top: 25px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 250px;
}
.otp .el-input { margin: 20px 0; }
.otp button:hover, .otp button:active, .otp button:focus { border-color: transparent; }

.menu-user-menu { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
#logo a img { 
    all: unset;
    background-image: url(/images/mini_logo.svg); 
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 45px;
}
#header .menu-icon{
    margin: 0 10px;
    font-size: 16px;
}
.user-menu {
    position: absolute;
    background-color: #fff;
    z-index: 100;
    right: 5px;
    top: 0;
    box-shadow: -1px 2px 4px 0px #c8c8c8;
}
#header {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    padding: 0 40px 0 60px;
    box-shadow: -1px 2px 4px 0px #c8c8c8; 
    border: none;
    height: 55px !important;
}
#logo {
    all: unset;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#logo a {
    margin-right: 15px;
}
#version-info {
    all: unset;
}
#header .title {
    margin: 0;
    font-size: 18pt;
}
.left-menu {
    position: fixed;
}
#menu-container ~ .content {
    width: calc(100vw - 200px);
    margin-left: 200px;
    overflow: auto;
    margin-top: 55px;
}
#menu-container.hidden ~ .content {
    width: calc(100vw - 60px);
    margin-left: 60px;
}
.el-aside.left-menu, #menu-container.hidden ~ .content {
    transition: .1s all ease-in-out;
}
.menu-group .group-icon .menu-icon {
    color: var(--font-color);
}
.el-menu-item, .el-submenu__title, .el-pagination.is-background .el-pager li:not(.disabled).active
.el-tabs__active-bar, button.shiny, button.shiny:hover, button.el-button.shiny, button.el-button.shiny:hover { 
    background-color: var(--secondary-color-1);
    color: var(--font-color);
}
.el-menu-vertical .el-submenu__title:hover, .el-menu-vertical .el-menu-item:hover { background-color: var(--secondary-color-2); }
  
.el-menu-item:has(>.router-link-active), .el-menu-vertical .one-item.is-active, .el-menu-vertical .el-submenu .is-active, .el-menu-vertical .one-level.is-active 
{ 
    border-right: 4px solid var(--primary-color-1);
    background-color: var(--secondary-color-2);
    font-weight: bold;
}
#logo .hamburger {
    left: 10px;
    top: 8px;
    background: transparent;
    height: 40px;
    width: 40px;
    font-size: 25px;
    color: var(--font-color);
    border: none;
}
#logo .hamburger:hover {
    color: var(--primary-color-1);
}
.user-logo {
    color: var(--font-color);
    background-color: var(--background-color);
    border: none;
    margin: 0 0 0 10px;
} 
.el-tabs--border-card {
    box-shadow: none;
}
.main_title { font-size: 17pt; }
.breadcrumbs { padding: 4px 0 10px; }
.notification-logo, .user-logo { 
    box-shadow: -1px 2px 4px 0px #c8c8c8;
    background-color: var(--background-color);
    color: var(--secondary-color-2);
    border-color: var(--secondary-color-1);
}
.el-menu-vertical .el-submenu__title:hover, .el-menu-vertical .el-menu-item:hover {
    background-color: var(--secondary-color-2);
    border-color: var(--primary-color-1);
}
#header .menu-icon:hover {
    color: var(--primary-color-1);
}
.el-menu-item, .el-submenu__title {
    height: 45px;
    line-height: 45px;
}
.el-menu-item [class^=el-icon-],
.el-submenu [class^=el-icon-] {
    font-size: 1.25em!important;
    font-weight: inherit;
    margin: 0;
}
.el-menu-vertical .el-submenu .el-menu-item {
    height: 28px;
    line-height: 28px;
}
.el-menu-item a:hover {text-decoration: none; color: inherit;}
.el-tabs--border-card>.el-tabs__header .el-tabs__item { border: none; }
.left-menu {
        min-height: calc(100vh - 55px);
        margin: 55px 0 -80px 0;
}

.user-menu .logged-as , .welcome-login .title, .el-button--primary a, .el-breadcrumb__inner:hover,
.login-div .login-spacer , .login-div .login-error, #main-menu .main-icon, #version-info,   
.el-menu-vertical .el-submenu__title, .el-menu--vertical .el-menu.el-menu--popup a,
.el-menu-item.is-active, .left-menu, .left-menu a, .left-menu .icon img, .left-menu .icon .fa-icon, 
.user-menu li a, .el-submenu__title i, .el-menu-item i, #header .title, .el-breadcrumb__separator,
.breadcrumbs .el-breadcrumb__inner, .breadcrumbs .el-breadcrumb__item:last-child, .breadcrumbs .el-breadcrumb__inner a, 
.breadcrumbs .el-breadcrumb__inner.is-link, .user-menu .logged-as, .welcome-login .title, .left-menu .menu-category .icon i,
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child { 
    color: var(--font-color) 
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    color: var(--secondary-color-4);
}
/* .el-breadcrumb__item:last-child { margin-top: 0; } */
.menu-groups .el-tabs__nav { background-color: var(--secondary-color-2); }
.menu-groups .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: var(--secondary-color-1);
}
.menu-groups .el-tabs--border-card>.el-tabs__header .el-tabs__item .group-icon .menu-icon:hover,
.menu-groups .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active .group-icon .menu-icon:hover {
    color: var(--primary-color-1);
}
.menu-groups .el-tabs { background-color: var(--secondary-color-1); }
.main-sub-menu li a:hover { color: var(--primary-color-2); }
#main-menu .main-icon { color: var(--background-color); }
#main-menu .main-icon:hover { background-color: var(--primary-color-2); color: #fff; }
#main-menu .main-title { color: var(--secondary-color-4); }
.el-menu--vertical .el-menu.el-menu--popup li:hover { background-color: var(--secondary-color-2); }
.el-menu--vertical .el-menu.el-menu--popup { background-color: var(--font-color); }
.custom_groups .toggle_link { color: var(--primary-color-2) !important; }
.single_selection .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.single_selection .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.single_selection .el-table__body tr.hover-row.current-row > td, 
.single_selection .el-table__body tr.current-row > td { 
    background-color: var(--primary-color-1)!important 
}
.single_selection .el-table__body tr.hover-row.el-table__row--striped > td, 
.single_selection .el-table__body tr.hover-row > td { 
    background-color: var(--primary-color-2)!important 
}


.el-button--mini, .el-button--mini:hover, .el-button--small, .el-button--small:hover { border: none; }
.el-button, button, button.shiny { border-radius: 0; }
button.shiny, button.el-button.shiny { text-shadow: none; font-weight: 500; }
button.shiny:hover {
    background-color: var(--grey-color-3);
}
.el-button--small, .el-button--mini, .el-button--mini.el-icon-edit, .el-button--mini.el-icon-delete { 
    background-color: transparent;
}
.el-button--small:hover, .el-button--mini:hover, .el-button--mini.el-icon-edit:hover, .el-button--mini.el-icon-delete:hover { 
    background-color: transparent;
    color: var(--primary-color-1);
}
.el-button--primary {
    color: var(--font-color-light);
    background-color: var(--primary-color-1);
    border-color: var(--primary-color-1);
}
.el-button--default {
    /* border: 2px solid var(--secondary-color-3); */
    color: var(--font-color);
    background-color: transparent;
}
.el-button--primary.is-plain , .el-input-number__decrease:hover, .el-input-number__increase:hover { 
    color: var(--primary-color-1);
    border-color: var(--primary-color-4);
    background-color: var(--primary-color-4);
}
.el-button.el-icon-edit, .el-button.el-icon-delete { 
    color: var(--font-color);
}
.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover { 
    color: var(--primary-color-2) 
}
.el-button.is-plain:focus, .el-button.is-plain:hover {
    background-color: transparent;
    /* color: var(--primary-color-1); */
}
/* .el-button--primary:not(.el-button--mini) {
    min-width: 85px;
} */
.el-button--default:active, .el-button--default:focus {
    color: var(--primary-color-2);
    background-color: transparent;
    border-color: var(--primary-color-2);
}
.el-button--default:not(.el-button--mini):not(.el-button--small):focus,
.el-button--default:not(.el-button--mini):not(.el-button--small):hover {
    color: var(--primary-color-1);
    border-color: var(--primary-color-1);
    background-color: var(--primary-color-4);
}
.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
    background: var(--primary-color-1);
    border-color: var(--primary-color-1);
    color: var(--font-color-light);
}
.el-button--text:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-color-2);
}
.el-button--primary:focus, .el-button--primary:hover {
    color: var(--primary-color-1);
    border-color: var(--primary-color-4);
    background-color: var(--primary-color-4);
}
.action-buttons > .el-button:first-child, .action-buttons .el-button--default, .action-buttons .el-upload .el-button:first-child {
    color: var(--primary-color-1);
    background-color: var(--primary-color-4);
}
.action-buttons > .el-button:first-child:hover, .action-buttons .el-button--default:hover, .action-buttons .el-upload .el-button:first-child:hover { 
    color: var(--font-color-light);
    background-color: var(--primary-color-1);
}
.el-container.viewer .report_btn:hover {
    background-color: transparent;
    color: var(--primary-color-2);
    border-color: transparent;
}


.el-switch.is-checked .el-switch__core, .el-button--primary, 
.el-radio-button__orig-radio:checked + .el-radio-button__inner { 
    box-shadow: -1px 2px 4px 0px #c8c8c8; 
}
.el-select .el-input.is-focus .el-input__inner, .el-input.is-active .el-input__inner, .el-input__inner:focus, .el-input__inner:hover, .el-range-editor.is-active, .el-range-editor.is-active:hover { 
    border-color: var(--primary-color-2); 
}
.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover, .el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover { 
    background-color:lightgrey; border:1px solid grey; 
}
.el-button:active { color: var(--primary-color-2); }
.el-select .el-input__inner:focus { border-color: var(--primary-color-2) }
.el-textarea__inner:focus { border-color: var(--primary-color-2) }
.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) { 
    border-color: var(--primary-color-2) 
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td { 
    background-color: var(--secondary-color-1) 
}
.el-upload-dragger:hover , .el-upload-dragger:focus { border-color: var(--primary-color-2) }
.el-upload--picture-card:hover, .el-upload:focus { color: var(--primary-color-2); border-color: var(--primary-color-2) }
.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { 
    color: var(--primary-color-2) 
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { color: var(--primary-color-2); }
.el-cascader .el-input.is-focus .el-input__inner { border-color: var(--primary-color-2); }
.el-loading-spinner .path { stroke: var(--primary-color-1); }


.dialog-footer .el-button--default:not(.el-button--mini):not(.el-button--small):focus, 
.dialog-footer .el-button--default:not(.el-button--mini):not(.el-button--small):hover  {
    background-color: var(--grey-color-2);
    border-color: var(--grey-color-2);
    color: var(--font-color);
}
.el-message-box__btns {
    padding: 5px 15px 0;
    text-align: right;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.el-message-box__btns .el-button--default{
    border: 1px solid;
}
.el-message-box__btns .el-button--default:hover{
    background-color: var(--secondary-color-2);
    border: 1px solid var(--secondary-color-2);
    color: var(--font-color);
}
.el-message-box__btns .el-button--primary{
    background-color: var(--primary-color-1);
    border: var(--primary-color-1);
    color: var(--font-color-light);
    margin-right: 10px;
}
.el-message-box__btns .el-button--primary:hover{
    background-color: var(--primary-color-4);
    border: var(--primary-color-4);
    color: var(--primary-color-1);
}
.el-icon-close, .el-icon-edit, .el-icon-view {font-weight: bold;}

.subscribers .empty { margin: 50px auto; }
.devices .quick_search { margin: 25px auto; }
.el-invigo-dashboard .el-button--mini.el-button--default {
    background-color: var(--font-color-light);
    border: 1px solid var(--secondary-color-1);
}
.el-invigo-dashboard .el-button--mini.el-button--default:hover {
    background-color: var(--secondary-color-1);
    color: var(--font-color);
}

body { background: url(../images/backgroundr7.png); }
#header  { background-color: #DEE2E6BB;}
#logo { background-color: transparent; }
.el-table-invigo { background-color: var(--background-color); }
.el-menu-vertical { height: calc(100vh - 95px); width: 200px; overflow: hidden; }
.hidden .el-menu-vertical { width: 64px; }
.el-menu-vertical:hover, [touch] .el-menu-vertical { overflow-y: auto; }
.el-menu-vertical::-webkit-scrollbar { width: 6px; border: 1px solid var(--secondary-color-1); }
.el-menu-vertical::-webkit-scrollbar-thumb { background-color: var(--secondary-color-3); border-radius: 10rem; }
.el-menu-vertical::-webkit-scrollbar-track-piece:start , .el-menu-vertical::-webkit-scrollbar-track-piece:end {  background: transparent; }
.el-submenu__icon-arrow { right: unset; left: 168px; }

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    color: black !important;
    -webkit-text-fill-color: black !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff99 inset, 4px 8px 20px 4px #00000029 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.el-minibana-report-list { height: calc(100vh - 95px); width: 200px; overflow: hidden; }
.el-minibana-report-list:hover, [touch] .el-minibana-report-list { overflow-y: auto; }
.el-minibana-report-list::-webkit-scrollbar { width: 6px; border: 1px solid var(--secondary-color-1); border-radius: 10rem; }
.el-minibana-report-list::-webkit-scrollbar-thumb { background-color: var(--secondary-color-3); border-radius: 10rem; }
.el-minibana-report-list::-webkit-scrollbar-track-piece:start, .el-minibana-report-list::-webkit-scrollbar-track-piece:end { background: transparent; }

.ai-message {
    padding: 10px 20px;
}
.ai-conversation .ai-message:nth-child(odd) {
    background-color: var(--grey-color-4);
}
.ai-conversation span {
    text-transform: capitalize;
    font-weight: bold;
}
.ai-conversation i {
   margin-right: 5px;
   font-weight: bold;
}
.ai-conversation pre {
    max-width: 100%;
    text-wrap: wrap;
    word-break: break-word;
    margin: 5px 5px 10px;
}
.ai-links {
    padding-inline-start: 10px;
}
.ai-clear {
    position: absolute;
    top: 11px;
    right: 50px;
}

.ai-conversation:hover, [touch] .ai-conversation { overflow-y: auto; }
.ai-conversation::-webkit-scrollbar { width: 6px; border: 1px solid var(--secondary-color-1); border-radius: 10rem; }
.ai-conversation::-webkit-scrollbar-thumb { background-color: var(--secondary-color-3); border-radius: 10rem; }
.ai-conversation::-webkit-scrollbar-track-piece:start, .ai-conversation::-webkit-scrollbar-track-piece:end { background: transparent; }

#ai-help .menu-icon { color: var(--font-color); }
#ai-help .el-button:focus, #ai-help .el-button:hover {
    border-color: transparent;
    background-color: transparent; 
}

.el-container.viewer .report_btn.el-button.el-icon-edit, .el-container.viewer .report_btn.el-button.el-icon-delete {
    color: var(--primary-color-1);
    font-weight: 500;
}