body.client {
    background: #000;
    padding   : 0;
    margin    : 0;
    overflow  : hidden
}

#preload {
    visibility: hidden;
    right     : 0;
    width     : 0;
    height    : 0;
    overflow  : hidden
}

#preload,
.client-view {
    position: absolute;
    left    : 0
}

.client-view {
    top      : 0;
    width    : 100%;
    height   : 100%;
    font-size: 0
}

.client-view-content {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : column;
    -ms-flex-pack         : end;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : vertical;
    -moz-box-pack         : end;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : vertical;
    -webkit-box-pack      : end;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: column;
    -webkit-flex-pack     : end;
    display               : flex;
    align-items           : stretch;
    flex-direction        : column;
    flex-pack             : end;
    width                 : 100%;
    height                : 100%;
    font-size             : 12pt
}

.client-view .client-body {
    -ms-flex        : 1 1 auto;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1 1 auto;
    flex            : 1 1 auto;
    position        : relative
}

.client-view .client-bottom {
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto
}

.client-view .client-body guac-tiled-clients {
    position: absolute;
    left    : 0;
    top     : 0;
    right   : 0;
    bottom  : 0;
    width   : auto;
    height  : auto
}

.client .menu .header h2 {
    text-transform: none
}

.client .user-menu .menu-contents li a.disconnect {
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: .75em;
    padding-left       : 2.5em;
    background-image   : url(images/x.svg)
}

.client .drop-pending .display {
    background: #3161a9
}

.client .drop-pending .display>* {
    opacity: .5
}

#guac-menu .header h2.connection-select-menu {
    overflow: visible
}

.connection-select-menu {
    padding  : 0;
    min-width: 0
}

.connection-select-menu .menu-dropdown {
    border: none
}

.connection-select-menu .menu-dropdown .menu-contents {
    font-weight: 400;
    font-size  : .8em;
    right      : auto;
    left       : 0;
    max-width  : 100vw;
    width      : 400px
}

.connection-select-menu .menu-dropdown .menu-contents .filter input {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-left  : none
}

.connection-select-menu .menu-dropdown .menu-contents .filter {
    margin-bottom: .5em;
    padding      : 0
}

.connection-select-menu .menu-dropdown .menu-contents .group-list .caption {
    display      : inline-block;
    width        : 100%;
    overflow     : hidden;
    text-overflow: ellipsis
}

.connection-select-menu .menu-dropdown .menu-contents .caption .connection,
.connection-select-menu .menu-dropdown .menu-contents .caption .connection-group {
    display: inline-block
}

#connection-warning {
    position   : absolute;
    right      : .25em;
    bottom     : .25em;
    z-index    : 20;
    width      : 3in;
    max-width  : 100%;
    min-height : 1em;
    border-left: 2em solid #fa0;
    box-shadow : 1px 1px 2px rgba(0, 0, 0, .25);
    background : #ffe;
    padding    : .5em .75em;
    font-size  : .8em
}

#connection-warning:before {
    content            : " ";
    display            : block;
    position           : absolute;
    left               : -2em;
    top                : 0;
    width              : 1.25em;
    height             : 100%;
    margin             : 0 .375em;
    background         : url(images/warning.svg);
    background-size    : contain;
    background-position: 50%;
    background-repeat  : no-repeat
}

.software-cursor {
    cursor  : url(images/mouse/blank.gif), url(images/mouse/blank.cur), default;
    overflow: hidden;
    cursor  : none
}

.guac-error .software-cursor {
    cursor: default
}

div.main {
    overflow : auto;
    width    : 100%;
    height   : 100%;
    position : relative;
    font-size: 0
}

div.displayOuter {
    height  : 100%;
    width   : 100%;
    position: absolute;
    left    : 0;
    top     : 0;
    display : table
}

div.displayMiddle {
    width         : 100%;
    height        : 100%;
    display       : table-cell;
    vertical-align: middle;
    text-align    : center
}

div.display {
    display: inline-block
}

div.display * {
    position: relative
}

div.display>* {
    margin-left : auto;
    margin-right: auto
}

.file-browser .directory>.children {
    padding-left: 1em;
    display     : none
}

.file-browser .list-item .caption {
    white-space: nowrap;
    border     : 1px solid transparent
}

.file-browser .list-item.focused .caption {
    border    : 1px dotted rgba(0, 0, 0, .5);
    background: rgba(204, 221, 170, .5)
}

.file-browser .normal-file>.caption .icon {
    background-image: url(images/file.svg)
}

.file-browser .directory>.caption .icon {
    background-image: url(images/folder-closed.svg)
}

.file-browser .directory.previous>.caption .icon {
    background-image: url(images/folder-up.svg)
}

#file-transfer-dialog {
    position  : absolute;
    right     : 0;
    bottom    : 0;
    z-index   : 20;
    font-size : .8em;
    width     : 4in;
    max-width : 100%;
    max-height: 3in
}

#file-transfer-dialog .transfer-manager {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : column;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : vertical;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : vertical;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: column;
    display               : flex;
    align-items           : stretch;
    flex-direction        : column;
    max-width             : inherit;
    max-height            : inherit;
    border                : 1px solid rgba(0, 0, 0, .5);
    box-shadow            : 1px 1px 2px rgba(0, 0, 0, .25)
}

#file-transfer-dialog .transfer-manager .header {
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto
}

#file-transfer-dialog .transfer-manager .transfer-manager-body {
    -ms-flex        : 1 1 auto;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1 1 auto;
    flex            : 1 1 auto;
    overflow        : auto
}

@media (max-height:3in) {
    #file-transfer-dialog {
        max-height: 1.5in
    }
}

@media (max-height:1.5in) {
    #file-transfer-dialog {
        height: 100%
    }

    #file-transfer-dialog .transfer-manager {
        position: absolute;
        left    : .5em;
        top     : .5em;
        right   : .5em;
        bottom  : .5em
    }
}

#filesystem-menu .header h2 {
    font-size     : 1em;
    font-weight   : 400;
    padding-top   : 0;
    padding-bottom: 0
}

#filesystem-menu .header {
    -ms-flex-align     : center;
    -moz-box-align     : center;
    -webkit-box-align  : center;
    -webkit-align-items: center;
    align-items        : center
}

#filesystem-menu .menu-body {
    padding: .25em
}

#filesystem-menu .header.breadcrumbs {
    display      : block;
    background   : rgba(0, 0, 0, .0125);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    box-shadow   : none;
    margin-top   : 0;
    border-top   : none
}

#filesystem-menu .header.breadcrumbs .breadcrumb {
    display    : inline-block;
    padding    : .5em;
    font-size  : .8em;
    font-weight: 700
}

#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
    background-color: #cda;
    cursor          : pointer
}

#filesystem-menu .header.breadcrumbs .breadcrumb.root {
    background-size        : 1.5em 1.5em;
    -moz-background-size   : 1.5em 1.5em;
    -webkit-background-size: 1.5em 1.5em;
    -khtml-background-size : 1.5em 1.5em;
    background-repeat      : no-repeat;
    background-position    : 50%;
    background-image       : url(images/drive.svg);
    width                  : 2em;
    height                 : 2em;
    padding                : 0;
    vertical-align         : middle
}

#guac-menu .content {
    padding               : 0;
    margin                : 0;
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : column;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : vertical;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : vertical;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: column;
    display               : flex;
    align-items           : stretch;
    flex-direction        : column
}

#guac-menu .content>* {
    margin          : 0;
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto
}

#guac-menu .content>*+* {
    margin-top: 1em
}

#guac-menu .header h2 {
    white-space  : nowrap;
    overflow     : hidden;
    width        : 100%;
    text-overflow: ellipsis
}

#guac-menu #mouse-settings .choice {
    text-align: center
}

#guac-menu #mouse-settings .choice .figure {
    display       : inline-block;
    vertical-align: middle;
    width         : 75%;
    max-width     : 320px
}

#guac-menu #keyboard-settings .caption {
    font-size   : .9em;
    margin-left : 2em;
    margin-right: 2em
}

#guac-menu #mouse-settings .figure .caption {
    text-align: center;
    font-size : .9em
}

#guac-menu #mouse-settings .figure img {
    display  : block;
    width    : 100%;
    max-width: 320px;
    margin   : 1em auto
}

#guac-menu #keyboard-settings .figure {
    float    : right;
    max-width: 30%;
    margin   : 1em
}

#guac-menu #keyboard-settings .figure img {
    width: 100%
}

#guac-menu #zoom-settings {
    text-align: center
}

#guac-menu #devices .device {
    border                 : 1px solid rgba(0, 0, 0, .125);
    background             : rgba(0, 0, 0, .04);
    padding                : 1em 1em 1em 3.5em;
    background-size        : 1.5em 1.5em;
    -moz-background-size   : 1.5em 1.5em;
    -webkit-background-size: 1.5em 1.5em;
    -khtml-background-size : 1.5em 1.5em;
    background-repeat      : no-repeat;
    background-position    : 1em
}

#guac-menu #devices .device:hover {
    cursor      : pointer;
    border-color: #000
}

#guac-menu #devices .device.filesystem {
    background-image: url(images/drive.svg)
}

#guac-menu #share-links {
    padding   : 1em;
    border    : 1px solid rgba(0, 0, 0, .125);
    background: rgba(0, 0, 0, .04);
    font-size : .8em
}

#guac-menu #share-links h3 {
    padding-bottom: 0
}

#guac-menu #share-links th {
    white-space: nowrap
}

#guac-menu #share-links a[href] {
    display    : block;
    padding    : 0 1em;
    font-family: monospace;
    font-weight: 700
}

.keyboard-container {
    text-align: center;
    width     : 100%;
    margin    : 0;
    padding   : 0;
    border-top: 1px solid #000;
    background: #222;
    opacity   : .85;
    z-index   : 1
}

.menu {
    overflow          : hidden;
    position          : absolute;
    top               : 0;
    height            : 100%;
    max-width         : 100%;
    width             : 480px;
    background        : #eee;
    box-shadow        : inset -1px 0 2px #fff, 1px 0 2px #000;
    z-index           : 100;
    -webkit-transition: left .125s, opacity .125s;
    -moz-transition   : left .125s, opacity .125s;
    -ms-transition    : left .125s, opacity .125s;
    -o-transition     : left .125s, opacity .125s;
    transition        : left .125s, opacity .125s
}

.menu-content {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : column;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : vertical;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : vertical;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: column;
    display               : flex;
    align-items           : stretch;
    flex-direction        : column;
    width                 : 100%;
    height                : 100%
}

.menu-content .header {
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto;
    margin-bottom   : 0
}

.menu-body {
    -ms-flex              : 1 1 auto;
    -moz-box-flex         : 1;
    -webkit-box-flex      : 1;
    -webkit-flex          : 1 1 auto;
    flex                  : 1 1 auto;
    padding               : 1em;
    overflow              : auto;
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : column;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : vertical;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : vertical;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: column;
    display               : flex;
    align-items           : stretch;
    flex-direction        : column
}

.menu-body>* {
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto
}

.menu-section h3 {
    margin : 0;
    padding: 0 0 1em
}

.menu-section~.menu-section h3 {
    padding-top: 1em
}

.menu,
.menu.closed {
    left   : -480px;
    opacity: 0
}

.menu.open {
    left   : 0;
    opacity: 1
}

.client-status-modal {
    position  : absolute;
    left      : 0;
    top       : 0;
    width     : 100%;
    height    : 100%;
    display   : none;
    background: rgba(0, 0, 0, .5)
}

.client-status-modal.shown {
    display: block
}

.client-status-modal guac-modal {
    position: absolute
}

.client-status-modal .notification {
    background: rgba(40, 40, 40, .75);
    color     : #fff;
    width     : 100%;
    max-width : 100%;
    padding   : 1em;
    text-align: center;
    border    : none
}

.client-status-modal .notification.error {
    background: rgba(112, 9, 8, .75)
}

.client-status-modal .notification .title-bar {
    display: none
}

