/*
 * This is the main css file for OpenDC dashboards
 * https://www.open-dc.com
 * 
 */

/*
----------------------------------------------------------------------
 --------------------------- TO FILL ---------------------------------
 ----------------------------------------------------------------------
Global variables: Uncomment the style to keep 
Call variable with: var(--odc_color)
*/


:root {
	/* Green: -------------------------------- */
  
   /*--odc_color: #93AC9D;*/
   /*--logo_color: #FFFFFF;*/
  
  /* Stormy: -------------------------------- */
	
	--odc_color: #646174;
	--logo_color: #FFFFFF;
}

/* Global variables: */
:root {
	--white: #FFFFFF;
	--fullwidth: 100%;
	--bkgd: #f9f9f9;
    --form-bkgd: #f5f5f5;
	--footer-height: 30px;
    --margin: 12px; /* Default margin to apply to elements*/
    --navbar-height: 68px; /* Main navbar height */
    --navbar-map-height: 60px; /* Map navbar height */
    --body-padding: 108px; /* sum of both navbars */
}

/* 
----------------------------------------------------------------------
--------------------------- END TO FILL ------------------------------ 
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
						TEXT AND SECTIONS
----------------------------------------------------------------------*/
/*Errors and validation messages:*/
.valid {
    color: green;
}
.error {
    color: red;
}

body {
  background: var(--bkgd);
  font-family: 'Arial', sans-serif;
   /*height: 100%;*/
  /*min-height: 100vh;*/
  /*position: relative;*/
  /* margin: 0px auto; */
  /* margin-bottom: var(--footer-height); !* Margin bottom by footer height */
  /*padding-top: var(--navbar-height);*/
    padding-top: var(--body-padding);
  /*padding-bottom: var(--footer-height);*/
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 6px 18px;
}

h2 {
  font-size: 30px;
  font-weight: 400;  
}
h3 {
  font-size: 28px;
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 28px;
}

.note {
    font-style: italic;
    font-weight: bold;
}

.note-content {
    font-size: small;
}

section {
  margin: 6px 0px 50px 0px;
  border: 6px 18px;
  padding: 6px 10px 18px 10px;
}

/*----------------------------------------------------------------------
						FORMS
----------------------------------------------------------------------*/

/* Sections to make the login form centered */
#login-sect {
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
}

#login-subsect {
    width: 100%;
    position: relative;
    z-index: 1;
}

form {
    padding-top: 10px;
}

form label {
    color: #aeaeae;
}

/* Emails to be converted to lower case*/
.form-email {
    text-transform: lowercase;
}

.form-control {
	max-width: 500px;
	border-radius: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 2px solid var(--odc_color);
	border-left: 0;
	box-shadow: var(--bkgd);
	border-color: var(--odc_color);
	background-color: var(--form-bkgd);
}

.btn-primary {
    background-color: var(--odc_color);
    border: 0px;
}


/*----------------------------------------------------------------------
						NAVIGATION BAR
----------------------------------------------------------------------*/

.navbar {
	color: var(--white);
	background-color: var(--odc_color);
	padding: 0;
    z-index: 10;
}

/*.fixed-top {*/
/*    z-index: -1;*/
/*    position: fixed;*/
/*}*/

.second-navbar {
    color: var(--odc_color);
    background-color: white;
    padding: 1px;
    top: var(--navbar-height); /* Main navbar on the top*/
    /*height: var(--navbar-map-height);*/
    margin: 5px;
    z-index: 9;
}

.btn-icon {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    z-index: 999;
}

.hamburger {
    font-size: 20px;
    color: var(--odc_color);
    outline-color: red;
    /*// var(--odc_color);*/
    /*outline-border: 10px;*/
}

/* Force navbar item to stay on one line */
.nav-item {
    overflow: hidden;
    white-space: nowrap;
}

.nav-link {
    margin-left: 5px;
}

