:root {
  --AppColor: #005AA0;
  --BlueButtonColor: #05a8ff;
  --whiteColor: #ffffff;
  --DarkBlueColor: #013660;
  --HoverColor: #DBEAF7;
  --FormBorderColor: #005aa0bd;
  --BackgroundModal: #0078d4;/*#0078d49c;*/
  --BackgroundModalMobile: #0078d4;
  --BlackBg: #000000e6;
}

body {
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", sans-serif;
    text-shadow: rgba(0,0,0,0.01) 0 0 1px;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

a {
	text-decoration: none;
	outline: none;
	font-weight: 500;
}

::selection {
    background-color: var(--AppColor);
    color: #fff;
}

::-moz-selection {   
    background-color: var(--AppColor);
    color: #fff;
}
::-webkit-scrollbar { width: 0.85em }
::-webkit-scrollbar-thumb { background-color: #999 }

.app-input-text.darkBlue:focus, .login-ui .app-input-text:focus, .login-ui .totp-code input:focus{
    /* background-color: var(--whiteColor);
    color: #444; */
    margin-bottom: 10px;
}
.app-input-text.darkBlue, .login-ui .app-input-text, .login-ui .totp-code input{
    /* background-color: var(--DarkBlueColor);
    color: var(--whiteColor); */
    margin-bottom: 10px;
}

.app-button.blueButton, .login-ui .app-button{
    background-color: var(--BlueButtonColor);
    color: #fff;
    -webkit-appearance: none;
}




.connection-list-ui .app-search-bar{
    margin-right: 5px;
}
.connection-list-ui .menu-dropdown .menu-title{
    flex: unset;
}

.settings.section.session .app-search-bar{
    width: 100%;
}
.app-input-search{
    -webkit-appearance: none;
}
.app-button:hover{
    color: #fff;
}

td .app-select{
    width: 100%;
}
.app-input-text:not(.app-input-search){
    box-sizing: content-box;
}
.uppercase{
  text-transform: uppercase !important;
}

/* DARK THEME CSS */

html[theme='dark'] body{
    background-color: var(--BlackBg);
    color: var(--color_dark_text)
}

/* html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a:not(.qr-item) {
    background-image: url('../../../../images/protocol-icons/guac-monitor-light.png');
} */
html[theme='dark'] #app-nav-wrap nav a.logout,
html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a.logout  {
    background-image: url('../../../../images/action-icons/guac-logout.png');
}

html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a[href="#/"] {
    background-image: url('../../../../images/action-icons/guac-home.png');
}
html[theme='dark'] .user-menu .menu-dropdown .menu-title{
    background-image: url('../../../../images/user-icons/guac-user-light.png');
}

html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"],
html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"],
html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"],
html[theme='dark'] .user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] {
    background-image: url('../../../../images/action-icons/guac-config.png');
}

html[theme='dark'] .list-item .name, 
html[theme='dark'] .connection-group a, 
html[theme='dark'] .connection-group a:hover, 
html[theme='dark'] .connection-group a:visited, 
html[theme='dark'] .connection a, 
html[theme='dark'] .connection a:hover, 
html[theme='dark'] .connection a:visited, 
html[theme='dark'] .user-group a, 
html[theme='dark'] .user-group a:hover, 
html[theme='dark'] .user-group a:visited, 
html[theme='dark'] .user a, 
html[theme='dark'] .user a:hover, 
html[theme='dark'] .user a:visited,
html[theme='dark'] .page-tabs .page-list ul, .section-tabs ul,
html[theme='dark'] .page-tabs .page-list li a[href], 
html[theme='dark'] .section-tabs li a,
html[theme='dark'] .menu-dropdown .menu-contents li a
{
    color: var(--color_dark_text)
}
html[theme='dark'] .page-tabs .page-list ul, 
html[theme='dark'] .section-tabs ul,
html[theme='dark'] .menu-body,
html[theme='dark'] .menu-dropdown .menu-contents{

    background-color: var(--color_nav);
}

html[theme='dark'] .page-tabs .page-list li a[href].current, 
html[theme='dark'] .page-tabs .page-list li a[href].current:hover, 
html[theme='dark'] .section-tabs li a.current, 
html[theme='dark'] .section-tabs li a.current:hover,
html[theme='dark'] .accordion .item .title
{
    background-color: var(--color_nav);
    color: var(--color_dark_text)
}

html[theme='dark'] ul#contextmenu, 
html[theme='dark'] ul#contextmenuElement{
    background-color: var(--color_nav);
    color: #fff;
}

html[theme='dark'] ul#contextmenuElement li:hover, 
html[theme='dark'] ul#contextmenu li:hover {
    color: #fff;
}