:root {
  --main-text-color: #34393d;
  --main-dark-color: #35495d;
  --main-link-color: #3a4888;
  --main-front-link-color: #00E7C5;
  --main-active-color: #00E7C5;
  --main-bg-color: #FFFFFF;
  --card-headers-bg-color: #f7f7f7;
  --main-border-color: #c0c6cf;
}
/*FONT USED FOR HEADERS*/
@font-face {
  font-family: 'TEKO'; /* Name to use in CSS */
  src: url('/static/fonts/Teko/Teko-VariableFont_wght.ttf') format('truetype');
  font-weight: normal; /* default font-weight */
  font-style: normal;  /* default font-style */
}
/*MAIN TEXT FONT*/
/* Regular Montserrat with variable weights */
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* Supports a range of weights from 100 to 900 */
  font-style: normal;
}
/* Italic Montserrat with variable weights */
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* Same weight range for italic */
  font-style: italic; /* default font-style */
}
/* Regular Nunito with variable weights */
/*@font-face {
  font-family: 'Nunito';
  src: url('/static/fonts/Nunito/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; !* Supports a range of weights from 100 to 900 *!
  font-style: normal;
}
!* Italic Nunito with variable weights *!
@font-face {
  font-family: 'Nunito';
  src: url('/static/fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; !* Same weight range for italic *!
  font-style: italic; !* default font-style *!
}*/

.container
{
  max-width: 1800px;
  padding: 0 15px !important;
}
.page-container {
  width: 100%;
  position: relative;
  min-height: 100vh;
  background-color: var(--main-bg-color);
  padding-bottom: 42px;
}
.content-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1800px;
  padding: 20px 15px;
}
.body_global .content-wrap
{
  max-width: 100%;
  padding-top: 0;
  margin-bottom: 170px;
}
@media (max-width: 576px)
{
  .body_global .content-wrap
  {
    margin-bottom: 600px;
  }
}
@media (min-width: 576px)
{
  .body_global .content-wrap
  {
    margin-bottom: 500px;
  }
}
@media (min-width: 768px)
{
  .body_global .content-wrap
  {
    margin-bottom: 380px;
  }
}
@media (min-width: 768px)
{
  .body_global .content-wrap
  {
    margin-bottom: 380px;
  }
}
@media (min-width: 992px)
{
  .body_global .content-wrap
  {
    margin-bottom: 350px;
  }
}
@media (min-width: 1200px)
{
  .body_global .content-wrap
  {
    margin-bottom: 170px;
  }
}

.body_global .container
{
  max-width: 1275px;
}
.navbar-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1800px;
  padding: 20px 35px;
}

/*FONT RULES https://www.yellowfinbi.com/best-practice-guide/dashboard-design-principles-and-best-practice/language-fonts-and-typography-->*/
body {
  overflow-y: scroll;
  font-family: Montserrat, sans-serif, Lato, Arial, Tahoma, Verdana;
  font-size: 12px;
  font-weight: 400;
  color: var(--main-text-color);
}
body.body_members
{
  font-family: Lato, sans-serif, Lato, Arial, Tahoma, Verdana;
}

/*NAVBAR BEGIN*/ /*todo I think this is only for backoffice - check it*/
.navbar {
  width: 100%;
  border-bottom: 1px solid var(--main-border-color);
}
.navbar .nav-menu .nav-link
{
  width: 30px;
}
.navbar .nav-menu .nav-link
{
  color: white;
}
.navbar .nav-menu .nav-link:focus, .navbar .nav-menu .nav-link:hover
{
  color: limegreen;
}
.navbar .nav-menu .nav-link:hover i
{
  font-size: 1.48em;
}


