/** Example rules used by the template application (remove for your app) */
@font-face {
    font-family: Grotesk;
    src: url('Resources/Font/AkzidenzGrotesk-Regular.otf');
}

@font-face {
    font-family: Grotesk;
    font-weight: bold;
    src: url('Resources/Font/AkzidenzGrotesk-Bold.otf');
}

@font-face {
    font-family: Grotesk;
    font-weight: bold;
    font-style: italic;
    src: url('Resources/Font/AkzidenzGrotesk-BoldItalic.otf');
}

@font-face {
    font-family: Grotesk;
    font-style: italic;
    src: url('Resources/Font/AkzidenzGrotesk-Italic.otf');
}

/* :root {
	--tRed: #FF2E28;
	--tBlue: #0163AF;
	--tGrey: #e6e7e8;
	--tBlack: #1D252D;
} */

#loading {
    margin-left: auto;
    margin-right: auto;
    text-shadow: 2px 2px grey;
    color: #0163AF;
    margin-top: 32vh;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    color: #777777;
    margin: 40px 0px 70px;
    text-align: center;
}

html, body {
    height: 100%;
    margin: 0px;
}

html {
}

body {
    padding: 0;
    color: --var(tBlack) !important;
    overflow-y: hidden;
    text-align: center;
}

body, table td, select, button, input, textarea {
    font-family: Grotesk, Helvetica, Arial !important;
    /* font-size: small; */
}

input {
    border: 1px rgb(169, 169, 169) solid;
    padding-left: 5px;
}

button {
    background-color: #ededed;
'
}

#archived-states {
    padding-top: 128px;
    float: left;
}

.archive-table {
    /* border-radius: 10px; */
    background: #e6e7e8;
    padding: 5px;
    width: 100%;
}

.archive-table tr {
    box-shadow: 0 0 5px black;
}

.archive-table-titles {
    text-align: center;
    width: auto;
}

.archive-button {
    min-width: 75px;
    margin: 0px;
    /* border: 1px solid grey;
    border-radius: 2px; */
}

.archive-button-save {
    width: 100px;
    margin-top: 5px;
}

.alias-filtering-tstyle {
    color: #0163AF;
    font-weight: bold;
}

.suggest-box {
    margin-bottom: 6px;
}

.scroll-panel {
    width: auto;
    max-height: 400px;
    margin-bottom: 7px;
    /* border-radius: 10px; */
    /* border: 1px solid black; */
}

#icons {
    width: 50px;
    height: 150px;
    margin-right: 0px;
    margin-top: 170px;
}

.rclick-image {
    position: relative;
    margin-top: 15px;
    float: right;
}

/* #left-panel {
    width: 250px;
    float: left;
    height: 100%;
    margin-right: 5px;
}

#left-panel .sub-title {
    text-align: center;
    font-weight: bold;
    font-size: 21px;
    font-family: Verdana, Arial;
    color: #FF0000;
} */

.title {
    text-align: center;
    font-weight: bold;
    font-size: 17px;

}

#right-panel {
    width: 700px;
    height: 100%;
}

#right-panel.error {
    width: 700px;
    background-color: transparent;
}

.panel {
    float: left;
    margin-right: 6px;
    /*background: #e6e7e8;*/
}

.panel.last {
    margin-right: 5px;
}

/* #reconfigure-panel {
	background: #e6e7e8;
	text-align: center;
	border-radius: 10px;
	margin-top: 5px;
} */

.clear {
    clear: both;
}

.rp-content {
}

#rp-buttons {
    width: 100%;
}

#rp-buttons .gwt-Button {
    border-color: black;
    font-weight: bold;
    width: 100%;
}

#rp-buttons .gwt-Button[disabled] {
    border-color: grey;
    font-weight: normal;
}

#archive-button {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
}

#layoutRoot {
    height: 100%;
    display: inline-block;
    /* width: 1150px; */
    margin-left: -50px;
    /* margin-left:auto;
    margin-right:auto; */
    /* overflow-y: auto; */
    visibility: hidden;
}

