.sh-machine-row button, .sh-customer-row button {
    clear: both;
    margin: auto;
}

html, body {
    height: 100%;    
}

.sh-session-ui-dark {
    background-color: #222;
}

body {
    margin: 0px;
    font-family: Sans-Serif;
}

.btn-toggle::before, .btn-group::before {
    width: 1.2em !important;
    height: 1.2em !important;
    transform-origin: 0.6em 50% !important;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    flex-shrink: 0;
}

/* Fix alignment for flexbox buttons - center the dot/icon with the text */
/* Override vertical-align for flex containers and use position to move it down */
button.d-inline-flex.btn-toggle::before,
button.d-inline-flex.btn-group::before,
button.d-inline-flex.btn-group-green::before,
.d-inline-flex.btn-toggle::before,
.d-inline-flex.btn-group::before,
.d-inline-flex.btn-group-green::before {
    vertical-align: baseline !important;
    position: relative !important;
    top: 4px !important;
}

.btn-toggle::before {
    content: url("../images/triangle-right.svg") !important;
}

.btn-group-red::before {
    content: url("../images/circle-red.svg") !important;
}

.btn-group-green::before {
    content: url("../images/circle-green.svg") !important;
}

/* Ensure green dot alignment for flexbox buttons - more specific selector */
button.d-inline-flex.btn-group-green::before,
.d-inline-flex.btn-group-green::before {
    vertical-align: baseline !important;
    position: relative !important;
    top: 4px !important;
}

#supportSessionsList > div.machineGroupTitle, #supportQueueList > div.machineGroupTitle {
    display: flex;
}

.sh-list-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;

    background-color: #eee;
}

.sh-slider-content hr {
    margin-top: 0.6rem;
}

.customer-detail-key {
    color: #999;
}

.customer-details {
    padding-bottom: 5px;
}

.sh-list-empty span {
    font-size: 1.5rem;
    color: #555;
    padding: 20px;
    text-align: center;
}

.sh-list-empty img {
    width: 72px;
    height: 72px;
}

.machine-name, .customer-name {
    float: left;
    margin: 10px;
}

.machine-status {
    float: left;
    margin: 10px;
}

#remote-screen-canvas {
    aspect-ratio: 1;
    display: block;
}

#sh-canvas-wrapper, #remote-screen-canvas {
    margin:auto;
}

#rw-launcher {
    display:none;
}

.sh-hidden {
    display: none !important;
}

#sh-terminalHolder {
    width: 100%;
    height: 100%;
    background-color: #000;
}

.sh-grayscale {
    filter: grayscale(80%);
}

#sh-terminalHolder > div {
    padding: 10px;
    height: 90%;
}

#sh-status-message {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    text-align: center;
    color: #EEE;
    background-color: #555;
    border-radius: 10px;
    padding: 10px;
    user-select: none;
    z-index:10;
}

div.shs-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#sh-controlBar {
    flex-grow: 0;

    /* top: 0px; */
    text-align: center;
    padding: 10px;
    background-color:#333333;
    z-index:100;
    display:flex;
    flex-direction: row;
}

#sh-controlBar > .sh-flexgrab { flex: 1; }

#sh-canvas-parent {
    background: linear-gradient(to top right, rgba(25, 25, 94, 1), rgb(18, 21, 34) 51.68%, rgb(59, 0, 44));
    border-top: 1px solid #666;
    flex-grow: 1;
    min-height: 0;
}

.sh-controlName, .sh-control-bar-button {
    padding: 10px;
    user-select: none;
    outline:none;
}

.sh-right {
    text-align: right;
}

.sh-controlName {
    text-align: left;
    overflow: hidden;
    padding: 5px 0px 0px 10px;
}

.sh-controlName span {
    white-space: nowrap;
    float:left;
    clear:left;
}

#sh-machineName {
    color: #ddd;
    font-size: 1.2em;
}

#sh-hostname, #sh-os {
    color: #aaa;
    font-size: 0.8em;
}

.sh-control-bar-button, .sh-control-bar-combo {
    max-height: 44px;
    color: #ddd;
    background-color: #00000000;
    border: 0px;
}

