/*
This files uses a base, layout, module, state, page, theme structure and 
intends to follow OOCSS principles and the SMACSS http://smacss.com/
*/ 

/* base */ 

body div {
    font-family:  'Helvetica Neue', 'Arial'
}

/* FIXME: THis is only neccesary because we still use bootstrap 3:
https://stackoverflow.com/questions/40853952/bootstrap-footer-at-the-bottom-of-the-page
*/
body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  box-sizing: border-box;
}


/* layout */

/* module */

/* state */
.shadow {
    box-shadow: 0 .125rem .25rem rgba(0,0,0, .175);
}

/* page */

/* theme */

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

.alert {
    color: var(--textgrey);
}

.alert-info, .alert-primary {
    background: var(--blue)
}

.alert-secondary: {}

.alert-success {
    background: var(--green);
}

.alert-error, .alert-danger {
    background: var(--orange);
}

.alert-warning {
    background: var(--yellow);
}


/* original css codes */

body.platform {
    background-color: #f5f5f5;
}

.public {
    background-image: url("../img/splash.63f901ceaac8.jpg");
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.public .modal-dialog {
    max-width: 400px;
    width: auto;
}

.signup .modal-dialog,
.error .modal-dialog,
.contact .modal-dialog {
    max-width: 800px;
}

.public .logo {
    width: 75%;
    max-height: 80px;
}

.public a:not(.btn) {
    color: var(--linkblue);
}

.public .password-reset-link{
    font-size: small;
    margin-bottom: 10px;
}

.public .login-separator {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #a6a6a6;
}

.public .login-separator hr {
    flex: 1;
    border-color: #a6a6a6;
}

.public .separator-text {
    flex: 1 0 auto;
    text-align: center;
}

nav {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}


.navbar-header{
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.navbar-default {
    z-index: 1030;
}

@media only screen and (min-width: 770px) {
    .navbar {
        max-height: 60px;
    }
}

@media only screen and (max-width: 770px) {
    .fullscreen-only{
        display: none !important;
    }
}

.navbar-project{
    background-color: #fff;
    min-height: 50px;
    color: #232323;
    z-index: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #aaa;
}

.navbar-popup{
    margin-top: 0px;
    margin-bottom: 10px;
    padding-bottom: 0px;
    border-bottom: none;
}

ul.map_list li:first-child{
    font-weight: bold;
}
.map_list li {
    font-size: 13px;
}

ul.popup-list li {
    line-height: 25px;
}

.map-buttons {
    margin-top: 0px;
    margin-bottom: 30px;
}

.navbar-menu li a{
    font-size: 14px !important;
    text-transform: none !important;
    background-color: transparent !important;
}

.note-followup {
    margin-top: -25px;
}

.small-content {
    margin-top: 80px;
    margin-bottom: 80px;
}

.map-preview {
    width: 180px;
    height: 130px;
}

.file-upload-column {
    height: 10%;
}

footer {
    color: white;
    background-color: var(--footer-color);
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    /* should comply with the body padding */
    height: 50px;
    display: flex;
    align-items: center
}

.tile-header {
    display: none;
    flex-wrap: wrap;
    text-align: left;
    width: 100%;
    max-width: 350px;
    margin-bottom: 10px;
    margin-top: 10px;
    align-items: center;
    padding-left: 10px;
}

.btn-container {
    position: relative;
}

.button-overlay-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: 0.5s ease;
}

.button-overlay-list li a:hover {
    color: #e85353;
}

.button-overlay-list:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 14%;
    width: 70%;
    height: 50%;
    border-bottom: solid 1px #e2e2e2;
    z-index: -1;
}

.viewer {
    display: grid;
    grid-template-columns: 220px auto;
    margin-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
}

.grid-on.viewer {
    display: block;
    border: none;
    margin-bottom: 0px;
}

.grid-on .details .map-name {
    display: none;
}

.grid-on .details {
    display: none !important;
}

.details {
    display: grid !important;
    grid-template-columns: 400px 320px 300px;
    grid-template-rows: auto;

}