.port-state {
    border-collapse: collapse;
    border-width: 1px;
}

.port-state tr {
    height: 15px;
}

.port-state td {
    width: 15px;
    cursor: pointer;
    font-size: 8px;
    color: white;
    font-weight: bold;
    border-color: grey;
}

.portstate_unallocated {
    background-color: #00FFFF;

}

.portstate_allocated {
    background-color: #0000FF;
}

.portstate_empty {
    background-color: #FFFFFF;
}

.portstate_in_transit {
    background-color: #FFFF00;
}

.portstate_in_clean {
    background-color: #FF8000;
}

.portstate_error {
    background-color: #FF0000;
}

.port-state-container {
    display: inline-block;
    text-align: center;
}

.port-state-container p {
    text-align: left;
    display: none;
    font-family: Verdana, Arial;
    font-size: 11px;
}

.port-states {
    width: 100%;
    /* min-height: 100% !important; */
    /*height: 700px;*/
    overflow-y: scroll;
    text-align: center;
}

.port-states td p {
    margin: 0;
}

/* .port-states tr:hover .port-state tr {
	height: 15px;
}

.port-states tr:hover .port-state td {
	width: 15px;
	font-size: 0.6em;
} */

.port-states tr:hover .port-state-container p {
    display: block;
}

.duplex .full-duplex {
    display: block;
}

.duplex .half-duplex {
    display: none;

}

.rp-content .warning-label {
    text-align: center;
    font-style: italic;
    color: #FF2E28;
    font-size: 12pt;
}

.half-duplex-inline-block-long {
    display: inline-block;
    width: 79%;
    text-align: center;
}

.full-duplex-inline-block-long {
    display: inline-block;
    width: 65%;
    text-align: center;
}

.half-duplex-inline-show {
    visible: false;
}

.full-duplex-inline-block-short {
    display: inline-block;
    width: 58%;
    text-align: left;
}

.full-duplex-inline-block-short-check {
    display: inline-block;
    text-align: right;
}

.half-duplex-inline-block-long-emphasize {
    font-weight: bold;
}

.half-duplex-inline-block-long-green {
    color: green;
}

.half-duplex-inline-block-long-magenta {
    color: magenta;
}

.full-duplex-inline-block-long-green_and_magenta {
    color: #7F407F;
}

.full-duplex-inline-block-long-emphasize {
    font-weight: bold;
}

.full-duplex-inline-block-long-green {
    color: green;
}

.full-duplex-inline-block-long-magenta {
    color: magenta;
}

.full-duplex-inline-block-long-green_and_magenta {
    color: #7F407F;
}

.half-duplex-inline-block-short {
    display: inline-block;
    width: 43%;
    text-align: center;
}

.half-duplex-inline-block-short-emphasize {
    font-weight: bold;
}

.half-duplex-inline-block-short-green {
    color: green;
}

.half-duplex-inline-block-short-magenta {

    color: magenta;
}

.half-duplex-inline-block-short-green_and_magenta {
    color: #7F407F;
}

.full-duplex-inline-block-short-emphasize {
    font-weight: bold;
}

.full-duplex-inline-block-short-green {
    text-align: center;
    color: green;
}

.full-duplex-inline-block-short-magenta {
    text-align: center;
    color: magenta;
}

.full-duplex-inline-block-short-green_and_magenta {
    color: #7F407F;
}

.full-duplex {
    display: none;
}

.port-states tr.empty .port-state {
    visibility: hidden;
}

.port-states tr.empty .port-state tr {
    height: 3px;
}

.port-states tr.empty .port-state td {
    width: 15px;
}

.port-states tr.empty .port-state-container p .gwt-InlineLabel {
    display: none
}

.empty .port-state-tbl-border {
    border: solid 1px black;
    position: relative;
}

.empty .port-state-tbl-border .empty-text {
    display: block;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    /*
	left: 12px;
    top: 2px;*/
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

}

/*.empty:hover .port-state-tbl-border .empty-text  {
    font-size: 14px;
	left: 68px;
    top: 19px;
}*/

