/* Used colors */
:root {
    --h: #000000;
    --ht: rgba(0,0,0,.4);
    --ok: #27ae60;
    --oo: #f39c12;
    --ko: #000000;
    --l: #bbbbbb;
    --vl: #f5f5f5;
    --b: #161616;
    --d: #3d3d3d;
    --m: #525252;
}
/* Highlighted Color */
.quota-widget .value{background-color:var(--h)}
.floating-action-buttons a.button{background-color:var(--h)}
.btn-primary{background-color:var(--h);border-color:var(--h)}
.ui-menu .ui-state-active{background-color:var(--h) !important}
.ui-slider .ui-slider-handle.ui-state-active{background-color:var(--h)}
.ui-datepicker .ui-datepicker-days-cell-over a,.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,.ui-datepicker .ui-state-highlight,.ui-datepicker.ui-widget-content .ui-state-highlight{color:var(--h)}
.ui-datepicker a.ui-state-active{background-color:var(--h) !important}
.popover .menu li a:not(.disabled):hover{background-color:var(--h)}
.popover .menu .dropbutton a.dropdown:hover{background-color:var(--h)}
#taskmenu .action-buttons a{color:var(--h)}
#taskmenu .action-buttons a:hover{color:var(--h)}
.ui.alert a:not(.btn){color:var(--h)}
#messagestack .alert-info.information{background-color:var(--h)}
.popupmenu .listing li>a:not(.disabled):hover{background-color:var(--h)}
.popupmenu .listing li.selected{background-color:var(--h)}
.folderlist li.mailbox .unreadcount{background-color:var(--h)}
.folderlist li.mailbox.recent>a>.unreadcount{background-color:var(--h)}
.formcontent.raweditor .CodeMirror-focused{border-color:var(--h);box-shadow:none}
.multi-input>.content.focused{border-color:var(--h);box-shadow:none}
.recipient-input.focus{border-color:var(--h);box-shadow:none}
.tagedit-list[tabindex="-1"]{border-color:var(--h);box-shadow:none}
.form-control:focus{border-color:var(--h);box-shadow:none}
.input-group-text input:focus{border-color:var(--h) !important}
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:var(--h)}
.custom-switch .custom-control-input:checked~.custom-control-label::before{background-color:var(--h)}
.custom-file-input:focus~.custom-file-label{border-color:var(--h);box-shadow:none}
.mce-tinymce.focused{border-color:var(--h) !important;box-shadow:none !important}
.mce-window .mce-foot .mce-btn.mce-primary{background-color:var(--h);border-color:var(--h)}
.mce-window .mce-textbox:focus{color:var(--d);border-color:var(--h);box-shadow:none}
.mce-window .mce-listbox:focus{border-color:var(--h) !important;box-shadow:none !important}
.mce-window .mce-checkbox i.mce-i-checkbox{color:var(--h)}
.mce-menu .mce-menu-item.mce-active{background-color:var(--h)}
.googie_list li.googie_list_onhover{background-color:var(--h)}
.listing.focus:not(.withselection) tbody tr.focused>td.selection+td{border-left:2px solid var(--h)!important}
.custom-switch .custom-control-input:checked~.custom-control-label::before{border-color:var(--h);background-color:var(--h)}
/* Dark Color */
.btn-primary:hover{background:var(--d);border-color:var(--d)}
.mce-window .mce-foot .mce-btn.mce-primary:hover{background:var(--d);border-color:var(--d)}
.btn-secondary{background:var(--d);border-color:var(--d)}
.mce-btn.mce-active{background:var(--d) !important}
.mce-window .mce-foot .mce-btn{background:var(--d);border-color:var(--d)}
.mce-window .mce-foot .mce-btn:focus{background:var(--d)}
.image-selector button{background:var(--d);border-color:var(--d)}
#layout-menu{background-color:var(--d)}
#rcmdraglayer{background-color:var(--d)}
#taskmenu .special-buttons{background-color:var(--d)}
a:hover{color:var(--d)}
body{color:var(--d)}
#layout>div>.header{color:var(--d)}
#layout>div>.header a.button{color:var(--d)}
.table-widget table.options-table tr.selected td{color:var(--d)}
.ui-dialog .ui-dialog-title{color:var(--d)}
.ui-dialog .ui-dialog-titlebar-close{color:var(--d)}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link{color:var(--d)}
button.btn-secondary{color:var(--vl)}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link{color:var(--d)}
.ui-datepicker .ui-state-default,.ui-datepicker.ui-widget-content .ui-state-default{color:var(--d)}
.menu.toolbar a{color:var(--d)}
.menu.pagenav a{color:var(--d)}
.menu .buttons button{display:block;float:left;cursor:pointer;color:var(--d);background-color:transparent;border:0;padding:0;height:58px;line-height:58px;width:2.5em}
.popover .menu li a[aria-haspopup].dropdown:after{color:var(--d);margin:0 .6em !important}
.menu.listing a{color:var(--d)}
.searchbar a{color:var(--d)}
.ui.alert{color:var(--d)}
#messagestack div{background-color:var(--d)}
#messagestack .alert-warning{color:var(--d)}
#messagestack .alert-warning>i.icon:before{color:var(--d)}
.listing tbody td,.listing li a{color:var(--d)}
.listing tbody td a{color:var(--d)}
.listing li.selected,.listing tr.selected td{color:var(--d)}
@media screen and (max-width:1200px){
    .listing.selection-large-only li.selected{color:var(--d)}
}
ul.treelist li.selected>div>a,ul.treelist li.selected>a{color:var(--d)}
.attachmentslist li .attachment-name{color:var(--d)}
.formcontent.raweditor .CodeMirror{color:var(--d)}
.form-control{color:var(--d)}
.form-control:focus{color:var(--d)}
.input-group-text{color:var(--d)}
.mce-window .mce-window-head .mce-title{color:var(--d)}
.mce-close{color:var(--d)}
.mce-window .mce-textbox{color:var(--d)}
.mce-window .mce-textbox:focus{color:var(--d)}
.mce-window .mce-tabs .mce-tab.mce-active{color:var(--d) !important}
.mce-window .mce-label{color:var(--d)}
.mce-menu .mce-menu-item .mce-text{color:var(--d)}
.mce-window .mce-textbox:focus{color:var(--d);box-shadow:none}
.custom-switch .custom-control-input:checked:disabled~.custom-control-label::before{border-color:var(--d);background-color:var(--d)}
/* Light color */
.btn-primary.disabled,.btn-primary:disabled{background:var(--l);border-color:var(--l)}
.listing.focus:not(.withselection) tbody tr.focused>td.selection+td{border-left:2px solid var(--l)}
.mce-btn.mce-primary:disabled{background:var(--l);border-color: var(--l)}
.table-widget table.options-table tr.selected td{background-color:var(--l);color:var(--d)}
.listing li.selected,.listing tr.selected td{color:var(--d);background-color:var(--l)}
ul.treelist li.selected>div>a,ul.treelist li.selected>a{color:var(--d);background-color:var(--l)}
.image-selector .attachmentslist li:hover,.image-selector .attachmentslist li:focus{background:var(--l)}
.mce-window .mce-foot .mce-container-body .mce-btn button{color:var(--l)}
#taskmenu a.logout{color:var(--l) !important}
/* Half transparent highlight color */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus{background-color:var(--ht)}
.ui.alert.boxinformation{background-color: var(--ht)}
.input-group a:focus{background-color:var(--ht)}
.mce-window .mce-combobox .mce-btn:focus{background-color:var(--ht);border-color:var(--l)}

