html {
	font-family: Roboto, sans-serif;
	font-size: 13px;
}

img {
    border: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
	margin: 0;
}

a {
	text-decoration: none;
}

input, select {
	color: #ffffff;
	font-size: 1em;
	padding: 0.2em;
	border: 0;
	background-color: #515b65;
	outline-width: 0px;
}

input[type="checkbox"] {
	height: 1.1em;
	width: 1.1em;
}

body {
	margin: 0;
	color: white;
	position: relative;
	width: 100%;
	min-width: 20em;
	background-color: #2f353a;
}
button {
	background-color: #20a8d8;
	color: #FFFFFF;
	border: 0px;
	border-radius: 3px;
	margin: 0.5em 0.5em 0.5em 0;
	padding: 0.4em 0.7em;
	min-width: 6em;
	cursor: pointer;
	outline: none;
}

button:hover {
	background-color: #1b8eb7;
}

button:disabled {
	background-color: #20a8d8;
	color: #ffffff;
	cursor: default;
	opacity: 0.65;
	cursor: not-allowed;
}

.block {
	position: relative;
	margin: 0;
	padding: 0.5em 0.7em;
}

.close-btn {
	display: block;
	width: 2.625em;
	height: 2.25em;
	padding: 0;
	border: 0;
	outline: none;
	background: url("../res/close40.png") left center no-repeat;
	background-size: 1.875em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	opacity: 1;
}

.nav-btn {
	position: absolute;
    z-index: 220;
	display: none;
	width: 2.625em;
	height: 2.25em;
	padding: 0.4em;
    margin-left: 0.6em;
	border: 0;
	outline: none;
	background: url("../res/menu10.png") left center no-repeat;
	background-size: 1.875em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	opacity: 0.8;
	color: #212427;
}

.nav-btn:hover, .nav-btn:focus {
	opacity: 1;
}

/* usr-begin */
  #usr {
    position: absolute;
    top: 0em;
    right: 0em;
    width: auto;
    z-index: 200;
  }

  #usr .close-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  #usr .block-title {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  #usr ul {
    display: flex;
    text-align: left;
    white-space: nowrap;
  }

  #usr li {
    display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  #usr li:last-child {
    border-right: none;
  }
  
  #usr li a {
    padding: 0.42857em 0.85714em;
  }

.usr-panel {
	background-color: #3a4149;
	position: absolute;
	right: 0em;
	box-shadow: 0em 0em 1em 1em rgb(0 0 0 / 25%);
	width: 25rem;
	transition: 0.3s;
	z-index: 1;
}

.usr-panel li {
	display: block;
}

.usr-panel a {
	color: #ccc;
	display: block;
	padding: 1em;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.8em;
	padding: 1.2em;
	padding-left: 1.8em;
}

.usr-panel a:hover {
	color: #fff;
}

.usr-btn {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0.4em;
	display: block;
	width: 2.625em;
	height: 2.25em;
	padding: 0;
	border: 0;
	outline: none;
	background: url("../res/male80.png") left center no-repeat;
	background-size: 2.6em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	opacity: 0.8;
}

.usr-btn:hover, .usr-btn:focus {
	opacity: 1;
}
/* usr-end */

#outer-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
}

#inner-wrap {
	position: relative;
	width: 100%;
}

#nav {
	position: relative;
	overflow: hidden;
	width: auto;
	color: #fff;
}

#nav .close-btn {
	display: none;
}

#nav .block-title {
	border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#nav .block {
	position: relative;
	background-color: #212427;
	margin: 0;
	padding: 0;
}

#nav ul:before, #nav ul:after {
	content: "";
	display: table;
}

#nav ul:after {
	clear: both;
}

#nav li {
	display: inline-flex;
    margin: 0;
    padding: 0;
}

#bigScreenOptions {
	height: 3.2em;
}

#bigScreenOptions li a {
	display: block;
	color: #ccc;
	line-height: 3.28571em;
	outline: none;
	margin: 0;
	transition: background-color 0.2s ease-out;
	padding: 0.0em 0.85714em;
    margin: 0;
}

#nav li a:focus, #nav li a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

#nav li.is-active a {
	color: #fff;
}

#nav li:last-child {
    border-right: none;
  }

