:root {
  --white:#FFFFFF;
  --hover-white:#f3f3f3;
  --semi-white:#FFFFFF80;

  --red:#FF261F;
  --red_map:FF261F; /* hard coded in summary_tab */
  --pale-red:#FF261F40;
  --middle-red:#FF261F60;
  --opac-red:#FF261F80;
  --hover-red:#ed261f;

  --turquoise:#26B5BA;
  --hover-turquoise:#24A6AB;
  --pale-turquoise:#26B5BA40;
  --middle-turquoise:#26B5BA60;

  --dark-blue:#122948;
  --hover-dark-blue:#10243e;
  --semi-dark-blue:#12294880;
  --middle-blue:#12294845;
  --light-blue:#12294820;
  --pale-blue:#12294805;

  --orange:#FCCA6A;
  --hover-orange:#ecbe64;

  /* To ignore dark mode */
  /* https://stackoverflow.com/questions/67135053/can-someone-explain-to-my-why-my-django-admin-theme-is-dark */
  --primary: #79aec8;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: var(--color-background-translucent);

  --body-fg: #333;
  --body-bg: var(--color-background-translucent);
  --body-quiet-color: #666;
  --body-loud-color: #000;

  --header-color: #ffc;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: var(--body-bg);
  --breadcrumbs-bg: var(--primary);

  --link-fg: #447e9b;
  --link-hover-color: #036;
  --link-selected-fg: #5b80b2;

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

  --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ffc;

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: #609ab6;
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #205067;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);

}

/* To ignore dark mode */
.module {
    border-radius: var(--border-radius-large);
    backdrop-filter: var(--background-blur);
    border-radius: var(--border-radius-large);
    padding:0.5em;
    border: 3px var(--pale-middle-blue);
    border-style: double;
}

/* Language flags */
.flag_class{
    vertical-align:middle;
}

.flag-icon{
    vertical-align:bottom;
}

/* Row form */

.horizontally-centered-row{
    justify-content: center;
}

.danger-icon{
    color: var(--red);
}

.main-container{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    height: 100%;
}

.main-container > .row {
    width:100%;
    margin-bottom: 3rem;
}

.text_container {
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 1em;
}

.no-click{
  pointer-events:none;
}

.light-container{
  background-color: var(--light-blue);
  border:solid var(--middle-blue);
  border-width:thin;
  border-radius: 25px;
}

/* FONTS */
.customwarning {
  color: var(--red);
}

/* https://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font */
/* https://fonts.google.com/specimen/Barlow+Semi+Condensed */
@font-face {
  font-family: "BarlowSemiCondensed";
  src: local('BarlowSemiCondensed-BoldItalic'),
       url('../fonts/BarlowSemiCondensed-BoldItalic.ttf') format("truetype");
  font-weight: bold;
  font-style: italic, oblique;
}

@font-face {
  font-family: "BarlowSemiCondensed";
  src: local('BarlowSemiCondensed-Italic'),
       url('../fonts/BarlowSemiCondensed-MediumItalic.ttf') format("truetype");
  font-style: italic, oblique;
}

@font-face {
  font-family: "BarlowSemiCondensed";
  src: local('BarlowSemiCondensed-Bold'),
       url('../fonts/BarlowSemiCondensed-Bold.ttf') format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "BarlowSemiCondensed";
  src: local('BarlowSemiCondensed-Medium'),
       url('../fonts/BarlowSemiCondensed-Medium.ttf') format("truetype");
}

* {
  font-family: "BarlowSemiCondensed";
}

/* HYPERLINKS */
a {
  color: var(--turquoise);
}

/* a:active {
  color: var(--middle-turquoise);
} */

/* a:visited {
  color: var(--pale-turquoise);
} */

a:hover {
  color: var(--hover-turquoise);
}

.breadcrumb-link {
    color: var(--semi-dark-blue) !important;
}

.breadcrumb-link-active {
    color: var(--dark-blue) !important;
}

.nav-link{
  color: var(--semi-white) !important;
}

/* BUTTONS */

