@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');

:root {
    --color-primary: #E94D44;
    --color-primary-hover: #AF2E33;
    --color-primary-active: #751F22;
    --color-primary-lowOpacity: #e94c442d;
  
    --color-secondary: #00A7E5;
    --color-secondary-hover: #4E90B9;
    --color-secondary-active: #3B72A4;
    --color-secondary-light: #E0EAF8;
    --color-secondary-lowOpacity: #e0eaf8b8;

    --color-green: #3AB58C;
    --color-green-bg: #DFF8F0;
    --color-green-border: #5ECEA9;
    --color-green-lowOpacity: #3ab58c2c;
    --color-gold: #834D35;
    --color-gold-bg: #FDF0E0;
    --color-gold-border: #FFD9AA;
    
    --color-primary-contrast: #111823;
    --color-dark-100: #222529;
    --color-dark-50: #4E5154;
    --color-dark-25: #D3D3D4;
    --color-dark-metadata: #c5c5c5;
  }
  
  html, body, #root {
    height: 100%;
  }
  
  
  body {
    margin: 0;
    padding: 0;
    font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 1.1;
    background-color: #fff;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #f84545;
    border-color: #f84545;
  }
  
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active,
  .open > .dropdown-toggle.btn-primary {
    background: #cd0e0e;
  }
  
  .btn-primary:active,
  .btn-primary.active {
    background: #cd0e0e;
  }
  
  a {
    cursor: pointer;
    text-decoration: underline;
  }
  
  button {
    cursor: pointer;
  }
  
  strong {
    font-family: "Nunito";
  }
  
  em {
    font-family: "Nunito";
  }
  
  em strong,
  strong em {
    font-family: "Nunito";
  }
  
  highlight {
    background-color: #fdffb1;
    color: #333;
  }

.App {
  height: 100%;
}
.App-logo {
  margin-left: 30px;
  max-width: 150px;
  width: 100%;
}
.modal {
  display: block;
}
.navbar-brand {
  align-items: center;
  display: flex;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .navbar-brand {
      padding-right: 40px;
  }
}
.navbar-brand .App-logo {
  display: inline;
}
@media screen and (max-width: 767px) {
  .collapsing,
  .collapse {
      display: none;
  }
}
@media screen and (max-width: 767px) {
  .collapse.in {
      display: block;
  }
}
.modal-word-wrap {
  word-wrap: break-word;
}
.sm-text {
  font-size: 1.1em;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover {
  background-color: transparent;
  color: #E5C8A6;
}
.navbar-default .navbar-nav .active a {
  background-color: transparent;
  color: #E5C8A6;
}
.navbar-link {
  line-height: 20px;
  margin-left: 30px;
  padding-top: 0;
  text-decoration: none;
}
.navbar-link a {
  line-height: 55px;
  padding: 0;
  text-decoration: none;
}
.navbar-link a:hover,
.navbar-link a:focus,
.navbar-link a:active {
  color: #aaa;
}
.navbar-default .navbar-nav > .nav-item-admin.open > .dropdown-toggle {
  background-color: transparent;
}
.navbar-nav > li > .dropdown-menu {
  background-color: white;
  margin-top: 5px;
}
.navbar-default .navbar-nav li a:hover {
  background-color: transparent;
  color: var(--color-dark-25);
}
.navbar-link .navbar-button.sub-menu-item a {
  color: black;
  font-weight: 400;
  text-align: left;
}
.navbar-default .navbar-nav li a {
  border: none;
  color: #fff;
  float: none;
  text-shadow: none;
  background: none;
}
.navbar-toggle {
  border: none #111;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #4d5d6d;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  height: 3px;
}
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form {
  border-color: #4d5d6d;
}
.user-image-wrapper.dropdown-toggle.btn {
  box-shadow: none;
}
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default:hover {
  background: none;
  color: #333;
}
.dropdown-menu > .sub-menu-item > a {
  line-height: 20px;
  padding: 5px;
}
.nav-items {
  margin-right: 15px;
}
.user-image.sm {
  width: 40px;
  height: 40px;
}
.user-image.lg {
  width: 57px;
  height: 57px;
}
.pagination li a:focus,
.pagination li a:hover,
.pagination li span:focus,
.pagination li span:hover {
  background-color: #aaa;
  border-color: #aaa;
  color: white;
}
.pager .pagination li.active a,
.pagination a:hover {
  background: #aaa;
  border-color: #aaa;
  color: #fff;
}
.pagination li a {
  background: white;
  color: black;
  margin-left: 2px;
  margin-right: 2px;
  outline: none;
}
.pagination li:first-child a {
  border-radius: 25px 5px 5px 25px;
  margin-right: 10px;
  outline: none;
}
.pagination li:last-child a {
  border-radius: 5px 25px 25px 5px;
  margin-left: 10px;
  outline: none;
}
.form-control .text-area,
.form-text-area {
  resize: none;
}
.dropdown-menu a {
  text-decoration: none;
}
.btn:focus {
  outline: none;
}
.profile-picture {
  margin-left: 0;
}
.text-area-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .text-area-footer {
      flex-direction: row-reverse;
  }
}
.highlighted-text {
  background-color: #aad1fd;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: #4282bf;
}
.navbar-link a.profile-dropdown__btn {
  background-color: var(--color-secondary);
  border: solid 1px var(--color-secondary);
  border-radius: 3px;
  color: #fff;
  line-height: normal;
  margin-bottom: 32px;
  padding: 8px 16px;
}
.open > .dropdown-menu.arrowed-dropdown__menu {
  border: solid 1px #e1e5e9;
  min-width: 280px;
  overflow: unset;
  padding: 5px 0 0;
  width: auto;
}
.navbar-default .navbar-nav li .arrowed-dropdown__body > a:focus {
  outline: none;
}
.navbar-default .navbar-nav li .arrowed-dropdown__body > a {
  color: black;
  cursor: default;
}
.arrowed-dropdown__footer {
  background-color: #f4f7f9;
}
.navbar-default .navbar-nav li .arrowed-dropdown__footer > a {
  color: var(--color-secondary);
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  padding-right: 25px;
  text-align: right;
}
.arrowed-dropdown__footer:hover {
  color: black;
  cursor: pointer;
}