:root {
  --color-white: #fff;
  --color-gray: #858585;
  --color-black: #000;
  --color-neutral: #f5f6f7; /* Gray */
  --color-primary: #2a3045; /* Odigo Dark Blue */
  --color-secondary: #df2a5a; /* Odigo Pinky Red */
}

#player {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-top: 0 none;
}

    #player a {
        color: var(--color-white);
    }

#bumicom_logo img
{
	background: url("../assets/odigo-logo.png");
    width: 77px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#login_logo
{
	background: url("../assets/odigo.png");
    width: 200px;
    height: 83px;
    margin: 15px;
	background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#loginPageBody, #loginPageBody a
{
    background: #FFF;
    color: rgb(51, 51, 51);
}

.contextMenu div:hover, .slick-cell.selected, .specialMenu a:hover, .listItem.selected, .listLink.selected, .searchBox.selected input, .searchBox.selected, .valueItem.selected, .listContainer > div.selected,.listContainer > div:hover{
	background: var(--color-primary);
	color: var(--color-white);
	text-shadow: none;
}

.saw_agents div.selected:nth-child(even), .saw_users div.selected:nth-child(even), .saw_values div.selected:nth-child(even) {
    background-color: var(--color-primary);
}

.slick-cell.active,.slick-cell.selected{
	border-top-color: var(--color-primary);
}

#navigation {
  background-color: var(--color-primary) !important;
  padding-left: 87px;
  background: var(--color-neutral);
  box-shadow: none;
}

#navigation li, #navbarMenu li, #userButton, #alarmButton, #specialRecButton {
	color: #f3f3f3;
	border: none;
}
#navigation li a, #navbarMenu li a, #userButton a, #alarmButton a, #specialRecButton a{
	color: #fff;
}
#navigation li.active, #navbarMenu li.active {
	color: var(--color-secondary);
	background:var(--color-neutral);
	box-shadow: none;
}

#navigation li:hover, #navbarMenu li:hover, #userButton:hover, #navigation li#oversizeButton:hover{
	color: #000;
	background :var(--color-primary);
	box-shadow: none;
}
#navigation li a, #navbarMenu li a, #userButton a, #navbarMenu li a{
  color: #fff;
  background: var(--color-primary);
}
#navigation li.active a, #navbarMenu li.active a {
    color: var(--color-secondary);
	background: var(--color-white);
}
#navigation li.active:hover a, #navbarMenu li.active:hover a {
	color: var(--color-secondary);
}

#userButton {
	box-shadow: none;
}

#userButton .downArrow {
    background: rgba(0, 0, 0, 0) url("../assets/arroww.gif") repeat scroll 0 0;
}
#userButton:hover .downArrow {
	background: rgba(0, 0, 0, 0) url("../assets/arroww.gif") repeat scroll 0 0;
}

#navbarMenu {
  border: 1px solid #ccc;
}

#navbarMenu li {
    background: var(--color-white);
    border-top: 1px solid #ccc;
    border-bottom: 0px none;
}

#navbarMenu li:first-child {
  border-top: none;
}

#navbarMenu li:hover a {
  color: var(--color-secondary);
}

#progressBarTooltip, #progressBarTooltip a {
	color: #000;
}

#mobile-header #mobileTitle {
	background: var(--color-primary);
}
#mobile-header, #mobile-header #menu, #mobile-header #backbutton, #mobile-header #usermenu, .sidr {
	background: var(--color-primary);
}
.sidr{
	box-shadow: none;
}
.sidr ul {
	border: 0 none;
}
.sidr ul li {
	border-top: 0 none;
	border-bottom: 1px solid var(--color-white);
}
.sidr ul li.sidr-class-active,
.sidr ul li:hover {
	background: var(--color-white);
}
.sidr ul li.sidr-class-active a,
.sidr ul li:hover a {
    color: var(--color-primary);
}
.sidr ul li:hover {
	line-height: 48px;
	background : #FFF;
	color: #000;
	transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
}
.sidr ul li:hover > a{
		color: #000;
}
.sidr ul li:hover > a, .sidr ul li:hover > span, .sidr ul li.active > a, .sidr ul li.active > span, .sidr ul li.sidr-class-active > a, .sidr ul li.sidr-class-active > span {
	box-shadow: none;
}
#player , .playerSettings{
    background-color: var(--color-primary);
    color: #FFF;
    border-top: 0 none;
}

    #player a {
        color: rgba(255,​ 255,​ 255,​ 0.75);
    }

	#progressBarTooltip a {
		color: #000;
	}

