:root {
       --bs-primary: #225256;
       --bs-link-color: #225256;
       --bs-primary-rgb: 34, 82, 86;
       --bs-link-hover-color: #17383b;
   }

   .dropdown-menu {
       --bs-dropdown-link-active-bg: #17383b;
   }

   .pagination {
       --bs-pagination-active-bg: #17383b;
       --bs-pagination-active-border-color: #17383b;
   }

   @font-face {
       font-family: 'Inter-Regular';
       src: url('../fonts/Inter-SemiBold.ttf');
   }

   body {
       -webkit-font-smoothing: antialiased;
       font-family: "Inter", sans-serif;
       font-optical-sizing: auto;
       font-size: 1.0rem;

   }

   .turbo-progress-bar {
       height: 5px;
       background-color: #225256;
   }

   .text-brand {
       white-space: nowrap;
       overflow: hidden;
       letter-spacing: -2px;
   }

   .bg-green {
       background: #225256;
       background: linear-gradient(180deg, rgba(34, 82, 86, 1) 15%, rgba(89, 143, 148, 1) 65%, rgba(169, 215, 219, 1) 92%, rgba(255, 255, 255, 1) 100%);
       color: #fff;
   }

   .bg-green-2 {
       background: #225256;
       color: #fff;
   }

   .bg-success {
       background-color: #225256 !important;
   }

   a {
       color: #333;
   }

   /* width */
   ::-webkit-scrollbar {
       width: 10px;
   }

   /* Track */
   ::-webkit-scrollbar-track {
       background: transparent;
   }

   /* Handle */
   ::-webkit-scrollbar-thumb {
       background: #333;
   }

   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
       background: #000;
   }

   .navbar-brand {
       font-weight: bold;
       color: white;
       padding-left: 0;
       margin-bottom: 3px;
   }

   .dropdown-divider {
       margin: 0;
   }

   p {
       margin-bottom: 0;
   }

   a {
       text-decoration: none;
   }

   .table td {
       vertical-align: middle;
   }

   .table {
       border-top-color: transparent;
   }

   .table tr:last-child td {
       border-bottom: 0;
   }

   .table tbody>tr:last-child {
       border-style: none;
   }

   .table,
   .pagination {
       margin-bottom: 0;
   }

   .table thead th {
       text-transform: uppercase;
       font-size: 14px;
   }

   .alert .alert-primary {
       background-color: #2a9fd6;
   }

   #consent-popup {
       background-color: #2a9fd6 !important;
       border: 0px !important;
       font-size: 16px !important;
       top: 80px !important;
   }

   .popover-header {
       background-color: #2a9fd6;
   }

   /*
 * --------------------------------------------------------------------------
 * PASSWORDS
 * --------------------------------------------------------------------------
 */


   div#pass-meter .segment {
       display: block;
       background: var(--bs-white);
       border: 1px solid var(--bs-light-grey);
       height: 5px;
       width: 30px;
   }

   div#pass-meter .segment:last-child {
       margin-right: 0;
   }

   div#pass-meter.good .segment {
       background-color: var(--bs-success);
       border-color: var(--bs-success);
       border-bottom: 1px solid var(--bs-white);
   }

   div#pass-meter.warn .segment {
       background-color: var(--bs-warning);
       border-color: var(--bs-warning);
       border-bottom: 1px solid var(--bs-white);
   }

   div#pass-meter.bad .segment {
       background-color: var(--bs-danger);
       border-color: var(--bs-danger);
   }

   div#pass-meter.str-1 .segment:nth-child(2),
   div#pass-meter.str-1 .segment:nth-child(3),
   div#pass-meter.str-1 .segment:nth-child(4) {
       background-color: var(--bs-white);
       border-color: var(--bs-light);
   }

   div#pass-meter.str-2 .segment:nth-child(3),
   div#pass-meter.str-2 .segment:nth-child(4) {
       background-color: var(--bs-white);
       border-color: var(--bs-light);
   }

   div#pass-meter.str-3 .segment:nth-child(4) {
       background-color: var(--bs-white);
       border-color: var(--bs-light);
   }

   #pass-suggestions {
       text-align: center;
       color: var(--bs-grey);
       font-size: 0.8rem;
   }

   .pass-match-wrap {
       display: flex;
       align-content: center;
       justify-content: center;
       width: 53px;
   }

   .pass-match,
   .pass-not-match {
       display: inline-block;
       margin: auto;
       font-size: 20px;
       font-weight: bold;
       color: var(--bs-success);
   }

   .pass-not-match {
       color: var(--danger);
   }


   .collapsible .signal {
       position: absolute;
       right: 5px;
   }

   /* Eye positioning in inputs */
   .pass-eye-parent {
       position: relative;
   }

   .pass-eye {
       position: absolute;
       color: var(--bs-grey);
       top: 50%;
       right: 13px;
       transform: translateY(-50%);
       cursor: pointer;
   }

   .pass-eye-register {
       right: 20px;
   }

   /*
 * --------------------------------------------------------------------------
 * ALERTS
 * --------------------------------------------------------------------------
 */

   #alerts-wrapper {
       position: relative;
   }

   #alerts-wrapper .alert-dismissible .btn-close {
       font-size: 1rem;
       padding: 1rem;
   }

   .alert {
       --bs-alert-margin-bottom: 0;
   }

   #alerts-wrapper .alert {
       border: 1px solid var(--bs-light-grey);
       opacity: 0.95;
       border-radius: 0;
       padding: 10px;
       text-align: center;
       font-size: 1rem;
       color: #333;
   }

   #alerts-wrapper .alert-info {
       border-bottom: 3px solid var(--info);
   }

   #alerts-wrapper .alert-warning {
       border-bottom: 3px solid var(--warning);
   }

   #alerts-wrapper .alert-danger {
       border-bottom: 3px solid var(--danger);
       --bs-alert-bg: #f20209;
       background-color: #f20209;
   }

   #alerts-wrapper .alert-success {
       border-bottom: 3px solid var(--bs-success);
   }

   /*#alerts-wrapper button {*/
   /*    border: none;*/
   /*    background-color: transparent;*/
   /*    font-size: 1.5rem;*/
   /*    position: absolute;*/
   /*    right: 5px;*/
   /*}*/

   .text-info {
       color: var(--info);
   }

   .text-danger {
       color: var(--danger);
   }

   .text-warning {
       color: var(--warning);
   }

   .text-success {
       color: var(--bs-success);
   }


   .dropdown-toggle::after {
       margin-left: -1px !important;
   }

   #topbar i {
       margin-right: 3px;
   }

   #topbar .dropdown-toggle {
       white-space: normal;
   }

   #topbar {
       background-color: #225256
   }

   #topbar .nav-link.active {
       font-weight: bold;
   }

   .body-post,
   .body-post img {
       max-width: 100%;
   }

   .card {
       box-shadow: 0 2px 1px rgba(0, 0, 0, .04), inset 0 -1px 2px rgba(0, 0, 0, .05);
       background-clip: padding-box;
       background-color: #fbfbfb;
   }

   input,
   textarea {
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       transition: border linear 0.2s, box-shadow linear 0.2s;
   }

   input,
   textarea,
   select,
   .uneditable-input {
       display: inline-block;
       color: #555;
       border: 1px solid #ccc;
   }

   input[type="file"] {
       border: none;
       box-shadow: none;
   }

   .form-control:focus,
   .form-select:focus {
       border: 3px solid #1f868f;
       box-shadow: none;
   }

   .btn-primary {
       box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.8);
       background-image: -webkit-linear-gradient(bottom, rgba(32, 164, 222, 1), rgba(74, 181, 228, 1));
       color: #fff;
       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
       border: 1px solid #2f89b1;
       background-color: #1da3dd;
   }

   .btn-success {
       box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.8);
       background-image: -webkit-linear-gradient(bottom, #76a83f, #97da50);
       color: #fff;
       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
       border: 1px solid #5c862e;
       background-color: #73a839;
   }

   .modal-footer,
   .card-footer {
       background-color: #f5f5f5;
       border-top: 1px solid #ddd;
   }

   .feature-card {
       min-height: 110px;
   }

   .feature-icon-small {
       width: 3rem;
       height: 3rem;
   }

   /*
 * --------------------------------------------------------------------------
 * OFFLINE
 * --------------------------------------------------------------------------
 */
   .alert-offline {
       font-size: 14px;
       margin-bottom: 0;
       padding: 7px;
       text-align: center;
       opacity: 0.7;
   }

   .alert-offline:hover {
       opacity: 1.0;
   }

   .main.offline {
       top: 37px;
   }

   /*
 * --------------------------------------------------------------------------
 * FRONT PAGE
 * --------------------------------------------------------------------------
 */

   .wrapper {
       padding-top: 10rem;
       position: relative;
   }

   .wrapper .card {
       opacity: 0;
       pointer-events: none;
       position: absolute;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       animation: animate 15s linear infinite;
       animation-delay: calc(3s * var(--delay));
   }

   .outer:hover .card {
       animation-play-state: paused;
   }

   .wrapper .card:last-child {
       animation-delay: calc(-3s * var(--delay));
   }

   @keyframes animate {
       0% {
           opacity: 0;
           transform: translateY(100%) scale(0.5);
       }

       5%,
       20% {
           opacity: 0.4;
           transform: translateY(100%) scale(0.7);
       }

       25%,
       40% {
           opacity: 1;
           pointer-events: auto;
           transform: translateY(0%) scale(1);
       }

       45%,
       60% {
           opacity: 0.4;
           transform: translateY(-100%) scale(0.7);
       }

       65%,
       100% {
           opacity: 0;
           transform: translateY(-100%) scale(0.5);
       }
   }

   .tabs-profile {
       padding-right: 19.5rem;
       padding-left: 19.5rem;
   }

   #notification-list {
       max-height: 50vh;
       overflow-y: auto;
   }