.port-states tr:hover .port-state-container p.empty-text {
    display: none;

}

.port-states tr.empty:hover .port-state-container p.empty-text {
    display: block;
}

.gwt-connectionStatus-success {
    color: green;
    font-weight: bold;
}

.gwt-connectionStatus-failure {
    color: #FF2E28;
    font-weight: bold;
}

.gwt-connectionStatus-recovery {
    color: #FF8000;
    font-weight: bold;
}

/* //////////////////////////////// */
.portspecialstate_use_of_csr {
    background-color: #FFA500;
}

/* @keyframes porteffect_blink_green_animation {
	from {background-color: green;}
	to {}
}
@-webkit-keyframes porteffect_blink_green_animation { Safari and Chrome
	from {background-color: green;}
	to {}
}
.porteffect_blink_green {
	height: 15px;
	animation: porteffect_blink_green_animation 1s infinite alternate;
	-webkit-animation: porteffect_blink_green_animation 1s infinite alternate; Safari and Chrome
} */

.selected {
    outline: #FF9900 2px solid;
    background-color: #FF2E28 !important;
}

@keyframes selected_orange_animation {
    from {
        background-color: #FF9900;
    }
    to {
    }
}

@-webkit-keyframes selected_orange_animation { /* Safari and Chrome */
    from {
        background-color: #FF9900;
    }
    to {
    }
}

.selected_orange {
    outline: #FF9900 2px solid;
    /* animation: selected_orange_animation 1s infinite alternate;
    -webkit-animation:selected_orange_animation 1s infinite alternate; Safari and Chrome */
}

@keyframes selected_purple_animation {
    from {
        background-color: #FF2E28;
    }
    to {
    }
}

@-webkit-keyframes selected_purple_animation { /* Safari and Chrome */
    from {
        background-color: #FF2E28;
    }
    to {
    }
}

.selected_purple {
    outline: #FF2E28 2px solid;
    /* animation: selected_purple_animation 1s infinite alternate;
    -webkit-animation:selected_purple_animation 1s infinite alternate; Safari and Chrome */
}

@keyframes porteffect_blink_magenta_animation {
    from {
        background-color: magenta;
    }
    to {
    }
}

@-webkit-keyframes porteffect_blink_magenta_animation { /* Safari and Chrome */
    from {
        background-color: magenta;
    }
    to {
    }
}

.porteffect_blink_magenta {
    outline: magenta 2px solid;
    height: 15px;
    animation: porteffect_blink_magenta_animation 1s infinite alternate;
    -webkit-animation: porteffect_blink_magenta_animation 1s infinite alternate; /* Safari and Chrome */
}

@keyframes selected_orange_purple_animation {
    25% {
        background: #FF9900;
    }
    50% {
        background: #FF2E28;
        opacity: 1.0;
    }
    100% {
    }
}

@-webkit-keyframes selected_orange_purple_animation { /* Safari and Chrome */
    25% {
        background: #FF9900;
    }
    50% {
        background: #FF2E28;
        opacity: 1.0;
    }
    100% {
    }
}

.selected_orange_purple {
    outline: #FF9900 2px solid;
    background-color: #FF2E28 !important;
    /* animation: selected_orange_purple_animation 2s infinite;
    -webkit-animation: selected_orange_purple_animation 2s infinite; Safari and Chrome */
}

/* //////////////////////////////// */

/** Most GWT widgets already have a style name defined */
.gwt-TabLayoutPanel {
    min-height: 300px;
    height: 100%;
}

/* .tabs-panel div {
	height:auto;
}

.tabs-panel .gwt-TabLayoutPanel {
	position: relative;
}

.tabs-panel .gwt-TabLayoutPanel:nth-child(3) {
	position: relative;
} */

div.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: transparent;
}

.tabs-panel div.gwt-TabLayoutPanel div.gwtTabLayoutPanelContentContainer {
    border: none;
}

.gwt-SplitLayoutPanel {
    height: 170px;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    width: 100%;
    padding: 0px !important;
    overflow-y: auto !important;
}