#smallScreenOptions {
	background-color: #212427;
	visibility: hidden;
	position: fixed;
	left: -1000em;
	-webkit-box-shadow: inset -1.5em 0em 0.75em -0.75em rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset -1.5em 0em 0.75em -0.75em rgba(0, 0, 0, 0.25);
	box-shadow: inset -1.5em 0em 0.75em -0.75em rgba(0, 0, 0, 0.25);
	width: auto;
	transition: left 0.3s;
	z-index: 1;
}

#smallScreenOptions li {
	display: block;
}

#smallScreenOptions a {
	color: #ccc;
	display: block;
	padding: 1em;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.8em;
	padding: 1.2em;
	padding-right: 1.8em;
}

#smallScreenOptions a:hover {
	color: #fff;
}

.app-name {
	position: absolute;
    color: white;
    width: 100%;
    top: 0;
    z-index: 210;
    text-align: center;
    font-size: 2em;
    margin-top: 0.2em;
    display: none;
}


#main {
	background: #C9DAF8;
}

#main .block {
	padding: 2.625em 1.875em;
}

.deck {
    min-height: 45em;
	margin: 1em;
}

.pageTitle {
	font-size: 2em;
	color: white;
}

.editButton {
	height: 1.5em;
}

.viewButton {
	height: 1.5em;
	width: 1.5em;
}

.editCell {
	cursor: pointer;
}

.editCellDisabled img {
	opacity: 40%;
}

.licenceButton button {
    text-transform: uppercase;
	background-color: #20a8d8;
}

.hiddenColumn {
    display: none;
}

.licenceButton button:hover {
	background-color: #1b8eb7;
}

.crosslight img {
	vertical-align: middle;
	width: 2em;
	height: 2em;
}

.licenceButtonDisabled button {
	visibility: hidden;
}

.subPageHeader {
	margin: 1em 0 0 1em;
}

.clearFilterButton {
	margin: 0;
	padding: 0.7em 1em;
	height: 100%;
	background: #FFF;
	color: #BBB;
	border: 0;
}

.clearFilterButtonHighlighted {
	opacity: 1 !important;
}

.filterBox-t1 {
	margin: 0.6em 0;
	display: inline-block;
	background-color: #515b65;
	border-radius: 3px;
	float: right;
}

input.filterBox-t2 {
	background: url('../res/search.png');
	background-size: 1.2em;
	background-repeat: no-repeat;
	padding: 0 0 0 1.2em;
	font-family: helvetica, arial, sans-serif;
	color: white;
	vertical-align: top;
	display: inline-block;
	font-size: 1.8em;
	font-weight: 400;
	border: 0;
	width: 8em;
	height: 1.2em;
	margin: 0;
	box-sizing: border-box;
}

button.filterBox-t3 {
	background: url('../res/cancel_circle_o3blue.png');
	opacity: 0.7;
	background-size: 2em;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	font-family: helvetica, arial, sans-serif;
	vertical-align: top;
	display: inline-block;
	font-size: 0.9em;
	font-weight: 400;
	border: 0;
	min-width: 2.5em;
	height: 2.3em;
	margin: 0;
	box-sizing: border-box;
}

.storagePathCell {
	font-family: courier, monospace;
}

.clickable-alert {
	background-color: rgba(255, 255, 255, 1);
	color: black;
	padding: 1em;
	font-size: 2em;
	z-index: 50000;
}

.search {
	display: none;
	width: 400px;
	height: 50px;
	padding: 18px;
	margin: 0;
	box-sizing: border-box;
	border: none;
	background: #627fc0;
	color: #FFF;
	font-size: 20px;
}

.validationError {
	border: 2px solid red !important;
}

.dynamic-popup-panel {
    background-image: url('../res/loading.gif');
    background-size: 4em;
    width: 4em;
    height: 4em;
    background-repeat: no-repeat;
    background-position: center center;
}

/* popup */
.gwt-PopupPanel {
	background-color: #3a4149;
	font-size: 1.2em;
	max-width: 75%;
	border-radius: 4px;
}

.gwt-PopupPanel .header {
	background-color: #212427;
    text-align: left;
    font-size: 1em;
    color: #fff;
    overflow: hidden;
}

