html,
body {
    height: 100%;
    font-family: "Ubuntu", "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
    font-weight: light;
}

body {
    background-color: #fafafa;
    background: linear-gradient(to right, #fafafa, #f0f0f0);
}

h1 {
    margin-top: 10px;
}

.img-responsive {
    width: 100%
}

.navbar {
    background-color: #fff;
}

.breadcrumb {
    background-color: #fff;
}

.panel {
    overflow: hidden;
}

.panel-oob {
    overflow: visible;
}

.panel-border-right {
    border-right: 1px solid #ddd
}

.content-box {
    position: relative;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.content-box-tabbed {
    border-top: none;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.content-box .breadcrumb {
    margin: 0;
    padding: 0;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
    overflow-x: auto;
}

.wrap > .page-content {
    position: relative;
    padding: 70px 15px 0;
    overflow-x: auto;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.list-group-item-child {
    padding-left: 2em;
}

.page-reload-block {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: small;
    color: #777;
}
.page-reload-block.no-title {
    top: 7px;
}

@media (max-width: 768px) {
    .page-reload-block {
        position: static;
    }
}

/* morris */
.morris-hover {
    position: absolute;
}


#field-rates-params .form-group {
    vertical-align: top;
}

#well-list-collapse-btn {
    text-align: left;
    margin-bottom: 15px;
}

#well-view-schema {
    /*margin: 30px;*/
}

#well-view-schema img {
    display: inline-block;
    min-height: 400px;
    max-height: 700px;
    max-width: 358px;
    text-align: center;
    margin-bottom: 15px;
}

.well-view-schema-table {
    float: left;
    margin-right: 15px;
    width: 100%;
}

.well-view-schema-table th {
    font-weight: normal;
}



.ajax-modal-button {
    cursor: pointer;
}

.ajax-loader {
    text-align: center;
    padding: 1em;
}

.close {
    margin-left: 10px;
}


.modal-dialog .alert {
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#field-schema-svg {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#field-schema-svg svg {
    width: 100%;
/*
    width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;
    padding: 60px;
*/
}

.schema-title {
    margin-top: 0;
}
@media (max-width: 1700px) {
    .schema-title {
        font-size: 16px;
    }
}

.schema-img {
    min-height: 600px;
    max-height: 900px;
    width: 100%;
    margin: 15px 0;
    user-select: none;
    animation: fadein 3s;
}
.schema-block {
    /* display: flex;
    justify-content: center; */
    position: relative;
    width: 100%;
    overflow: auto;
}
@media (max-width: 1450px) {
    .schema-img {
        width: 1200px;
    }
}

.form-inline > * {
    margin-right: 15px;
}

.bottom15 {
    margin-bottom: 15px;
}

.icon-down {
    display: none;
}

.collapsed .icon-up {
    display: none;
}

.collapsed .icon-down {
    display: inline;
}

.field-schema-well-description {
    font-size: 8px;
    font-size: 1.6vmin;
    padding: 0.8vmin;
    background-color: rgba(255,255,255,0.95);
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 3px #ddd;
}

.field-schema-well-description:hover {
    z-index: 100;
}