.tab-content.gwt-TabLayoutPanelContent {
    overflow-y: auto !important;
}

.queue-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.queue-table-container {
    width: 689px;
    height: 100%;
    padding: 3px;
    overflow-y: auto;
}

.gwt-TabLayoutPanelContentContainer {
    background-color: #e6e7e8;
    border: none !important;
    /* border-radius: 10px; */
}

/*.gwt-TabLayoutPanelTab {*/
/*    width: 102px !important;*/
/*}*/


div.gwt-TabLayoutPanelTab-selected {
    background-color: #e6e7e8 !important;
    color: #0163AF !important;
}

div.gwt-TabLayoutPanel div.gwt-TabLayoutPanelTab {
    border-radius: 5px 5px 0 0;
    width: 112px;
    padding: 1px 0;
    background-color: lightgrey;
    margin: 0px 1px;
    text-align: center;
}

#reconfigure-panel {
    /* height: 300px; */
}

#reconfigure-panel .tabs-panel div.gwt-TabLayoutPanelTab-selected {
    background-color: #e6e7e8;
    color: #0163AF;
}

#reconfigure-panel .gwt-TabLayoutPanel {
    height: 100%;
    margin-top: 2px;
}

#reconfigure-panel .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: white;
}

#reconfigure-panel div.gwt-TabLayoutPanelTab-selected {
    background-color: #e6e7e8;
    color: #0163AF;
}

#reconfigure-panel div.gwt-TabLayoutPanelTab {
    border-radius: 5px 5px 0 0;
    width: 107px;
    padding: 1px 0;
}

#reconfigure-panel .tabs-panel div.gwt-TabLayoutPanel div.gwt-TabLayoutPanelTabs div.gwt-TabLayoutPanelTab {
    border-radius: 5px 5px 0 0;
    width: 107px;
    padding: 1px 0;
}

.iocommands-table-container {
    width: 689px;
    height: 693px;
    padding: 3px;
    overflow-y: auto;
}

.iocommands-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

/*.iocommands-table-iocommandtext-column {
	word-break: break-all;
}*/
.alarm-table-container {
    width: 100%;
    height: 100%;
    padding: 3px;
    overflow-y: auto;
}

.alarms-table {
    width: 693px;
    border-collapse: collapse;
    background-color: white;

}

.history-table-container {
    /* width: 689px; */
    width: 100%;
    /* height: 693px; */
    height: auto;
    overflow-y: auto;
}

.history-table {
    width: 90%;
    /* width: 90%; */
    /* margin-right:12px;
    border-collapse:collapse; */
    background-color: white;
    border-radius: 10px;
    padding: 5px;
}

.table-header {
    background-color: slategrey;
    text-align: center;
}

.table-header td {
    font-weight: bold;
}

/* #left-panel-header {
	height: 60px;
} */

#status-bar {
    font-size: 14px;
}

#status-r1, #status-r2, #status-r3 {
    text-align: center;
}

#status-r1 {
    margin-bottom: 12px;
}

#status-r1 .gwt-InlineHTML {
    margin-right: 5px;
}

#status-r2 table {
    width: 700px;
    border-collapse: collapse;
    border-color: white;
    margin: 0 auto;
}

#status-r2 table td {
    border-color: white;
    text-align: center;
    padding: 1px 2px;
}

#status-r2 .c1 {
    background-color: #FF2E28;
}

#status-r2 .c2 {
    background-color: orange;
}

#status-r2 .c3 {
    background-color: yellow;
}

#status-r2 .c4 {
    background-color: yellow;
}

#status-r3 table {
    width: 500px;
    border-collapse: collapse;
    border-color: white;
    margin: 0 auto;
}

#status-r3 table td {
    border-color: white;
    text-align: left;
    padding: 1px 2px;
}

#status-r3 .c1 {
    background-color: #FF2E28;
}

#status-r3 .c2 {
    background-color: #FF4500;
}

#status-r3 .c3 {
    background-color: yellow;
}

#status-r3 .c4 {
    background-color: blue;
}

#in-progress {
    height: 20px;
}