.client-status-modal .notification .button {
    background : transparent;
    border     : 2px solid #fff;
    box-shadow : none;
    text-shadow: none;
    font-weight: 400
}

.client-status-modal .notification .button:hover {
    text-decoration: underline;
    background     : hsla(0, 0%, 100%, .25)
}

.client-status-modal .notification .button:active {
    background: hsla(0, 0%, 100%, .5)
}

.client-status-modal .notification .parameters {
    width    : 100%;
    max-width: 5in;
    margin   : 0 auto
}

.client-status-modal .notification .parameters .password-field .toggle-password,
.client-status-modal .notification .parameters h3 {
    display: none
}

.client-status-modal .notification .parameters input[type=email],
.client-status-modal .notification .parameters input[type=number],
.client-status-modal .notification .parameters input[type=password],
.client-status-modal .notification .parameters input[type=text],
.client-status-modal .notification .parameters textarea {
    background: transparent;
    border    : 2px solid #fff;
    color     : #fff
}

.share-menu {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : stretch;
    flex-direction        : row
}

.share-menu .menu-dropdown .menu-title {
    padding-left       : 2em;
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: .5em;
    background-image   : url(images/share.svg)
}

div.thumbnail-main {
    overflow : hidden;
    width    : 100%;
    height   : 100%;
    position : relative;
    font-size: 0
}

.thumbnail-main .display {
    pointer-events: none
}

.tiled-client-grid {
    width : 100%;
    height: 100%
}

.tiled-client-grid,
.tiled-client-grid .client-tile,
.tiled-client-grid .tiled-client-cell,
.tiled-client-grid .tiled-client-row {
    display         : -webkit-box;
    display         : -webkit-flex;
    display         : -ms-flexbox;
    display         : flex;
    -webkit-box-flex: 1;
    -webkit-flex    : 1;
    -ms-flex        : 1;
    flex            : 1
}

.tiled-client-grid {
    -webkit-box-orient    : vertical;
    -webkit-box-direction : normal;
    -webkit-flex-direction: column;
    -ms-flex-direction    : column;
    flex-direction        : column
}

.tiled-client-grid .tiled-client-row {
    -webkit-box-orient    : horizontal;
    -webkit-box-direction : normal;
    -webkit-flex-direction: row;
    -ms-flex-direction    : row;
    flex-direction        : row
}

.tiled-client-grid .client-tile {
    position              : relative;
    display               : -webkit-box;
    display               : -webkit-flex;
    display               : -ms-flexbox;
    display               : flex;
    -webkit-box-orient    : vertical;
    -webkit-box-direction : normal;
    -webkit-flex-direction: column;
    -ms-flex-direction    : column;
    flex-direction        : column;
    line-height           : 1.5
}

.tiled-client-grid .client-tile .client-tile-header {
    display            : -webkit-box;
    display            : -webkit-flex;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -webkit-align-items: center;
    -ms-flex-align     : center;
    align-items        : center;
    margin             : 0;
    background         : #444;
    padding            : 0 .25em;
    font-size          : .8em;
    color              : #fff;
    z-index            : 30;
    min-height         : 1.5em
}

.tiled-client-grid .client-tile.focused .client-tile-header {
    background-color: #3161a9
}

.tiled-client-grid .client-tile .client-tile-header>* {
    -webkit-box-flex: 0;
    -webkit-flex    : 0;
    -ms-flex        : 0;
    flex            : 0
}

.tiled-client-grid .client-tile .client-tile-header .client-tile-name {
    -webkit-box-flex: 1;
    -webkit-flex    : 1;
    -ms-flex        : 1;
    flex            : 1;
    padding         : 0 .5em;
    margin-bottom   : -.125em
}

.tiled-client-grid .client-tile .main {
    -webkit-box-flex: 1;
    -webkit-flex    : 1;
    -ms-flex        : 1;
    flex            : 1
}

.tiled-client-grid .client-tile-disconnect,
.tiled-client-grid .client-tile-shared-indicator {
    max-height: 1em;
    height    : 100%
}

.tiled-client-grid .client-tile-shared-indicator {
    display: none
}

.tiled-client-grid .shared .client-tile-shared-indicator {
    display: inline
}

.tiled-client-grid .client-user-count {
    visibility   : hidden;
    display      : block;
    position     : absolute;
    right        : 0;
    top          : 0;
    z-index      : 1;
    border-radius: .25em;
    padding      : .125em .75em;
    margin       : .5em;
    background   : #055;
    color        : #fff;
    font-weight  : 700;
    font-size    : .8em
}

.tiled-client-grid .client-user-count:before {
    content            : " ";
    display            : inline-block;
    margin-bottom      : -.2em;
    padding-right      : .25em;
    width              : 1em;
    height             : 1em;
    background         : 50%/contain no-repeat url(images/user-icons/guac-user-white.svg);
    background-size    : contain;
    background-position: 50%;
    background-repeat  : no-repeat
}

.tiled-client-grid .client-user-count .client-user-count-messages,
.tiled-client-grid .client-user-count .client-user-count-users {
    position  : absolute;
    right     : 0;
    padding   : 0;
    margin    : .5em 0 0;
    list-style: none
}

.tiled-client-grid .client-user-count .client-user-count-message,
.tiled-client-grid .client-user-count .client-user-count-users {
    border-radius: .25em;
    background   : #000;
    color        : #fff;
    padding      : .5em
}

.tiled-client-grid .client-user-count .client-user-count-message {
    white-space: nowrap;
    animation  : fadeout 1s linear 3s
}

.tiled-client-grid .client-tile-header .client-user-count {
    display      : inline-block;
    position     : relative;
    white-space  : nowrap;
    background   : #000;
    padding-left : .5em;
    padding-right: .75em
}

.tiled-client-grid .client-tile-header .client-user-count:before {
    padding-right: .75em
}

.tiled-client-grid .joined .client-user-count {
    visibility: visible
}

.tiled-client-grid .client-user-count .client-user-count-users {
    display: none
}

.tiled-client-grid .client-user-count:hover .client-user-count-users {
    display: block
}

.tiled-client-grid .client-user-count .client-user-count-user:after {
    content     : ", ";
    margin-right: .25em
}

.tiled-client-grid .client-user-count .client-user-count-user:last-child:after {
    content: none
}

.tiled-client-grid .client-user-count .client-user-count-user {
    display: inline-block
}

.tiled-client-grid .client-user-count .client-user-count-user.anonymous {
    font-style: italic;
    opacity   : .5
}

.tiled-client-grid .client-user-count .client-user-count-users {
    width      : 256px;
    max-width  : 75vw;
    white-space: normal;
    border     : 1px solid #333
}

.tiled-client-grid .client-user-count .client-user-count-users:before {
    content      : " ";
    display      : block;
    position     : absolute;
    right        : .5em;
    top          : -.5em;
    width        : 1em;
    height       : 1em;
    background   : #000;
    border       : 1px solid #333;
    border-right : none;
    border-bottom: none;
    transform    : rotate(45deg)
}

.transfer-manager {
    background: #fff
}

.transfer-manager .header h2 {
    font-size     : 1em;
    padding-top   : 0;
    padding-bottom: 0
}

.transfer-manager .header {
    margin             : 0;
    -ms-flex-align     : center;
    -moz-box-align     : center;
    -webkit-box-align  : center;
    -webkit-align-items: center;
    align-items        : center
}

.transfer-manager h3 {
    font-size : 1em;
    margin    : .25em .25em 0;
    opacity   : .5;
    text-align: center
}

.transfer-manager .transfers {
    display: table;
    padding: .25em;
    width  : 100%
}

.transfer {
    display: table-row
}

.transfer .transfer-status {
    display : table-cell;
    padding : .25em;
    position: relative
}

.transfer .text {
    display   : table-cell;
    text-align: right;
    padding   : .25em
}

.transfer .filename {
    white-space  : nowrap;
    text-overflow: ellipsis;
    overflow     : hidden;
    position     : relative;
    font-family  : monospace;
    font-weight  : 700;
    padding      : .125em
}

@keyframes transfer-progress {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 64px 0
    }
}

@-webkit-keyframes transfer-progress {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 64px 0
    }
}

.transfer .progress {
    width   : 100%;
    padding : .25em;
    position: absolute;
    top     : 0;
    left    : 0;
    bottom  : 0;
    opacity : .25
}

.transfer.in-progress .progress {
    background-color                 : #eee;
    background-image                 : url(images/progress.svg);
    background-size                  : 16px 16px;
    -moz-background-size             : 16px 16px;
    -webkit-background-size          : 16px 16px;
    -khtml-background-size           : 16px 16px;
    animation-name                   : transfer-progress;
    animation-duration               : 2s;
    animation-timing-function        : linear;
    animation-iteration-count        : infinite;
    -webkit-animation-name           : transfer-progress;
    -webkit-animation-duration       : 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite
}

.transfer .progress .bar {
    display   : none;
    background: #a3d655;
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 100%;
    width     : 0
}

.transfer.in-progress .progress .bar {
    display: initial
}

.transfer.savable {
    cursor: pointer
}

.transfer.savable .filename {
    color          : #00f;
    text-decoration: underline
}

.transfer.error {
    background: #fdd
}

.transfer .error-text,
.transfer.error .progress .bar,
.transfer.error .text {
    display: none
}

.transfer.error .error-text {
    display: block;
    margin : .5em 0 0;
    width  : 100%
}

.viewport {
    position: absolute;
    bottom  : 0;
    right   : 0;
    width   : 100%;
    height  : 100%;
    overflow: hidden
}

.client-zoom .client-zoom-in,
.client-zoom .client-zoom-out,
.client-zoom .client-zoom-state {
    display       : inline-block;
    vertical-align: middle
}

.client-zoom .client-zoom-in,
.client-zoom .client-zoom-out {
    max-width    : 3em;
    border       : 1px solid rgba(0, 0, 0, .5);
    background   : rgba(0, 0, 0, .1);
    border-radius: 2em;
    margin       : .5em;
    cursor       : pointer
}

.client-zoom .client-zoom-in img,
.client-zoom .client-zoom-out img {
    width  : 100%;
    opacity: .5
}

.client-zoom .client-zoom-in:hover,
.client-zoom .client-zoom-out:hover {
    border    : 1px solid #000;
    background: #cda
}

.client-zoom .client-zoom-in:hover img,
.client-zoom .client-zoom-out:hover img {
    opacity: 1
}

.client-zoom .client-zoom-state {
    font-size: 1.5em
}

.client-zoom .client-zoom-autofit {
    text-align: left;
    margin-top: 1em
}

.client-zoom .client-zoom-state input {
    width       : 2em;
    font-size   : 1em;
    padding     : 0;
    background  : transparent;
    border-color: rgba(0, 0, 0, .125)
}

.client-zoom .client-zoom-state input::-webkit-inner-spin-button,
.client-zoom .client-zoom-state input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin            : 0
}

.clipboard,
.clipboard-service-target {
    background: #fff
}

.clipboard {
    position             : relative;
    border               : 1px solid #aaa;
    -moz-border-radius   : .25em;
    -webkit-border-radius: .25em;
    -khtml-border-radius : .25em;
    border-radius        : .25em;
    width                : 100%;
    height               : 2in;
    white-space          : pre;
    font-size            : 1em;
    overflow             : auto;
    padding              : .25em
}

.clipboard div,
.clipboard p {
    margin: 0
}

.clipboard img {
    max-width : 100%;
    max-height: 100%;
    display   : block;
    margin    : 0 auto;
    border    : 1px solid #000;
    background: url(images/checker.svg)
}

.clipboard-service-target {
    position   : fixed;
    left       : -1em;
    right      : -1em;
    width      : 1em;
    height     : 1em;
    white-space: pre;
    overflow   : hidden
}

.resize-sensor {
    height  : 100%;
    width   : 100%;
    position: absolute;
    left    : 0;
    top     : 0;
    overflow: hidden;
    border  : none;
    opacity : 0;
    z-index : -1
}

/*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */
.pickr {
    position : relative;
    overflow : visible;
    transform: translateY(0)
}

