custom.css

/* Don't remove these lines! --> */
@import url("../../css/legacy.css");
@import url("base.css");
@import url(https://fonts.googleapis.com/css?family=Damion);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://fonts.googleapis.com/css?family=Arimo);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
/* <-- Don't remove this line! */

/*
'ThinkTheme' theme for Domoticz
*/
/* Header */
body {
   background: #2B2E37;
   font-family: Arimo !important;
   color: #ddd; /*!important;*/
   background-color: #2B2E37 !important;
}
#timesun, #scenecontent {
   font-family: Ubuntu;
}
#copyright a {
   color: #FFF; 
}
#copyright p {
   font-family: Ubuntu, sans-serif !important;
   font-size: 1em;
   color: #6A6A6A;
   font-style: italic;
}
#copyright p:after {
  content: "  | 'ThinkTheme' by DewGew";
}
#aboutcontent #canvas2 {
	display:none;
}
/* Search */
#searchInput {
  position: relative;
  float: right;
  background-image: url('./images/searchicon.png');
  background-color: #404552;
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 20%;
  font-size: 12px;
  color: #fff;
  padding: 12px 0 8px 30px;
  outline: 0;
  border: 1px solid #4a4b4a;
  border-radius: 5px;
  margin-right: 12%;
}
#searchInput::placeholder {
	color: #fff;
	opacity: 0.5;
}
.warning-text {
   color: yellow;
   font-weight: normal;
}
h2 {
   font-family: Arimo, sans-serif;
   color: #DCDCDC;
}

/* Text in tables */
td {
   font-family: Ubuntu !important;
}

/* Text before/after dropdown selectors of tables */
label, select {
   font-family: Ubuntu !important;
}
.bootbox-body {
   font-family: Ubuntu !important;
}

/* Text header above tables */
.theader h1 {
   font-family: Arimo !important;
}
header.logo {
    background: #2B2E37;
    /*background: linear-gradient(to right, #2B2E37 0%, #404552 100%);*/
}

.container-logo {
    height: 40px;
    margin: 0 auto;
    position: relative;
}
/* Domoticz logo upperleft corner */
.brand h1 {
   visibility: hidden;
   position: relative;
 }
 .brand:after{
   visibility: visible;
   position: absolute;
   top: 43px;
   content: "Domoticz"; /* Changes the header text "Domoticz" */
   font-family: 'Damion', sans-serif;
   font-size: 1.7em;
   font-weight: 200;
   color: #FFF;
}
/* Version info */
.brand h2 {
   float: left;
   margin-left: 150px;
   text-decoration: none;
   text-transform: none;
   font-family: Arimo;
   font-size: 0.55em;
   font-style: italic;
   color: #FFF;
}
.bannercontent {
	margin-top: 20px;
}
@media (max-width: 1200px) {
    .brand h2{
        display: none;
    }
}

/* Navbar */ 
.navbar .nav li a {
   text-decoration: none;
   text-transform: none;
   border-color: transparent;
   font-family: Ubuntu !important;
   padding: 10px;
   font-weight: normal !important;
   text-align: center;
   color: #FFF;
   background-color: #2B2E37;
   background-image: none !important;
}
/* Color of menubar on top of page */
.navbar-inverse .navbar-inner {
   background-color: #404552; 
   background-image: none;
   background-repeat: no-repeat;
   filter: none;
}
/* Make the navbar come a bit more down, so we have more room for the border around the buttons*/
.navbar-inner {
  min-height: 44px;
}
.navbar .nav .dropdown-menu {
   border: 0px;
   font-family: Roboto,sans-serif;
   padding: 4px;
   background-color: #2B2E37;
   background-image: none;
}
.navbar .nav li a:hover {
   border:1px solid #4a4b4a; 
   background-color: #404552 !important;
   border-style: solid !important;
   border-width: 1px !important;
   border-color: #676D79 !important;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
  color: #ffffff;
  background-color: #2B2E37;
  /* border: 1px solid #3093C7 !important; */
}
/* Dropdown menu. Lines between menu items */
.dropdown-menu .divider {
   *width: 100%;
   height: 1px;
   margin: 4px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #353535;
   border-bottom: 1px solid #676D79;
}  

