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;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}.clipboard-editor{position:relative}.clipboard-editor .clipboard{overflow:auto;font-size:1em}.clipboard-editor .clipboard.clipboard-contents-hidden{color:transparent;overflow:hidden}.clipboard-editor .clipboard-contents-hidden-hint{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;display:flex;align-items:center}.clipboard-editor .clipboard-contents-hidden-hint .clipboard-contents-hidden-hint-text{flex:1;background:rgba(0,0,0,.125);color:#888;padding:.5em;overflow:hidden;font-size:.9em;text-align:center;font-style:italic}.clipboard-editor .clipboard-contents-hidden-hint:hover .clipboard-contents-hidden-hint-text{text-decoration:underline}.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, ') no-repeat 50%;
background-size: 0;
transition: all .3s
}
.pickr .pcr-button:before {
background: url('data:image/svg+xml;utf8, ');
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, ');
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, ');
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, ');
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, ');
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;
position: relative
}
.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
}
.recent-connections .connection .remove-recent {
visibility: hidden
}
.recent-connections .connection:hover .remove-recent {
visibility: visible
}
.recent-connections .connection .remove-recent:after {
content: "";
display: block;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: 50%;
background-image: url(images/x-black.svg)
}
.recent-connections .connection .remove-recent {
height: 1em;
width: 1em;
position: absolute;
top: 10px;
z-index: 10;
float: right;
right: 10px;
opacity: .2
}
.recent-connections .connection .remove-recent:hover {
opacity: 1
}
.import.help {
text-transform: none
}
.import.help p {
max-width: 70em
}
.import.help h2 {
padding-bottom: 0
}
.import.help p,
.import.help pre {
margin-left: 1em
}
.import.help pre {
background-color: rgba(0, 0, 0, .15);
padding: 10px;
width: fit-content
}
.import.help .footnotes {
border-top: 1px solid grey;
padding-top: 1em;
width: fit-content;
margin-left: 1em
}
.import .import-buttons {
margin-top: 10px;
display: flex;
gap: 10px;
justify-content: center
}
.import .errors table {
width: 100%
}
.import .errors .error-message {
color: red
}
.import .errors .error-message ul {
margin: 0
}
.file-upload-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px;
width: fit-content;
border: 1px solid rgba(0, 0, 0, .25);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
margin-left: auto;
margin-right: auto
}
.file-upload-container.file-selected {
display: flex;
flex-direction: row;
gap: 100px
}
.file-upload-container .clear {
margin: 0
}
.file-upload-container .upload-header {
display: flex;
flex-direction: row;
width: 500px;
margin-bottom: 5px;
justify-content: space-between
}
.file-upload-container .file-error {
color: red
}
.file-upload-container .file-options {
font-weight: 700
}
.file-upload-container .file-upload-input {
display: none
}
.file-upload-container .drop-target {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 500px;
height: 200px;
background: rgba(0, 0, 0, .04);
border: 1px solid #000
}
.file-upload-container .drop-target.file-present {
background: rgba(0, 0, 0, .15)
}
.file-upload-container .drop-target .file-name {
font-weight: 700;
font-size: 1.5em
}
.file-upload-container .drop-target.drop-pending {
background: #3161a9
}
.file-upload-container .drop-target.drop-pending>* {
opacity: .5
}
.file-upload-container .drop-target .title {
font-weight: 700;
font-size: 1.25em
}
.file-upload-container .drop-target .browse-link {
text-decoration: underline;
cursor: pointer
}
.file-upload-container .import-config {
margin-top: .5em;
list-style: none;
width: 100%;
padding-left: 0
}
.file-upload-container .import-config .help {
visibility: hidden;
cursor: help
}
.file-upload-container .import-config .help:after {
content: "";
visibility: visible;
display: inline-block;
background-image: url(images/question.svg);
background-size: contain;
width: 20px;
height: 20px;
position: relative;
top: 4px
}
@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%
}
a.button {
cursor: default;
display: inline-block
}
a.button,
button,
input[type=submit] {
-webkit-appearance: none;
text-decoration: none;
background-color: #3c3c3c;
border: 1px solid rgba(0, 0, 0, .4);
color: #fff;
text-shadow: -1px -1px rgba(0, 0, 0, .3);
font-size: 1em;
font-weight: 700;
font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
padding: .35em 1em;
min-width: 5em;
margin: .25em;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
}
a.button:hover,
button:hover,
input[type=submit]:hover {
background-color: #5a5a5a
}
a.button:active,
button:active,
input[type=submit]:active {
background-color: #2c2c2c;
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: rgba(0, 0, 0, .04);
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,
.header.tabbed {
margin-bottom: 0
}
.header:not(.ng-hide)~* .header,
.header:not(.ng-hide)~.header {
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
}
.header:not(.ng-hide)~.header .user-menu {
display: none
}
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: 3in;
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: .5em 0
}
.login-ui .login-dialog .version .app-name {
display: none;
}
.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: #fff;
background: green;
font-size: .5em;
font-style: italic;
opacity: .5
}
.login-ui .login-dialog .logo {
display: block;
margin: .5em auto;
width: 12em;
height: 6em;
background-size: 12em 6em;
-moz-background-size: 12em 6em;
-webkit-background-size: 12em 6em;
-khtml-background-size: 12em 6em;
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%;
position: absolute;
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 {
top: 0;
left: 0;
width: 100%;
height: 100%
}
guac-player .guac-player-controls {
position: absolute;
padding-bottom: 0;
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-controls .guac-player-buttons {
display: flex;
flex-direction: row;
align-items: center
}
.guac-player-controls .guac-player-keys {
margin-left: auto;
padding-right: .5em;
cursor: pointer
}
guac-player .guac-player-status {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, .5);
z-index: 1;
-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;
-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-container,
guac-player .guac-player-status {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
.guac-player-container {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
guac-player-display {
flex-grow: 5;
min-width: 0
}
guac-player-text-view {
min-width: 25em;
flex-basis: 0;
height: calc(100% - 48px)
}
guac-player-text-view.fullscreen {
min-width: 100%
}
.guac-player-display {
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-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
}
.text-batches {
display: flex;
flex-direction: column;
overflow-y: scroll
}
.text-batches .text-batch {
margin-bottom: 1em;
margin-left: .5em;
cursor: pointer
}
.text-batches .text-batch .timestamp {
white-space: pre-wrap;
color: #00f
}
.guac-player-text-container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
color: #000
}
.guac-player-text-container .text-controls {
display: flex;
flex-direction: row;
align-items: center
}
.guac-player-text-container .text-controls .filter {
flex-grow: 5
}
.guac-player-text-container .text-controls .fullscreen-button {
background-image: url(images/fullscreen.svg);
background-size: contain;
cursor: pointer;
height: 22px;
width: 22px;
margin-right: .25em
}
.guac-player-text-container .result-count {
font-weight: 700;
margin: .5em
}
.guac-player-text-container .filter {
margin: .25em
}
.text-batches .text {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
overflow-wrap: break-word
}
.text-batches .text .key-event {
white-space: pre-wrap
}
.text-batches .text .not-typed {
font-weight: 700
}
.text-batches .text .future {
color: #696969
}
a.button.add-connection,
a.button.add-connection-group,
a.button.add-user,
a.button.add-user-group,
a.button.import-connections {
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,
a.button.import-connections: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)
}
a.button.import-connections:before {
background-image: url(images/action-icons/guac-file-import.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.connectionHistoryPlayer .guac-player-controls .heat-map {
position: absolute;
width: 100%
}
.settings.connectionHistoryPlayer .guac-player-controls .heat-map svg {
position: absolute;
bottom: 7px;
height: 50px;
width: 100%;
z-index: 100;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .1s linear .1s;
-moz-transition: opacity .1s linear .1s;
-o-transition: opacity .1s linear .1s;
transition: opacity .1s linear .1s
}
.settings.connectionHistoryPlayer .guac-player-controls:hover .heat-map svg {
opacity: 1
}
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend {
position: absolute;
display: flex;
flex-direction: column;
align-items: end;
bottom: 65px;
right: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, .85);
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
border-radius: 5px;
opacity: 0;
-webkit-transition: opacity .1s linear .1s;
-moz-transition: opacity .1s linear .1s;
-o-transition: opacity .1s linear .1s;
transition: opacity .1s linear .1s
}
.settings.connectionHistoryPlayer .guac-player-controls:hover .heat-map .legend {
opacity: 1
}
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .frame-events:after,
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .key-events:after {
display: inline-block;
content: "";
width: 25px;
height: 10px;
margin-left: 3px;
margin-right: 10px;
border-radius: 3px
}
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .key-events:after {
background-color: #5ba300
}
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .frame-events:after {
background-color: #888
}
.settings.connectionHistoryPlayer .heat-map svg.key-events path {
fill: rgba(91, 163, 0, .5)
}
.settings.connectionHistoryPlayer .heat-map svg.frame-events path {
fill: hsla(0, 0%, 52.9%, .75)
}
.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-group td.user-group-name a[href] {
display: block;
padding: .5em 1em
}
.settings.user-groups table.user-group-list tr.user-group.disabled,
.settings.user-groups table.user-group-list tr.user-group.disabled td.user-group-name a[href] {
color: grey;
font-style: italic
}
.settings.user-groups table.user-group-list tr.user-group 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.disabled,
.settings.users table.user-list tr.user.disabled td.username a[href] {
color: grey;
font-style: italic
}
.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.c2fc19251fc606ad2140.css.map