/*
Domogik admin default theme
*/

body {
    color: #555555;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
}


textarea {
    width: 100%;
    height: 15em;
}


.margin-bottom {
    margin-bottom: 1em;
}

h5 {
    font-weight: bold;
}


/** all tables **/

table {
    table-layout: fixed;
}

table td {
    word-wrap: break-word;
}

/** login **/

.devtools{
    max-width: 80%;
}

.login{
    max-width: 350px;
}

.box {
    background-color: #FFFFFF;
    border-color: #005774 #D9D9D9 #D9D9D9;
    border-image: none;
    border-right: 1px solid #D9D9D9;
    border-style: solid;
    border-width: 5px 1px 1px;
    padding: 1em 1em 0 1em;
}

.box h1 {
    font-size: 1.4em;
    font-weight: normal;
    display: block;
    text-align: center;
}

.singlebox .form-title {
    font-size: 1.2em;
    display: block;
    text-align: center;
    padding: 1em;
}
/** navbar **/
.navbar-dmg {
	background-color: #2D2C2F;
	border-bottom: 5px solid #005774;
}

.navbar-dmg a {
	color: #eee;
}

.navbar-dmg .dropdown-menu,
.navbar-dmg .nav > li > a:focus,
.navbar-dmg .nav > li > a:hover {
	background-color: #005774;
}

.navbar-nav .open .dropdown-menu > li > a {
	color: #eee;
}

.navbar-nav .open .dropdown-menu > li > a:hover, 
.navbar-nav .open .dropdown-menu > li > a:focus {
	color: #333333;
}

.navbar-dmg .navbar-brand {
	background: url('/static/images/dmg-logo.png') 0 50% no-repeat;
	padding-left: 52px;
}

.navbar-dmg .navbar-brand:hover,
.navbar-dmg .navbar-brand:focus {
    background-color: #005774;
}

.navbar-dmg .navbar-toggle {
	background-color:#eee;
}

.navbar-dmg .navbar-toggle:hover,
.navbar-dmg .navbar-toggle:focus {
    background-color: #005774;
}
.navbar-dmg .navbar-toggle .icon-bar {
    background-color: #000000;
}

.navbar-dmg .navbar-nav > .active > a, 
.navbar-dmg .navbar-nav > .active > a:hover, 
.navbar-dmg .navbar-nav > .active > a:focus,
.navbar-dmg .navbar-nav > .open > a, 
.navbar-dmg .navbar-nav > .open > a:hover, 
.navbar-dmg .navbar-nav > .open > a:focus {
	background-color: #005774;
}

/* collapse table */
.hiddenRow {
    padding: 0 !important;
}



/*** clients status ***/

/*
.status {
    vertical-align: middle;
}
*/

.status-unknown, .status-stop-request, .status-stopped {
    background-color: #bb0000;
    border-color: #bb0000;
}

.status-unknown, .status-dead, .status-not-configured {
    background-color: #555555;
    border-color: #555555;
}

.status-starting {
    background-color: #cccc00;
    border-color: #cccc00;
}

.status-alive {
    background-color: #00cc00;
    border-color: #00cc00;
}


/*** delete below ****/
.dmg_client {
    border: 1px solid black;
    margin-bottom: 1em;
}


.dmg_client .status div {
    display: inline-block;
    border: 1px dashed black;
    margin-right: 1em;
}


/* clients list */
.xpl_client_compliant {
    padding-left: 3em;
}

/* brain specific */
.brain_code {
    margin-left: 2em;
}

.python {
    color: red;
}

#brain_reload {
    margin-right: 1em;
}



/******** core components *********/

/* butler */

#butlerChat {
    width: 100%;
}

#butlerChat .row {
    margin-top: 1em;
}






/* common */
#butlerChat .bubble {
    position: relative;
    width: 75%;
    padding: 1ex;
    padding-left: 1em;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#butlerChat .bubble .lead {
    margin-bottom: 0;
}

#butlerChat .bubble .location {
    margin-bottom: 0;
}

#butlerChat .bubble .source {
    position: relative;
    float: right;
}

#butlerChat .bubble .detail {
    float: right;
    text-align: center;
}

#butlerChat .who {
}

#butlerChat .who .photo {
    font-size: 3em;
    background-color: #cccccc;
    text-align: center;
    width: 1.2em;
    height: 1.2em;
}

#butlerChat .who .identity {
    text-align: center;
}


/* Left */
#butlerChat .bubbleLeft {
    border: #7F7F7F solid 2px;
    float: left;
    margin-left: 25px;
}

#butlerChat .bubbleLeft:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px 16px 8px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    left: -16px;
    top: 12px;
}

#butlerChat .bubbleLeft:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 17px 9px 0;
    border-color: transparent #7F7F7F;
    display: block;
    width: 0;
    z-index: 0;
    left: -19px;
    top: 11px;
}

#butlerChat .whoLeft {
    float: left;
}


/* Right */

#butlerChat .bubbleRight {
    border: #343434 solid 2px;
    float: right;
    margin-right: 25px;
}

#butlerChat .bubbleRight:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px 0 8px 16px;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    right: -16px;
    top: 12px;
}

#butlerChat .bubbleRight:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 0 9px 17px;
    border-color: transparent #343434;
    display: block;
    width: 0;
    z-index: 0;
    right: -19px;
    top: 11px;
}

#butlerChat .whoRight {
    float: right;
}



/*** scenarios ***/

#scenario_navbar {
    padding: 0.5em;
}

#scenario_title  {
    background-color: #f8f8f8;
    padding: 0.5em;
    border: 1px #e7e7e7 solid;
    margin-bottom: 1em;
}

#scenario_form textarea {
    width: 100%;
    height: 5em;
}

#blocklyArea {
    height: 80vh;
}

.scenarioInfo {
    background-color: #f8f8f8;
    padding: 0.5em;
    border: 1px #e7e7e7 solid;
    margin-bottom: 0.5em;
}


/*** devices ***/

#myDevices > li.active > a,
#myDevices > li.active > a:hover,
#myDevices > li.active > a:focus {
    color: white;
    text-decoration: none;
}

/* form */
.form-group ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/*** forms ***/

input {
    max-width: 100%;
}


/*** iframe (for doc) ***/

iframe {
    border: none;
    width: 100%;
}

/*** persons ***/

.person-info  {
}
.person-info .photo {
    margin-right: 1em;
}


/*** camera blocs for camera page ***/

.camera-page {
    width: 100%;
}

.camera {
    display: inline-block;
    width: 46%;
    margin: 2%;
    background-color: #2D2C2F;
    float: left;
    padding: 1ex;
}

.camera .name {
    padding: 0px;
    margin: 0px;
    color: white;
}

.camera .client  {
    color: white;
    text-align: left;
    margin-bottom: 1ex;
}