body table#itemtablenostatus tbody tr{
   display: block;

   width: 96%;
   padding: 5px 5px 5px 5px;
   margin: 2px 100% 5px 0;

   border-style: none;
   border-radius: 5px;

   color: #DCDCDC;
   background-color: #404552;

   font-family: Arial, Helvetica, sans-serif;
}
body table#itemtablenostatus tr td:first-child + td{ 
   margin: -27px 6px 0px 0px;
}
body table#itemtable tbody tr{
   display: block;
   width: 96%;
   padding: 5px 5px 5px 5px;
   margin: 2px 100% 5px 0;
   border-style: none;
   border-radius: 5px;
   color: #DCDCDC;
   background-color: #F1F5FA;
   font-family: Arial, Helvetica, sans-serif;
}

/* Hover state for blocks */
table#itemtable tr:hover,
table#itemtablenotype tr:hover,
table#itemtablenostatus tr:hover,
table#itemtabledoubleicon tr:hover,
table#itemtabletrippleicon tr:hover,
table#itemtablesmall tr:hover,
table#itemtablesmalldoubleicon tr:hover,
table#itemtablesmalltrippleicon tr:hover {
   background-color: #4C4E56 !important;
}

/* Set color & font of 'On' and 'Off' in upper right corner of blocks. Also for title & lastupdate of block */
td#bigtext, td#name, td#lastupdate{
   color: #34363F !important;
   font-family: Arimo !important;
}
td#lastupdate{
   color: #DCDCDC !important;
   font-family: Arimo !important;
}
td#status{
	font-weight: bold !important;
	line-height: 1.5 !important;
}
p#copyright{
   color: #DCDCDC !important;
   font-family: Arimo !important;
}
td#timeago{
   font-size: 80%;
   color: #DCDCDC;
   font-family: Arimo;
}
body table tr td:first-child + td + td + td + td + td + td:before,
body table tr td:first-child + td + td + td + td + td:before,
body table tr td:first-child + td + td + td + td:before{
	display: none;
}

/* Make text inside 'Set mode' / 'Create virtual sensor' buttons not bold anymore */
.label, .badge {
    font-weight: normal;
}

body table#itemtablenotype tbody tr{
   color: #DCDCDC;
   background-color: #404552;
   font-family: Roboto, sans-serif important;
}

body table#itemtablesmall tbody tr{
   color: #DCDCDC;
   background-color: #404552 !important;
   font-family: Arimo !important;
}

body table#itemtablenostatus tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtable tbody tr,
body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtabletrippleicon tbody tr  {
   color: #DCDCDC;
   background-color: #404552;
   font-family: Roboto, sans-serif important;
}
body table#itemtablenotype tr td:first-child + td,
body table#itemtablesmall tr td:first-child + td,
body table#itemtabledoubleicon tr td:first-child + td{ 
   margin: -27px 6px 0px 0px;
}
body table#itemtablenostatus tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover {
   border-color: #2B2C74;
   background-color: #404552;
   font-family: Roboto, sans-serif important;
}
body table#itemtable tbody tr{
   background-color: #404552;
}
body table#itemtable tr td:first-child + td { 
   color: #404552;
   margin: -27px 6px 0px 0px;
}
body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td + td:before {
    display: None;
}
/* Table rows even */
tr.even {
   background-color: #34363F;
   color: #DCDCDC;
}
tr.even td.sorting_1{
	background-color: #34363F;
	color: #DCDCDC;
}
/* Table rows odd */
tr.odd,
tr.odd td.sorting_1 {
   background-color: #404552;
   color: #DCDCDC;
}