#power-monitor-table {
    margin: 0 auto;
}

#power-monitor-table .gwt-TextBox {
    padding: 0;

}

#clean-fiber-table {
    margin: 0 auto;
}

#clean-fiber-table .gwt-TextBox {
    padding: 0;

}

.pm-button {
    width: 100px;
    height: 50px;
}

.clean-button {
    width: 100px;
    height: 50px;
}

.pm-panel {
    margin-top: 78px;
}

.clean-panel {
    margin-top: 78px;
}

.wave-length-listBox {
    width: 100%;
}

#switch-not-ready {
    display: none;
}

#right-panel.error #status-bar,
#right-panel.error #tabs-panel {
    display: none;
}

#right-panel.error #switch-not-ready {
    display: block;
    padding-left: 300px;
    padding-top: 60px;
}

.legend {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    padding: 5px;
    background: #e6e7e8;
    border-radius: 10px;
}

/* .legend-title {
	display: block;
	font-weight: bold;
	font-size: 12px;
} */

.legend .color {
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-right: 8px;
}

.legend .separator {
    width: 20px;
    display: inline-block;
}

progress {
    width: 100%;
}

.progress-label {
    color: black;
}

.progress-label-alert {
    color: #FF2E28;
}

.progress-good {
    background-color: green;
    border-radius: 5px;
}

.progress-warning {
    background-color: yellow;
    border-radius: 5px;
}

.progress-alert {
    background-color: #FF2E28;
    border-radius: 5px;
}

progress.progress-good {
    background-color: white;
}

progress.progress-good::-webkit-progress-bar {
    -webkit-appearance: progress-bar;
    background-color: green;
}

progress.progress-good::-webkit-progress-value {
    -webkit-appearance: progress-bar;
    background-color: green;
}

progress.progress-good::-moz-progress-bar {
    -moz-appearance: progressbar;
    background-color: green;
}

progress.progress-warning {
    background-color: white;
}

progress.progress-warning::-webkit-progress-bar {
    -webkit-appearance: progress-bar;
    background-color: yellow;
}

progress.progress-warning::-webkit-progress-value {
    -webkit-appearance: progress-bar;
    background-color: yellow;
}

progress.progress-warning::-moz-progress-bar {
    -moz-appearance: progressbar;
    background-color: yellow;
}

progress.progress-alert {
    background-color: white;
}

progress.progress-alert::-webkit-progress-bar {
    -webkit-appearance: progress-bar;
    background-color: #FF2E28;
}

progress.progress-alert::-webkit-progress-value {
    -webkit-appearance: progress-bar;
    background-color: #FF2E28;
}

progress.progress-alert::-moz-progress-bar {
    -moz-appearance: progressbar;
    background-color: #FF2E28;
}

.save-panel {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    background: grey;
}

.save-label {
    text-align: center;
    margin: 5px;
}

.save-text {
    margin: 5px;
}

.save-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75px;
}

/********************  
*		Viewer		*
*********************/
.allocated {
    border: 1px solid #4d4d4d;
}

.unallocated {
    border: 1px solid white;
}

.singlemode {
    /* background-color: #3334FF; */
    background-color: #0163AF;
}

.multimode {
    background-color: #08C8FF;
}

.parked {
    border: 1px solid grey;
    background-color: grey;
}

.emptyport {
    background-color: #FFFFFF;
    border: 1px solid #4d4d4d;
}

.arcports {
    border-collapse: collapse;
    border-width: 1px;
    margin: 5px auto;
    display: inline-block;
}

.arc-scroll {
    display: block;
    /* width:200px; */
}

.arcports tr {
    /* 	height:3px !important;
     */
}

