/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
//= require_self
 //= require vendor
 //= require_tree .
*/

html, body
{
    margin: 0;
    height:100%
}

body {
    font: 13px/1.5 /*'Trebuchet MS', */ 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
    margin: 0;
}

.navbar-nav > li {
    text-align: right;
    /*padding-right: 8px;*/
}

.navbar-nav > li > ul > li{
    text-align: right;
    padding-right: 8px;
}

/* width < 768px ex : iphone 5 to 8 portrait, iphone X portrait*/
@media only screen
and (max-width : 768px)
{
    .navbar-nav{
        margin: 0;
    }
    .nav>li>a{
        padding-right:0;
    }
}



pre,
code {
    font-family: 'DejaVu Sans Mono', Monaco, Consolas, monospace;
}

hr {
    border: 0 #ccc solid;
    border-top-width: 1px;
    clear: both;
    height: 0;
}


h1 { font-size: 25px; }
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

ol { list-style: decimal; }
ul { list-style: disc; }


p, dl, hr, ol, ul, pre, /*table,*/ address, fieldset, figure { margin-bottom: 20px; }

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

/* Body in "normal" mode */
body.basic {
    min-width: 900px;
    width: 100%;
}

/* Body when displayed in a popup */
body.popup {
    width: 100%;
}

/* Get rid of those system borders being generated for A tags */
a:active {
    outline:none;
}

a {
    outline: 0;
}

:focus {
    -moz-outline-style:none;
}

/* See http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width */
input, select, textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


#main_body {
    margin: 1em;
    min-height: 57%;
    /*height: auto !important;*/
    /*height: 100%;*/
    /*padding-top:140px;
    padding-bottom:200px;*/
}


/* H1 text at top of each page */
.page_header {
    margin-bottom: 0;
}


.hint {
    font-size: .85em;
}

.clear {
    clear:both;
}

hr.separator {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

/* Make a link look like a button... or, hell, make a button look like a button! */
.linkbutton {

    padding: 8px;
    font-size: 20px;
    color: #222;
    text-decoration: none;
    margin-right: 5px;
    margin-bottom: 15px;

    /* Based on http://www.css3.me/ */
    background-color: #ffffff;
    border: 1px solid #999999;
    border-radius: 3px;
    /*!*box-shadow: 0px 0px 1px #000000;*!*/
    /*background-image: -moz-linear-gradient(to top, #ffffff, #bbb);*/
    /*background-image: -ms-linear-gradient(to top, #ffffff, #bbb);*/
    /*background-image: -o-linear-gradient(to top, #ffffff, #bbb);*/
    /*background-image: -webkit-linear-gradient(to top, #ffffff, #bbb);*/
    background-image: linear-gradient(to top, #ffffff, #bbb);
    background-clip: padding-box;
    /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
    /*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}

.linkbutton:not([disabled="disabled"]):hover
{
    /*background-image: -moz-linear-gradient(to top, #ddddff, #99b);*/
    /*background-image: -ms-linear-gradient(to top, #ddddff, #99b);*/
    /*background-image: -o-linear-gradient(to top, #ddddff, #99b);*/
    /*background-image: -webkit-linear-gradient(to top, #ddddff, #99b);*/
    /*background-image: linear-gradient(to top, #ddddff, #99b);*/
    background-clip: padding-box;
}


.linkbutton[disabled]
{
    color: #777;
}


.button_to {
    display: inline;
}

.button_to div {
    display: inline;
}


/* Banner across top of every page, holds site title, logos, city picklist, navbar, etc. */
#top_banner {
    text-align: center;
    color: white;
    vertical-align: middle;
    background-color: #393;
    padding-top: .5em;
    border-bottom: 1px #999 solid;
}


/* Tudor logo, in the upper-left corner */
.owner-logo {
    float: left;
    margin-top: .5em;
    margin-left: .7em;
}

/* Sponsor logs, in the upper-right corner */
.sponsor-logos {
    float:right;
    margin-top: .6em;
    margin-right: .7em;
}

/* Main title of the site */
.site-title {
    text-align: center;
    font-size: 300%;
    margin-bottom: -.35em
}

/* Subtitle text under main title */
.site-subtitle {
    text-align: center;
    padding-bottom: .5em
}


#wms-failure-message, .error-msg {
    color: red;
}


.module-not-found {
    padding-left: 10px;
    padding-right: 10px;
}

.link-icon {
    vertical-align: middle;
    padding-right: 4px;
}


.loading_indicator {
    padding: 8px 8px;
    background-image: url(../img/loading_spinner.gif);
    background-repeat: no-repeat;
    background-position:center center;
}


.explanation, .explanation-problem, .explanation-running, .explanation-success {
    display: block;
    padding: 15px 1em 15px 50px;
    margin: 0.25em 0 1.5em 0;
}

/* Light blue explanation box */
.explanation {
    background: #D5E9F6 url(../img/info_icon.svg) no-repeat left center;
    background-size: 32px 32px;
    background-position: 10px 40%;    /* Distance from the left */

}

.explanation-running {
    background: #FFCC00 url(../img/cogs03.gif) no-repeat left center;
    background-size: 44px 44px;
    background-position: 8px 40%;  /* Distance from the left */
    padding-left: 56px;
}