.pickr * {
    box-sizing        : border-box;
    outline           : none;
    border            : none;
    -webkit-appearance: none
}

.pickr .pcr-button {
    position       : relative;
    height         : 2em;
    width          : 2em;
    padding        : .5em;
    cursor         : pointer;
    font-family    : -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    border-radius  : .15em;
    background     : url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;
    background-size: 0;
    transition     : all .3s
}

.pickr .pcr-button:before {
    background     : url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    z-index        : -1;
    z-index        : auto
}

.pickr .pcr-button:after,
.pickr .pcr-button:before {
    position     : absolute;
    content      : "";
    top          : 0;
    left         : 0;
    width        : 100%;
    height       : 100%;
    border-radius: .15em
}

.pickr .pcr-button:after {
    transition: background .3s;
    background: var(--pcr-color)
}

.pickr .pcr-button.clear {
    background-size: 70%
}

.pickr .pcr-button.clear:before {
    opacity: 0
}

.pickr .pcr-button.clear:focus {
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .85), 0 0 0 3px var(--pcr-color)
}

.pickr .pcr-button.disabled {
    cursor: not-allowed
}

.pcr-app *,
.pickr * {
    box-sizing        : border-box;
    outline           : none;
    border            : none;
    -webkit-appearance: none
}

.pcr-app button.pcr-active,
.pcr-app button:focus,
.pcr-app input.pcr-active,
.pcr-app input:focus,
.pickr button.pcr-active,
.pickr button:focus,
.pickr input.pcr-active,
.pickr input:focus {
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .85), 0 0 0 3px var(--pcr-color)
}

.pcr-app .pcr-palette,
.pcr-app .pcr-slider,
.pickr .pcr-palette,
.pickr .pcr-slider {
    transition: box-shadow .3s
}

.pcr-app .pcr-palette:focus,
.pcr-app .pcr-slider:focus,
.pickr .pcr-palette:focus,
.pickr .pcr-slider:focus {
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .85), 0 0 0 3px rgba(0, 0, 0, .25)
}

.pcr-app {
    position      : fixed;
    display       : flex;
    flex-direction: column;
    z-index       : 10000;
    border-radius : .1em;
    background    : #fff;
    opacity       : 0;
    visibility    : hidden;
    transition    : opacity .3s, visibility 0s .3s;
    font-family   : -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    box-shadow    : 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
    left          : 0;
    top           : 0
}

.pcr-app.visible {
    transition: opacity .3s;
    visibility: visible;
    opacity   : 1
}

.pcr-app .pcr-swatches {
    display   : flex;
    flex-wrap : wrap;
    margin-top: .75em
}

.pcr-app .pcr-swatches.pcr-last {
    margin: 0
}

@supports (display:grid) {
    .pcr-app .pcr-swatches {
        display              : grid;
        align-items          : center;
        grid-template-columns: repeat(auto-fit, 1.75em)
    }
}

.pcr-app .pcr-swatches>button {
    font-size    : 1em;
    position     : relative;
    width        : calc(1.75em - 5px);
    height       : calc(1.75em - 5px);
    border-radius: .15em;
    cursor       : pointer;
    margin       : 2.5px;
    flex-shrink  : 0;
    justify-self : center;
    transition   : all .15s;
    overflow     : hidden;
    background   : transparent;
    z-index      : 1
}

.pcr-app .pcr-swatches>button:before {
    position       : absolute;
    content        : "";
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: 6px;
    border-radius  : .15em;
    z-index        : -1
}

.pcr-app .pcr-swatches>button:after {
    content      : "";
    position     : absolute;
    top          : 0;
    left         : 0;
    width        : 100%;
    height       : 100%;
    background   : var(--pcr-color);
    border       : 1px solid rgba(0, 0, 0, .05);
    border-radius: .15em;
    box-sizing   : border-box
}

.pcr-app .pcr-swatches>button:hover {
    filter: brightness(1.05)
}

.pcr-app .pcr-swatches>button:not(.pcr-active) {
    box-shadow: none
}

.pcr-app .pcr-interaction {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    margin     : 0 -.2em
}

.pcr-app .pcr-interaction>* {
    margin: 0 .2em
}

.pcr-app .pcr-interaction input {
    letter-spacing: .07em;
    font-size     : .75em;
    text-align    : center;
    cursor        : pointer;
    color         : #75797e;
    background    : #f1f3f4;
    border-radius : .15em;
    transition    : all .15s;
    padding       : .45em .5em;
    margin-top    : .75em
}

.pcr-app .pcr-interaction input:hover {
    filter: brightness(.975)
}

.pcr-app .pcr-interaction input:focus {
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .85), 0 0 0 3px rgba(66, 133, 244, .75)
}

.pcr-app .pcr-interaction .pcr-result {
    color        : #75797e;
    text-align   : left;
    flex         : 1 1 8em;
    min-width    : 8em;
    transition   : all .2s;
    border-radius: .15em;
    background   : #f1f3f4;
    cursor       : text
}

.pcr-app .pcr-interaction .pcr-result::-moz-selection {
    background: #4285f4;
    color     : #fff
}

.pcr-app .pcr-interaction .pcr-result::selection {
    background: #4285f4;
    color     : #fff
}

.pcr-app .pcr-interaction .pcr-type.active {
    color     : #fff;
    background: #4285f4
}

.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear,
.pcr-app .pcr-interaction .pcr-save {
    width: auto;
    color: #fff
}

.pcr-app .pcr-interaction .pcr-cancel:hover,
.pcr-app .pcr-interaction .pcr-clear:hover,
.pcr-app .pcr-interaction .pcr-save:hover {
    filter: brightness(.925)
}

.pcr-app .pcr-interaction .pcr-save {
    background: #4285f4
}

.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
    background: #f44250
}

.pcr-app .pcr-interaction .pcr-cancel:focus,
.pcr-app .pcr-interaction .pcr-clear:focus {
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .85), 0 0 0 3px rgba(244, 66, 80, .75)
}

.pcr-app .pcr-selection .pcr-picker {
    position           : absolute;
    height             : 18px;
    width              : 18px;
    border             : 2px solid #fff;
    border-radius      : 100%;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none
}

.pcr-app .pcr-selection .pcr-color-chooser,
.pcr-app .pcr-selection .pcr-color-opacity,
.pcr-app .pcr-selection .pcr-color-palette {
    position           : relative;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    display            : flex;
    flex-direction     : column;
    cursor             : grab;
    cursor             : -webkit-grab
}

