/**
 * @file
 * CSS file for the map
 */

/**
 * Main Layout.
 */
html, body {
  height: 100%;
  font-family : Roboto, Arial, sans-serif;
  background-color: #575F4E;
  font-size: 1em;
}


.container-fluid, .row {
  height:100%;
}
#map-canvas{
    height:100vmin;
}
@media (min-width:992x){
    #map-canvas{
        height:100vmin;
    }
}
@media (max-width:991px){
    #map-canvas{
        height:75vmin;
    }
}

#sidebar {
 background-color: #575F4E;
 color : #FFF;
}

#sidebar-inner {
  padding: 10px;
}

#sidebar form {
  cursor : pointer;
  padding : 10px;
  border : 3px dashed #EEE;
  text-align : center;
  font-family : cursive;
  font-style : italic;
}

/** FIX for Bootstrap and Google Maps Info window styes problem **/
/*img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
  max-width: none;
}*/

select {
  text-transform : capitalize;
}

/**
 * jGrowl Notification.
 */
#jGrowl.top-left {
}

.jGrowl .jGrowl-notification.error .jGrowl-header {
  color : #FF0000;
}

.jGrowl .jGrowl-notification.warning .jGrowl-header {
  color : #FF8000;
}

.jGrowl .jGrowl-notification.success .jGrowl-header {
  color : #04B404;
}

.jGrowl-header {
  text-transform: capitalize;
}

.jGrowl-message {
  font-size: 0.9em;
}

/**
 * Filename List.
 */
#file-handler .populated {
  background : repeating-linear-gradient(45deg, #575F4E, #575F4E 20px, #879279 20px, #879279 40px);
  border: 1px solid #FFF;
  margin-top: 10px;
  padding-left : 5px;
}

#filenameList {
 list-style: none;
 padding : 5px 0px 5px 20px;
 cursor: pointer;
}


#filenameList:hover {
  text-decoration : underline;
}

#export-waypoints {
  margin-bottom : 10px;
}

gm-panel li {
  border: none;
}


/**
 * Taskboard.
 */
#taskboard {
  clear : both;
  margin-top: 10px;
  min-height: 100px;
  border : 1px solid #EEE;
  border-radius: 2px;
  background-color: #879279;
  background-image: linear-gradient(45deg, #575F4E 25%, transparent 25%, transparent 75%, #575F4E 75%), 
  linear-gradient(45deg, #575F4E 25%, transparent 25%, transparent 75%, #575F4E 75%);
  background-size:20px 20px;
  background-position: 0 0, 50px 50px;
}

#taskboard .label {
  text-transform : uppercase;
  margin-right : 10px;
}

#taskboard-header {
  font-weight: bolder;
  color : #FFF;
  text-shadow: 0px 0px 10px #000;
  font-style: italic;
  font-family: cursive;
  font-size: 1.2em;
  text-align: center;
  margin-bottom : 10px;
}

#taskboard-content ul {
  padding-left : 5px;
}

#taskboard-content li {
  cursor: pointer;
  list-style-image : none;
  list-style-type : none;
  text-shadow : 0px 0px 10px #000;
}

#taskboard-content li:hover {
  text-decoration: underline;
}

#taskboard #task-distance {
  margin-top: 20px;
  text-align: right;
  font-size: 1.5em;
  text-shadow : 0px 0px 10px #000;
  font-style: italic;
  padding-right: 10px;
  font-weight: bold;
  clear: both;
}

#taskboard .turnpointDistance {
  float : right;
  font-size : 0.7em; 
  width: 100px;
  text-align: right;
}

#taskboard .taskboard-item {
  clear : both;
  margin-bottom: 5px;
}

/**
 * Fullboard
 */
#full-board {
  margin-top : 10px;
  
}
#task-config .modal-dialog {
    min-width: 710px;
}
#task-config .container-fluid {
  border : 1px solid #CCC;
  margin : 10px 0px;
  
}

#task-config .form-group {
  padding-top : 10px; 
}

#task-config .tp-name {
  font-size : 0.8em;
} 

#task-config i {
  margin-right : 10px;
}

#task-config ol, #task-config ul {
  padding-left : 15px;
}

#task-config ol li, #task-config ul li {
  list-style-type : none;
  list-style-image : none;
}

#fullboard-arrow, #fullboard-turn-word {
  text-align : center;
}

#fullboard-turnpoint ol {
  counter-reset: item;
  list-style-type: decimal;
}

#fullboard-turnpoint ol li:before {
  content: 'B' counter(item, decimal) ' ';
  counter-increment: item;
  font-weight : bold;
}

#fullboard-turnpoint ol li {
  padding : 10px 0px;
}

#fullboard-turnpoint ol li:not(:last-child) {
  border-bottom : 1px dashed #CCC;
}

#fullboard-turnpoint span:first-of-type {
  margin-left : 10px;
}

#task-config h5, #task-config label {
  text-transform : uppercase;
}

#task-config h5 {
  color : #ac2925;
}

#fullboard-content span.tp-id {
  cursor : pointer;
} 

#fullboard-times .label {
  margin-right : 5px;
}

/**
 * Xavier Murillo hommage.
 */
span#fullboard-xm {
  float: right;
  font-size:0.2em;
}

/**
 * Waypoints Exporter
 */
#waypoints-exporter label {
  margin-right : 10px;
}

/**
 * Throber Spinner
 */
.glyphicon.spinning {
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

/**
 * QR Code
 */
#save-qrcode {
  text-align : center;
}
.context-menu {
  border: 1px solid #ABC;
  font: .8125rem/1.2 Verdana;
  background: #FFF;
  box-shadow: 2px 2px 5px #CCC;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  cursor: pointer;
}
.context-menu ul {
  display: block;
  position: relative;
  margin: 0;
  padding: 1px;
  min-width: 6em;
  list-style: none;
  z-index: 100000;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
}
.context-menu li {
  padding: .25em 1em;
  white-space: nowrap;
}
/* separator */
.context-menu li:empty {
  height: 0;
  margin: 1px 0;
  padding: 0;
  border-top: 1px solid #ABC;
}
.context-menu li:hover {
  background: #CDE;
}
.context-menu .actif {
  color: #069;
}
/****** Slider part ******/
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  color:#575F4E;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tab-content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
#file_tab{
    display: block;
}