/* .arcports td{
	border: 1px solid #4d4d4d;
} */
.arcport {
    /* -webkit-transition: height 0ms ease-out 250ms, width 0ms ease-out 250ms;
    -moz-transition: height 0ms ease-out 250ms, width 0ms ease-out 250ms;
    -o-transition: height 0ms ease-out 250ms, width 0ms ease-out 250ms;
    transition: height 0ms ease-out 250ms, width 0ms ease-out 250ms; */
    /* -webkit-transition: height 300ms ease 0ms, width 300ms ease 0ms;
    -moz-transition: height 300ms ease 0ms, width 300ms ease 0ms;
    -o-transition: height 300ms ease 0ms, width 300ms ease 0ms;
    transition: height 300ms ease 0ms, width 300ms ease 0ms; */
    height: 3px !important;
    width: 5px;
    margin: -1px;
    color: black;
    font-size: 40%;
}

/* .arcport .locked {
	background: repeating-linear-gradient(
	45deg,
	grey,
	grey 5px,
	transparent 5px,
	transparent 10px);
} */
/* .arcports:hover {
	padding: 20px 0px;
} */
/* .arcports:hover .arcport {
	height:15px;
	width:20px;
	font-size: medium;
} */
/* .connecting-line:hover .arcport {
	height:15px;
	width:20px;
	font-size: medium;
} */
/* .arcport:hover {
	border: 2px solid grey;
} */

.arcport-portstate_allocated-single {
    background-color: #3334FF;
    border: 1px solid #4d4d4d;
}

.arcport-portstate_unallocated-single {
    background-color: #3334FF;
    border: 1px solid white;
}

/* .hover.arcport-portstate_unallocated-single {
	background-color: #3334FF;
	width: 16px;
	height: 11px;
	border: 2px solid white;
} */
.arcport-portstate_allocated-multi {
    background-color: #08C8FF;
    border: 1px solid #4d4d4d;
}

.arcport-portstate_unallocated-multi {
    background-color: #08C8FF;
    border: 1px solid white;
}

/* .hover.arcport-portstate_unallocated-multi {
	background-color: #08C8FF;
	width: 16px;
	height: 11px;
	border: 2px solid white;
} */
.arcport-portstate_empty {
    background-color: #FFFFFF;
    border: 1px solid #4d4d4d;
}

.arcport-portstate_in_transit {
    background-color: #FFFF00;
}

.arcport-portstate_in_clean {
    background-color: #FF8000;
}

.arcport-portstate_error {
    background-color: #FF0000;
}

.arcport-portstate_missing {
    background-color: #FF0000;
}

.arc-vpanel {
    margin: 10px;
    width: 200px;
}

.arc-viewer-button {
    display: block;
    margin: 1px auto;
}

.grid-column {
    max-width: 200px;
}

.connecting-line {
    border-bottom: 2px solid #FF9900;
    /* width:121px; */
}

.connecting-line-duplex {
    border-bottom: 2px solid #FF9900;
    border-top: 2px solid #FF9900;
    height: 4px;
}

.connecting-line-dnd {
    border-bottom: 2px solid fuchsia;
}

.connecting-box-A {
    outline: 3px groove #FF9900;
    position: relative;
    z-index: 100;
}

.connecting-box-B {
    outline: 3px groove #FF9900;
    position: relative;
    z-index: 100;
}

.connecting-box-test {
    outline: 3px groove #FF9900;
    position: relative;
    z-index: 100;
    height: 15px;
    width: 20px;
}

.connecting-box-self {
    outline: #FF9900 double thick;
}

.popup-line {
    border: 0px;
    padding: 0px;
    /* transform: translate(-60px, 0px) rotate(-40deg) translate(60px, 0px); */
}

.locked {
    /* opacity: 1.5; */
    background-image: url("Resources/locked-unfocused.png");
    /* repeating-linear-gradient(45deg,
    transparent, transparent 3px, #FF2E28 3px, #FF2E28 6px
); */
    /* -webkit-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,.5)); For Safari 5.1 to 6.0
    -o-linear-gradient(right, rgba(0,0,0,.5), rgba(0,0,0,.5)); For Opera 11.1 to 12.0
    -moz-linear-gradient(right, rgba(0,0,0,.5), rgba(0,0,0,.5)); For Firefox 3.6 to 15
    linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5)); Standard syntax (must be last) */
}