.pcr-app .pcr-selection .pcr-color-chooser:active,
.pcr-app .pcr-selection .pcr-color-opacity:active,
.pcr-app .pcr-selection .pcr-color-palette:active {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.pcr-app[data-theme=monolith] {
    width    : 14.25em;
    max-width: 95vw;
    padding  : .8em
}

.pcr-app[data-theme=monolith] .pcr-selection {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    flex-grow      : 1
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview {
    position       : relative;
    z-index        : 1;
    width          : 100%;
    height         : 1em;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    margin-bottom  : .5em
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview:before {
    position       : absolute;
    content        : "";
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    border-radius  : .15em;
    z-index        : -1
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
    cursor       : pointer;
    transition   : background-color .3s, box-shadow .3s;
    border-radius: .15em 0 0 .15em;
    z-index      : 2
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color {
    border-radius: 0 .15em .15em 0
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color,
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
    background: var(--pcr-color);
    width     : 50%;
    height    : 100%
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette {
    width  : 100%;
    height : 8em;
    z-index: 1
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette {
    border-radius: .15em;
    width        : 100%;
    height       : 100%
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette:before {
    position       : absolute;
    content        : "";
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    border-radius  : .15em;
    z-index        : -1
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser,
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity {
    height    : .5em;
    margin-top: .75em
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker,
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker {
    top      : 50%;
    transform: translateY(-50%)
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider,
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
    flex-grow    : 1;
    border-radius: 50em
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider {
    background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red)
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
    background     : linear-gradient(90deg, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: 100%, .25em
}

.form-field .password-field {
    white-space: nowrap
}

.form-field .password-field .icon.toggle-password {
    display          : inline-block;
    opacity          : .5;
    cursor           : default;
    background-repeat: no-repeat;
    background-size  : 1em;
    width            : 1em;
    height           : 1em
}

.form-field .password-field input[type=password]~.icon.toggle-password {
    background-image: url(images/action-icons/guac-show-pass.svg)
}

.form-field .password-field input[type=text]~.icon.toggle-password {
    background-image: url(images/action-icons/guac-hide-pass.svg)
}

.form table.fields th {
    text-align   : left;
    font-weight  : 400;
    padding-right: 1em
}

.redirect-field-container {
    height    : 100%;
    width     : 100%;
    position  : fixed;
    left      : 0;
    top       : 0;
    display   : table;
    background: #fff
}

.redirect-field {
    width         : 100%;
    display       : table-cell;
    vertical-align: middle;
    text-align    : center
}

.terminal-color-scheme-field {
    max-width: 320px
}

.terminal-color-scheme-field select {
    width: 100%
}

.terminal-color-scheme-field .custom-color-scheme {
    background    : #eee;
    padding       : .5em;
    border        : 1px solid silver;
    border-spacing: 0;
    margin-top    : -2px;
    width         : 100%
}

.terminal-color-scheme-field .custom-color-scheme-section {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.terminal-color-scheme-field .guac-input-color {
    display         : block;
    margin          : 2px;
    width           : 1.5em;
    height          : 1.5em;
    min-width       : 1.25em;
    border-radius   : .15em;
    line-height     : 1.5em;
    text-align      : center;
    font-size       : .75em;
    cursor          : pointer;
    color           : #000;
    -ms-flex        : 1;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1;
    flex            : 1
}

.terminal-color-scheme-field .guac-input-color.read-only {
    cursor: not-allowed
}

.terminal-color-scheme-field .guac-input-color.dark {
    color: #fff
}

.terminal-color-scheme-field .palette .guac-input-color {
    font-weight: 700
}

.terminal-color-scheme-field.custom-color-scheme-details-hidden .custom-color-scheme .palette .guac-input-color {
    color: transparent
}

.terminal-color-scheme-field .custom-color-scheme-details-header {
    font-size: .8em;
    margin   : .5em 0;
    padding  : 0
}

.terminal-color-scheme-field .custom-color-scheme-details-header:before {
    content: "▸ "
}

.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-details-header:before {
    content: "▾ "
}

.terminal-color-scheme-field .custom-color-scheme-hide-details,
.terminal-color-scheme-field .custom-color-scheme-show-details {
    color          : #00f;
    text-decoration: underline;
    cursor         : pointer;
    margin         : 0 .25em;
    font-weight    : 400
}

.terminal-color-scheme-field .custom-color-scheme-hide-details {
    display: none
}

.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-hide-details {
    display: inline
}

.terminal-color-scheme-field .custom-color-scheme-details,
.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-show-details {
    display: none
}

.terminal-color-scheme-field.custom-color-scheme-details-visible .custom-color-scheme-details {
    display: block;
    width  : 100%;
    margin : .5em 0
}

.guac-input-color-picker[data-theme=monolith] {
    width: 16.25em
}

.guac-input-color-picker[data-theme=monolith] button {
    min-width : 0;
    padding   : 0;
    margin    : 0;
    box-shadow: none
}

.history-unavailable div.recent-connections {
    display: none
}

div.all-connections,
div.clipboardDiv,
div.recent-connections,
div.settings {
    margin : 1em;
    padding: 0
}

.all-connections .list-buttons {
    text-align: center;
    padding   : 0
}

div.recent-connections {
    text-align: center
}

div.recent-connections div.connection {
    -moz-border-radius   : .5em;
    -webkit-border-radius: .5em;
    -khtml-border-radius : .5em;
    border-radius        : .5em;
    display              : inline-block;
    padding              : 1em;
    margin               : 1em;
    text-align           : center;
    max-width            : 75%;
    overflow             : hidden
}

.empty.balancer a.home-connection-group,
a.home-connection {
    display: block
}

.all-connections .connection-group>.caption .icon {
    display: none
}

.all-connections .connection-group.empty.balancer>.caption .icon,
.all-connections .connection-group>.caption .icon.expand {
    display: inline-block
}

.all-connections .connection-group.empty.balancer>.caption .icon.expand {
    display: none
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-moz-keyframes fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes popin {
    0% {
        transform: scale(0);
        opacity  : 0
    }

    to {
        transform: scale(1)
    }
}

.automatic-login-rejected-modal guac-modal {
    background: #fff;
    z-index   : 20
}

.automatic-login-rejected-modal .notification {
    display  : inline-block;
    max-width: 5in;
    padding  : 1em;
    width    : 100%
}


.copyright {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    line-height: 1.42857143;
    color: #333;
    text-align: center;
    font-weight: bold;
    background-color: #fff;
}

.copyright2 .copyright2:visited .copyright2:hover .copyright2:active {
    color: #598d36;
 text-decoration: none;
    }

    a {
        color: #598d36;
        text-decoration: none
    }
    
    a:focus,a:hover {
        color: #598d36;
        text-decoration: underline
    }


.form-control:focus {
    border-color: #ed6a8f;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(237 106 143 / 60%);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(237 106 143 / 60%)
}

a.button {
    cursor : default;
    display: inline-block
}

a.button,
button,
input[type=submit] {
    -webkit-appearance: none;
    text-decoration   : none;
    background-color  : #598d36;
    border            : 1px solid rgba(0, 0, 0, .4);
    color             : #000;
    font-size         : 1em;
    font-weight       : 700;
    font-family       : Helvetica, sans-serif;
    padding: 10px 15px;
    /* min-width         : 5em; */
    margin            : .25em;
    box-shadow        : 0 1px 2px rgba(0, 0, 0, .25);
    border-radius     : 6px
    
}

a.button:hover,
button:hover,
input[type=submit]:hover {
    background-color: #346911
}

a.button:active,
button:active,
input[type=submit]:active {
    background-color: #346911;
    box-shadow      : inset 1px 1px .25em rgba(0, 0, 0, .25), -1px -1px .25em rgba(0, 0, 0, .25), 1px 1px .25em hsla(0, 0%, 100%, .25)
}

a.button.danger,
button.danger {
    background: #a43
}

a.button.danger:hover,
button.danger:hover {
    background: #c54
}

a.button.danger:active,
button.danger:active {
    background: #932
}

button.danger:disabled,
button:disabled,
input[type=submit]:disabled {
    background-color: #3c3c3c;
    color           : hsla(0, 0%, 100%, .5);
    opacity         : .75
}

.button.back,
.button.change-password,
.button.home,
.button.logout,
.button.manage,
.button.reconnect,
button.back,
button.change-password,
button.home,
button.logout,
button.manage,
button.reconnect {
    position    : relative;
    padding-left: 1.8em
}

.button.back:before,
.button.change-password:before,
.button.home:before,
.button.logout:before,
.button.manage:before,
.button.reconnect:before,
button.back:before,
button.change-password:before,
button.home:before,
button.logout:before,
button.manage:before,
button.reconnect:before {
    content            : " ";
    position           : absolute;
    left               : 0;
    top                : 0;
    bottom             : 0;
    width              : 1.8em;
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: .5em .45em
}

.button.logout:before,
button.logout:before {
    background-image: url(images/action-icons/guac-logout.svg)
}

.button.reconnect:before,
button.reconnect:before {
    background-image: url(images/circle-arrows.svg)
}

.button.manage:before,
button.manage:before {
    background-image: url(images/action-icons/guac-config.svg)
}

.button.back:before,
button.back:before {
    background-image: url(images/action-icons/guac-back.svg)
}

.button.home:before,
button.home:before {
    background-image: url(images/action-icons/guac-home.svg)
}

.button.change-password:before,
button.change-password:before {
    background-image: url(images/action-icons/guac-key.svg)
}

.translate-cloak,
[ng-cloak] {
    display: none !important
}

.fatal-page-error-modal guac-modal {
    z-index: 30
}

.fatal-page-error {
    display   : inline-block;
    width     : 100%;
    max-width : 5in;
    padding   : 1em;
    text-align: left
}

.fatal-page-error h1 {
    text-transform: uppercase;
    padding       : 0 1em 0 0
}

.fatal-page-error h1:before {
    content          : " ";
    display          : inline-block;
    background       : url(images/warning.svg);
    background-repeat: no-repeat;
    height           : 1em;
    width            : 1em;
    background-size  : contain;
    margin           : 0 .25em -.2em
}

.fatal-page-error-outer {
    visibility         : hidden;
    opacity            : 0;
    transition         : opacity, visibility;
    transition-duration: .25s
}

.shown.fatal-page-error-outer {
    visibility: visible;
    opacity   : 1
}

@font-face {
    font-family: Carlito;
    font-weight: 400;
    font-style : normal;
    src        : url(fonts/carlito/Carlito-Regular.woff) format("woff")
}

@font-face {
    font-family: Carlito;
    font-weight: 700;
    font-style : normal;
    src        : url(fonts/carlito/Carlito-Bold.woff) format("woff")
}

@font-face {
    font-family: Carlito;
    font-weight: 400;
    font-style : italic;
    src        : url(fonts/carlito/Carlito-Italic.woff) format("woff")
}

h1 {
    font-size     : 2em;
    vertical-align: middle;
    text-align    : center
}

h1,
h2 {
    margin : 0;
    padding: .5em
}

h2 {
    font-size     : 1.25em;
    font-weight   : 700;
    text-transform: uppercase
}

.header {
    border-bottom         : 1px solid rgba(0, 0, 0, .125);
    box-shadow            : 0 1px 2px rgba(0, 0, 0, .125);
    background            : rgb(89 141 54 / 73%);
    margin-bottom         : 1em;
    margin-top            : 0;
    border-top            : none;
    width                 : 100%;
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : stretch;
    flex-direction        : row
}

.header.tabbed {
    margin-bottom: 0
}

.header~* .header,
.header~.header {
    margin-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, .125)
}

.header h2 {
    -ms-flex        : 1 1 auto;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1 1 auto;
    flex            : 1 1 auto
}

.header .filter {
    margin : 0;
    padding: .5em
}

.header .filter input {
    -moz-border-radius   : 0;
    -webkit-border-radius: 0;
    -khtml-border-radius : 0;
    border-radius        : 0;
    border               : none;
    border-left          : 1px solid rgba(0, 0, 0, .125);
    background-color     : transparent
}

input[type=checkbox],
input[type=email],
input[type=number],
input[type=radio],
input[type=text],
label,
textarea {
    -webkit-tap-highlight-color: rgba(128, 192, 128, .5)
}

div.location,
input[type=email],
input[type=number],
input[type=password],
input[type=text],
textarea {
    border               : 1px solid #777;
    -moz-border-radius   : .2em;
    -webkit-border-radius: .2em;
    -khtml-border-radius : .2em;
    border-radius        : .2em;
    width                : 100%;
    max-width            : 16em;
    padding              : .25em;
    font-size            : .8em;
    background           : #fff;
    cursor               : text
}

textarea {
    max-width  : none;
    width      : 30em;
    height     : 10em;
    white-space: pre;
    word-wrap  : normal;
    overflow   : auto
}

.connection,
.connection-group,
.user,
.user-group {
    cursor: pointer
}

.connection-group a,
.connection-group a:hover,
.connection-group a:visited,
.connection a,
.connection a:hover,
.connection a:visited,
.user-group a,
.user-group a:hover,
.user-group a:visited,
.user a,
.user a:hover,
.user a:visited {
    text-decoration: none;
    color          : #000
}

.recent-connections .connection:hover {
    background: #cda
}

.recent-connections .connection .thumbnail {
    display: block;
    margin : .5em
}

.recent-connections .connection .thumbnail>* {
    border    : 1px solid #000;
    background: #000;
    box-shadow: 1px 1px 5px #000;
    max-width : 75%;
    display   : inline-block
}

.caption * {
    vertical-align: middle
}

.caption .choice {
    display: inline-block
}

.caption .name {
    margin-left: .25em
}

.placeholder {
    color      : hsla(0, 0%, 100%, .5);
    text-shadow: -1px -1px rgba(0, 0, 0, .5);
    text-align : center;
    opacity    : .5;
    font-size  : 2em;
    font-weight: bolder
}

.loading {
    position  : relative;
    min-height: 200px
}

.view.loading {
    position: fixed;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%
}

.loading * {
    visibility: hidden
}

.loading:before {
    display            : block;
    position           : absolute;
    content            : "";
    width              : 96px;
    height             : 96px;
    margin-left        : -48px;
    margin-top         : -48px;
    top                : 50%;
    left               : 50%;
    background-image   : url(images/cog.svg);
    background-size    : 96px 96px;
    background-position: 50%;
    background-repeat  : no-repeat;
    animation          : spinning-cog 4s linear infinite;
    -moz-animation     : spinning-cog 4s linear infinite;
    -webkit-animation  : spinning-cog 4s linear infinite
}

@keyframes spinning-cog {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@-moz-keyframes spinning-cog {
    0% {
        -moz-transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(1turn)
    }
}

@-webkit-keyframes spinning-cog {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn)
    }
}

.logged-out-modal guac-modal {
    background: #fff;
    z-index   : 20
}

.logged-out-modal .notification {
    display  : inline-block;
    max-width: 3in;
    width    : 100%
}

#other-connections .client-panel {
    display    : none;
    position   : fixed;
    right      : 0;
    bottom     : 0;
    border     : 1px solid hsla(0, 0%, 100%, .25);
    background : rgba(0, 0, 0, .25);
    max-width  : 100%;
    white-space: nowrap;
    transition : max-width .125s, width .125s;
    z-index    : 20
}

#other-connections .client-panel.has-clients {
    display: block
}

#other-connections .client-panel.hidden {
    max-width: 16px
}

#other-connections .client-panel-handle {
    position           : absolute;
    left               : 0;
    bottom             : 0;
    height             : 100%;
    width              : 16px;
    z-index            : 1;
    background-color   : #fff;
    background-repeat  : no-repeat;
    background-size    : contain;
    background-position: 50%;
    background-image   : url(images/arrows/right.svg);
    opacity            : .5
}

#other-connections .client-panel-handle:hover {
    opacity: .75
}

#other-connections .client-panel.hidden .client-panel-handle {
    background-image: url(images/arrows/left.svg)
}

#other-connections .client-panel-connection-list {
    text-align: right;
    margin    : 0;
    padding   : 0 0 0 16px;
    overflow-x: auto;
    overflow-y: hidden
}

#other-connections .client-panel-connection {
    display       : inline-block;
    position      : relative;
    margin        : .5em;
    border        : 1px solid #fff;
    background    : #000;
    box-shadow    : 1px 1px 3px rgba(0, 0, 0, .5);
    animation     : popin .1s linear 0s;
    opacity       : .5;
    transition    : opacity .25s;
    max-height    : 128px;
    overflow      : hidden;
    vertical-align: middle
}

#other-connections .client-panel-connection a[href]:before {
    display            : block;
    content            : " ";
    position           : absolute;
    top                : 0;
    left               : 0;
    height             : 100%;
    width              : 100%;
    z-index            : 1;
    background         : url(images/warning-white.svg);
    background-size    : 48px;
    background-position: 50%;
    background-repeat  : no-repeat;
    background-color   : #000;
    opacity            : 0;
    transition         : opacity .25s
}

#other-connections .client-panel-connection.needs-attention a[href]:before {
    opacity: .75
}

#other-connections button.close-other-connection {
    position   : absolute;
    top        : 0;
    right      : 0;
    z-index    : 2;
    margin     : 0;
    padding    : 4px;
    min-width  : 0;
    border     : none;
    background : transparent;
    box-shadow : none;
    text-shadow: none;
    opacity    : .5;
    line-height: 1
}

#other-connections button.close-other-connection:hover {
    opacity: 1
}