.sh-control-bar-combo {
	font-size: 0.8rem;
}

.sh-control-bar-button {
	max-width: 44px;
}

.sh-control-bar-button img {
    width: 20px;
    height: 20px;
}

.sh-control-bar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.sh-session-popover {
    position: fixed;
    top: 64px;
    left: 10px;
    z-index: 150;
    width: min(280px, calc(100vw - 20px));
    max-height: calc(100vh - 84px);
    overflow: auto;
    padding: 10px;
    color: #eee;
    background-color: #2d2f31;
    border: 1px solid #565b60;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

.sh-function-panel {
    width: min(360px, calc(100vw - 20px));
}

.sh-popover-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.sh-popover-status {
    color: #92999f;
    font-size: 0.78rem;
    margin: 6px 0;
}

.sh-popover-section-title {
    color: #bfc5c9;
    font-size: 0.78rem;
    margin: 6px 0;
}

.sh-popover-button-grid,
.sh-function-modifiers,
.sh-function-grid {
    display: grid;
    gap: 6px;
}

.sh-popover-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sh-popover-button-stack {
    display: grid;
    gap: 6px;
}

.sh-function-modifiers {
    grid-template-columns: 0.85fr 0.85fr 1fr 0.8fr 1.15fr;
    margin-bottom: 8px;
}

.sh-function-modifiers .sh-menu-button {
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.sh-function-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sh-menu-button {
    min-height: 30px;
    padding: 5px 8px;
    color: #eee;
    background-color: #3a3d40;
    border: 1px solid #555b60;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sh-menu-button-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    text-align: left;
}

.sh-menu-button-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.sh-menu-button-icon-placeholder {
    display: inline-block;
}

.sh-menu-button:hover {
    background-color: #474b4f;
    cursor: pointer;
}

.sh-session-popover .sh-menu-button.sh-menu-button-active,
.sh-session-popover .sh-menu-button.sh-menu-button-active:hover,
.sh-session-popover .sh-menu-button.sh-menu-button-active:focus,
.sh-session-popover .sh-menu-button.sh-menu-button-active:active {
    color: #17202b !important;
    background: #8fb9f0 !important;
    border-color: #8fb9f0 !important;
    outline-color: #8fb9f0 !important;
    box-shadow: none !important;
}

.sh-clipboard-paste-field {
    min-height: 8rem;
    resize: vertical;
}

.sh-disabledButton {
    filter: grayscale(100%);
}

.sh-control-bar-button-hover:hover {
    background-color: #3F4040;
    border-radius: 5px;
    transition: background-color 0.1s linear;
    cursor:pointer;
}

#sh-controlBar div {
    display: inline-block;
}

.sh-helpers {
    position: absolute;
    top: 0px;
    z-index: -10;
}

.sh-helpers textarea {
    padding: 0;
    border: 0;
    margin: 0;
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.labs-connect {
	text-align: center;
	order: 2;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.labs-connect-header {
	font-size: x-large;
	font-weight: bolder;
	padding-top: 30px;
	padding-bottom: 30px;
}

.labs-allow {
	font-weight: bold;
}

.labs-description {
	font-size: large;
	padding-top: 50px;
	padding-bottom: 50px;
}

.labs-download {
	font-size: medium;
	color: #666;
    display: flex;
    justify-content: center;
}

.labs-download > div {
	background-color: #f6f6f6;
	max-width: 35rem;
	padding: 2rem;
	border: 1px solid #e8e8e8;
    border-radius: .4rem;
    box-shadow: 0 0.16rem 0.36rem 0 rgba(0, 0, 0, 0.13), 0 0.03rem 0.09rem 0 rgba(0, 0, 0, 0.11);
}

.labs-retry {
	margin-top: 25px;
	padding-top: 25px;
	color: #666;
}

.labs-retry a::before {
    content: '';
	background-image: url(../images/repeat.svg);
  	background-repeat: no-repeat;
  	background-position: left;
    display: inline-block;
    width: 30px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;
}

#rw-download-target {
    display: flex;
    justify-content: center;
}

.jw_purpleGradient {
	background-color: #89339c !important;
	color: #FFFFFF !important;
	border: 1px #89339c !important;
}