.explanation-success {
    background: #4ce44c73 url(../img/success_green.png) no-repeat left center;
    background-size: 32px 32px;
    background-position: 10px 40%;    /* Distance from the left */
}

.explanation-problem {
    background: #F6B9A5 url(../img/error_icon.png) no-repeat left center;
    background-size: 32px 32px;
    background-position: 10px 40%;    /* Distance from the left */
}

.explanation ul {
    list-style: square/* url("images/grey_bullet.gif")*/;
}

.explanation li {
    margin-left: 20px;
}


.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.top {
    vertical-align:text-top;
}

.two_col_table_left {
    padding: 15px;
    background: #9c9;
}

.two_col_table_right {
    background: #c9c;
    padding:15px;
}

.click_to_edit {
    padding-left: 10px;
    color: #999;
}

/* Hidden, occupies space */
.hidden {
    visibility: hidden;
}

/* Hidden, occupies no space */
.nodisplay {
    display: none;
}

/* Those little question mark icons that provide more info about something */
.info-icon {
    margin-left: 8px;
    margin-top: 3px;
    cursor:pointer;
}

.properties {
    padding: 8px 8px;
    background-image: url(../img/info_icon_blue.png);
    background-repeat: no-repeat;
    background-position:center center;
}

/* Div where services are displayed on register WPS and register datasets screens */
.services-display {
    height:100%;
    background-color:#eeeeee;
}

/* Div containing progress indicators on register WPS and register datasets screens */
.progress-container {
    padding: 5px;
    background-color: #f8f8f8;
    /*display: none;*/
}

.probing {
    padding-left: 5px;
}



/* AVAILABLE, UNAVAILABLE --> used on datasets page */
/* ERROR, READY, NEEDS_DATA, AVAILABLE, RUNNING --> used on the modules page */

/* Status of module run (these styles are generated, won't be found in code */
.status-ERROR, .status-UNAVAILABLE {
    background: red;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.status-READY, .status-ERROR, .status-FINISHED {
    display: block;
}

.status-NEEDS_DATA {
    text-align: center;
    display: block;
}

.status-AVAILABLE, .status-READY, .status-FINISHED {
    text-align: center;
}

.status-RUNNING {
    background: green;
    color: white;
    font-weight: bold;
    display: block;
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}


.show-no-tags-msg-when-empty:empty:after {
    content: "No tags";
    width: 20px;
}


.flash {
    color: red;
    background: #FF8;
    padding: 10px;
    width: 50%;
    border: 1px solid black;
}

.dropDown-selector.selected{
    background-color: #99CCFF;
}

.fa-calendar:after{
    content:"\f073";
    margin-left: 2px;
}

div.footer {
    width: 940px;
    margin: 20px auto 30px auto;
    color: #888;
    text-align: right;
}

div.footer a {
    color: #888;
}

.spaced-row{
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
    margin-left: 0;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.spaced-row5{
    margin-left: 0;
    margin-right: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.padded-row{
    padding-top: 10px;
    padding-bottom: 10px;
}

.no-spaced-row{
    margin: 0;
    padding: 0;
}

/*The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.panel.ng-dirty > .panel-heading {
    color: green !important;
    background-color: #ddffcc !important;
}

label.ng-dirty {
    color: green !important;
    background-color: #ddffcc !important;
}

.formToValidate input.ng-dirty,
.formToValidate textarea.ng-dirty {
    color: green;
    background-color: #ddffcc;
}

.formToValidate input.ng-invalid,
.formToValidate textarea.ng-invalid {
    color: red !important;
    background-color: #f2dede !important;
}

.input-invalid {
    color: red !important;
    background-color: #f2dede !important;
}

.iguess-button-toggle.active {
    background-color: #7bc8f3;
}

.iguess-button-toggle.ng-dirty {
    color: green !important;
    background-color: #ddffcc !important;
}

.iguess-button-toggle {
    border-color: #6a8297;
}

.input-group-addon.active{
    background-color: #7bc8f3;
}

.input-group-addon.active.ng-dirty {
    color: darkgreen !important;
    background-color: #ddffcc !important;
}

.input-group-addon.ng-dirty {
    color: darkgoldenrod !important;
    background-color: #ffffe0 !important;
}

.center.header {
    padding-bottom: 8px;
}

.table-line-gray {
    transition: unset;
    background-color: #eee;
    border-color: #ccc
}

.table-line-white {
    transition: unset;
    background-color: #ffffff;
    border-color: #ccc
}

.table-line-hover {
    transition: unset;
    background-color: #c3daf9;
    border-color: #0E3D5E
}

.module-label {
    text-align: left !important;
}

.esa-products-table>tbody>tr>td {
    padding: 3px;
    vertical-align: middle;
}

.scrollable-menu {
    width: 100%;
    height: auto;
    max-height: 200px;
    overflow: auto;
}

.calendar-slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 5px; /* 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 */
.calendar-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) */
.calendar-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 20px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    background: url('/img/pointer.png');
    cursor: pointer; /* Cursor on hover */
}

.calendar-slider::-moz-range-thumb {
    border: none;
    width: 20px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    margin-bottom: 20px;
    background: url('/img/pointer.png');
    cursor: pointer; /* Cursor on hover */
}