#other-connections button.close-other-connection img {
    background   : #a43;
    border-radius: 18px;
    width        : 100%;
    max-width    : 18px;
    padding      : 3px
}

#other-connections button.close-other-connection:hover img {
    background: #c54
}

#other-connections .client-panel.hidden .client-panel-connection-list {
    overflow-x: hidden
}

#other-connections .client-panel.hidden .client-panel-connection {
    visibility: hidden
}

#other-connections .client-panel-connection .name {
    position     : absolute;
    padding      : .25em .5em;
    left         : 0;
    right        : 0;
    bottom       : 0;
    z-index      : 2;
    text-align   : left;
    color        : #fff;
    background   : rgba(0, 0, 0, .5);
    font-size    : .75em;
    font-weight  : 700;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis
}

#other-connections .client-panel-connection:hover {
    opacity: 1
}

table.sorted {
    border-collapse: collapse
}

table.sorted th {
    background : rgba(0, 0, 0, .125);
    font-weight: 400
}

table.sorted td,
table.sorted th {
    border : 1px solid #aaa;
    padding: .5em 1em
}

table.sorted th.sortable {
    cursor: pointer
}

table.sorted th.sort-primary {
    font-weight  : 700;
    padding-right: 0
}

table.sorted th.sort-primary:after {
    display            : inline-block;
    width              : 1em;
    height             : 1em;
    vertical-align     : middle;
    content            : " ";
    background-size    : 1em 1em;
    background-position: 100%;
    background-repeat  : no-repeat;
    background-image   : url(images/arrows/down.svg)
}

table.sorted th.sort-primary.sort-descending:after {
    background-image: url(images/arrows/up.svg)
}

.global-status-modal guac-modal {
    background: rgba(0, 0, 0, .5)
}

.global-status-modal .notification {
    width       : 75%;
    max-width   : 5in;
    margin-left : auto;
    margin-right: auto;
    overflow    : auto;
    text-align  : left
}

.global-status-modal .notification .body {
    margin: 1.25em
}

.global-status-modal .notification .buttons {
    margin: 1em
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing         : border-box;
    -moz-box-sizing            : border-box;
    box-sizing                 : border-box
}

body {
    background : #fff;
    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
    padding    : 0;
    margin     : 0
}

img {
    border        : none;
    vertical-align: middle
}

div.section {
    margin : 1em;
    padding: 0
}

.list-item {
    display   : block;
    text-align: left;
    cursor    : pointer;
    position  : relative
}

.icon {
    width                  : 24px;
    height                 : 24px;
    background-size        : 16px 16px;
    -moz-background-size   : 16px 16px;
    -webkit-background-size: 16px 16px;
    -khtml-background-size : 16px 16px;
    background-repeat      : no-repeat;
    background-position    : 50%;
    display                : inline-block
}

.icon,
.list-item * {
    vertical-align: middle
}

.list-item .caption {
    padding: .1em
}

.list-item .caption:after {
    clear  : right;
    content: "";
    display: block
}

.list-item .name {
    color      : #000;
    font-weight: 400;
    padding    : .1em;
    margin-left: .25em
}

.list-item .usage {
    float     : right;
    font-style: italic;
    color     : grey
}

.list-item.in-use {
    opacity: .5
}

.choice .list-item.in-use {
    opacity: 1
}

.list-item.selected {
    background: #deb
}

.caption.active * {
    opacity: .5
}

.caption .activeUserCount {
    font-style  : italic;
    margin-right: 1em;
    float       : right
}

.list-item:not(.selected) .caption:hover {
    background: #cda
}

.choice .list-item {
    display: inline-block
}

.choice input[type=checkbox] {
    vertical-align: top;
    height        : 24px;
    padding       : 0;
    margin        : 0
}

.disabled .list-item:not(.selected) {
    opacity: .25
}

.disabled .list-item:not(.selected):hover {
    background: inherit
}

.icon.user {
    background-image: url(images/user-icons/guac-user.svg)
}

.icon.user.add {
    background-image: url(images/action-icons/guac-user-add.svg)
}

.icon.user-group {
    background-image: url(images/user-icons/guac-user-group.svg)
}

.icon.user-group.add {
    background-image: url(images/action-icons/guac-user-group-add.svg)
}

.icon.connection {
    background-image: url(images/protocol-icons/guac-plug.svg)
}

.icon.connection.add {
    background-image: url(images/action-icons/guac-monitor-add.svg)
}

.connection-group .icon,
.connection .icon,
.sharing-profile .icon {
    display                : inline-block;
    width                  : 24px;
    height                 : 24px;
    background-size        : 16px 16px;
    -moz-background-size   : 16px 16px;
    -webkit-background-size: 16px 16px;
    -khtml-background-size : 16px 16px;
    background-repeat      : no-repeat;
    background-position    : 50%
}

.connection-group>.caption .icon {
    background-image: url(images/folder-closed.svg)
}

.connection-group.expanded>.caption .icon {
    background-image: url(images/folder-open.svg)
}

.connection .icon {
    background-image: url(images/protocol-icons/guac-plug.svg)
}

.connection .icon.kubernetes,
.connection .icon.ssh,
.connection .icon.telnet {
    background-image: url(images/protocol-icons/guac-text.svg)
}

.connection .icon.rdp,
.connection .icon.vnc {
    background-image: url(images/protocol-icons/guac-monitor.svg)
}

.sharing-profile .icon {
    background-image: url(images/share.svg)
}

.expandable>.children {
    margin-left : 13px;
    padding-left: 13px
}

.connection-group.empty.balancer .icon {
    background-image: url(images/protocol-icons/guac-monitor.svg)
}

.expandable.expanded>.children>.list-item {
    position: relative
}

.expandable.expanded>.children>.list-item:after,
.expandable.expanded>.children>.list-item:before {
    display : block;
    content : " ";
    position: absolute;
    z-index : -1
}

.expandable.expanded>.children>.list-item:before {
    border-left: 1px solid #bbb;
    left       : -13px;
    top        : -.75em;
    bottom     : 0
}

.expandable.expanded>.children>.list-item:last-child:before {
    height: 1.5em
}

.expandable.expanded>.children>.list-item:after {
    display      : block;
    content      : " ";
    border-bottom: 1px solid #bbb;
    left         : -13px;
    width        : 13px;
    top          : .75em
}

.expandable>.caption .icon.expand {
    background-image: url(images/group-icons/guac-closed.svg)
}

.expandable.empty>.caption .icon.expand,
.expandable.expanded>.caption .icon.expand {
    background-image: url(images/group-icons/guac-open.svg)
}

.expandable.empty>.caption .icon.expand {
    opacity: .25
}

.history td,
.history th {
    padding-left : 1em;
    padding-right: 1em
}

.buttons {
    text-align: center;
    margin    : 1em
}

.filter {
    margin: .5em 0
}

.filter .search-string {
    background-image   : url(images/magnifier.svg);
    background-repeat  : no-repeat;
    background-size    : 1.75em;
    background-position: .25em;
    padding            : .5em .5em .5em 2.25em;
    width              : 100%;
    max-width          : none
}

.pager {
    text-align: center;
    margin    : 1em
}

.pager .page-numbers {
    display: inline-block;
    margin : 0;
    padding: 0
}

.pager .first-page,
.pager .last-page,
.pager .next-page,
.pager .prev-page,
.pager .set-page {
    cursor        : pointer;
    vertical-align: middle
}

.pager .first-page.disabled,
.pager .last-page.disabled,
.pager .next-page.disabled,
.pager .prev-page.disabled,
.pager .set-page.disabled {
    cursor : auto;
    opacity: .25
}

.pager .more-pages,
.pager .set-page {
    display   : inline-block;
    padding   : .25em;
    text-align: center;
    min-width : 1.25em
}

.pager .set-page {
    text-decoration: underline
}

.pager .set-page.current {
    cursor               : auto;
    text-decoration      : none;
    font-weight          : 700;
    background           : rgba(0, 0, 0, .1);
    border               : 1px solid rgba(0, 0, 0, .1);
    -moz-border-radius   : .2em;
    -webkit-border-radius: .2em;
    -khtml-border-radius : .2em;
    border-radius        : .2em
}

.pager .icon.first-page {
    background-image: url(images/action-icons/guac-first-page.svg)
}

.pager .icon.prev-page {
    background-image: url(images/action-icons/guac-prev-page.svg)
}

.pager .icon.next-page {
    background-image: url(images/action-icons/guac-next-page.svg)
}

.pager .icon.last-page {
    background-image: url(images/action-icons/guac-last-page.svg)
}

.user-item.anonymous {
    font-style: italic;
    opacity   : .5
}

@keyframes shake-head {
    0% {
        margin-left : .25em;
        margin-right: -.25em
    }

    25% {
        margin-left : -.25em;
        margin-right: .25em
    }

    50% {
        margin-left : .25em;
        margin-right: -.25em
    }

    75% {
        margin-left : -.25em;
        margin-right: .25em
    }

    to {
        margin-left : 0;
        margin-right: 0
    }
}

@-webkit-keyframes shake-head {
    0% {
        margin-left : .25em;
        margin-right: -.25em
    }

    25% {
        margin-left : -.25em;
        margin-right: .25em
    }

    50% {
        margin-left : .25em;
        margin-right: -.25em
    }

    75% {
        margin-left : -.25em;
        margin-right: .25em
    }

    to {
        margin-left : 0;
        margin-right: 0
    }
}

.login-ui {
    animation        : fadein .125s linear;
    -moz-animation   : fadein .125s linear;
    -webkit-animation: fadein .125s linear
}

.login-ui .login-dialog-middle {
    width         : 100%;
    display       : table-cell;
    vertical-align: middle;
    text-align    : center
}

.login-ui .login-dialog {
    width     : 100%;
    max-width : 4in;
    text-align: left;
    padding   : 1em;
    font-size : 1.25em;
    display   : inline-block
}

.login-ui .login-dialog h1 {
    margin-top   : 0;
    margin-bottom: 0;
    text-align   : center
}

.login-ui .login-dialog .buttons {
    text-align: right;
    margin    : 1em 0 0
}

.login-ui .login-dialog .login-fields {
    vertical-align: middle
}

.login-ui .login-dialog th {
    text-shadow: 1px 1px #fff
}

.login-ui .login-dialog .version {
    padding: 10px 15px;
    background-color: #598d36;
    border-color: #598d36;
    border-radius: 10px;
    margin-bottom: 20px;
    font-family: 'Lobster', sans-serif; font-size: 30px; letter-spacing: 5px;
    font-weight: bold;
   
}

.login-ui .login-dialog .version .app-name {
    font-weight   : 7;
    /* text-transform: uppercase; */
    text-align    : center;
    font-size     : 1.25em

}

.login-ui .login-dialog .version .version-number {
    position             : absolute;
    right                : 0;
    bottom               : 0;
    padding              : .25em .75em;
    margin               : .25em;
    -moz-border-radius   : .5em;
    -webkit-border-radius: .5em;
    -khtml-border-radius : .5em;
    border-radius        : .5em;
    color                : #000;
    background           : rgb(89 141 54);
    font-size            : .5em;
    font-style           : italic;
    /* opacity              : .5 */
        font-family       : Helvetica, sans-serif;
}

.login-ui .login-dialog .logo {
    display                : block;
    margin                 : 2em auto;
    width                  : 7em;
    height                 : 7em;
    background-size        : 7em 7em;
    -moz-background-size   : 7em 7em;
    -webkit-background-size: 7em 7em;
    -khtml-background-size : 7em 7em;
    background-image       : url(images/guac-tricolor.svg)
}

.login-ui.continuation .login-dialog {
    border-right: none;
    border-left : none;
    box-shadow  : none;
    max-width   : 6in
}

.login-ui.continuation .login-dialog .logo,
.login-ui.continuation .login-dialog .version {
    display: none
}

.login-ui.error .login-dialog {
    animation-name                   : shake-head;
    animation-duration               : .25s;
    animation-timing-function        : linear;
    -webkit-animation-name           : shake-head;
    -webkit-animation-duration       : .25s;
    -webkit-animation-timing-function: linear
}