.hover.missing {
    background-image: url("Resources/missing.png") !important;
    background-size: 20px 15px;
    border: 1px solid #4d4d4d;
}

.arcport.missing {
    background-image: none !important;
    border: 1px solid #FF2E28;
}

.arcport-portstate_locked {
    background-image: url("Resources/locked.png");
    /* background:
        repeating-linear-gradient(45deg,
        white,
        white 3px,
        #FF2E28 3px,
        #FF2E28 6px
    ); */
}

.viewer-title {
    font-size: 20px;
}

.viewer-mod {
    margin-left: 45px;
}

.viewer-range {
    margin-right: 30px;
}

.archive-dialog-box {
    width: 200px;
}

/********************
*	Reconfigure		*
*********************/
.recon-vpanel {
    vertical-align: middle;
    width: 100%;
    background-color: rgb(230, 231, 232);
}

.recon-hpanel td {
    vertical-align: middle !important;
}

.recon-hpanel {
    margin-left: auto;
    margin-right: auto;
    margin: 10px auto;
}

.recon-label {
    font-size: medium;
    text-align: center;
    margin-top: 5px;
}

.recon-textbox {
    width: 160px;
    height: 20px;
    font-weight: bold;
    /*border: 1px solid;*/
}

.recon-textbox-orange {
    color: #FF9900;
}

.recon-textbox-purple {
    color: #FF2E28;
}

.recon-button {
    height: 40px;
}

.recon-disc-scroll {
    width: 250px;
    height: 163px;
}

.disconnect-select {
    outline: 4px groove #FF9900;
    position: relative;
    z-index: 100;
}

.disconnect-locked {
    outline: 4px groove #FF2E28;
    position: relative;
    z-index: 100;
}

.disconnect-table {
    width: 100%;
    /* margin-bottom:20px; */
}

.disconnect-table tr {
    text-align: center;
}

.multi-warning {
    color: #FF2E28;
    text-align: center;
    margin: 0px 5px;
}

.progress-panel {
    width: 100%;
    margin-top: 10px;
}

/*****************************/
.archive-highlight {
    outline: 4px solid black;
}

.arcport-legend {
    /* outline: black 1px solid; */
    border-width: 2px;
    height: 14px;
    width: 18px;
}

.error {
    color: #FF2E28;
    font-size: x-large;
}

.gwt-PopupPanel {
    z-index: 1000;
}

/* #gripper-status table{
	margin-left:auto;
	margin-right:auto;
} */
.upload-panel {
    margin-top: 20px;
    background: #e6e7e8;
    border-radius: 10px;
    padding: 5px;
}

#progress-holder {
    overflow: hidden;
    width: auto;
}

#in-progress {
    font-style: italic;
    position: relative;
    /*left: -100%;
    -moz-animation-name: marquee;
  -webkit-animation-name: marquee;              

  Set the duration, s = seconds
  -moz-animation-duration: 5s;
  -webkit-animation-duration: 5s;      
  
  How many times the animation to repeat
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;                        

  Several options available, use linear for this example
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;    */
}

/* Stop the marquee on :hover */
/* #in-progress:hover{
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
}      */
@-webkit-keyframes marquee {
    0% {
        left: 100%;
    }
    100% {
        left: -50%;
    }
}

@-moz-keyframes marquee {
    0% {
        left: 100%;
    }
    100% {
        left: -50%;
    }
}

#in-progress td {
    font-size: large;
    vertical-align: middle !important
}

.progress-reconfiguring {
    color: green;
    font-weight: bold;
}

@keyframes reconfigure_selection_animation {
    from {
        background-color: green;
    }
    to {
    }
}

@-webkit-keyframes reconfigure_selection_animation { /* Safari and Chrome */
    from {
        background-color: green;
    }
    to {
    }
}

.reconfigure-selection {
    outline: green 2px solid;
    animation: reconfigure_selection_animation 1s infinite alternate;
    -webkit-animation: reconfigure_selection_animation 1s infinite alternate; /* Safari and Chrome */
}

.hover {
    height: 15px !important;
    width: 20px;
    margin: -1px;
}