select {
	background-color: #42434B;
	color: #fff;
	border: 0;
}
.dataTables_length select {
	background-color: #fff;
	color: #000;
	border: 0;
}
div:not(.ui-dialog) input.ui-widget-content,
.ui-widget-content select {
	background-color: #283750;
	background-image: none !important;
	border: none;
}
.ui-dialog {
    z-index: 9999;
}
.ui-dialog, .ui-dialog-buttonpane, .ui-widget-content {
	color: #ddd; /*!important;*/
	background-color: #013;
	background-attachment: fixed;
}
.ui-dialog-titlebar,
.ui-state-default:not(.ui-slider-handle),
.ui-widget-header:not(.ui-slider-handle):not(.ui-slider-range),
.ui-timepicker-div .ui-slider-handle {
	background-color: #2B2E37;
}

/* Give selected table row a petrol blue color */
table.display tr.odd.row_selected td, table.display tr.even.row_selected td {
    background-color: #324979 !important;
    color: #FFF;
}
.dimslider {
	position: relative;
	box-shadow: none !important;
}
/* More space beneath dimslider, selector */
.dimslider, .btn-group, .selectorlevels{
	margin-bottom: 8px;
}
/* Buttons */
/* Events editor buttons */
#main-view > div > section.events-editor__editor > event-viewer > div.events-editor-file__header > form > div.btn-group > button,
#main-view > div > section.events-editor__editor > event-viewer > div.events-editor-file__header > form > div.pull-right > div > button {
   font-family: Ubuntu !important;
   border-radius: 2px;
}
.btnsmall {
   font-family: Ubuntu !important;
   background: #2B2E37;
   border-color: #2B2E37;
   border-style: solid;
   border-width: thin;
}
.btnsmall:hover{
   color: #FFF;
}
.ui-button,
.ui-button:hover {
	background: none;
	background-color: #2B2E37;
}
.bnt-group {
	font-family: Ubuntu !important;
}

.btnstyle, .btnstylerev, .btnstyle3, .btnstyle3-dis, .btn-default, .btn-primary, .btn-mini, .btn-info, .btn-warning, .btn-danger .btn-success, .ui-button-text, .submitbuttonp1usb {
   font-family: Ubuntu !important;
   border-radius: 2px;
}
.ui-dialog-buttonset button {
	background: #3A87AD !important;
	color: #fff !important;
	border: none !important;
	border-radius: 2px !important;
}
/* Grey-flatstyle background for disabled buttons (Update/Delete at 'Hardware' page) */
.btnstyle3:disabled,
.btnstyle3-dis {
    background: #4C4E56;
    color: #8E8E8E;
	border-radius: 2px;
}

/* Flat style for blue 'Update' button */
.btnstyle3, .btnstylerev, .btnstyle {
    background: #3A87AD;
}
.btnstyle3[data-i18n="Delete"] {
    background: #B94A48;
}
/* Flat style for purple 'All Devices' button at Hardware page */
.btnstyle3-sel {
    background: #6C519E;
}

/* Flat style for 'Apply settings' button at Settings page */
.sub-tabs-apply {
    border: 1px solid transparent !important;
}
.btn-danger {
    background-color: #B94A48 !important;
}

/* Color for enabled 'Notification' & 'Timers' button */
#itemtablenostatus .btnsmall-sel {
    background: #337AB7;
}

/* Dropdown boxes at 'Scene page' */
#comboroom, #combotype, #combodevice, #combowhen, #combopriority, #combodatatimeout, #sensortype, #P1Baudrate {
   font-family: Ubuntu !important;
}

/* Text inside user editable text boxes */
#devicename, #onaction, #offaction, #devicedescription, #ondelaytime, #offdelaytime {
   font-family: Ubuntu !important;
}

/* Set color of text input fields */
.text.ui-widget-content {
   border: 1px solid #42434B !important;
   background: #2B2E37 !important;
   color: #FFF;
}

.ui-widget-content {
   background: #2B2E37 !important;
}