#navbar-logo
{
  height: 30px;
  margin-bottom: 12px;
}
#navbar-avatar
{
  width: 38px;
  margin-left: 50px;
}
#navbar-avatar img
{
  width: 38px;
  height: 38px;
}
.sidenav-header-inner #navbar-role
{
  margin-bottom: 5px;
}
.sidenav-header-inner .department-badge
{
  color: white;
  background: transparent;
  font-size: 10px;
  margin-bottom: 5px;
  word-wrap: break-word;
  white-space: normal;
  max-width: 160px;
  line-height: 12px;
}
.side-header-inner .department-badge:hover
{
  color: white!important;
}
/*todo nie wiem czy to w ogóle ma zastosowanie u nas, na hoverze topowe ikony mają złe kolory*/
.navbar-dark
{
  padding: .4rem 0 !important;
  background-color: var(--main-dark-color) !important;
}
.navbar-dark .nav-item .nav-link>i
{
  font-size: 18px;
  opacity: 0.7;
}

.navbar-light
{
  padding: .6rem 0 !important;
  background-color: white !important;
}
.navbar-light .nav-item .nav-link
{
  color: var(--main-front-link-color) !important;
}
.navbar-light i
{
  margin-right: 10px;
}
.navbar-brand /*navbar brand logo*/
{
  padding: 3px 5px
}
.navbar-header
{
  width: 100%;
  color: #FFFFFF;
}
.navbar-text
{
  width: 160px;
  color: #FFFFFF !important;
}
.nav-item
{
  margin-left: 15px;
  text-align: center;
}
.nav-link
{
  padding: 0.2rem !important;
}
.navbar-light .nav-link:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--main-active-color);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  border-radius: 10px;
  opacity: 0.8;
}
.navbar-light .nav-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.card-header-tabs
{
  margin-top: 8px;
}
.nav-tabs>.nav-item
{
  color: var(--main-front-link-color);
  margin-left: 8px;
}
.nav-tabs>.nav-item:first-child
{
  margin-left: 0;
}