.hover.locked {
    background-image: url("Resources/locked.png");
}

.hover-grid {
    padding: 20px;
}

/********************
*		History		*
*********************/
.history-grid {
    height: 100%;
}

.history-holder {
    width: 100%;
    /* padding-right: 10px; */
}

.history-grid td {
    padding: 2px 5px;
}

.history-filter {
    border-radius: 10px;
    /* background: #EFEFEF; */
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

.history-filter .gwt-DateBox {
    padding: 0px;
    border-radius: 5px;
    margin: 0px 5px;
    text-align: center;
}

.history-filter td {
    vertical-align: middle !important;
}

.filter-box {
    width: 50px;
    margin: 5px;
    /* vertical-align: middle; */
}

.history-header {
    border-bottom: 2px solid #6f7277;
    padding: 3px;
    text-align: left;
    color: #4b4a4a;
    text-shadow: #ddf 1px 1px 0;
    font-size: medium;
}

.history-even-row {
    background-color: lightgrey;
}

.history-odd-row {
    background-color: white;
}

.history-pager {
    padding: 0px 5px !important;
    margin: 2px;
    font-size: medium !important;
    text-align: center;

}

.noselect {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.history {
    margin: 2px;
}

.alert-dialog {
    min-height: 150px;
    min-width: 250px;
    font-size: 20px;
    text-align: center;
}

.alert-text {
    font-size: 20px;
    margin: 10px;
}

.alert-button {
    display: block;
    width: 75px;
}

.gwt-TabLayoutPanelTab {
    float: left;
}

/* .arc-scroll {
	max-height:600px;
	min-width:200px;
} */
.gwt-ListBox {
    width: 150px;
    text-align: center;
}

.module-center {
    text-align: center;
}

.text-connections-column {
    border-style: solid;
    border-width: 2px;
}

.connections-table {
    width: 90%;
    text-align: center;
    background-color: white;
    border-radius: 10px;
    padding: 5px;

}

body.unselectable {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    cursor: cell;
}

.cell-table-header {
    background-color: white;
}

.table-view, .table-view .google-visualization-table, .table-view .google-visualization-table-table {
    width: 100%;
    height: 100%
}

.no-padding {
    padding: 0px !important;
}

.aliasCell:hover {
    outline: 1px solid --var(tBlack);
    cursor: text;
}

.fade {
    color: green;
    -webkit-animation: fadeinout 2s linear forwards;
    animation: fadeinout 2s linear forwards;
}

@-webkit-keyframes fadeinout {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeinout {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.gwt-SuggestBoxPopup .suggestPopupContent {
    max-height: 200px;
    overflow-y: auto;
}

.pwCheckLabel {
    height: 8px;
}

.imageButton {
    word-break: break-all;
}

.imageButton:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1)
}

.imageButton:active {
    background-color: rgba(0, 0, 0, 0.3)
}

.imageButtonDisabled {
    background-color: rgba(0, 0, 0, 0.5);
}

#tabs-panel {
    height: 87vh;
}

.locked-suggestion {
    background-image: url("Resources/locked.png");
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 5px;
}

.textCenter {
    text-align: center;
}

.shasize {
    width: 25px;
    text-align: center;
}

.shasize img {
    width: 25px;
}

.shasize img:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
}

.shasize img:active {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
}

.gwt-connectionstatus-paused {
    color: darkgoldenrod;
    font-weight: bold;
}

@-moz-document url-prefix() {
    .gwt-SuggestBoxPopup table:first-child {
        width: calc(100% + 15px);
    }
}

.otdrhighlight {
    background-color: orange !important;
}

.otdrhighlight td {
    border: 0px;
    border-top: 2px solid #f3f7fb;
}

.fiberendoutline {

}

.fiberendoutline td {
    border: 0px;
    border-top: 3px solid #0163AF !important;
    border-bottom: 3px solid #0163AF !important;;
}

.fiberendoutline td:first-child {
    border-left: 3px solid #0163AF;
}

.fiberendoutline td:last-child {
    border-right: 3px solid #0163AF;
}