.map-name {
    font-weight: bold;
    color: #00a6d6;
    font-size: 15px;
    padding-right: 10px;
    line-height: 28px;
}

.tag-container {
    display: flex;
    flex-direction: column;
}

.tag-container .tag {
    text-align: center;
}

.tag-list {
    margin-right: 5px;
}

.tag {
    display: inline-block;
    margin-right:5px;
    padding-right: 0px;
    background-color: #538fe8;
    border-radius: 15px;
    color: white;
}

.tag-delete {
    background-color: rgba(0,0,0,0);
    border: none;
    text-align: center;
    padding: 0 10px 0 5px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.5s ease;
}

.tag-container .add-category {
    width: 100%;
}


.add-category:focus::placeholder{
    color:transparent;
}

.form-control:focus::placeholder{
    color:transparent;
}

.tag-container .tag {
    font-size: 16px;
    margin: 5px;
}

a.tag-delete{
    text-decoration: none;
}
  
.tag-text {
    padding: 0 0 0 10px;
}

.add-category-container {
    position: relative;
    flex: 2;
    padding-right: 10px;
}

.add-category-expand {
    width:30px;
    border-radius: 12px;
    vertical-align: middle;
    text-align: center;
    border: 1px dashed rgba(0, 0, 0, .3);
    background-color: white;
    color: rgba(0, 0, 0, .5);
    transition: 0.5s ease;
}

.add-category {
    width:150px;
    border-radius: 12px;
    vertical-align: middle;
    text-align: center;
    border: 1px dashed rgba(0, 0, 0, .3);
    background-color: white;
    color: rgba(0, 0, 0, .5);
    transition: 0.5s ease;
    cursor: pointer;
}

.tag-container .add-category-container {
    margin-top: 5px;
}

.fa-plus {
    position: absolute;
    z-index: 10;
    left: 9px;
    top: 4.5px;
    color: rgba(0, 0, 0, .3);
}

/* .add-category-container:before {
    font-family: 'FontAwesome';
    position: absolute;
    content: "\f067";
    font-size: 15px;
    left: 22px;
    z-index: 10;
    color: rgba(0, 0, 0, .3);
} */

.add-category-expand:hover {
    background-color: rgba(0, 0, 0, .1);
    width: 100%;
}

.add-category:hover {
    border-color: #28a8e0;
}

.add-category:focus {
    outline: none;
}

.add-category-expand:focus {
    outline: none;
    width: 100%;
}

#map_content- {
    margin-bottom: 100px;
}

.detail-container {
    width: 100%;
    height: 110px;
}

.viewer_details {
    color: #656565;
    width: 100%;
    max-width: 350px;
}

.viewer_details tbody tr > th {
    padding-left: 10px;
}

.nav-down {
    bottom: -100px;
}

.stack_details td{
    font-style: italic;
}

.figure .stack_details {
    margin-top: 10px;
}

.selector .selector-available select[multiple], .selector .selector-chosen select[multiple] {
    height: 17.2em!important;
    background: #fff!important;
}

.selector .selector-chosen select[multiple] {
    height: 267px!important;
    background: #fff!important;
}

.selector h2 {
    background: #f8f8f8 !important;
    color: #666 !important;
    margin: 0 0 0 0 !important;
    height: 30px;
}
.selector .help-icon {
    background: url("../admin/img/icon-unknown.a18cb4398978.svg") 0 0 no-repeat !important;
}

.selector select[multiple] option {
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
    width: 100%;
    padding: 10px;
    border-bottom: solid 1px #ddd;
}

.form-row {
    border-bottom: none !important;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.5s ease;
  }

.figure:hover .overlay {
    display: block;
    background: rgba(0, 0, 0, .5);
  }

.grid-on .images .figure .imageContainer .launch{
    display: block;
}

.hamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 20px;
    opacity: 0;
    transition: opacity .35s ease;
}

.button-overlay {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-around;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: opacity .35s ease;   
}

/* .active {
    display: flex !important;
} */


.button-overlay > * {
    text-align: center;
    color: white;
    font-size: 18px;
    list-style-type: none;
    z-index: 2;
    
}

