.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: 2em !important;    
    transform-origin: 1em 50% !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;
}

#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 {
    max-width: 44px;
    max-height: 44px;    
    color: #ddd;
    background-color: #00000000;
    border: 0px;
}

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

.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;
}