/* success */
.btn-success {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

.btn-success:hover, .btn-success.focus, .btn-success:focus {
  background-color: var(--hover-turquoise) !important;
  border-color: var(--hover-turquoise) !important;
}

.btn-success:disabled, .btn-success.disabled, .btn-success:active, .btn-success:active:focus, .btn-success.active, .open>.dropdown-toggle.btn-success {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

/* info */
.btn-info {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

.btn-info:hover, .btn-info.focus, .btn-info:focus {
  background-color: var(--hover-turquoise) !important;
  border-color: var(--hover-turquoise) !important;
}

.btn-info:disabled, .btn-info.disabled, .btn-info:active, .btn-info:active:focus, .btn-info.active, .open>.dropdown-toggle.btn-info {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

/* warning */
.btn-warning {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
}

.btn-warning:hover, .btn-warning.focus, .btn-warning:focus {
  background-color: var(--hover-orange) !important;
  border-color: var(--hover-orange) !important;
}

.btn-warning:disabled, .btn-warning.disabled, .btn-warning:active, .btn-warning:active:focus, .btn-warning.active, .open>.dropdown-toggle.btn-warning {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
}

/* danger */
.btn-danger {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
}

.btn-danger:hover, .btn-danger.focus, .btn-danger:focus {
  background-color: var(--hover-red) !important;
  border-color: var(--hover-red) !important;
}

.btn-danger:disabled, .btn-danger.disabled, .btn-danger:active, .btn-danger:active:focus, .btn-danger.active, .open>.dropdown-toggle.btn-danger {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
}

/* primary */
.btn-primary {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

.btn-primary:hover, .btn-primary.focus, .btn-primary:focus {
  background-color: var(--hover-turquoise) !important;
  border-color: var(--hover-turquoise) !important;
}

.btn-primary:disabled, .btn-primary.disabled, .btn-primary:active, .btn-primary:active:focus, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

/* secondary */
.btn-secondary {
  background-color: var(--dark-blue) !important;
  border-color: var(--dark-blue) !important;
}

.btn-secondary:hover, .btn-secondary.focus, .btn-secondary:focus {
  background-color: var(--hover-dark-blue) !important;
  border-color: var(--hover-dark-blue) !important;
}

.btn-secondary:disabled, .btn-secondary.disabled, .btn-secondary:active, .btn-secondary:active:focus, .btn-secondary.active, .open>.dropdown-toggle.btn-secondary {
  background-color: var(--dark-blue) !important;
  border-color: var(--dark-blue) !important;
}

/* CHECKBOXES */
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--turquoise) !important;
    background-color: var(--turquoise) !important;
}

.custom-control-input:focus~.custom-control-label::before  {
    box-shadow: none !important;
}

input[type='checkbox'], input[type='radio'] {
    accent-color: var(--dark-blue) !important;
}

/*input[type="checkbox"] {
  filter: invert(100%) hue-rotate(140deg) brightness(1.3);
}*/

/* PAGINATION */

.page-item.active .page-link {
    color: #fff !important;
    border-color: var(--turquoise) !important;
    background-color: var(--turquoise) !important;
}

.page-item .page-link {
  color: var(--turquoise) !important;
  background-color: var(--white) !important;
}

/* TABLINK
/* Style the tab */
#bootstrap-overrides .tab {
    overflow: hidden;
    border: 1px solid var(--light-blue);
    background-color: var(--pale-blue);
}

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

/* Create an active/current tablink class */
#bootstrap-overrides .tab button.active {
    background-color: var(--middle-blue);
}

/* Change background color of buttons on hover */
#bootstrap-overrides .tab button:hover {
    background-color: var(--light-blue);
}

/* Style the tab content */
#bootstrap-overrides .tabcontent {
 display: none;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

/* BROWSER */

/* text selection */
::selection {
    color: #fff;
    background: var(--turquoise);
    text-shadow: 1px 1px 2px var(--white);
}
/* For Mozilla Firefox */
::-moz-selection {
    color: #fff;
    background: var(--turquoise);
    text-shadow: 1px 1px 2px var(--white);
}

/*text input on focus */
.form-control:focus {
  border-color: var(--middle-blue);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px var(--pale-turquoise),0 0 8px var(--turquoise);
  box-shadow: inset 0 1px 1px var(--pale-turquoise),0 0 8px var(--turquoise);
}

.form-control:disabled, .form-control[readonly] {
  background-color: var(--light-blue);
}
/* select input on focus */
select:focus {
  border-color: var(--middle-blue) !important;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px var(--pale-turquoise),0 0 8px var(--turquoise) !important;
  box-shadow: inset 0 1px 1px var(--pale-turquoise),0 0 8px var(--turquoise) !important;
}

.dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
   color: #ffffff;
   background-color: #f3969a;
}

.dropdown-menu {
    background-color: var(--dark-blue);
    border:0px;
    margin: 0em -1.5em -0.5em -1.5em;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;

}

.dropdown-menu > .dropdown-item {
    color: var(--semi-white) !important;
}

.dropdown-menu > .dropdown-item:hover {
    background-color: var(--hover-dark-blue);
}
/* MISCELLANEOUS */

/* Delete icon */
.delete-icon {
  color: var(--red);
}

/* Navbar */
.navbar-dark{
  background-color: var(--dark-blue) !important;
}

.navbar-nav{
  background-color: var(--dark-blue) !important;
  padding:0.5em 1.5em 0.5em 1.5em;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}

.bg-light{
  background-color: var(--pale-blue) !important;
}

/* card */
.card-header{
  background-color: var(--pale-blue) !important;
}

.card-footer{
  background-color: var(--pale-blue) !important;
}

/* table */
.table td, .table th {
  border-top: 1px solid var(--light-blue);
}

.table-striped tbody tr:nth-of-type(odd){
  background-color: var(--pale-blue) !important;
}

.input-group-text{
  background-color: var(--light-blue) !important;
  color: var(--dark-blue) !important;
}

/* table stat */
.mean-low {
    color: var(--turquoise);
    font-weight:bold;
}

.legend-low {
    background: var(--turquoise);
}

.mean-high {
    color: var(--red);
    font-weight:bold;
}

.legend-high {
    background: var(--red);
}

.mean-normal {
    color: #000;
}

.legend-normal {
    background: #000;
}

/* messages */
.alert-danger {
  background-color: var(--pale-red);
  color: var(--hover-red);
  border-color: var(--middle-red);
}

.alert-success {
  background-color: var(--pale-turquoise);
  color: var(--hover-turquoise);
  border-color: var(--middle-turquoise);
}

/* Add/remove buttons in profile forms */
.add-form,.del-form {
    width: 32px;
    height: 32px;
    background: var(--light-blue);
    font-size: 20px;
    font-weight: 900;
    border-radius: 100%;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.justify-content {
    justify-content:center
}

.add-form {
    color:var(--turquoise);
}

.del-form {
    color:var(--red);
}

/* Multiselectfield in forms */
.multiselect-block{
    height:150px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:1em;
    border:solid 1px;
    background-color:var(--white);
    border-color:var(--semi-dark-blue);
    text-align:left;
    align-self:center;
    border-radius:5px;
    margin:1em;
}