.field-schema, .field-events {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.events-table.table-bordered > tbody > tr > td {
    border: 1px solid #ccc;
}
.events-table {
    margin: 0;
}

.bg-event-process {
    background-color: #f0f0f0;
}

.bg-event-unknown {
    background-color: #f8f8f8;
}


.audio-toggle-icon {
    z-index: 999999;
    line-height: 20px;
    margin-right: -15px;
}

.multiselect-container > li > a {
    padding: 3px 30px;
}

.data-prepare-active-row {
    background-color: rgb(245, 245, 245)
}

.label-block {
    display: block;
}
.label-larger {
    font-size: 90%;
}
.label-lg {
    font-size: 150%;
}
.label-mid {
    vertical-align: middle;
}
.label-fixed-size {
    font-size: 12px;
}
.glyphicon-fixed-size {
    font-size: 21px;
}
.text-alt-success {
    color: #5cb85c;
}
.text-alt-warning {
    color: #f0ad4e;
}
.text-alt-danger {
    color: #d9534f;
}
.text-alt-danger-brown {
    color: #b7815c;
}
.text-alt-default {
    color: #777;
}

.bg-primary-blink {
    background: #337ab7;
    animation: primary-blink 0.5s alternate ease-in-out infinite;
}
.bg-success-blink {
    background: #dff0d8;
    animation: success-blink 0.5s alternate ease-in-out infinite;
}
.bg-info-blink {
    background: #d9edf7;
    animation: info-blink 0.5s alternate ease-in-out infinite;
}
.bg-warning-blink {
    background: #fcf8e3;
    animation: warning-blink 0.5s alternate ease-in-out infinite;
}
.bg-danger-blink {
    background: #f2dede;
    animation: danger-blink 0.5s alternate ease-in-out infinite;
}

@keyframes primary-blink {
    from { background: #337ab7; }
    to { background: #62b2f7; }
}
@keyframes success-blink {
    from { background: #b6e5a2; }
    to { background: #dff0d8; }
}
@keyframes info-blink {
    from { background: #b8ddef; }
    to { background: #d9edf7; }
}
@keyframes warning-blink {
    from { background: #f7e899; }
    to { background: #fcf8e3; }
}
@keyframes danger-blink {
    from { background: #e5b5b5; }
    to { background: #f2dede; }
}

.old-well-row {

}
.old-well-row .column-1 {
    float: left;
    width: 358px;
}
.old-well-row .column-2 {
    float: left;
    width: 100%;
}

.tab-content > .tab-pane {
    display: block;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.tab-content > .active {
    visibility: visible;
    height: auto;
}

.table > thead > tr > th {
    vertical-align: top;
}

.table-little-padding td,
.table-little-padding th {
    padding: 4px !important;
}
.table-less-padding td,
.table-less-padding th {
    padding: 2px !important;
}
.table td > .progress {
    margin-bottom: 0;
}
.table-vmiddle > thead > tr > th,
.table-vmiddle > thead > tr > td,
.table-vmiddle > tbody > tr > th,
.table-vmiddle > tbody > tr > td,
.table-vmiddle > tfoot > tr > th,
.table-vmiddle > tfoot > tr > td {
    vertical-align: middle;
}
.table-bordered .top-border {
    border-top-color: #999;
}
.table-bordered .bottom-border {
    border-bottom-color: #999;
}
.table-bordered .left-border {
    border-left-color: #999;
}
.table-bordered .right-border {
    border-right-color: #999;
}
.table-bordered.border {
    border-color: #999;
}

.table-bordered.border thead td,
.table-bordered.border thead th {
    border-bottom-width: 1px;
    border-top-width: 0;
}
.table-bordered.border thead tr:first-child td,
.table-bordered.border thead tr:first-child th {
    border-top-width: 1px;
}
.table-borderless td, .table-borderless th {
    border: none !important;
}

.table.table-slim > thead > tr > th,
.table.table-slim > tbody > tr > th,
.table.table-slim > tfoot > tr > th,
.table.table-slim > thead > tr > td,
.table.table-slim > tbody > tr > td,
.table.table-slim > tfoot > tr > td {
    padding: 3px 10px;
}

.table.table-halfslim > thead > tr > th,
.table.table-halfslim > tbody > tr > th,
.table.table-halfslim > tfoot > tr > th,
.table.table-halfslim > thead > tr > td,
.table.table-halfslim > tbody > tr > td,
.table.table-halfslim > tfoot > tr > td {
    padding: 5px 6px;
}
@media (max-width: 768px) {
    .table.table-halfslim * {
        font-size: 0.6em;
    }
}
@media (max-width: 1200px) {
    .table.table-halfslim * {
        font-size: 0.8em;
    }
}
@media (max-width: 1700px) {
    .table.table-halfslim * {
        font-size: 0.87em;
    }
}

.table.table-superslim > thead > tr > th,
.table.table-superslim > tbody > tr > th,
.table.table-superslim > tfoot > tr > th,
.table.table-superslim > thead > tr > td,
.table.table-superslim > tbody > tr > td,
.table.table-superslim > tfoot > tr > td {
    padding: 2px 4px;
}

.progress .progress-bar {
    max-width: 100%;
}
.progress-bar-bg-gray {
    background: #ccc;
}

.input-xs {
    height: 22px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
    border-radius: 3px;
}

.hide-alt {
    overflow: hidden;
    height: 0;
}

.text-body {
    color: #333;
}

#trend-form label, #rate-form label {
    font-weight: normal;
}

.trend-form-title {
    font-weight: bold;
    padding-bottom: 10px;
}

.chart-date-from {
    float: left;
    width: 100%;
    padding-bottom: 5px;
}

.chart-time-from {
    float: left;
    width: 100%;
}

@media (max-width: 768px) {
    .nav-tabs > li {
        float:none;
    }

    .nav-tabs > li > a {
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        margin-right: 0;
    }

    .nav-tabs > li.active > a {
        font-weight: bold;
    }
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .col-sm-no-padding-right {
        padding-right: 0;
    }

    .col-sm-no-padding-left {
        padding-left: 0;
    }

    .scrollable-table-sm {
        max-height: 300px;
        overflow-y:scroll;
    }

    .scrollable-table-lg {
        max-height: 600px;
        overflow-y:auto;
    }

    #well-list-collapse-btn {
        display: none;
    }

    #well-list {
        display: block;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
        .site-form {
            margin-top: 3em;
        }
    .well-view-schema-tables {
        font-size: larger;
        /*margin: 15px;*/
    }

    .field-schema-well-description {
        font-size: 13px;
        padding: 5px;
        font-size: 1.3vmin;
        padding: 0.5vmin;
    }

    .old-well-row .column-2 {
        margin-left: -358px;
        padding-left: 373px; /* 358px + 15px = 373px */
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
        .chart-date-from {
        float: left;
        width: 60%;
        padding-right: 5px;
        padding-bottom: 0;
    }

    .chart-time-from {
        float: left;
        width: 40%;
    }
}

@media (min-width: 1800px) {
    .field-schema {
        float: left;
        width: 70%;
    }

    .field-events {
        float: left;
        width: 30%;
    }
}

.form-control.form-control-no-state[disabled],
.form-control.form-control-no-state[readonly],
fieldset.fieldset-no-state[disabled] .form-control {
    background-color: #fff;
}

.nav-pills-custom > li.active > a,
.nav-pills-custom > li.active > a:hover,
.nav-pills-custom > li.active > a:focus {
    color: #333;
    background-color: #ddd;
}

.link-group:hover, .link-group:focus {
    text-decoration: none;
}
.link-group:hover .link,
.link-group:focus .link {
    text-decoration: underline;
}


.operating-practices-navbar {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
}
.operating-practices-navbar .nav .active a {
    color: #FFF;
    background-color: #337ab7;
}
.operating-practices-navbar .nav .active a:hover,
.operating-practices-navbar .nav .active a:focus {
    color: #FFF;
    background-color: #337ab7;
}

@media (min-width: 970px) {
    .row-trend-container {
        padding-right: 0;
        margin-right: -15px;
    }
    .row-trend {
        width: 100%;
        display: table;
    }
    .col-trend, .col-trend-2, .col-trend-3 {
        float: none;
        display: table-cell;
        vertical-align: top;
    }
}
@media (min-width: 768px) and (max-width: 969px) {
    .row-trend {

    }
    .col-trend, .col-trend-2 {
        float: none;
        display: table-cell;
        vertical-align: top;
    }
    .col-trend-2.panel-border-right {
        border-right: none;
    }
    .col-trend-3 {
        float: left;
        display: block;
        vertical-align: baseline;
    }
    .col-trend-3.panel-border-right {
        border-right: none;
    }
}

.popover {
    max-width: 600px;
}

.badge-notify {
    background: red;
    position: absolute;
    top: 4px;
    right: 4px;
}

.badge-recalculate {
    background: green;
    position: absolute;
    top: 4px;
    right: 4px;
}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

.highcharts-oob svg {
    overflow: visible !important;
}
.highcharts-oob .highcharts-container{
    overflow: visible !important;
}

.highcharts-oob .highcharts-tooltip{
   z-index: 9998 !important;
}

.table-weight-normal th,
.table-weight-normal td {
    font-weight: normal;
}

.loader-page {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
}
.loader {
    margin: 100px auto;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #337ab7;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.clear {
    clear: both;
}

div.jsoneditor {
    border: 1px solid #eee;
    resize: vertical;
    overflow: auto;
}
div.jsoneditor-menu {
    background-color: #8d8d8d;
    border-bottom: 1px solid #eee;
}

.well-data-prepare-legend-block {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.visible-off {
    opacity: 0;
    transition: opacity 0.5s;
}
.visible-on {
    opacity: 1;
    transition: opacity 0.5s;
}

::selection {
    color: #eee;
    background: #777;
}

#block_event_search .form-group .btn-group {
    width: 100%;
}
.table-row-button {
    cursor: pointer;
    transition: all 0.1s;
}
table tr.table-row-button:hover > th,
table tr.table-row-button:hover > td {
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
    transition: all ease-out 0.2s;
}

.multiselect {
    min-height: 0 !important;
    width: auto !important;
}

.drag-and-drop {
    pointer-events: none;
    user-select: none;
}

.sweet-alert-small-text {
    max-height: 700px !important;
    overflow-y: auto !important;
    font-size: 16px !important;
}
.sweet-alert-midle-width {
    width: 680px !important;
}
.sweet-alert-large-width {
    width: 800px !important;
}


.badge-danger {
    background: #d9534f;
}
.badge-warning {
    background: #f0ad4e;
}
.badge-success {
    background: #5cb85c;
}
.badge-info {
    background: #5bc0de;
}
.badge-primary {
    background: #337ab7;
}


.disabled {
    pointer-events: none;
}

.text-dark {
    color: #333;
}

.shadow {
    text-shadow: 0 1px 1px rgba(0,0,0,.3), 1px 0 0 rgba(0,0,0,.5);
}

.text-dark.shadow {
    text-shadow: 0 0 7px rgba(255,255,255,1), 0 0 7px rgba(255,255,255,1), 0 0 7px rgba(255,255,255,1), 0 0 7px rgba(255,255,255,1), 0 0 7px rgba(255,255,255,1), 0 0 7px rgba(255,255,255,1), 0 1px 3px rgba(255,255,255,1), 1px 0 0 rgba(255,255,255,.5);
}

.button.glyphicon {
    cursor: pointer;
}

@media (max-width: 768px) {
    .container-fluid .nav > li {
        display: inline-block;
    }

    .window-component {
        width: 100% !important;
        position: fixed !important;
        max-height: calc(100vh - 50px) !important;
        transform: none !important;
        overflow-y: auto;
    }
    .panel-body > .layout {
        display: block !important;
        align-items: center !important;
    }
    .highcharts-container {
        width: 100% !important;
        overflow: hidden !important;
    }
    .display-md-none {
        display: none !important;
    }
    .mr-md-0 {
        margin-right: 0 !important;
    }
}

.connection-status-0 {
    color: red;
}
.connection-status-100 {
    color: #f0ad4e;
}
.connection-status-1 {
    color: #50CC50;
}