.nav-tabs .nav-link
{
  background-color: #e8e8e8;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 5px;
  border-bottom: none;
  color: #9b9b9b;
}
.body_global .nav-tabs .nav-link.active
{
  background-color: white;
  color: var(--main-active-color);
}
.navbar.fixed-navbar
{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030; /* Ensure it's above other content */
  height: 56px;
  border-bottom-color: #0f192a;
}
.navbar-top-global.bg-light
{
  background-color: white!important;
}
.navbar.navbar-top-global.with-fixed
{
  margin-top: 56px; /* Height of fixed navbar */
}
.navbar.bg-dark a
{
  color: whitesmoke;
}
.navbar.bg-dark a i
{
  margin-right: 15px;
}
nav.navbar a
{
  color: #0f192a;
}
nav.navbar .badge {
  position: absolute;
  top: -2px;
  right: -15px;
}
nav.navbar .dropdown-menu
{
  padding: 0.3rem;
}
.side-navbar li a[aria-expanded="true"]::before
{
  content: none;
}
.side-navbar li ul.collapse a, .side-navbar li ul.collapsing a
{
  border-left: 2px solid #33b35a;
}
/*FRONT NAVBAR BEGIN*/
.navbar-top-global
{
  padding: 2.3rem 0 0 0 !important;
  border-bottom: none;
}
.navbar-top-global .nav-item
{
  border-left: 1px solid black;
}
.navbar-top-global .nav-separator
{
  border-right: 1px solid var(--main-text-color);
}
.navbar-top-global .nav-separator + .nav-item
{
  /* Styles for the first .nav-tem after the .separator */
  margin-left: 0;
  border-left: none;
}
.navbar-top-global .nav-link
{
  font-family: 'TEKO', sans-serif;
  margin-left: 10px;
  margin-bottom: 15px;
  font-size: 27px;
  font-weight: bold;
  text-transform: uppercase;
  min-width: 120px;
  text-align: left;
}
.navbar-top-global .nav-item:not(.dropdown) > .nav-link
{
  margin-top:3px; /*hotfix for chevron misalignment*/
}
.navbar-top-global .nav-link.active
{
  color: var(--main-active-color) !important;
}
.navbar-top-global .nav-link-active
{
  color: var(--main-active-color) !important;
}
.navbar-top-global .dropdown-toggle::after {
  content: '\f107';
  font-weight: 100;
  transition: transform 0.2s ease; /* Smooth animation */
}
.navbar-top-global .dropdown-toggle.show::after
{
  transform: rotate(-180deg); /* Rotate the chevron */
}
.navbar-top-global .dropdown-menu
{
  margin-top: -15px!important;
  margin-left: -1px;
  right: unset!important;
  border-radius: 0;
  border:none;
  border-left: 1px solid black;
  min-width: calc(100% + 32px);
  padding-left: 0!important;
}
.navbar-top-global .dropdown-item
{
  padding: 5px 10px !important;
}
.navbar-top-global .dropdown-item.active, .navbar-top-global .dropdown-item:active
{
  background-color: var(--main-active-color);
  color: black!important;
}
/*NAVBAR END*/
.page-header
{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.page-header > *
{
  margin-bottom: 8px;
}
.page-header h3
{
  line-height: 36px;
  margin-bottom: 0 !important;
}
.page-header i
{
  margin-right: 15px;
}
h1 { font-size: 30px; }
.body_global h1
{
  text-transform: uppercase;
  font-size: 48px;
  margin-top: 35px;
  margin-bottom: 55px;
}
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; margin-bottom: 0.8rem; }
h1,h2,h3,h4,h5,h6 {
  font-family: 'TEKO', sans-serif; /* Fallback to sans-serif */
}
.body_members h1,.body_members h2,.body_members h3,.body_members h3,.body_members h5,.body_members h6 {
  font-family: 'Lato', sans-serif; /* Fallback to sans-serif */
}
/*CARDS BEGIN*/
.card
{
  border: 1px solid var(--main-border-color);
  border-radius: 3px;
  margin-bottom: 20px;
}
.card-header
{
  font-size: 18px;
  font-weight: bold;
  background-color: var(--card-headers-bg-color);
  padding: 0.7rem 1.25rem;
}
.card-header i
{
  margin-right: 15px;
}
.card-body
{
  padding: 0.7rem 1.25rem;
}
.card:not([class*="text"]) p:not(.alert p)
{
  color: inherit;
}
.card-header:first-child {
  /*border-radius: 5px 5px 0 0;*/
}
/*CARDS END*/
/*FORMS BEGIN*/
.form-row
{
  margin-left: -5px !important;
  margin-right: -5px !important;
}
.form-row > .col, .form-row > [class*="col-"]
{
  padding-right: 5px;
  padding-left: 5px;
}
.form-control
{
  font-size: 0.9rem;
  border-radius: 3px;
  height: calc(1.5em + .75rem + 2px);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  font-weight: 300;
}
.input-group-text
{
  font-size: 0.9rem;
  padding: 0.45rem 0.75rem;
  line-height: 1rem;
  background-color: #e9ecef;
  color: #7b7b7b;
  font-weight: 300;
  text-align: center;
  min-width: 36px;
}
.input-group-text i
{
  margin-left: auto;margin-right: auto;
}
.tox-tinymce /*Wysiwyg text editor*/
{
  border-radius: 3px;
  /*noinspection CssUnresolvedCustomProperty*/
  border: var(--bs-border-width) solid var(--bs-border-color)!important;
}
.tox-edit-area::before
{
  border-color: #86b7fe!important;
}
.tox-tinymce .tox-sidebar-wrap
{
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.tox-statusbar__branding
{
  display: none;
}
.form-control:focus
{
  box-shadow: inset 0 0 0 .1rem rgba(0,123,255,.25);
}
.form-control[readonly] {
  background-color: #e9ecef;
  cursor: default;
}
.input-group > .input-group-prepend > .input-group-text
{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
form hr
{
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  margin-top: 1.3rem;
  margin-bottom: 0.6rem;
}
.form-check
{
  margin-left: 17px;
  margin-bottom: 0;
}
.form-check-input
{
  height: 1.2em;
  margin-top: .40em;
  margin-right: 1.1rem;
}
.form-switch
{
  margin-left: 10px;
}
.form-switch .form-check-input
{
  margin-right: 0.6rem;
  width: 2.4em;
}
.form-check-input[type="checkbox"]:invalid
{
  border: 1px solid salmon !important;
}
.form-check-input[type="checkbox"]:indeterminate
{
  background-color: #d1d1d1;
  border-color: #aaa;
}
.form-control::file-selector-button
{
  margin: -.375rem -.95rem;
  margin-inline-end: .95rem;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}
::-webkit-input-placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
::-moz-placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
:-ms-input-placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
::placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
/*required fields*/

input:optional
{
  padding-left: 14px;
  padding-right: 14px;
}
input[type="checkbox"]:optional, input.form-check-input:optional, input.form-check-input
{
  padding-left: 6px;
  padding-right: 6px;
}

input:required {
  border-left: 3px solid #ADDBB7;
  border-right: 3px solid #ADDBB7;
}
input:invalid {
  border-left: 3px solid salmon;
  border-right: 3px solid salmon;
}
input.form-check-input:required
{
  /*noinspection CssUnresolvedCustomProperty*/
  border: var(--bs-border-width) solid var(--bs-border-color);
}
input.form-check-input:invalid
{
  /*noinspection CssUnresolvedCustomProperty*/
  border: var(--bs-border-width) solid var(--bs-danger);
}
input.form-check-input:checked
{
  border-color: #0d6efd!important;
}
textarea:optional
{
  padding-left: 14px;
  padding-right: 14px;
}
textarea:required {
  border-left: 3px solid #ADDBB7;
  border-right: 3px solid #ADDBB7;
}
textarea:invalid {
  border-left: 3px solid salmon;
  border-right: 3px solid salmon;
}
select:optional
{
  padding-left: 14px;
  padding-right: 14px;
}
select:required {
  border-left: 3px solid #ADDBB7;
  border-right: 3px solid #ADDBB7;
}
select:invalid {
  border-left: 3px solid salmon;
  border-right: 3px solid salmon;
}
select option:disabled {
  color: #fa807270;
}
form small
{
  color: #777777;
  margin-left: 3px;
}
.input-group .btn
{
  line-height: 1.3rem;
}
.input-group-text
{
  border-radius: 3px;
  padding: .5rem;
}
.project_public_icon
{
  position: absolute;
  top: 25px;
  right: 32px;
  width: 60px;
  text-align: center;
  cursor: pointer;
}
/* DROPZONE */
.dz-error-mark path
{
  fill: #f74545cf;
}
.dropzone
{
  border: 2px dashed #dee2e6;
}
.dropzone .dz-preview .dz-error-message
{
  top:145px;
}
.dropzone .dz-preview.dz-processing .dz-progress
{
  margin-top: 15px;
}
.dropzone .dz-preview .dz-progress
{
  left: 38%;
  width: 114px;
}
.dropzone .dz-preview .dz-progress .dz-upload
{
  background: linear-gradient(to bottom, #55b215, #0c6c1f);
}
.dropzone .dz-preview .dz-progress .dz-upload.initializing
{
  background: linear-gradient(to bottom, #a3a3a3, #555);
}
.dropzone .dz-preview.dz-processing .dz-progress-text
{
  color: #211c1c;
  position: relative;
}
.dropzone .dz-preview .dz-image
{
  width: 143px;
  height: 143px;
  cursor: pointer;
}
.dropzone .dz-preview .dz-image img
{
  height: 136px;
  object-fit: cover;
  width: 100%;
  cursor: pointer;
}
.dropzone .dz-preview .dz-details
{
  cursor: pointer;
}
.dz-preview.dz-complete .dz-image
{
  border: 4px solid #aaa;
}
.dz-preview.dz-processing .dz-image
{
  border: 4px solid #eee;
}
.dz-preview.dz-error .dz-image
{
  border: 4px solid #c42a2a!important;
}
.dz-preview.dz-success.dz-complete .dz-image
{
  border: 4px solid #14bc27;
}
.dz-preview.dz-error .dz-image
{
  border: 4px solid #c42a2a!important;
}
.dropzone .dz-preview .dz-remove,
.dropzone .dz-preview .custom-dz-remove
{
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
  color: #c42a2a;
}
.dropzone .dz-preview .dz-remove:hover,
.dropzone .dz-preview .custom-dz-remove:hover
{
  text-decoration: underline;
}
/* On complete uploads we don't display the delete button, we replace it with our own button that will trigger confirmation */
.dz-preview.dz-complete .dz-remove
{
  display: none;
}
/* FORMS END */
/* TAGS AND SUGGESTIONS BEGIN */
.twitter-typeahead
{
  display: block !important;
}
.bootstrap-tagsinput .twitter-typeahead
{
  display: inline-block !important;
}
.bootstrap-tagsinput
{
  padding: 5px 4px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.tt-menu
{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  cursor: pointer;
}
.tt-hint
{
  opacity: 0.45!important;
}
.tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
}
.tt-suggestion:hover
{
  background-color: #f8f9fa;
}
.tt-suggestion:active
{
  background-color: #33b35a!important;
}
.tt-input, .tt-hint, .tt-suggestion
{
  font-weight: 300;
  font-size: 0.9rem;
}
/* TAGS AND SUGGESTIONS END */

.thumbnail_edit_container
 {
   border: 1px dashed #BBB;
   border-radius: 4px;
   width: 100%;
   height: auto;
   cursor: pointer;
   padding: 6px 0;
   margin-top: 24px;
   margin-bottom: 20px;
   text-align: center;
 }
.thumbnail_edit_container label
{
  width: 100%;
  margin-bottom: 5px;
}
.thumbnail_edit_container .thumbnail_image
{
  margin-bottom: 4px;
  background-color: white;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 200px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  display: inline-block;
}
#categories_admin .thumbnail_edit_container .thumbnail_image
{
  width: 95%;
  height: 260px;
  background-size: cover;
}
.thumbnail_edit_container:hover .thumbnail_image
{
  opacity: 0.7;
}
.thumbnail_edit_container .thumbnail_edit_input
{
  display: none;
}
.thumbnail_edit_container small
{
  width: 100%;
  display: inline-block;
}
/*FORMS END*/
/*BUTTONS BEGIN*/
.btn
{
  border-radius: 3px;
  border: 1px solid #ececec;
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--main-text-color);
  box-shadow: 0 1px 1px rgba(0,0,0,.075);
  padding: 0.34rem 0.8rem
}
.body_global .btn
{
  color: var(--main-active-color);
}

.btn:hover
{
  box-shadow: 0 1px 3px rgba(0,0,0,.075) inset;
}
.btn-block
{
  display: block;
  width: 100%;
}
.btn-light
{
  color: var(--main-text-color) !important;
  border: 1px solid var(--main-border-color);
}
.btn-light:hover
{
  border: 1px solid var(--main-border-color);
}
.btn-danger
{
  border: 1px solid #b92b39;
  color: white;
}
.btn-danger:focus
{
  color: white;
}
.btn-success
{
  border: 1px solid #208538;
  color: white;
}
.btn-success:focus
{
  color: white;
}
.btn-info
{
  border: 1px solid #1f8ea0;
  color: white;
}
.btn-info:focus
{
  color: white;
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle
{
  box-shadow: none;
  -webkit-box-shadow: none;
}
.btn i.fas
{
  margin-right: 12px;
}
.pagination-buttons .btn i.fas
{
  margin-right: 0;
}
.body_global .pagination-buttons .btn
{
  width: 100%;
  font-size: 24px!important;
  font-family: TEKO, sans-serif!important;
  line-height: 1.1;
  text-transform: uppercase;
  color: black;
  background-color: white;
  padding: 0.56rem 1.05rem;
  border: 1px solid black;
  border-radius: 0;
  text-align: center;
}
.body_global .pagination-buttons .btn.active
{
  border: 1px solid black!important;
}
.front-button
{
  width: 100%;
  height: 70px;
  font-size: 24px!important;
  font-family: TEKO, sans-serif!important;
  line-height: 1.1;
  text-transform: uppercase;
  color: black;
  background-color: white;
  padding: 0.56rem 1.05rem;
  border: 1px solid black;
  border-radius: 0;
  text-align: center;
}
.front-button-active, .front-button:hover
{
  background-color: var(--main-active-color);
}
/*BUTTONS END*/
/*TABLES BEGIN*/
thead, th
{
  background-color: var(--card-headers-bg-color)!important;
}
thead
{
  border-top: 1px solid rgba(0,0,0,.125);
  border-bottom: 1px solid rgba(0,0,0,.125);
  font-size: 12px;
  font-weight: 500;
}

.table td, .table th
{
  vertical-align: middle !important;
  padding: 0.5rem 0.65rem;
}
tr>:first-child
{
  padding-left: 1rem;
}
.avatar
{
  background-color: white;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 36px; height: 36px;
  float: left;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
}
#table_categories .avatar
{
  width: 138px;
}
.table-indent
{
  height: 48px;
  display: inline-block;
}
.table-indent img
{
  opacity: 0.25 ;
  height: 100%;
}
/*TABLES END*/
label
{
  cursor: pointer;
  font-size: 1rem;
}
label.large-label
{
  font-size: 1.2rem;
}
p > a
{
  /*color: #ff6460;*/
  padding: .25em .4em
}
a
{
  color: var(--main-link-color)
}
.body_global a
{
  cursor: pointer;
  color: var(--main-front-link-color);
  font-weight: bold;
  text-decoration: none; /* no underline */
;
}
a:hover
{
  color: #6360c1;
  text-decoration: none;
}
.body_global a:hover
{
  color:var(--main-active-color);
}
a:focus
{
  color: #6360c1;
  text-decoration: none;
}
a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.2 !important;
}
.row
{
  margin-left: 0;
  margin-right: 0;
}
button>a
{
  width: 100%;
  display: inline-block;
}

.badge
{
  padding: 8px;
  border-radius: 3px;
  font-size: 1em;
}
.badge-light
{
  color: #343a40 !important;
}
a.badge:hover
{
  /*noinspection CssUnresolvedCustomProperty*/
  color: var(--bs-badge-color);
}
.department-badge
{
  color: var(--main-text-color);
  border: 2px solid;
  padding: 6px 12px;
  font-weight: 600;
}
a.department-badge:hover
{
  color: var(--main-text-color)!important;
}
.modal-dimmed
{
  filter: brightness(0.5);
  transition: filter 0.3s ease;
}

#footer {
  position: absolute;
  width: 100%;
  background: #000;
  padding: 30px 0;
  bottom: 0;
}
.body_members #footer
{
  padding: 7px 0;
  background: #292929;
}

#footer .row
{
  padding: 0.1rem 0.4rem;
}
#footer p
{
  color: #c6c8cc;
  margin: 0;
  font-size: 16px;
}
.alert
{
  border-radius: 3px;
}
.body_global .alert
{
  margin-left: -8px;
  margin-right: -8px;
}

/*TAGS*/
.jqTcContainer
{
  background: transparent!important;
  margin-left: auto;
  margin-right: auto;
}
.jqTcTag, .tag-badge
{
  border-radius: 0!important;
  border: 1px solid black;
  font-family: TEKO, sans-serif!important;
  color: black!important;
  background-color: white!important;
}
body#projects .tag-badge
{
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 4px;
}
.jqTcTag:hover,.tag-badge:hover
{
  /*box-shadow: 0 0 2px 1px #aaa!important;*/
  background-color: var(--main-active-color)!important;
}
.jqTcTag-active
{
  background-color: var(--main-active-color)!important;
}
.jqTcTag-active:hover
{
  background-color: var(--main-active-color)!important;
}
.jqTcTag a
{
  font-weight: 400;
}
.jqTcTag a:hover
{
  color: black;
  text-decoration: none!important;
}
/* HOME PAGE */
#welcome-banner
{
  margin-left: -15px;
  width: calc(100% + 30px);
}
/* CATEGORY PAGE*/
#categories .banner
{
  margin-left: -15px;
  width: calc(100% + 30px);
  height: 500px;
  background-size: cover;
  background-position: center;
}
/* PROJECT PAGE*/
.project .card-header .department-logo
{
  position: absolute;
  width: 45px;
  height: 45px;
  top: 5px;
  right: 7px;
}
.project .card-body img
{
  object-fit: cover;
  display: block;
  border-radius: 3px;
  width: 100%;
  height:auto;
  cursor: pointer;
}
.project .card-title
{
  font-size: 24px;
}
.project .card-subtitle
{
  font-size: 22px;
}
.project a
{
  color: #375e9b;
}
/* GRID ELEMENTS */
.grid-element
{
  box-shadow: none;
  transition: all .2s ease-in-out;
}
.grid-element:hover
{
  box-shadow: 0 0 13px rgba(33,33,33,.25);
}
.grid-element img
{
  object-fit: cover;
  background-color: #eaeaea; /* Set a background color to show when the image is not found */
  display: flex; /* Enable flexbox to center the placeholder text/image */
  justify-content: center; /* Center the placeholder horizontally */
  align-items: center; /* Center the placeholder vertically */
  font-size: 16px; /* Adjust the font size for placeholder text */
  color: #666; /* Set the placeholder text color */
  text-align: center; /* Center the placeholder text */
  width: 100%; /* Ensure the image occupies the full width of its container */
}
.selection-background
{
  background-color: #fdfbfb;
  box-shadow: inset 0 0 5px #d6d6d6;
  border-radius: 3px;
  /*noinspection CssUnresolvedCustomProperty*/
  border:var(--bs-border-width) solid var(--bs-border-color);
  min-height: 72px;
  padding: 10px 10px 0;
}
.selection-background-selected
{
  /*noinspection CssUnresolvedCustomProperty*/
  box-shadow: inset 0 0 5px var(--bs-success);
  /*noinspection CssUnresolvedCustomProperty*/
  border:var(--bs-border-width) solid var(--bs-success)
}

.selection-background .card
{
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  margin-bottom: 10px;
}
/* Animation for adding a card (fade in and move slightly up) */
.selection-background .card.adding {
  transform: translateY(-10px);
  opacity: 0;
}
/* Animation for removing a card (fade out and move slightly down) */
.selection-background .card.removing {
  transform: translateY(10px);
  opacity: 0;
}
/* PROJECT GRID ELEMENTS */
.project-grid-element
{
  border: 1px solid black;
  border-radius: 0;
}

.project-grid-element img
{
  height: 260px;
}
.project-grid-element .card-body
{
  padding: 0.56rem 1.05rem;
  height: 66px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.project-grid-element:hover .card-body
{
  background-color: var(--main-active-color);
}
.project-grid-element h5.card-title
{
  color: black!important;
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  font-weight: normal;
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;

  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

/* ASSETS GRID ELEMENTS*/
.asset-grid-element
{
  height: 100px;
}
.asset-grid-element h4
{
  color: #375e9b;/*todo this should be in var()*/
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 51px;
  margin-bottom: 5px;
}
.asset-grid-element img
{
  height: 100%;
}
.asset-grid-element .row, .asset-grid-element [class*="col-"]
{
  height: 100%;
}
/* PEOPLE - PERSON*/
.person-select-card
{
  cursor: pointer;
}
.person-select-card .person-select-arrow
{
  position: absolute;
  top: 10px;
  right: 10px;
}
.person-select-card .person-select-arrow i
{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.person-select-card:hover .person-select-arrow i
{
  opacity: 1;
  visibility: visible;
}
#people_selection .person-select-card .person-select-arrow i:before
{
  content: "\f30b";
  color: #28a745 !important;
}
#people_selection .person-select-card .form-group
{
  display:none;
}
#selected_people .person-select-card .person-select-arrow i:before
{
  content: "\f30a";
  color: #dc3545 !important;
}
#selected_people .person-select-card .form-group
{
  display:block;
}