.button-overlay:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 25px;
    width: 300px;
    height: 50%;
    border-bottom: solid 1px white;
    z-index: 1;
}

.button-overlay li a {
    color: white;
    font-size: 20px;
    text-decoration: none;
    cursor:pointer;
    transition: color .35s ease;
}

.button-overlay li a:hover {
    color: red;
}


.hamburger:hover {
    color:rgba(0, 0, 0, 0.2);
}

.figure:hover .launch {
    opacity: 1;
}

.figure:hover .hamburger {
    opacity: 1;
}

.figure:hover .button-overlay {
    opacity: 1;
}

.imageContainer {
    position: relative;
}

.separator {
    display: none; 
    margin-top: 20px; 
    margin-bottom: 20px;
}

.pag-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.figure {
    margin-right:22px;
}

.grid-on .images .figure {
    margin-right: 0 !important;
    box-shadow: 2px 2px 3px 0px rgba(163,163,163,1);
    padding-bottom: 5px;
}

.grid-on .images .figure .imageContainer a .map-preview {
    width: 350px;
    height: 250px;
}

.grid-on .images .figure .tile-header {
    display: flex;
}

.navBar{
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 80px;
    grid-auto-rows: auto;
    grid-gap: 1em;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid black;
    margin-bottom: 20px;
}
.project-name {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.search-filter {
    grid-column: 2;
    grid-row: 1;
    /* justify-self: center; */
}

.search_form {
    display: inline-block;
}

.tag_filter {
    display: inline-block;
    margin-left: 10px;
}

.tag_filter li {
    padding-left: 5px;
}

.filter-form {
    padding: 0px;
}

.btn-filter {
    width: 100%;
    border-radius: 0px;
}

.list-grid-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.project-name > b {
    font-size: 20px;
    font-weight: bold;
    color: #232323;
}

.map-expired {
    margin: 10px;
}

.grid-on .map-expired {
    margin: 0;
    margin-top: 3px;
}

.grid-on .map-expired ul {
    margin: 0;
}

.table-view {
    display: none;    
}

.table-view table {
    display: grid;
    border-collapse: collapse;
    min-width: 100%;
    grid-template-columns: 
      minmax(240px, 1fr)
      minmax(100px, 1fr)
      minmax(100px, 1fr)
      minmax(220px, 1fr)
      minmax(100px, 100px)
      minmax(200px, 1fr)
      minmax(120px, 1fr)
      minmax(130px, 130px)
  }

.table-view thead,
.table-view tbody,
.table-view tr {
    display: contents;
}

.table-view th,
.table-view td {
    padding: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-view th {
    position: sticky;
    top: 0;
    background: #337ab7;
    text-align: left;
    font-weight: normal;
    font-size: 16px;
    color: white;
}

.table-view th:last-child {
    border: 0;
}

.table-view td {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgb(255, 255, 255);
    cursor:pointer;
    transition: background-color .35s ease;
}

.table-view tr:nth-child(even) td{
    background-color: #f8f6ff;
}

.table-view tr:hover td{
    background-color: rgba(0, 0, 0, 0.2);
}

td.metadata {
    z-index: 100;
}

.fixed-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    height:80px !important;
}

p.login-signup {
    margin-top: 20px;
}

.overview-item {
    position:relative;
    top:10px;
}


/* https://stackoverflow.com/a/11681331 */
.required .form-control {
    border: 1px solid red;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* #############################################################################

CSS styles for the new Maps and Reports pages and sub-templates have been added 
here. They might be moved to a more convenient place at some point.

############################################################################# */
:root {
  --green: rgba(144,211,117,1);
  --grey: #d8dcd6;
  --yellow: #ffff14;
  --orange: #f97306;
  --red: #e50000;
  --white: #ffffff;
  --blue: rgba(84,200,232,1);
  --linkblue: #337ab7; /* link blue */
  --linkhover: #1f5b8f;
  --textgrey: #444444;
  --lightgrey: #888888;
  --footer-color: #172241; /* this name might be adjusted */
}

a .panel, a .panel-heading {
    border-radius:0px;
}



a.map-preview, div.map-preview {
    text-decoration:none;
    width: 100%;
}
a.map-preview div.panel-heading {
    color:#286090;
    background-color:#fff;
}
a.map-preview:hover div.panel {
    border-color:var(--linkblue);
}
a.map-preview:hover div.panel-heading {
    background-color:var(--linkblue);
    color:#fff;
}
a.map-preview:hover span.alert-icon {
    color:#fff !important;
}
a.map-preview div.panel-footer {
    color:var(--textgrey);
    padding:10px;
    background-color:#f8f8f8;
}
a.map-preview div.panel-body {
    padding:10px;
    color:var(--textgrey);
}

div.map-preview div.panel-heading {
    color:#666;
    background-color:#fff;
}

a.display-option {
    border:1px solid #ddd;
    border-radius:4px;
    color:var(--linkblue);
    text-decoration:none;
    padding:2px;
    padding-bottom:4px;
    font-weight:normal;
    padding-left:4px;
    padding-right:4px;
}
a.display-option.selected {
    border-color:#ddd;
    background-color:#fff;
    font-weight:bold;
}
a.display-option:hover {
    background-color:#eee;
    border-color:#ddd;
}
a.display-option.disabled {
    color:#999;
    cursor:auto;
}
a.display-option.disabled:hover {
    border-color:#eee;
}
a:hover div.panel-preview {
    opacity:1.0;
}
div.panel-preview {
    background-color:#f5f5f5;
    width:100%;
    height:250px;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom:1px solid #ddd;
}
div.panel-footer {
    background-color: #fff;
}

span.usecase-label {
    font-size:0.9em;
    background-color:#fff;
    color:var(--textgrey);
    border:1px solid #ccc;
    margin-left: 4px;
    float:right
}

span.time-label {
    font-size:0.9em;
    background-color:rgba(255,255,255,0.7);
    color:var(--lightgrey);
    border:0px solid #ccc;
    margin-left: 4px;
}
a.map-metadata-link, a.map-edit-link, a.map-metadata-external-link {
    color:var(--linkblue);
    float: right;
}
a.map-metadata-link:hover, a.map-edit-link:hover, a.map-metadata-external-link:hover {
    text-decoration: none;
}


/* Styling for map components */
div#map {
    height:666px;
    margin-bottom:15px;
}

div.map-label { 
    border-radius:0px;
    box-shadow:none;
    padding:3px;
    pointer-events:auto;
    width:auto;
    height:auto;
    color:var(--white); 
    border-right:0px;
    border-left: 0px;

}
div.map-alert-level {
    border-top: 4px solid var(--white);
}

div.alert-green {
    border-top: 4px solid var(--green);
}
div.alert-grey {
    border-top: 4px solid var(--grey);
}
div.alert-yellow {
    border-top: 4px solid var(--yellow);
}
div.alert-orange {
    border-top: 4px solid var(--orange);
}
div.alert-red {
    border-top: 4px solid var(--red);
}
div.alert-none div.panel-preview {
    height:254px;
}
div.maps-filters .panel-body {
    padding:5px;
}
p.expired-label {
    color: var(--red);
    margin: 0px;
    margin-top: 8px;
    padding: 0px;
    line-height: 1.6em;
    font-weight:  bold;
}
p.expired-soon-label {
    color: var(--orange);
    margin: 0px;
    padding: 0px;
    line-height: 1.6em;
    padding-top:0px;
    font-weight: bold;
}
span.expired-label {
    color: var(--red);
}
span.expired-soon-label {
    color: var(--orange);
}
div.panel-body p {
    line-height: 1.3em;
    margin: 3px 0px 3px 0px;
    padding: 0px;
}
span.map-property {
    color: #999;
    font-size: 0.9em;
    font-weight: bold;
    padding-right: 3px;
    margin-top: 3px;
}
span.map-property.map-fresh {
    color: var(--green);
}
a.map-preview:hover span.map-property {
    color: #eee;
}
span.map-tag {
    font-size: 0.9em;
    padding: 2px 4px 2px 4px;
    background-color: #fff;
    color: #666;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 2px;
}
span.map-tag span.glyphicon {
    font-size: 0.8em;
}

ul.nav li a {
    color: var(--linkblue);
}
hr {
    border-color:#ccc;
    margin: 5px 0px;
}

/* Fixes for the signup form */
div.form-group li::marker {
    content: none;
}
/* Add margin to  checkbox list */
div.form-group ul {
    padding: 0px;   
    margin-top: 10px;
}

/* Prevent checkbox labels from being in bold */
div.form-group li label {
    font-weight: normal;
}

    /* Some styles for the new logo */
nav.navbar-light {
    background-color: #fff !important; 
    border-radius: 0px;
}

/* the current page's tab gets a soft pill, the same look as the selected options on the
   maps/reports page */
nav.navbar-light ul.nav > li.active > a,
nav.navbar-light ul.nav li.dropdown.current > a.dropdown-toggle {
    color: #31708f !important;
    font-weight: 600;
    background-color: #e3ecf5 !important;
    border-radius: 6px;
}

/* Dropdown items: no outer margin (the ul.navbar-left/right li margins are meant for the
   top tabs) and the same padding on every item, also the last one */
nav.navbar-light ul.nav ul.dropdown-menu > li {
    margin: 0;
}

nav.navbar-light ul.nav ul.dropdown-menu > li > a {
    padding: 5px 16px !important;
}

nav.navbar-light ul.nav ul.dropdown-menu > li.divider {
    margin: 4px 0;
}

/* Compact "stop impersonating" chip: who you are impersonating plus an x to stop */
nav.navbar-light ul.nav a.navbar-impersonate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    border: 1px solid #f0c36d;
    border-radius: 6px;
    background-color: #fdf1e3 !important;
    color: #a0540c !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 18px;
    text-transform: none;
}

