:root{
    --primary-color: #2C3E50;
    --secondary-color: #95a5a6;
    --accent-color: #18BC9C;
    --light-color: #eee;
    --header-height: 50px;
}

::-webkit-scrollbar { 
    display: none; 
}

html, body{
    height:100vh;
    max-height: 100vh;
    font-family: 'Roboto', sans-serif;
    scrollbar-width: none;
}

a {
    color: var(--accent-color);
}


.dashcontainer{
    padding: 0;
    height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
}


.container-fluid{
    padding: 0;
}
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#content {
    position: relative;
    overflow-y: scroll;
    height: calc(100vh - var(--header-height));
}
#sidebar {
    width: 250px;
    height: calc(100vh - var(--header-height));
    transition: all 0.3s;
    padding: 10px;
    margin-left: 0px;
    
}
#sidebar.active {
    margin-left: -250px;
}
#sidebarCollapse{
    color: var(--main-text-color);
    text-align: center;
}

/* Make user dropdown menu always on top */
body > nav > div:nth-child(3) > div > div {
    z-index: 9999;
}


/********************************
    Table style
********************************/
tbody {
    color: #666;
}
tr:hover{
    color: var(--accent-color);
    font-weight: bold;
}
th {
  cursor: pointer;  
}

/********************************
    Mobile styles
********************************/
@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        height: 200px;
        margin-left: 0;
    }
    #sidebar.active {
        margin-top: -200px;
        margin-left: 0;
    }
    .wrapper {
        display: block;
    }
    
}
.nav-link{
    margin-bottom: 5px;
    color: var(--light-color);
    text-align: left !important;
}
.nav-link:hover:not(.disabled):not(.active){
    color: var(--accent-color);
}
.nav-link.active{
    background-color: var(--accent-color) !important;
}

.login {
    border: none;
    width: 500px;
    /* background-color: red; */
    text-align: center;
}
.login h3{
    font-size: 3em;
    font-weight: 800;
}
#logTable_filter > label {
    display: flex;
    vertical-align: middle;
    padding: 5px;
    line-height: 2em;
}
#logTable_filter > label > input {
    width: 300px;
    margin-left: 10px;
    border: none;
    background-color: #eee;
    
}

.login .form-control{
    border: none;
    background-color: #eee;
    padding: 30px 20px;
    width: 100%;
}
.navbar{
    color: #eee;
    height: var(--header-height);
    padding: 0;
}
#dropdownMenuButton:hover {
    cursor: pointer;
}
.dropdown-item {
    color: #333;
    background-color: #fff;
}
.dropdown-item:hover {
    color: var(--accent-color);
    background-color: #fff;
}
.table td{
    vertical-align: middle;
}
.table-button{
    font-size: 1.3em;
    margin: 2px !important;
}
.table-button:hover{
    color: var(--accent-color);
}
#data > tr > td:nth-child(7) {
    padding: 0;
    text-align: center;
}


/*******************
    Bootstrap edits
*******************/
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
    border-color: var(--accent-color);
    -webkit-box-shadow: 0 0 0 2px #ccc;
    -moz-box-shadow: 0 0 0 2px #ccc;
    box-shadow: 0 0 0 2px #ccc;
    outline: 0 none;
}
.page-link {
    background-color: var(--accent-color) !important;
}
.page-item.disabled .page-link {
    filter: brightness(70%);
}
.tooltip-inner {
    background-color: var(--accent-color);
    color: #eee;
    font-size: 1.2em;
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: var(--accent-color);
}
.btn-accent {
    background-color: var(--accent-color);
    color: #eee;
}
.btn-accent:hover {
    filter: brightness(95%);
    color: #eee;
}
a.dropdown-item {
    color: #333;
}
a.dropdown-item.active {
    background-color: #eee;
    color: var(--accent-color);
}
.badge-accent {
    background-color: var(--accent-color);
    color: white;
}

/*******************************
        Modal Confirm
*******************************/
.modal-confirm {		
    color: var(--primary-color);
    width: 400px;
    max-width: 95vw;
}
.modal-confirm .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 14px;
}
.modal-confirm .modal-header {
    border-bottom: none;   
    position: relative;
}
.modal-confirm h4 {
    text-align: center;
    font-size: 26px;
    margin: 30px 0 -10px;
}
.modal-confirm .close {
    position: absolute;
    top: -5px;
    right: -2px;
}
.modal-confirm .modal-body {
    color: #999;
}
.modal-confirm .modal-footer {
    border: none;
    text-align: center;		
    border-radius: 5px;
    font-size: 13px;
    padding: 10px 15px 25px;
}
.modal-confirm .modal-footer a {
    color: #999;
}		
.modal-confirm .icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 9;
    text-align: center;
    border: 3px solid #f15e5e;
}
.modal-confirm .icon-box i {
    color: #f15e5e;
    font-size: 46px;
    display: inline-block;
    margin-top: 13px;
}
.modal-confirm .btn {
    color: #fff;
    border-radius: 4px;
    background: #60c7c1;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    min-width: 120px;
    border: none;
    min-height: 40px;
    border-radius: 3px;
    margin: 0 5px;
    outline: none !important;
}
.modal-confirm .btn-info {
    background: #c1c1c1;
}
.modal-confirm .btn-info:hover, .modal-confirm .btn-info:focus {
    background: #a8a8a8;
}
.modal-confirm .btn-danger {
    background: #f15e5e;
}
.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
    background: #ee3535;
}