/* Background colors */
.row-fluid [class^="span"] {
	background-color: #42434B; /*!important;*/
	color: #fff !important;
}

/*#protectiontable, 
#loghistory table, 
#notifications>table, 
#metercounters table, 
#othersettings table,
#floorplans table, 
#settingscontent #ActiveTabs,
#emailtable,*/
#hardwarecontent > div:not(.page-header-small):not(.bannav):not(#bannav),
#hardwarecontent > table:not(.page-header-small):not(.bannav):not(#bannav),
#hardwarecontent #ipnodeparamstable,
#nodeparamstable,
#utilitycontent #notificationparamstable,
#plancontent #activeparamstable,
#usercontent #userparamstable, #cameracontent #activeparamstable, #hardwarecontent #hardwareparamstable,
#lightcontent #paramstable:not(:nth-of-type(1)):not(:nth-of-type(2)),
#scenecontent #paramstable:not(:nth-of-type(1)):not(:nth-of-type(2)),
#weathercontent #notificationparamstable, #lightcontent #timerparamstable,
#tempnotifications #notificationparamstable, #lightcontent #notificationparamstable,
#scenecontent #timerparamstable,
#notificationtable:not(.dataTable),
#notifications > table,
#paramstable, #fibaromain #uservariablesedittable,
#customlog, #timerparamstable,
#linkparamstable, #influxremote,
#linkhttpparamstable, #httpremote,
#linkgooglepubsubparamstable, #googlepubsubremote,
#fibaromain #linkparamstable, #fibaromain #fibaroremote,
#userparamstable, #activeparamstable, #lightcontent paramstable,
#scenecontent #paramstable,
#notificationparamstable, #hardwareparamstable,
#eventparamstable {
	background-color: #2B2E37;
	border-top: 10px solid #2B2E37;
	border-bottom: 10px solid #2B2E37;
}
/* Set color of text input fields */
#settings select,
#settings input {
	border: 1px solid #4C4E56 !important;
	background: #2B2E37 !important;
	color: #fff;
} 
.text.ui-widget-content {
   border: 1px solid #4C4E56 !important;
   background: #42434B !important;
   color: #fff;
}
/* Text at RFXCOM set mode page */
#settings {
   font-family: Ubuntu !important;
}

/* Setup > Settings tabs */
.tab-content {
  overflow: auto;
  border: 1px solid #42434B;
  padding-left: 10px;
}

/* Style of tabs at Setup > Settings page */
.sub-tabs > li > a {
    color: #DCDCDC;
    cursor: pointer;
    background-color: #404552;
    border: 1px solid transparent;
}

.sub-tabs > .active > a {
    color: #FFF;
    background-color: #4C4E56;
    border: 1px solid transparent;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #404552;
}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    border-color: #43A4D3 transparent transparent;
    color: #FFF;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    color: #FFF;
    cursor: default;
    background-color: #4C4E56;
    border: 1px solid transparent;
    border-bottom-color: transparent;
}

Table header (second row)
.fg-toolbar.ui-toolbar.ui-widget-header.ui-helper-clearfix.ui-corner-tl.ui-corner-tr .fg-toolbar.ui-toolbar.ui-widget-header.ui-helper-clearfix.ui-corner-bl.ui-corner-br {
    border: 1px solid !important;
    background: #24262F !important;
    border-color: transparent transparent #000 !important;
}

.dimslider {
    border-color: #333 !important;
	box-shadow: none !important;
}

.dimslider .ui-slider-range {
    border-radius: inherit;
} 

/* Different color & font for log window */
div.log {
    background-color: #27292C;
    font-family: "Droid Sans Mono", monospace !important;
}

/* Font color for normal log lines */
.lognorm {
    color: #EBE7E3;
}

/* Font settings for special log lines */
.logstatus {
    color: #21AA0B;
	/* color: #FFF632; */
    font-weight: 100 !important;
}
/* Font settings for error log lines */
.logerror {
    color: #E36049;
    font-weight: 100 !important;
}