html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background: #eee;
}

/* materialized styles */
.header {
    font-weight: 300;
}

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

h1.header {
    font-size: 2rem;
    padding: 1rem;
}

h2.header {
    font-size: 1.8rem;
    padding: 0.9rem;
}

h3.header {
    font-size: 1.64rem;
    padding: 0.8rem;
}

h4.header {
    font-size: 1.46rem;
    padding: 0.7rem;
}

h5.header {
    font-size: 1.28rem;
    padding: 0.6rem;
}

h6.header {
    font-size: 1.1rem;
    padding: 0.5rem;
}

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browsertele-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
    color: rgba(0, 0, 0, 0.87);
}

input[type=checkbox]:not(.browser-default) + span {
    color: #9e9e9e;
}

.btn-flat:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.dropdown-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#login-body {
    height: 100vh;
}

#login-panel {
    width: 300px;
    margin: auto;

    border-top: 50px solid;
    -moz-border-image: url("../images/titleBackground.jpg") 300;
    -webkit-border-image: url("../images/titleBackground.jpg") 300;
    -o-border-image: url("../images/titleBackground.jpg") 300;
    border-image: url("../images/titleBackground.jpg") 300;
}

#login-panel .login-form .input-field {
    margin-bottom: 0;
    width: 96%;
    margin-left: 2%;
}

#login-panel .login-form input[type="text"],
#login-panel .login-form input[type="password"] {
    height: 2em;
    margin-bottom: 1em;
}

#login-panel .login-form .input-field label {
    transform: translateY(4px);
}

#login-panel .login-form .input-field label.active {
    transform: translateY(-70%) scale(0.8);
}

#credentials-login-button {
    width: 100%;
    margin-top: 7px;
}

#login-panel .login-info-label {
    line-height: 1em;
    font-size: 0.9em;
    height: 2em;

    text-align: center;
}

#login-panel .login-info-label.error {
    color: #F44336;
}

#login-panel .login-google_oauth .login-info-label {
    margin-top: 16px;
}

#login-google_oauth-button {
    height: 40px;
    width: 188px;
    padding-left: 34px;
    margin: auto;
    margin-top: 34px;
    display: block;

    font-size: 14px;
    font-weight: 500;
    color: #757575;

    border-radius: 2px;
    box-shadow: 0 1px 3px -1px #202020;
    border: none;

    background-image: url('../images/g-logo-plain.png');
    background-color: white;
    background-position-y: 50%;
    background-position-x: -4px;
    background-size: 48px;
    background-repeat: no-repeat;
}

#login-google_oauth-button:active {
    background-color: #EEE;
    background-image: url('../images/g-logo-plain-pressed.png');
}

#login-google_oauth-button[disabled] {
    color: #B0B0B0;
}

/*noinspection CssInvalidPropertyValue,CssOverwrittenProperties*/
.log-content {
    display: block;
    overflow-y: auto;
    height: 100%;

    font-size: .875em;

    padding: 1.5em;

    white-space: pre-wrap; /* CSS 3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}



 /* CUSTOM DARK THEME */
.main-content-header {
 background: #2196F3;
 color: white;
}



.page-content {
    background: #383c4a;
}

.main-app-content{
    background: #383c4a !important;
}

.app-history-panel{
    background: #383c4a !important;
}


.main-app-sidebar {
    background: #2a2e3a !important;
}


.collection-item {
    background-color: #383c4a !important; 
}

.collection-item.active {
    background-color: #404552 !important;
    color: #1e70bf  !important;
}

p {
    color: white;
}

.white-text {
   color: white  !important;
}

h2 {
    color: white;
}

h3 {
    color: white !important;
}


h5 {
    color: white;
}

a.collection-item {
    color: #2196f3 !important;
}

a.collection-item:hover {
    color: #86acd1 !important;
}

.teal-text {
    color: #2196F3 !important;
}
.teal {
    background-color: #2196F3 !important;
}

label {
    color: white !important;
}

textarea {
    color: white !important;
}

span {
    color: #2196F3 !important;
}

table {
    color: white;
}

input {
    color: white !important;
}

code.log-content {
    background-color: #2a2e3a;
    color: white;
}

.btn {
    background: #2196F3;
}

.welcome-panel {
    background-color: #2a2e3a;
    color: white;
}

.shadow-top-bottom {
    box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px -0px #888888 inset !important;
    -webkit-box-shadow: 0 0px 0px -4px #7d7d7d inset, 0 0px 0px -0px #888888 inset !important;
    -moz-box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px -0px #888888 inset !important;
}

.app-sidebar {
    box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px 0px #888888 inset !important;
    -webkit-box-shadow: 0 0px 0px 4px #7d7d7d inset, 0 0px 0px -0px #888888 inset !important;
    -moz-box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px -0px #888888 inset !important;
}

.server-header {
    color: #039be5 !important;
}

.search-panel {
    background: #404552 !important;
}

.search-panel.collapsed {
  background: #2a2e3a !important;
}

label.active {
    color: #2196f3 !important;
}


table.striped > tbody > tr:nth-child(odd) {
    background-color: #404552 !important;
}

table.highlight > tbody > tr:hover{
    background-color: #f2f2f280 !important;
}


.content-header {
    background: #2196F3 !important;
}

.execution-instance-tabs .tab > a.active > i {
    color: #00ff43 !important;
}