.playButton {
    background: url("../assets/bwiw.png") 0 -195px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -195px no-repeat;
}
.pauseButton {
    background: url("../assets/bwiw.png") 0 -165px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -165px no-repeat;
}
.stopButton {
    background: url("../assets/bwiw.png") 0 -270px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -270px no-repeat;
}
#AddCommentButton img {
    background: url("../assets/bwiw.png") 0 -120px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -120px no-repeat;
}

#PlaySettingsButton img {
    background: url("../assets/bwiw.png") 0 -240px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -240px no-repeat;
}

#PLAYER_info_link img {
    background: url("../assets/bwiw.png") 0 0 no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 0 no-repeat;
}
.cm_0 {
    background: url("../assets/bwiw.png") 0 -30px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -30px no-repeat;
}

.cm_1 {
    background: url("../assets/bwiw.png") 0 -105px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -105px no-repeat;
}

.cm_2 {
    background: url("../assets/bwiw.png") 0 -90px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -90px no-repeat;
}

.cm_3 {
    background: url("../assets/bwiw.png") 0 -150px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -150px no-repeat;
}

.cm_4 {
    background: url("../assets/bwiw.png") 0 -75px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -75px no-repeat;
}

.cm_5 {
    background: url("../assets/bwiw.png") 0 -60px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -60px no-repeat;
}

.cm_6 {
    background: url("../assets/bwiw.png") 0 -45px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -45px no-repeat;
}

.cm_7 {
    background: url("../assets/bwiw.png") 0 -225px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) 0 -225px no-repeat;
}

.cm_8 {
    background: url("../assets/bwiw.png") -15px -30px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) -15px -30px no-repeat;
}

.cm_9 {
    background: url("../assets/bwiw.png") -14px -105px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) -14px -105px no-repeat;
}

.cm_10 {
    background: url("../assets/bwiw.png") -14px -90px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) -14px -90px no-repeat;
}

.cm_11 {
    background: url("../assets/bwiw.png") -14px -60px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) -14px -60px no-repeat;
}

.cm_12 {
    background: url("../assets/bwiw.png") -14px -45px no-repeat;
    background: linear-gradient(transparent, transparent),url(../assets/bwiw.svg) -14px -45px no-repeat;
}

.ui-tabs .ui-tabs-panel {
  background: var(--color-neutral);
  color: var(--color-black);
}

.ui-tabs .ui-tabs-nav li {
  background: var(--color-white);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  padding-bottom: 2px;
  background: var(--color-neutral);
}

.archiveSel {
  background: transparent !important;
}
.archiveSel span, .treelist div:hover span {
  font-weight: bold;
}
.treelist span {
  color: rgba(black, 0.7) !important;
}
.treelist div {
  background: none;
}
.treeList div:hover {
  background: none !important;
}

.ui-button, .ui-widget-content input.ui-button {
  vertical-align: inherit;
  font-weight: 300;
  line-height: 1em;
  text-decoration: none;
  cursor: pointer;
/*  background: var(--color-primary);
  border: 2px solid var(--color-white);
  color: var(--color-white);  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.ui-button:hover, .ui-widget-content input.ui-button:hover {
  /*color: var(--color-white);*/
  text-decoration: underline;
}

.ui-button:focus, .ui-widget-content input.ui-button:focus {
    color: var(--color-white);
    background: var(--color-secondary);
}

.ui-button.ui-spinner-button {
  border-left: 1px solid var(--color-gray);
  background: var(--color-white);
}

#midHeaderLabel {
    float: left;
    text-align: center;
    width: 263px;
}

    #midHeaderLabel.doubleButton {
        width: 242px;
    }

    #midHeaderLabel.doubleButtonRO {
        width: 267px;
    }

.ui-button[data-res="EXPORT"] {
  background: var(--color-neutral);
  color: var(--color-black);
  border-width: 1px;
}

#settingsButton {
  background: var(--color-white);
  border: 1px solid var(--color-gray);
}