.gwt-PopupPanel .closeButtonPanel {
    float: right;
    background: no-repeat url(../res/closeButton.png) 1px 1px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.gwt-PopupPanel .closeButtonPanel:hover {
	background-color: #777;
}

.gwt-PopupPanel .contentPanel {
	padding: 0px;
}

.gwt-PopupPanel .alert-popup-content {
	background-color: #3a4149;
	color: #FFF;
}

.gwt-PopupPanel .alert-popup-label {
	color: #FFF;
	padding: 1em 0.5em;
}

.gwt-PopupPanel button {
	background-color: #20a8d8;
	color: #E4E4E4;
	margin: 0em 0.5em 0.5em 0em;
	transition: background-color 0.2s;
}

button.secondary {
	background-color: #515b65;
	margin: 0em 0.5em 0.5em 0em;
}

button.warning {
	background-color: #f8a41a;
	color: #000;
	margin: 0em 0.5em 0.5em 0em;
}

button.danger {
	background-color: #f86c6b;
	color: #000;
	margin: 0em 0.5em 0.5em 0em;
}

.gwt-PopupPanel button:hover {
	background-color: #1b8eb7;
}

button.secondary:hover {
	background-color: #475059;
}

button.warning:hover {
	background-color: #cb8717;
}

button.danger:hover {
	background-color: #bd5050;
}

.gwt-PopupPanel button.lock-study {
	display: flex;
	justify-content: space-around;
	gap: 1em;
}

.gwt-PopupPanel button.lock-study.locked:before {
	background-size: 1em;
	background-repeat: no-repeat;
	content: "";
	width: 1em;
	background-image: url('../res/lock.png');
}

.gwt-PopupPanel .lock-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #2f353a;
    padding: 1em;
    border-radius: 0.2em;
    margin: 0.5em 0;
}

.gwt-PopupPanel .lock-details-header {
	grid-column: 1 / 3;
	font-weight: bold;
	border-bottom: 1px solid #E4E4E4;
	margin-bottom: 0.5em;
}

.gwt-PopupPanel .confirm-popup-content {
    padding: 1em;
    min-width: 20em;
    min-height: 6em;
	color: #FFF;
}

.check-mark {
	background-image: url('../res/check_white.png');
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: 1em center;
	color: transparent;
}

.minus-mark {
	background-image: url('../res/minus.png');
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: 1em center;
}

/* Object Details Grid */
.detailsPanel {
	border: 0px;
	margin: 0em;
	padding: 0.7em 2em 1em 0;
	float: left;
}

.detailsPanelTitle {
	background-color: #212427;
	color: #fff;
	font-weight: normal;
	padding: 0 0.4em;
	line-height: 2em;
	border-bottom: 1px solid #2f353a
}

.detailsGrid {
	padding: 0.2em;
	border-top: 0px;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
	border-left: 0px solid #ccc;
	background-color: #3a4149;
	color: #fff;
	line-height: 2em;
	font-size: 0.9em;
	overflow: hidden;
}

.tenantTable {
    width: 25%;
}

table.detailsGrid {
	min-width: 25em;
}

.detailsPanelCell {
	vertical-align: top;
}

.detailsActionButtons {
	clear: both;
}

table.guiCellTableStyle {
	border-spacing: 0;
	margin: 0 0 1.5em 0;
}

tr.guiCellTableStyleEvenRow td {
	background-color: #637DB8;
}

tr.guiCellTableStyleOddRow td {
	background-color: #7893D1;
}

.guiCellTableNameColumn {
	
}

.tenantTextArea {
    width: 40em;
    height: 15em;
}

.guiCellTableCheckboxColumn {
	font-family: courier, monospace;
}

table.flexTable {
	border-spacing: 0;
	margin: 0 0 1.5em 0;
}

td.flexTableFirstColumnCellData {
	line-height: 2em;
	padding: 0.4em 0.8em;
	border-top: 1px solid #515b65;
	border-bottom: 1px solid #515b65;
	font-family: courier, monospace;
}

td.flexTableSecondColumnCellData {
	line-height: 2em;
	padding: 0.4em 0.8em;
	border-top: 1px solid #515b65;
	border-bottom: 1px solid #515b65;
}

table.flexTable tr {
	background-color: #3a4149;
	color: #FFF;
}

table.flexTable tr:nth-child(even) {
	background-color: #3a4149;
}

td.flexTableFirstCell {
	min-width: 18em;
	background-color: #212427;
	border-top: 0px;
	border-bottom: 1px solid #212427;
	line-height: 2em;
	padding: 0 0.8em;
}