nav.navbar-light ul.nav a.navbar-impersonate:hover {
    background-color: #fbe3c4 !important;
    color: #7a3f08 !important;
}

/* Desktop navbar: logo and both link lists are centred in the 76px white band under the
   4px gradient with flex, instead of the separate top offsets they each had before.
   Below 768px bootstrap collapses the menu and the old rules still apply. */
@media (min-width: 768px) {
    nav.navbar-light .navbar-header {
        height: 76px !important;
        display: flex;
        align-items: center;
    }

    nav.navbar-light a.navbar-brand {
        height: auto;
        padding: 0 10px 0 15px !important;
    }

    nav.navbar-light a.navbar-brand img {
        display: block;
        margin-top: 0 !important;
    }

    nav.navbar-light ul.nav.navbar-nav {
        margin-top: 0 !important;
        height: 76px;
        display: flex;
        align-items: center;
    }

    nav.navbar-light ul.nav.navbar-nav > li {
        margin: 0 3px;
    }

    nav.navbar-light ul.nav.navbar-nav > li > a {
        padding: 8px 12px;
        line-height: 20px;
    }
}

nav.navbar-light ul.nav a {
    color: #524e4e !important;
    font-size: 1.2em !important;
}

nav.navbar-light ul.nav ul.dropdown-menu a {
    font-size: 1.1em !important;
    padding-top: 2px;
    padding-bottom: 2px;
}

