/* Need more space on small screens: remove some paddings */
div.col-sm-2 { padding: 0; }
form.well    {
   padding: 0 10px 20px 10px;
   height: 100%;
}

div.checkbox { padding: 0px; margin: 0px; }
div.form-group.shiny-input-container { margin: 0 0 5px 0; }

/* Scale the plot image relative to the main panel */
div#plot > img,
div#spectrum > img {
   width: 100%;
   max-width: 800px;
   height: auto;
}

/* Styling the select option boxes */
div.hcl-selectoptions {
   margin: 0;
   padding: 0;
}
div.hcl-selectoptions h3 {
   margin: 0px;
   padding: 0px;
   font-size: 1em;
}

/* Styling the color map shown (plotOutput element) */
div#colormap-wrapper {
   height: 40px;
}
div#colormap-wrapper div { height: 40px; }
div#colormap {
   width: 100%;
   height: 40px;
   border: 1px solid #a9a9a9;
}
div#colormap img {
   width: 100%;
   height: 100%;
}
div.hcl-sliderwrapper.hcl-is-hidden, .hcl-is-hidden {
   display: none;
}

/* Select box styling */
img.select-pal {
   width:  100%;
   height: 30px;
   margin: 0 2px;
   padding: 0px;
}

/* Styling hcl-slider and hcl-slidervalue input elements */
div.hcl-sliderwrapper {
   height: 4em;
   position: relative;
}
span.hcl-slider {
   display: block;
   float: left;
   width: 75%;
}
span.hcl-slidervalue {
   position: absolute;
   width: 25%;
   right: -.5em;
   top: -.5em;
   transform: scale(.8);
}
span.hcl-slidervalue > div > label {
   display: block;
   margin: 0;
   padding: 0;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
}
span.hcl-slidervalue > div.form-group.shiny-input-container {
   width: 60%;
   float: left; 
}
span.hcl-slidervalue > div > input {
   text-align: right;
   overflow: visible;
}
span.hcl-slidervalue > button {
   position: absolute;
   width: 40%;
   top: 20px;
   right: 0px;
   padding-left:  1px;
   padding-right: 1px;
}

/* Export tab styling */
div#hcl-main-export div.output-raw  {
   width: 25%;
   height: 100%;
   float: left;
   min-width: 150px;
   padding-bottom: 30px;
}
div#hcl-main-export div.output-raw a.shiny-download-link {
   margin-top: 30px;
}
div#hcl-main-export comment, div#hcl-main-export comment,
div#hcl-main-export comment, div#hcl-main-export comment {
   font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
   background-color: white;
   color: #337ab7;
   display: block;
}
div#hcl-main-export code, div#hcl-main-export code,
div#hcl-main-export code, div#hcl-main-export code {
   background-color: white;
   color: black;
   display: block;
}
div.tab-content {
   margin-top:20px;
   margin-bottom: 40px;
}
div#hcl-main-export span.output-raw cbox {
   display: block;
   width: 100%;
   height: 22px;
}

/* Button styling */
button#closeapp { width: 100%; text-align: center; margin-top: 10px; }

/* Responsive adjustments depending on screen resolution */
@media screen and (min-width: 768px) and (max-width: 1100px) {
   span.hcl-slider { width: 100%; }
   span.hcl-slidervalue { display: none; }
}
@media screen and (min-width: 1101px) and (max-width: 1500px) {
   span.hcl-slider { width: 65%; }
   span.hcl-slidervalue { width: 35%; }
}