.btn-primary.disabled,.btn-primary:disabled{background:var(--ht);border-color:var(--ht)}
html:not(.touch) .listing li>a:focus,html:not(.touch) .listing.focus tbody tr.focused>td:first-child,html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td{border-left:2px solid var(--ht)}
.mce-window .mce-foot .mce-btn.mce-primary.disabled,.mce-window .mce-foot .mce-btn.mce-primary:disabled{background:var(--ht);border-color:var(--ht)}

/* Medium dark color */
.btn-secondary:hover{background:var(--m);border-color:var(--m)}
.mce-window .mce-foot .mce-btn:hover{background:var(--m);border-color:var(--m)}
.image-selector button:hover{background:var(--m);border-color:var(--m)}
#taskmenu a.selected:hover{background:var(--m)}
#taskmenu a:hover{background:var(--m);color:white}
#taskmenu .action-buttons a:hover{color:var(--h);background:var(--m)}
#taskmenu a:focus{background-color:var(--m);color:white}
#taskmenu a.selected{background:var(--m);color:white}
@media screen and (min-width: 481px){
    #taskmenu a.selected{background:var(--m)}
}
/* Very Light color*/
#layout>div>.header{background-color:var(--vl)}
#layout>div>.footer{background-color:var(--vl)}
.ui-dialog .ui-dialog-titlebar{background-color:var(--vl)}
.ui-dialog .ui-dialog-buttonpane{background-color:var(--vl)}
.attachmentslist{border:1px solid var(--vl)}
.image-upload{background-color:var(--vl)}
.mce-window .mce-window-head{background-color:var(--vl)}
.mce-window .mce-foot{background-color:var(--vl)}
#contactpic{background-color:var(--vl)}
/* OK color */
.menu.toolbar a.selected{color:var(--ok)}
.searchbar a.selected{color:var(--ok)}
.ui.alert.alert-success>i.icon:before{color:var(--ok)}
#messagestack .alert-success{background-color:var(--ok)}
/* KO color */
.quota-widget .value.warning{background-color:var(--ko)}
.btn-danger{background:var(--ko);border-color:var(--ko)}
.ui.alert.alert-danger>i.icon:before{color:var(--ko)}
#messagestack .alert-danger{background-color:var(--ko)}
.messagelist tr.flagged td,.messagelist tr.flagged td.subject span.subject a,.messagelist tr.flagged td.subject span.date,.messagelist tr.flagged td.subject span.fromto{color:var(--ko)}
.formcontent.raweditor .CodeMirror-linebackground.line-error{background-color:var(--ko)}
.multi-input.is-invalid>.content{border:1px solid var(--ko)}
.multi-input.is-invalid>.content.focused{border-color:var(--ko)}
.form-control.is-invalid{border-color:var(--ko)}
.form-control.is-invalid:focus{border-color:var(--ko)}
.invalid-feedback{color:var(--ko);font-size:90%}
.googie_link{color:var(--ko)}
body.status-flagged #message-header .subject:before{color:var(--ko)}
/* Alert color */
.ui.alert.alert-warning>i.icon:before{color:var(--oo)}
#messagestack .alert-warning{background-color:var(--oo)}
.messagelist td.subject span.msgicon.status.unread:before{color:var(--oo)}
/* Remove box shadow */
.btn:focus{box-shadow:none}
.btn-primary:focus{box-shadow:none}
.multi-input>.content.focused{box-shadow:none}
.recipient-input.focus{box-shadow:none}
.tagedit-list[tabindex="-1"]{box-shadow:none}
.form-control:focus{color:var(--d);box-shadow:none}
.custom-switch .custom-control-input:focus~.custom-control-label:before{box-shadow:none}
.custom-file-input:focus~.custom-file-label{box-shadow:none}
.mce-tinymce.focused{box-shadow:none !important}
.mce-window .mce-foot .mce-btn.mce-primary:focus{box-shadow:none}
.mce-btn.mce-primary:not(:disabled):not(.disabled).active:focus{box-shadow:none}
.mce-window .mce-listbox:focus{box-shadow:none !important}
.formcontent.raweditor .CodeMirror-focused{box-shadow:none}
/* Links default */
a{
    color: var(--h)
}
#taskmenu .action-buttons a{color:white}
#taskmenu .action-buttons a:hover{color:white}
html.layout-small .popover-header, html.layout-phone .popover-header {background-color: white}
@media screen and (min-width:481px){
    #layout-menu .popover-header{background-color:white !important}
}
@media screen and (max-width: 480px){
    #taskmenu a {color: white;}
}
/* Custom Logo on Login Page */
.task-login #logo,
.loginLogo{
    display: inline-block;
    position: relative;
    top: 64px;
    max-height: 100px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast
}
/* Custom icon on webmail menu */
#layout-menu .popover-header img {
    object-fit: contain;
    max-width: 40px;
    width: 100%;
    padding: 0
}
#login-form {
    top: 88px;
    padding: 0 32px;
}
@media screen and (max-width: 1024px) and (min-width: 481px){
    #layout-menu .popover-header img {
        max-width: 32px
    }
}
/* Selected text styles */
*::selection {
    background-color: var(--h);
    color: white
}
*::-moz-selection {
    background: var(--h);
    color: white
}
#login-form .btn-primary{
    margin: 0;
    line-height: 1.8em;
}
/* dark mode */
html.dark-mode body {
    color: var(--l);
    background-color: var(--b);
}
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td{
    color: var(--vl);
    background-color: var(--d);
}
html.dark-mode #taskmenu a.selected, html.dark-mode .menu.toolbar a.selected{
    background-color: var(--d);
}
html.dark-mode #layout-menu .special-buttons a:not(:focus){
    background-color: var(--d);
}
html.dark-mode #messagestack .alert-info, html.dark-mode .ui.alert.boxinformation{
    color: var(--l);
    background-color: var(--h);
}
html.dark-mode #messagestack div, html.dark-mode #messagestack div i.icon:before{
    color: var(--l);
}
html.dark-mode .loginText{
    filter: invert(1);
}
html.dark-mode .input-group-text,
html.dark-mode .custom-file-label:not(.is-invalid),
html.dark-mode .form-control:not(.is-invalid),
html.dark-mode .custom-file-label:focus:not(.is-invalid),
html.dark-mode .form-control:focus:not(.is-invalid){
    border-color: var(--vl);
    background-color: var(--b);
    color: var(--l);
}
html.dark-mode #login-form .btn-primary{
    background-color: var(--l);
    color: var(--b);
}
html.dark-mode #login-form .btn-primary:hover{
    background-color: var(--vl);
}
html.dark-mode div.cal-1 a.calname:before{
    color: var(--h);
}
html.dark-mode .btn-primary{
    background-color: var(--h);
}
html.dark-mode .btn-primary:hover:not(:disabled){
    background-color: var(--ht);
    border-color: var(--h);
}
html.dark-mode ::placeholder {
    color: var(--m);
}
html.dark-mode #login-form .input-group .icon:before{
    color: var(--l);
}
html.dark-mode .input-group-text input:autofill{
    background-color: var(--b);
    color: var(--l);
}
html.dark-mode a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status{
    color: var(--l);
}
html.dark-mode a:hover,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a:hover,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status:hover{
    color: var(--vl);
}
/* Change Autocomplete styles in Chrome*/
html.dark-mode input:autofill,
html.dark-mode input:autofill:hover, 
html.dark-mode input:autofill:focus,
html.dark-mode textarea:autofill,
html.dark-mode textarea:autofill:hover,
html.dark-mode textarea:autofill:focus,
html.dark-mode select:autofill,
html.dark-mode select:autofill:hover,
html.dark-mode select:autofill:focus {
    background-color: var(--b);
    color: var(--l);
}
/* Change Autocomplete styles in Chrome*/
html.dark-mode input:-webkit-autofill,
html.dark-mode input:-webkit-autofill:hover, 
html.dark-mode input:-webkit-autofill:focus,
html.dark-mode textarea:-webkit-autofill,
html.dark-mode textarea:-webkit-autofill:hover,
html.dark-mode textarea:-webkit-autofill:focus,
html.dark-mode select:-webkit-autofill,
html.dark-mode select:-webkit-autofill:hover,
html.dark-mode select:-webkit-autofill:focus {
    color: var(--l);
    -webkit-text-fill-color: var(--l);
    background-color: var(--b);
    -webkit-box-shadow: 0 0 0px 1000px var(--b) inset;
    transition: background-color 5000s ease-in-out 0s;
}
html.dark-mode #taskmenu .action-buttons a{
    color: var(--vl);
}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before{
    background-color: var(--l);
    border-color: var(--vl);
}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::after{
    background-color: var(--vl);
}
html.dark-mode #logo{
    opacity: 1;
}
html.dark-mode .no-navbar #logo{
    background-color: var(--vl);
    border-radius: .3rem;
    padding: 16px;
}
html.dark-mode #login-footer > div {
    background-color: var(--d);
    color: var(--l);
}