nav.navbar-light ul.nav a:hover {
    color: var(--linkhover) !important;
}

/* the tab whose dropdown is open gets bold text */
nav.navbar-light ul.nav li.dropdown.open > a.dropdown-toggle {
    font-weight: 700;
}
nav.navbar-light ul.dropdown-menu {
    background-color: #fff !important;
    box-shadow: none;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.dropdown-menu-announcements {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 8px
}

.dropdown-menu-announcement {
    width: 320px;
    overflow-wrap: anywhere;
    white-space: normal;
}
nav.navbar-dark {
    background-color: #000 !important; 
    border-radius: 0px;
    padding-bottom: 20px;
    max-height: 75px;
}
nav.navbar-dark ul.nav a {
    color: #fff !important;
    font-size: 1.2em !important;
}

a.navbar-brand {
    padding-right: 10px !important;
}
ul.nav {
    margin-right: 0px !important;
    margin-top: 17px !important;
}
ul.navbar-right li:last-child a {
    padding-right: 0px !important;
}
.skygeo-gradient {
    background: rgb(84,200,232);
    background: linear-gradient(90deg, rgba(84,200,232,1) 0%, rgba(144,211,117,1) 48%, rgba(205,222,0,1) 100%); 
    height:4px;
}

nav.navbar-light ul.nav li.navbar-button a {
    border-radius: 6px;
    background-color: #f5f5f5 !important;
    padding-bottom: 12px !important;
    padding: 8px 8px 10px 8px !important;
    border: 1px solid #eee;
}
nav.navbar-light ul.nav li.navbar-button a:hover {
    color: #fff !important;
    background-color: var(--linkblue) !important;
    border: 1px solid var(--linkblue);
}
ul.navbar-left li {
    margin: 4px 5px 4px 5px;
}
ul.navbar-right li {
    margin: 4px 4px 4px 4px;
}

nav.navbar {
    //-webkit-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.2); 
    //box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.2);
    height: 80px;
    max-height: 80px !important;
    padding-bottom: 0px;
    background-color: #fff;
}

div#nav-container {
    background-color: #fff;
}