/*******************************
        Curved table
*******************************/
@media (min-width: 576px) {
    .modal-lg {
        max-width: 90vw;
    }

}


/*******************************
        Curved table
*******************************/
.table-curved {
    color: #333;
    border-collapse: separate;
    border-spacing: 0;
    border: solid transparent 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}
.table-curved tr td {
    border-bottom: 1px solid rgb(235, 235, 235);;
}


/*******************************
        Custom map styles
*******************************/

#editMap {
    height: 400px;
}

.custom-map-control {
    border: 1px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
    border-radius: 5px;
}
.custom-map-control-group {
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
    max-width: 400px;
}
.map-card {
    background-color: rgba(255,255,255,255,0.2);
}
#map > .card {
    background-color: red;
}
#sessionName {
    font-size: 1em;
}
.gradient {
    width: 20px;
    height: 100px;
    background: rgb(255,0,0);
    background: linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 50%, rgba(0,128,0,1) 100%);
}
.maptext {
    background-color: #eee;
    border-radius: 5px;
    padding: 5px;
    font-weight: bold;
}
.map-marker {
    background-color: #eee;
    border: 4px solid var(--accent-color);
    border-radius: 50%;
}
.map-marker-active {
    background-color: red;
    border-radius: 50%;
}
/* Make map pid select on top over other controls */
.leaflet-top.leaflet-left {
    z-index: 1001;
}
/* tooltips */
.leaflet-popup-content-wrapper {
    background: var(--primary-color);
    color:#fff;
    border-radius: 5px;
}
.leaflet-popup-tip {
    background-color: var(--primary-color); 
}


/*******************************
        Chosen select pickers
*******************************/
#pidSelectMap_chosen {
    border: 1px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.2);
    width: 100% !important; 
}
#pidSelectMap_chosen > a {
    background: #eee;
    border: none;
}
#pidSelectChart_chosen {
    background-color: rgba(0,0,0,0.2);
    width: 100% !important; 
    border: none;
    border-radius: 5px;
}
#pidSelectChart_chosen > ul {
    border: 1px solid transparent;
    border-radius: 5px;
    background: #eee;
}
.chosen-container-multi .chosen-choices li.search-choice {
    background: none;
    background-color: #fff;
    border: none;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    color: #fff;
}
.chosen-container .chosen-drop {
    z-index: 99999;
}
.chosen-container .chosen-results li.highlighted {
    background: none;
    background-color: var(--accent-color);
}


/*******************************
        Window splitting
*******************************/
.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}
.content {
    border: 1px solid #C0C0C0;
    box-shadow: inset 0 1px 2px #e4e4e4;
    background-color: #fff;
}
.gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
}
.gutter.gutter-vertical {
    cursor: row-resize;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
}
.gutter.gutter-vertical:hover {
    border: 2px dotted rgba(0,0,0,0.2);
}
.split.split-horizontal,
.gutter.gutter-horizontal {
    height: 100%;
    float: left;
}
.chart-container {
    position: relative;
    height: 90%;
    width: 100%;
}

 
.session-info-card ul {
    list-style-type: none;
    margin: auto;
    padding-left: 0;
}


/*******************************
        Loading spinner
*******************************/
.loadOverlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    -webkit-animation:fadein 1s;
         -moz-animation:fadein 1s;
           -o-animation:fadein 1s;
              animation:fadein 1s;
}

@-moz-keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}
@-webkit-keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}
@-o-keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}
@keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}

.overlayInner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlayContent {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 70px;
    height: 70px;
    display: inline-block;
    border-width: 5px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: var(--accent-color);
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

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


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 34px;
  }
  .switch.small {
    width: 50px;
    height: 14px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  .slider.small:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--accent-color);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--accent-color);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(66px);
    -ms-transform: translateX(66px);
    transform: translateX(66px);
  }
  input:checked + .slider.small:before {
    -webkit-transform: translateX(33px);
    -ms-transform: translateX(33px);
    transform: translateX(33px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .deleteURL {
    cursor: pointer;
  }
  .deleteURL .fa-times:hover {
      color: var(--accent-color);
  }