.ul {
  padding: 0;
  margin: 0;
}

.li {
  color: #FFF;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
  margin: 0;
  /* padding: 20px 18px 10px 18px; */
  padding: 2px 10px 10px 10px;
  /* text-transform: uppercase; */
}

/* Lists for second navbar: */
.li-sec {
    margin-left: 25px;
}

/* Search bar (ODC class) */
.search-bar {
    background-image: url('../img/search.png'); /* Add a search icon to input */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    background-size: contain;
    background-position: left;
    /*width: 100%;*/
    width: 170px;
    font-size: 14px;
    /*padding-right: -50px;*/
    padding-left: 5px;
    border-radius: 5px;
    text-indent: 30px;
    /*margin-left: -50px; !* For the search bar to be close to the icon*!*/
    margin-left: -30px; /* For the search bar to be close to the icon*/
    margin-right: 5px;
    /*padding: 12px 10px 10px 10px;*/
    /*border: 1px solid #ddd; !* Add a grey border *!*/
    /*margin: var(--margin) 0 var(--margin) var(--margin);*/
}

/*----------------------------------------------------------------------
						LOGOS
----------------------------------------------------------------------*/
.logo-full {
	color: var(--logo_color);	/*does not work..*/
}

.logo-header {
    display: block;
    max-width:110px;
    max-height:50px;
    width: 95%;
    height: auto;
	/*margin: 2px 0px 2px 10px;*/
    margin: 0px 2px 0px 2px;
    padding-right: 10px;
}

.image {
	background-image: url("../img/ODClogo-mini.png");
	background-size: cover;
	background-position: center;
	height: 800px;
	/* width: 100%; */
	/* height: 100%; */
	margin: 25px;
	border: 5px solid var(--odc_color);
	padding: 5px;
}

.pending-gif {
    height: 25px;
    width: 25px;
}

.pending-gif-modal {
    height: 100px;
    width: 100px;
    text-align: center;
}

.login-icon {
    height: 40px;
    width: 40px;
    margin: 0px 15px 0px 5px;
}

.logout-icon {
    height: 25px;
    width: 25px;
    margin: 0px 15px 0px 5px;
}

/*----------------------------------------------------------------------
						TABLES
----------------------------------------------------------------------*/
.attr-table {
    /* Table created from pandas to_html() method */
    /*.clickable-row;*/
    /*margin: var(--margin);*/
}

/* Change the cursor into hand style to make the rows look like they are clickable*/
.attr-table tr:hover {
    cursor: pointer;
}

table {
    overflow-y: auto;
    border-collapse: collapse;
    width: 100%;
}

.table thead th {
    position: sticky;
    top: 0;
}


table, th, td {
	text-align: center;
	font-family: Arial, sans-serif;
}

th {
	background-color: var(--odc_color);
	color: var(--white);
}

/* Handle line breaks in table cells*/
td {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Datatables options */
div.dataTables_wrapper {
    /*width: 800px;*/
    /*height: 800px;*/
    margin: 0 auto;
    padding: 15px 25px 5px 25px;
}

.dataTables_filter {
    float: left !important;
}
/*----------------------------------------------------------------------
						ATTACHMENTS
----------------------------------------------------------------------*/
/* Carousel images in attribute modal */
.img-myPlaces {
    /*display: block;*/
    object-fit: contain;
    /*z-index: 0;*/
    /*max-width: 400px;*/
    /*max-height: 150px;*/
    /*width: 80px;*/
    /*height: 80px;*/
}

/* Carousel images in myPlace */
.img-carousel {
    max-width: 400px;
}

.caption-img {
    background-color: #646174;
    font-size: large;
    position: absolute;
    left: 50%;
}

/* Carousel controls */
.carousel-control-prev-icon, .carousel-control-next-icon {
    font-size: 100px;
    /*margin-top: -50px;*/
    color: #fff;
    background-color: #656565;
}

/* Small icon on the top of a picture for deletion, share etc. */
.container img {
    display: block;
}

/* Bin icon in picture in popup attribute table */
.container .icon-top {
    position: absolute;
    top: 10px;
    right: 60px;
    max-height: 30px;
    z-index: 999;
}

/* Bin icon in picture in places */
.container .icon-place {
    position: absolute;
    top: 10px;
    right: 20px;
    max-height: 20px;
    z-index: 999;
}


/*----------------------------------------------------------------------
						MAPS
----------------------------------------------------------------------*/
.container-map {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    max-width: 1800px;
    padding-top: 10px;
    /*padding-top: var(--navbar-map-height); !* leave space for map navbar *!*/
    z-index: 0;
}

#map-id {
    /*width: 90vw;*/
    /*height: 80vh;*/
    width: 90vw;
    height: 95%;
    max-width: 1800px;
    max-height: 1200px;
    z-index: 0;
}