.login-ui .login-dialog .login-fields input {
    display              : block;
    border               : 1px solid rgba(0, 0, 0, .25);
    -moz-border-radius   : .2em;
    -webkit-border-radius: .2em;
    -khtml-border-radius : .2em;
    font-family          : Carlito, FreeSans, Helvetica, Arial, sans-serif;
    border-radius        : .2em;
    width                : 100%;
    margin               : 0 0 .5em;
    padding              : .5em .75em;
    max-width            : none
}

.login-ui .login-dialog .buttons input[type=submit] {
    width : 100%;
    margin: 0
}

.login-ui.continuation .login-dialog .buttons input[type=submit] {
    width: auto
}

.login-ui.continuation .login-dialog input.login,
.login-ui.initial .login-dialog input.continue-login {
    display: none
}

div.login-ui {
    height    : 100%;
    width     : 100%;
    margin-top: 5%;
    left      : 0;
    top       : 0;
    display   : table;
    background: #fff;
    z-index   : 20
}

.login-ui p.login-error {
    display: none
}

.login-ui.error p.login-error {
    display              : block;
    position             : fixed;
    left                 : 0;
    right                : 0;
    top                  : 0;
    padding              : 1em;
    margin               : .2em;
    background           : #fdd;
    border               : 1px solid #964040;
    -moz-border-radius   : .25em;
    -webkit-border-radius: .25em;
    -khtml-border-radius : .25em;
    text-align           : center;
    color                : #964040
}

.login-ui .login-fields .form-field .password-field .toggle-password {
    display: none
}

.login-ui .login-fields .labeled-field {
    display : block;
    position: relative;
    z-index : 1
}

.login-ui .login-fields .labeled-field .field-header {
    display  : block;
    position : absolute;
    left     : 0;
    right    : 0;
    overflow : hidden;
    z-index  : -1;
    margin   : .5em;
    font-size: .9em;
    opacity  : .5
}

.login-ui .login-fields .labeled-field.empty input {
    background: transparent
}

.login-ui .login-fields .labeled-field input:focus {
    background: #fff
}

.attributes input[type=email],
.attributes input[type=number],
.attributes input[type=password],
.attributes input[type=text] {
    width: auto
}

.attributes .form .fields {
    display: table;
    margin : 1em
}

.attributes .form .fields .labeled-field {
    display: table-row
}

.attributes .form .fields .field-header,
.attributes .form .fields .form-field {
    display       : table-cell;
    padding       : .125em;
    vertical-align: top
}

.attributes .form .fields .field-header {
    padding-right: 1em
}

.attributes .form h3 {
    font-size     : 1.25em;
    font-weight   : 700;
    text-transform: uppercase;
    padding       : .5em;
    margin        : 1em 0;
    border-bottom : 1px solid rgba(0, 0, 0, .125);
    border-top    : 1px solid rgba(0, 0, 0, .125);
    box-shadow    : 0 1px 2px rgba(0, 0, 0, .125);
    background    : rgba(0, 0, 0, .04);
    width         : 100%
}

.connection-parameters input[type=email],
.connection-parameters input[type=number],
.connection-parameters input[type=password],
.connection-parameters input[type=text] {
    width: auto
}

.connection-parameters .form .fields {
    display     : table;
    padding-left: .5em;
    border-left : 3px solid rgba(0, 0, 0, .125);
    width       : 100%
}

.connection-parameters .form .fields .labeled-field {
    display: table-row
}

.connection-parameters .form .fields .field-header,
.connection-parameters .form .fields .form-field {
    display       : table-cell;
    padding       : .125em;
    vertical-align: top;
    width         : 100%
}

.connection-parameters .form .fields .field-header {
    padding-right: 1em;
    width        : 0;
    white-space  : nowrap
}

.manage table.properties th {
    text-align   : left;
    font-weight  : 400;
    padding-right: 1em
}

.manage .action-buttons {
    text-align   : center;
    margin-bottom: 1em
}

.location-chooser .dropdown {
    position  : absolute;
    z-index   : 2;
    margin-top: -1px;
    width     : 3in;
    max-height: 2in;
    overflow  : auto;
    border    : 1px solid rgba(0, 0, 0, .5);
    background: #fff;
    font-size : 10pt
}

.manage-user-group .page-tabs .page-list li.linked a[href],
.manage-user-group .page-tabs .page-list li.read-only a[href],
.manage-user-group .page-tabs .page-list li.unlinked a[href] {
    padding-right: 2.5em;
    position     : relative
}

.manage-user-group .page-tabs .page-list li.linked a[href]:before,
.manage-user-group .page-tabs .page-list li.read-only a[href]:before,
.manage-user-group .page-tabs .page-list li.unlinked a[href]:before {
    content            : " ";
    position           : absolute;
    right              : 0;
    bottom             : 0;
    top                : 0;
    width              : 2.5em;
    background-size    : 1.25em;
    background-repeat  : no-repeat;
    background-position: 50%
}

.manage-user-group .page-tabs .page-list li.read-only a[href]:before {
    background-image: url(images/lock.svg)
}

.manage-user-group .page-tabs .page-list li.unlinked a[href]:before {
    background-image: url(images/plus.svg)
}

.manage-user-group .page-tabs .page-list li.unlinked a[href] {
    opacity: .5
}

.manage-user-group .page-tabs .page-list li.unlinked a[href].current,
.manage-user-group .page-tabs .page-list li.unlinked a[href]:hover {
    opacity: 1
}

.manage-user-group .page-tabs .page-list li.linked a[href]:before {
    background-image: url(images/checkmark.svg)
}

.manage-user-group .notice.read-only {
    background   : #fda;
    border       : 1px solid rgba(0, 0, 0, .125);
    border-radius: .25em;
    text-align   : center;
    padding      : 1em
}

.manage-user .page-tabs .page-list li.linked a[href],
.manage-user .page-tabs .page-list li.read-only a[href],
.manage-user .page-tabs .page-list li.unlinked a[href] {
    padding-right: 2.5em;
    position     : relative
}

.manage-user .page-tabs .page-list li.linked a[href]:before,
.manage-user .page-tabs .page-list li.read-only a[href]:before,
.manage-user .page-tabs .page-list li.unlinked a[href]:before {
    content            : " ";
    position           : absolute;
    right              : 0;
    bottom             : 0;
    top                : 0;
    width              : 2.5em;
    background-size    : 1.25em;
    background-repeat  : no-repeat;
    background-position: 50%
}

.manage-user .page-tabs .page-list li.read-only a[href]:before {
    background-image: url(images/lock.svg)
}

.manage-user .page-tabs .page-list li.unlinked a[href]:before {
    background-image: url(images/plus.svg)
}

.manage-user .page-tabs .page-list li.unlinked a[href] {
    opacity: .5
}

.manage-user .page-tabs .page-list li.unlinked a[href].current,
.manage-user .page-tabs .page-list li.unlinked a[href]:hover {
    opacity: 1
}

.manage-user .page-tabs .page-list li.linked a[href]:before {
    background-image: url(images/checkmark.svg)
}

.manage-user .notice.read-only {
    background   : #fda;
    border       : 1px solid rgba(0, 0, 0, .125);
    border-radius: .25em;
    text-align   : center;
    padding      : 1em
}

.related-objects .abbreviated-related-objects {
    display: table;
    margin : 1em 0
}

.related-objects .abbreviated-related-objects ul {
    display       : table-cell;
    vertical-align: top
}

.related-objects .abbreviated-related-objects ul,
.related-objects .all-related-objects ul {
    padding   : 0;
    list-style: none
}

.related-objects .abbreviated-related-objects ul li {
    display              : inline-block;
    margin               : .25em;
    padding              : .25em;
    border               : 1px solid silver;
    background           : #f5f5f5;
    -moz-border-radius   : .25em;
    -webkit-border-radius: .25em;
    -khtml-border-radius : .25em;
    border-radius        : .25em
}

.related-objects .abbreviated-related-objects ul li img.remove {
    max-height: .75em;
    max-width : .75em;
    margin    : 0 .25em
}

.related-objects .abbreviated-related-objects ul li .identifier {
    margin: 0 .25em
}

.related-objects .abbreviated-related-objects img.collapse,
.related-objects .abbreviated-related-objects img.expand {
    display   : table-cell;
    max-height: 1.5em;
    max-width : 1.5em;
    margin    : .375em 0
}

.related-objects .all-related-objects {
    border-top: 1px solid silver
}

.related-objects .abbreviated-related-objects p.no-related-objects,
.related-objects .all-related-objects p.no-objects-available {
    font-style: italic;
    opacity   : .5
}

.related-objects .abbreviated-related-objects p.no-related-objects {
    display       : table-cell;
    vertical-align: middle
}

.menu-dropdown {
    display               : -ms-flexbox;
    -ms-flex-align        : center;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : center;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : center;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : center;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : center;
    flex-direction        : row;
    position              : relative;
    border-left           : 1px solid rgba(0, 0, 0, .125);
    background            : rgba(0, 0, 0, .04)
}

.menu-dropdown:hover {
    background: rgba(0, 0, 0, .01)
}

.menu-dropdown.open,
.menu-dropdown.open:hover {
    background: rgba(0, 0, 0, .3)
}

.menu-dropdown .menu-title {
    cursor          : default;
    margin          : 0;
    padding         : .5em 2em .5em .5em;
    white-space     : nowrap;
    overflow        : hidden;
    width           : 100%;
    text-overflow   : ellipsis;
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto
}

.menu-dropdown .menu-indicator {
    position           : absolute;
    right              : 0;
    top                : 0;
    bottom             : 0;
    width              : 2em;
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: 50%;
    background-image   : url(images/arrows/down.svg)
}

.menu-dropdown .menu-contents {
    visibility   : hidden;
    position     : absolute;
    top          : 100%;
    right        : 0;
    min-width    : 100%;
    white-space  : nowrap;
    background   : #eee;
    box-shadow   : 0 2px 2px rgba(0, 0, 0, .125);
    border-left  : 1px solid rgba(0, 0, 0, .125);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    z-index      : 5
}

.menu-dropdown .menu-contents ul {
    margin : 0;
    padding: 0
}

.menu-dropdown.open .menu-contents {
    visibility: visible
}

.menu-dropdown .menu-contents li {
    padding        : 0;
    list-style-type: none
}

.menu-dropdown .menu-contents li a {
    display        : block;
    cursor         : pointer;
    color          : #000;
    text-decoration: none;
    padding        : .75em
}

.menu-dropdown .menu-contents li a:hover {
    background-color: #cda
}

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover {
    background-color: transparent;
    cursor          : default;
    opacity         : .25
}

.menu-dropdown .menu-contents li a.danger {
    color           : #fff;
    font-weight     : 700;
    background-color: #a43
}

.menu-dropdown .menu-contents li a.danger:hover {
    background-color: #c54
}

.page-tabs .page-list ul,
.section-tabs ul {
    margin       : 0;
    padding      : 0;
    background   : rgba(0, 0, 0, .0125);
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.page-tabs .page-list ul+ul,
.section-tabs ul+ul {
    font-size: .75em
}

.page-tabs .page-list li,
.section-tabs li {
    display   : inline-block;
    list-style: none
}

.page-tabs .page-list li a[href],
.section-tabs li a {
    display        : block;
    color          : #000;
    text-decoration: none;
    padding        : .75em 1em
}

.page-tabs .page-list li a[href]:visited {
    color: #000
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: #cda;
    cursor          : pointer
}

.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
    background: rgba(0, 0, 0, .3);
    cursor    : default
}

.user-menu {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : stretch;
    flex-direction        : row
}

.user-menu .menu-dropdown .menu-title {
    font-weight        : 700;
    padding-left       : 2em;
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: .5em;
    background-image   : url(images/user-icons/guac-user.svg)
}