a.navbar-brand {
    padding-top: 23px;
}
button.navbar-toggle {
    margin-top:23px;
}


.navbar-custom .nav li a {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
  }


body.account a.inactive {
    color: #999;
    text-decoration: none;
}
body.account a.inactive:hover {
    color: #555;
    text-decoration: none;
}

div.user-account-item {
    display:inline;
    border-right: 1px solid #ccc;
    padding:4px 6px 6px 6px;
}

/* Section for styling of Bootstrap carousel and specific carousels */
.carousel-caption {
  color: var(--textgrey);
  font-weight: bold;
}

.announcement .carousel-caption {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  text-shadow: none;
  padding: 10px;
}

.carousel-caption p {
  font-size: 16px;
  line-height: 26px;
}

.carousel-control.left:hover, .carousel-control.right:hover {
   opacity: 50%;
   transition: opacity 0.5s ease-in-out;
}

.carousel-control.left, .carousel-control.right {
   opacity: 25%;
   transition: opacity 0.5s ease-in-out;
   font-size: 5em;
}

.carousel .carousel-indicators li {
  background-color: var(--lightgrey);
}

.carousel .carousel-indicators li.active {
  background-color: var(--textgrey);
}
/* end of styling of carousels */

/* Section for styling of Bootstrap modals and specific modals */
.modal-announcement {
    max-width: 700px;
  }

.modal-header {
  color: var(--textgrey);
}

.announcement > .modal-header {
  padding: 10px;
  text-align: center;
}

.modal-title {
  font-weight: bold;
}

.announcement > .modal-header > .modal-title {
  padding: 0px;
}

.modal-content-center {
    padding: 4px;
}

.announcement > .modal-body {
  padding: 2px;
}

.announcement > .modal-footer {
  color: var(--textgrey);
  padding: 10px;
}

.announcement .form-check {
  margin-right: 10px;
}

.announcement > .modal-footer .announcement-date {
    margin-right: 300px;
}

/* Add whitespace between checkbox and label of announcement modal */
.announcement > .modal-footer > .form-check input[type=checkbox]{
    margin-right: 5px;
}

/* Make it readable on small devices */
/* TODO: improve this */
.announcement .item {
    min-height: 350px;
}

.badge.good {
    background: var(--green);
    margin: -20px 0 0 -3px;
}

/* Styling for the edit external metadata modal of maps view */
.swal2-content {
    color: #545454;
    font-size: 1.4em;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
}

.editable-field {
    transition: all 0.2s ease;
    background: transparent;
}

.editable-field:hover {
    background: rgba(0, 123, 255, 0.1);
}

.editable-field:focus {
    background: white;
    outline: none;
    border-color: #007bff !important;
}