td.flexTableSecondCell {
	background-color: #212427;
	border-top: 0px;
	border-bottom: 1px solid #212427;
	min-width: 20em;
	line-height: 2em;
	padding: 0 0.8em;
}

td.guiTableHeaderCell {
	background-color: #4E669C;
	border-top: 0px;
	border-bottom: 1px solid #283758;
	line-height: 2em;
	padding: 0 0.8em;
}

.floatingBox {
	color: #000;
	background-color: #BCD5F3;
	border: 1px solid #282828;
	width: 20em;
	height: 10em;
	float: left;
	margin: 1em;
	padding: 1em;
	cursor: pointer;
}

.floatingBox:hover {
	color: #000;
	background-color: #ACC5E3;
	border: 1px solid #000;
}

.nullValue {
	font-style: italic;
}


@media screen and (max-width: 1000px) {
	#bigScreenOptions {
		visibility: hidden;
	}
	
	#smallScreenOptions {
		visibility: visible;
	}
	
	.nav-btn {
		display: block;
	}
	
	.app-name {
	    display: block;
	}

	.usr-btn {
	    z-index: 210;
	}
}

/* edit popup style */
.editPanel {
    background-color: #3a4149;
    color: #fff;
    line-height: 2em;
    font-size: 0.9em;
    overflow: hidden;
}

.recoEditPatientPanel {
    width: 30rem;
    background-color: #3a4149;
    display: grid;
    grid-template-columns: 1.2fr 3fr;
    grid-gap: 0.2em;
    padding: 0.5em 0.8em;
    color: white;
}

.recoEditStudyPanel {
    width: 60rem;
    padding: 0 0.8em;
}

.recoEditSeriesPanel {
    background-color: #3a4149;
    display: grid;
    grid-template-columns: 1.2fr 3fr;
    grid-gap: 0.2em;
    padding: 0.5em 0.8em;
    color: white;
}

.editButtons {
    float: right;
}

.divider {
    border: 1px solid #515b65;
    margin: 1em;
}

.editStudyPatientData {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr;
    padding: 1em 1em 0em 1em;
    line-break: anywhere;
}

.editStudyLabel {
    padding-right: 0.5em;
    color: #d5d5d5;
    overflow: hidden;
    white-space: nowrap;
    grid-column: 1;
}

.editStudyLabel.column {
    grid-column: 3/4;
}

.editStudyInformation {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    padding: 0 1em;
    align-items: center;
}

.editTextBox {
    border-radius: 3px;
    font-size: 0.9em;
    color: white;
    border: 2px solid transparent;
    height: 1.1em;
    outline-width: 0px;
}

select.editTextBox {
    height: 2em;
}

.recoEditStudyPanel .editTextBox {
    width: 98%;
}

.copyRow {
    width: 100%;
    line-break: anywhere;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyRow button {
    min-width: 2em;
    min-height: 2em;
    margin: 0;
    background-repeat: no-repeat;
}

.copyRow button.copyToClipboard {
    background-image: url(../res/copyToClipboard.png);
    background-size: 1.2em;
    background-position: 6px 6px;
    margin-left: 1em;
}

.copyRow button.bucketRestore {
    background-image: url(../res/restoreStudy.png);
    background-size: 1.5em;
    background-position: 3px 3px;
}

.copyRow button.bucketUpload {
    background-image: url(../res/bucketUpload.png);
    background-size: 1.4em;
    background-position: center;
}

.copyRow button.exportZip {
    background-image: url(../res/zip.png);
    background-size: 1.4em;
    background-position: center;
}

.copyRow button.republishStudy {
    background-image: url(../res/reload.png);
    background-size: 1.3em;
    background-position: 5px 5px;
}

.bucketRestorePopup {
    background-color: #3a4149;
    overflow: hidden;
    padding: 1em 1em 0 1em;
    width: 30em;
    font-size: 0.9em;
    color: white;
}

.bucketUploadPopup {
    background-color: #3a4149;
    overflow: hidden;
    padding: 1em 1em 0 1em;
    width: 25em;
    color: white;
    font-size: 0.9em;
}

.bucketUploadPopup .bucketName {
    font-family: monospace;
}

.bucketRestoreLocation {
    padding-bottom: 1em;
}

.bucketRestorePopup .physicalMediaList {
    display: block;
    width: 100%;
}

.bucketRestorePopup .editButtons,
.bucketUploadPopup .editButtons {
    padding-top: 1em;
}

.bucketProgress {
    position: relative;
    padding-top: 1rem;
}

.exportProgress {
    padding-top: 1em;
}

.exportProgress.exporting:after,
.bucketProgress.restoring:after,
.bucketProgress.uploading:after {
    position: absolute;
    margin-left: 0.1rem;
    content: '...';
    display: inline-block;
    animation: loading steps(4) 1.5s infinite;
    clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 16px, auto, auto);
  }
}