.google-search-bar {
    /*font-size: 12px;*/
    height: 35px;
    width: 85vw;
    text-indent: 10px;
    border-top: 0;
	border-right: 0;
	border-bottom: 1px solid var(--odc_color);
	border-left: 0;
    margin-top: 20px;
    margin-left: 20px;
    z-index: 999;
}

.map-btn {
    height: 25px;
    margin-left: 2px;
    margin-right: 2px;
}

.form-btn {
    height: 20px;
    /*margin-left: 1px;*/
    /*margin-right: 1px;*/
}

.legend-btn {
    font-size: xx-small;
    margin-left: 10px;
    /*margin-right: 2px;*/
    color: var(--odc_color);
}

/* Hard coded in maps.html: define away to link to css */
.cursor .add-point {
    url: url("../img/cursor_add_point.png");
}
/*#btn-findme {*/
/*    position: absolute;*/
/*    top: 10px;*/
/*    right: 15px;*/
/*    padding: 0px;*/
/*    z-index: 400;*/
/*}*/


#map-attributes {
    min-width: 150px;
}

/*----------------------------------------------------------------------
						MY PLACES
----------------------------------------------------------------------*/
.container-place {
    background-color: rgb(234, 234, 234);
    border-radius: 5px;
}

.place-name {
    font-size: 25px;
    color: var(--odc_color);
    word-wrap: break-spaces;
}

.place-description {
    font-size: 16px;
    font-style: italic;
    color: var(--odc_color);
    word-wrap: break-spaces;
    text-align: left;
}

.place-title {
    color: #aeaeae;
    font-size: small;
    font-style: italic;
    font-weight: lighter;
}

/* Other information such as added by or visit date*/
.place-other {
    /*color: #aeaeae;*/
    font-size: small;
    font-style: italic;
    font-weight: lighter;
}

.place-icon {
    padding: 0px 5px 0px 5px;
}

.place-col {
    border-top: 0;
	border-right: 0;
	border-bottom: 0;
	/*border-left: 1px solid var(--odc_color);*/
}

.place-row {
    border-top: 0;
	border-right: 0;
	/*border-bottom: 1px solid var(--odc_color);*/
	border-left: 0;
    padding-top: 10px;
    align-items: center;
}

.place-header {
    border-bottom: 1px solid var(--odc_color);
}

.place-section {
    border-top: 0;
	border-right: 0;
	/*border-bottom: 3px solid var(--odc_color);;*/
	border-left: 0;
    padding-bottom: 25px;
}

/*----------------------------------------------------------------------
						FOOTER
----------------------------------------------------------------------*/
footer { 
  height: var(--footer-height);
  padding-bottom: 0px;
  color: var(--odc_color);
  position: fixed; /* Body's height needs to be fixed */
  bottom: 0; /* So the footer always appears at the bottom of the page */
  width: 100%;
  line-height: var(--footer-height); /* Vertically center the text there */
  background-color: #f5f5f5;
  text-align: left;
  font-size: 10px;
}