.user-menu .menu-dropdown .menu-contents li a {
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: .75em;
    padding-left       : 2.5em;
    background-image   : url(images/protocol-icons/guac-monitor.svg)
}

.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
    background-image: url(images/action-icons/guac-home-dark.svg)
}

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

.user-menu .menu-dropdown .menu-contents li a.logout {
    background-image: url(images/action-icons/guac-logout-dark.svg)
}

.user-menu .menu-dropdown .menu-contents .profile {
    margin        : 1em;
    padding-bottom: 1em;
    border-bottom : 1px solid rgba(0, 0, 0, .25);
    width         : 2in
}

.user-menu .menu-dropdown .menu-contents .profile .full-name {
    font-weight: 700
}

.user-menu .menu-dropdown .menu-contents .profile .organization,
.user-menu .menu-dropdown .menu-contents .profile .organizational-role {
    font-size: .8em
}

guac-modal {
    display            : -webkit-box;
    display            : -webkit-flex;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -webkit-align-items: center;
    -ms-flex-align     : center;
    align-items        : center;
    height             : 100%;
    width              : 100%;
    position           : fixed;
    left               : 0;
    top                : 0;
    z-index            : 10;
    overflow           : hidden
}

guac-modal .modal-contents {
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    -ms-flex        : 0 0 auto;
    flex            : 0 0 auto;
    width           : 100%;
    text-align      : center
}

guac-modal {
    animation        : fadein .125s linear;
    -moz-animation   : fadein .125s linear;
    -webkit-animation: fadein .125s linear
}

.notification {
    /* border    : 1px solid rgba(0, 0, 0, .25);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .25); */
    background: #fff;
    color     : #000
}

.notification.error {
    background: #fdd
}

.notification .body,
.notification .buttons {
    margin: .5em
}

@keyframes notification-progress {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 64px 0
    }
}

@-webkit-keyframes notification-progress {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 64px 0
    }
}

.notification .title-bar {
    font-size     : 1.25em;
    font-weight   : 700;
    text-transform: uppercase;
    border-bottom : 1px solid rgba(0, 0, 0, .125);
    box-shadow    : 0 1px 2px rgba(0, 0, 0, .125);
    background    : rgba(0, 0, 0, .04);
    padding       : .5em;
    margin-bottom : 1em
}

.notification .progress .bar {
    background: #a3d655;
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 100%;
    width     : 0;
    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, .5), inset -1px -1px 0 rgba(0, 0, 0, .1), 1px 1px 0 grey
}

.notification .progress {
    width                            : 100%;
    background                       : #c2c2c2 url(images/progress.svg);
    background-size                  : 16px 16px;
    -moz-background-size             : 16px 16px;
    -webkit-background-size          : 16px 16px;
    -khtml-background-size           : 16px 16px;
    animation-name                   : notification-progress;
    animation-duration               : 2s;
    animation-timing-function        : linear;
    animation-iteration-count        : infinite;
    -webkit-animation-name           : notification-progress;
    -webkit-animation-duration       : 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    padding                          : .25em;
    border                           : 1px solid grey;
    position                         : relative
}

.notification .progress .text {
    position: relative
}

.notification .parameters {
    width: 100%
}

.notification .parameters .fields {
    display: table;
    width  : 100%
}

.notification .parameters .fields .labeled-field {
    display: table-row
}

.notification .parameters .fields .field-header,
.notification .parameters .fields .form-field {
    text-align    : left;
    display       : table-cell;
    padding       : .125em;
    vertical-align: top
}

.notification .parameters .fields .field-header {
    padding-right: 1em;
    width        : 0
}

.notification .parameters .fields .form-field {
    width: 100%
}

.notification .parameters input[type=email],
.notification .parameters input[type=number],
.notification .parameters input[type=password],
.notification .parameters input[type=text],
.notification .parameters textarea {
    max-width: 100%
}

.osk {
    position: relative
}

.guac-keyboard {
    display       : inline-block;
    width         : 100%;
    margin        : 0;
    padding       : 0;
    cursor        : default;
    text-align    : left;
    vertical-align: middle
}

.guac-keyboard,
.guac-keyboard * {
    overflow   : hidden;
    white-space: nowrap
}

.guac-keyboard .guac-keyboard-key-container {
    display : inline-block;
    margin  : .05em;
    position: relative
}

.guac-keyboard .guac-keyboard-key {
    position             : absolute;
    left                 : 0;
    right                : 0;
    top                  : 0;
    bottom               : 0;
    background           : #444;
    border               : .125em solid #666;
    -moz-border-radius   : .25em;
    -webkit-border-radius: .25em;
    -khtml-border-radius : .25em;
    border-radius        : .25em;
    color                : #fff;
    font-size            : 40%;
    font-weight          : lighter;
    text-align           : center;
    white-space          : pre;
    text-shadow          : 1px 1px 0 rgba(0, 0, 0, .25), 1px -1px 0 rgba(0, 0, 0, .25), -1px 1px 0 rgba(0, 0, 0, .25), -1px -1px 0 rgba(0, 0, 0, .25)
}

.guac-keyboard .guac-keyboard-key:hover {
    cursor: pointer
}

.guac-keyboard .guac-keyboard-key.highlight {
    background  : #666;
    border-color: #666
}

.guac-keyboard .guac-keyboard-key-alt-gr,
.guac-keyboard .guac-keyboard-key-caps,
.guac-keyboard .guac-keyboard-key-enter,
.guac-keyboard .guac-keyboard-key-lalt,
.guac-keyboard .guac-keyboard-key-lctrl,
.guac-keyboard .guac-keyboard-key-lshift,
.guac-keyboard .guac-keyboard-key-ralt,
.guac-keyboard .guac-keyboard-key-rctrl,
.guac-keyboard .guac-keyboard-key-rshift,
.guac-keyboard .guac-keyboard-key-tab {
    text-align  : left;
    padding-left: .75em
}

.guac-keyboard.guac-keyboard-modifier-alt-gr .guac-keyboard-key-alt-gr,
.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key-lalt,
.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key-ralt,
.guac-keyboard.guac-keyboard-modifier-caps .guac-keyboard-key-caps,
.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key-lctrl,
.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key-rctrl,
.guac-keyboard.guac-keyboard-modifier-lat .guac-keyboard-key-latin,
.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key-lshift,
.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key-rshift,
.guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key-super {
    background  : #882;
    border-color: #dd4
}

.guac-keyboard .guac-keyboard-key.guac-keyboard-pressed {
    background  : #822;
    border-color: #d44
}

.guac-keyboard .guac-keyboard-group {
    line-height: 0
}

.guac-keyboard .guac-keyboard-group.guac-keyboard-alpha,
.guac-keyboard .guac-keyboard-group.guac-keyboard-function,
.guac-keyboard .guac-keyboard-group.guac-keyboard-movement,
.guac-keyboard .guac-keyboard-group.guac-keyboard-virtual {
    display       : inline-block;
    text-align    : center;
    vertical-align: top
}

.guac-keyboard .guac-keyboard-group.guac-keyboard-main,
.guac-keyboard .guac-keyboard-group.guac-keyboard-top {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : stretch;
    flex-direction        : row
}

.guac-keyboard .guac-keyboard-group.guac-keyboard-movement,
.guac-keyboard .guac-keyboard-group.guac-keyboard-virtual {
    -ms-flex        : 1 1 auto;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1 1 auto;
    flex            : 1 1 auto
}

.guac-keyboard .guac-keyboard-gap {
    display: inline-block
}

.guac-keyboard.guac-keyboard-modifier-alt-gr .guac-keyboard-key.guac-keyboard-uses-alt-gr .guac-keyboard-cap:not(.guac-keyboard-requires-alt-gr),
.guac-keyboard.guac-keyboard-modifier-caps .guac-keyboard-key.guac-keyboard-uses-caps .guac-keyboard-cap:not(.guac-keyboard-requires-caps),
.guac-keyboard.guac-keyboard-modifier-lat .guac-keyboard-key.guac-keyboard-uses-lat .guac-keyboard-cap:not(.guac-keyboard-requires-lat),
.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key.guac-keyboard-uses-shift .guac-keyboard-cap:not(.guac-keyboard-requires-shift),
.guac-keyboard:not(.guac-keyboard-modifier-alt-gr) .guac-keyboard-cap.guac-keyboard-requires-alt-gr,
.guac-keyboard:not(.guac-keyboard-modifier-caps) .guac-keyboard-cap.guac-keyboard-requires-caps,
.guac-keyboard:not(.guac-keyboard-modifier-lat) .guac-keyboard-cap.guac-keyboard-requires-lat,
.guac-keyboard:not(.guac-keyboard-modifier-shift) .guac-keyboard-cap.guac-keyboard-requires-shift {
    display: none
}

.guac-keyboard.guac-keyboard-modifier-alt-gr .guac-keyboard-key:not(.guac-keyboard-uses-alt-gr):not(.guac-keyboard-key-alt-gr) {
    opacity: .5
}

guac-player {
    display : inline-block;
    position: relative
}

guac-player .guac-player-display {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%
}

guac-player .guac-player-controls {
    position: absolute;
    left    : 0;
    bottom  : 0;
    width   : 100%
}

.guac-player-controls .guac-player-seek {
    display: block;
    width  : 100%
}

.guac-player-controls .guac-player-pause,
.guac-player-controls .guac-player-play {
    color     : #fff;
    background: transparent;
    border    : none;
    width     : 2em;
    height    : 2em;
    min-width : 0;
    padding   : 0;
    margin    : 0
}

.guac-player-controls .guac-player-pause:hover,
.guac-player-controls .guac-player-play:hover {
    background: hsla(0, 0%, 100%, .5)
}

.guac-player-controls .pause-icon,
.guac-player-controls .play-icon {
    display            : inline-block;
    width              : 2em;
    height             : 2em;
    background-size    : contain;
    background-position: 50%;
    background-repeat  : no-repeat;
    vertical-align     : middle
}

.guac-player-controls .play-icon {
    background-image: url(images/action-icons/guac-play.svg)
}

.guac-player-controls .pause-icon {
    background-image: url(images/action-icons/guac-pause.svg)
}

guac-player .guac-player-status {
    position              : fixed;
    top                   : 0;
    left                  : 0;
    width                 : 100%;
    height                : 100%;
    background            : rgba(0, 0, 0, .5);
    z-index               : 1;
    -webkit-box-orient    : vertical;
    -webkit-box-direction : normal;
    -webkit-flex-direction: column;
    -moz-box-orient       : vertical;
    -moz-box-direction    : normal;
    -ms-flex-direction    : column;
    flex-direction        : column
}

.guac-player-display,
guac-player .guac-player-status {
    display                : -webkit-box;
    display                : -webkit-flex;
    display                : -moz-box;
    display                : -ms-flexbox;
    display                : flex;
    -webkit-box-align      : center;
    -webkit-align-items    : center;
    -moz-box-align         : center;
    -ms-flex-align         : center;
    align-items            : center;
    -webkit-box-pack       : center;
    -webkit-justify-content: center;
    -moz-box-pack          : center;
    -ms-flex-pack          : center;
    justify-content        : center
}

.guac-player-display {
    position: relative
}

.guac-player-display .guac-player-display-container {
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    -moz-box-flex   : 0;
    -ms-flex        : 0 0 auto;
    flex            : 0 0 auto
}

guac-player-progress-indicator {
    width                  : 128px;
    height                 : 128px;
    position               : relative;
    display                : -webkit-box;
    display                : -webkit-flex;
    display                : -moz-box;
    display                : -ms-flexbox;
    display                : flex;
    -webkit-box-align      : center;
    -webkit-align-items    : center;
    -moz-box-align         : center;
    -ms-flex-align         : center;
    align-items            : center;
    -webkit-box-pack       : center;
    -webkit-justify-content: center;
    -moz-box-pack          : center;
    -ms-flex-pack          : center;
    justify-content        : center
}

guac-player-progress-indicator .guac-player-progress-text {
    font-size  : 2em;
    font-weight: 700
}