.bucketProgress.error {
    color: orange;
}

.editButtons button[disabled] {
    background-color: grey;
    cursor: not-allowed;
}

.leftSection {
    border-right: 1px solid #515b65;
}

.resultTree {
    position: relative;
    zoom: 1;
    overflow: hidden auto;
}

.leftSection .resultTree {
    direction: rtl;
}

.leftSection .resultTree .treeItem * {
    direction: ltr;
}

.studyRow {
    border-radius: 0.2em;
    background-color: #3a4149;
	direction: ltr;
}

.seriesRow {
    border-radius: 0.2em;
    background-color: #3a4149;
    padding: 0.3em;
}

.instanceRow {
    border-radius: 0.2em;
    background-color: #3a4149;
    padding: 0.3em;
}

.patientRow {
    border-radius: 0.2em;
    background-color: #3a4149;
    padding: 0.3em;
    direction: ltr;
}

.moveInstancePanel {
    background-color: #292e33;
    font-size: 1.2em;
    padding: 1em;
    color: white;
}

.gwt-PopupPanelGlass {
    opacity: 0.5;
    background-color: black;
}

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  background: #515b65;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #20a8d8;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #20a8d8;
}

::-webkit-scrollbar-thumb:horizontal{
    background: #20a8d8;
    border-radius: 10px;
}

input::placeholder {
    font-style: initial;
}

.newPatientButton {
    margin-left: 1.5em;
}

.deselectMultiSeries:hover {
    background-color: #2f353a;
}

input:disabled {
    opacity: 0.7;
}

.knownNodeBoxFooter {
    font-style: italic;
	margin-top: 2em;
	font-size: 0.9em;
	color: #acacac;
}

.nodesPage tr.disabled td {
    color: #afafaf;
}

.node-enabled {
    background-image: url('../res/check_white.png');
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: 2em center;
	color: transparent;
}

.node-disabled {
    background-image: url('../res/minus.png');
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: 2em center;
}

.demo-plate-panel {
    position: absolute;
    top: 8px;
    right: 3em;
    font-size: 1.4em;
    padding: 0 0.6em;
    color: #fff;
    line-height: 1.5em;
    background-color: #20a8d8;
    border-radius: 12px;
    height: 1.4em;
    cursor: default;
}

.licence-expired-panel {
    min-height: 5em;
    min-width: 26em;
    padding: 1em;
    font-size: 1rem;
    color: #ccc;
    white-space: pre;
    line-height: 1.2rem;
}

.stationConfigPopup{
    padding: 0 0.5em;
    font-size: 13px;
}

.stationPopupButtonContainer{
	vertical-align: middle;
}

.closeStationPopupContainer{
width:100%;
vertical-align:middle;
display:flex;
justify-content: flex-end;
}

.DateRangeSearchPanel {
	width: 100%;
	border-radius: 0.3em;
	padding: 0.5em;
	margin-bottom: 0.5em;
	background-color: #3a4149;
}
.DateRangeSearchFieldsPanel {
	display: flex;
	place-self: flex-start;
}
.DateRangeSearchButtonsPanel {
	display: flex;
	place-self: flex-end;
}

.DateRangeLabelContainer{
	white-space:nowrap;
	margin-bottom: 0.5em;
	display:flex;
	padding-left: 0.2em;
}
.DateRangeLabel{
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	height: 1em;
	font-weight: bold;
}
.studiesAnalysisFilter{
	padding: 0.4em;
	margin: 0.1em;
	border-radius: 0.3em;
	width: 12em;
}
.energyConsumptionRowAlert {
 	height: 1em;
 	cursor: default;
 	position: relative;
     top: 2px;
 }

.recapConfirmMessage {
	font-size: 0.8em;
}

.lockedStudyPatientMergeWarning {
	color: #f86c6b;
}

button.deprecate-locked {
	opacity: 0.5;
	user-select: none;
	cursor: not-allowed;
	background-color: transparent;
}