guac-player-progress-indicator .guac-player-progress-bar-container {
    position: absolute;
    right   : 0;
    top     : 0;
    width   : 50%;
    height  : 100%;
    overflow: hidden
}

guac-player-progress-indicator .guac-player-progress-bar-container.past-halfway {
    overflow: visible
}

guac-player-progress-indicator .guac-player-progress-bar,
guac-player-progress-indicator .guac-player-progress-bar-container.past-halfway:before {
    position             : absolute;
    left                 : -64px;
    top                  : 0;
    width                : 128px;
    height               : 128px;
    -webkit-border-radius: 128px;
    -moz-border-radius   : 128px;
    border-radius        : 128px;
    border-color         : #5af transparent transparent #5af;
    border-style         : solid;
    border-width         : 12px
}

guac-player-progress-indicator .guac-player-progress-bar-container.past-halfway:before {
    content          : " ";
    display          : block;
    box-sizing       : border-box;
    -webkit-transform: rotate(135deg);
    -moz-transform   : rotate(135deg);
    -ms-transform    : rotate(135deg);
    -o-transform     : rotate(135deg);
    transform        : rotate(135deg)
}

input[type=range] {
    background: transparent;
    width     : 100%;
    margin    : 0
}

input[type=range]:focus {
    outline: none
}

input[type=range] {
    -webkit-appearance: none
}

input[type=range]::-webkit-slider-runnable-track {
    border       : none;
    border-radius: 0;
    background   : #5af;
    width        : 100%;
    height       : .5em;
    cursor       : pointer
}

input[type=range]::-webkit-slider-thumb {
    border            : none;
    border-radius     : 0;
    background        : #fff;
    width             : 3px;
    height            : .5em;
    -webkit-appearance: none;
    cursor            : pointer
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #5af
}

input[type=range]::-moz-range-track {
    border       : none;
    border-radius: 0;
    background   : #5af;
    width        : 100%;
    height       : .5em;
    cursor       : pointer
}

input[type=range]::-moz-range-thumb {
    border       : none;
    border-radius: 0;
    background   : #fff;
    width        : 3px;
    height       : .5em;
    cursor       : pointer
}

input[type=range]::-ms-track {
    width     : 100%;
    background: transparent;
    color     : transparent
}

input[type=range]::-ms-thumb,
input[type=range]::-ms-track {
    height       : .5em;
    margin       : 0;
    border       : none;
    border-radius: 0;
    cursor       : pointer
}

input[type=range]::-ms-thumb {
    background: #fff;
    width     : 3px
}

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper,
input[type=range]:focus::-ms-fill-lower,
input[type=range]:focus::-ms-fill-upper {
    border       : none;
    border-radius: 0;
    background   : #5af
}

a.button.add-connection,
a.button.add-connection-group,
a.button.add-user,
a.button.add-user-group {
    font-size   : .8em;
    padding-left: 1.8em;
    position    : relative
}

a.button.add-connection-group:before,
a.button.add-connection:before,
a.button.add-user-group:before,
a.button.add-user:before {
    content            : " ";
    position           : absolute;
    width              : 1.8em;
    top                : 0;
    bottom             : 0;
    left               : 0;
    background-repeat  : no-repeat;
    background-size    : 1em;
    background-position: .5em .45em
}

a.button.add-user:before {
    background-image: url(images/action-icons/guac-user-add.svg)
}

a.button.add-user-group:before {
    background-image: url(images/action-icons/guac-user-group-add.svg)
}

a.button.add-connection:before {
    background-image: url(images/action-icons/guac-monitor-add.svg)
}

a.button.add-connection-group:before {
    background-image: url(images/action-icons/guac-group-add.svg)
}

.settings.connections .connection-list .new-connection,
.settings.connections .connection-list .new-connection-group,
.settings.connections .connection-list .new-sharing-profile {
    opacity   : .5;
    font-style: italic
}

.settings.connections .connection-list .new-connection-group a,
.settings.connections .connection-list .new-connection-group a:hover,
.settings.connections .connection-list .new-connection-group a:visited,
.settings.connections .connection-list .new-connection a,
.settings.connections .connection-list .new-connection a:hover,
.settings.connections .connection-list .new-connection a:visited,
.settings.connections .connection-list .new-sharing-profile a,
.settings.connections .connection-list .new-sharing-profile a:hover,
.settings.connections .connection-list .new-sharing-profile a:visited {
    text-decoration: none;
    color          : #000
}

.settings.connectionHistoryPlayer {
    background: #000;
    color     : #fff;
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100vw;
    height    : 100vh;
    padding   : 0;
    margin    : 0
}

.settings.connectionHistoryPlayer guac-player {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%
}

.settings.connectionHistoryPlayer .guac-player-help-no-recording,
.settings.connectionHistoryPlayer .guac-player-help-recording-error {
    margin   : 8px;
    max-width: 480px
}

.settings.connectionHistoryPlayer .guac-player-button {
    display      : inline-block;
    border       : 2px solid #fff;
    border-radius: 0;
    background   : #000;
    color        : #fff;
    font-weight  : 700;
    padding      : .5em 1em;
    margin       : 8px
}

.settings.connectionHistoryPlayer .guac-player-controls {
    padding           : .25em;
    background        : rgba(0, 0, 0, .5);
    opacity           : 0;
    -webkit-transition: opacity .25s linear .25s;
    -moz-transition   : opacity .25s linear .25s;
    -o-transition     : opacity .25s linear .25s;
    transition        : opacity .25s linear .25s
}

.settings.connectionHistoryPlayer .guac-player-controls:hover,
.settings.connectionHistoryPlayer guac-player.recent-mouse-movement .guac-player-controls {
    opacity: 1
}

.settings.connectionHistory .filter {
    display               : -ms-flexbox;
    -ms-flex-align        : stretch;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : stretch;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : stretch;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : stretch;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : stretch;
    flex-direction        : row
}

.settings.connectionHistory .filter .search-string {
    -ms-flex        : 1 1 auto;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1 1 auto;
    flex            : 1 1 auto
}

.settings.connectionHistory .filter .search-button,
.settings.connectionHistory .filter button {
    -ms-flex        : 0 0 auto;
    -moz-box-flex   : 0;
    -webkit-box-flex: 0;
    -webkit-flex    : 0 0 auto;
    flex            : 0 0 auto;
    margin-top      : 0;
    margin-bottom   : 0
}

.settings.connectionHistory .history-list {
    width: 100%
}

.settings.connectionHistory a.history-session-recording {
    color: #00e
}

.settings.connectionHistory a.history-session-recording:after {
    display            : inline-block;
    content            : " ";
    width              : 1em;
    height             : 1em;
    background-size    : contain;
    background-position: 50%;
    background-repeat  : no-repeat;
    background-image   : url(images/action-icons/guac-play-link.svg);
    vertical-align     : middle
}

.preferences .input-method .caption {
    margin-left : 2em;
    margin-right: 2em
}

.preferences .mouse-mode .choices {
    text-align: center
}

.preferences .mouse-mode .choice {
    display: inline-block
}

.preferences .mouse-mode .choice .figure {
    display       : inline-block;
    vertical-align: middle;
    width         : 75%;
    max-width     : 320px
}

.preferences .mouse-mode .figure img {
    display  : block;
    width    : 100%;
    max-width: 320px;
    margin   : 1em auto
}

.preferences .mouse-mode .caption {
    text-align: left
}

.preferences .form .fields {
    display     : table;
    padding-left: .5em;
    border-left : 3px solid rgba(0, 0, 0, .125)
}

.preferences .form .fields .labeled-field {
    display: table-row
}

.preferences .form .fields .field-header,
.preferences .form .fields .form-field {
    display       : table-cell;
    padding       : .125em;
    vertical-align: top
}

.preferences .form .fields .field-header {
    padding-right: 1em
}

.settings table.session-list {
    width: 100%
}

.settings table.session-list tr.session:hover {
    background: #cda
}

.settings table.session-list .select-session {
    min-width : 2em;
    text-align: center
}

.settings table.properties th {
    text-align   : left;
    font-weight  : 400;
    padding-right: 1em
}

.settings .action-buttons {
    text-align: center;
    margin    : 1em 0
}

.settings .toolbar {
    display               : -ms-flexbox;
    -ms-flex-align        : center;
    -ms-flex-direction    : row;
    display               : -moz-box;
    -moz-box-align        : center;
    -moz-box-orient       : horizontal;
    display               : -webkit-box;
    -webkit-box-align     : center;
    -webkit-box-orient    : horizontal;
    display               : -webkit-flex;
    -webkit-align-items   : center;
    -webkit-flex-direction: row;
    display               : flex;
    align-items           : center;
    flex-direction        : row
}

.settings .toolbar .action-buttons {
    margin-right: .25em
}

.settings .toolbar .filter {
    -ms-flex        : 1 1 auto;
    -moz-box-flex   : 1;
    -webkit-box-flex: 1;
    -webkit-flex    : 1 1 auto;
    flex            : 1 1 auto
}

.settings.user-groups table.user-group-list,
.settings.user-groups table.user-group-list td.user-group-name,
.settings.user-groups table.user-group-list th.user-group-name {
    width: 100%
}

.settings.user-groups table.user-group-list tr.user td.user-group-name a[href] {
    display: block;
    padding: .5em 1em
}

.settings.user-groups table.user-group-list tr.user td.user-group-name {
    padding: 0
}

.settings.users table.user-list {
    width: 100%
}

.settings.users table.user-list td.last-active,
.settings.users table.user-list th.last-active {
    white-space: nowrap
}

.settings.users table.user-list td,
.settings.users table.user-list th {
    width: 25%
}

.settings.users table.user-list tr.user td.username a[href] {
    display: block;
    padding: .5em 1em
}

.settings.users table.user-list tr.user td.username {
    padding: 0
}

.text-input {
    display            : -webkit-box;
    display            : -webkit-flex;
    display            : -moz-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -webkit-align-items: center;
    -moz-box-align     : center;
    -ms-flex-align     : center;
    align-items        : center;
    width              : 100%;
    background         : #222;
    color              : #fff
}

.text-input .text-input-field {
    -webkit-box-flex: 1;
    -webkit-flex    : 1;
    -moz-box-flex   : 1;
    -ms-flex        : 1;
    flex            : 1;
    overflow        : hidden;
    white-space     : nowrap
}

.text-input .target {
    border        : none;
    border-radius : 0;
    display       : inline-block;
    vertical-align: middle;
    color         : #fff;
    font-size     : 12pt;
    width         : 100%;
    height        : auto;
    resize        : none;
    outline       : none;
    margin        : 0;
    padding       : .25em .25em .25em 0;
    background    : transparent;
    overflow      : hidden
}

.text-input .sent-history {
    display       : inline-block;
    vertical-align: middle;
    padding       : .25em 0 .25em .25em
}

.text-input .sent-history .sent-text {
    display          : inline-block;
    vertical-align   : baseline;
    white-space      : pre;
    font-size        : 12pt;
    animation        : fadeout 1s linear;
    -webkit-animation: fadeout 1s linear;
    opacity          : 0
}

.text-input .text-input-buttons button {
    box-shadow           : none;
    padding              : .25em;
    max-width            : 20%;
    margin               : .1em;
    min-width            : 3em;
    background           : #444;
    border               : .125em solid #666;
    -moz-border-radius   : .25em;
    -webkit-border-radius: .25em;
    -khtml-border-radius : .25em;
    border-radius        : .25em;
    color                : #fff;
    font-weight          : lighter;
    text-align           : center;
    text-shadow          : 1px 1px 0 rgba(0, 0, 0, .25), 1px -1px 0 rgba(0, 0, 0, .25), -1px 1px 0 rgba(0, 0, 0, .25), -1px -1px 0 rgba(0, 0, 0, .25)
}

.text-input .text-input-buttons button:active {
    background  : #822;
    border-color: #d44
}

.text-input .text-input-buttons button.pressed {
    background  : #882;
    border-color: #dd4
}

/*# sourceMappingURL=1.guacamole.6f7b293d2dba5a891aa5.css.map*/