/* Typography */
/* ------------------------------------------------------------------------------ */
@font-face {
    font-family: pn;
    src: url('/fonts/ProximaNova-Reg-webfont.woff');
}
@font-face {
    font-family: pnb;
    src: url('/fonts/ProximaNova-Bold-webfont.woff');
}
@font-face {
    font-family: pnl;
    src: url('/fonts/ProximaNova-Light-webfont.woff');
}
@font-face {
    font-family: pnsb;
    src: url('/fonts/ProximaNova-Sbold-webfont.woff');
}
@font-face {
    font-family: scp;
    src: url('/fonts/SourceCodePro-Regular.woff');
}
@font-face {
    font-family: scpl;
    src: url('/fonts/SourceCodePro-Light.woff');
}
@font-face {
    font-family: scpsb;
    src: url('/fonts/SourceCodePro-Semibold.woff');
}
@font-face {
    font-family: scpb;
    src: url('/fonts/SourceCodePro-Bold.woff');
}
@font-face {
    font-family: pf;
    src: url('/fonts/PlayfairDisplay-Regular.woff');
}
.fx-2 { font-size: 2em !important; }
h1, .h1 { font: 36px pf; }
h2, .h2 { font: 28px pf; }
h3, .h3 { font: 24px pf; }
h4, .h4 { font: 22px pf; }
h5, .h5 { font: 17px pf; }
h6, .h6 { font: 15px pf; }
h1 .small, h2 .small, h3 .small, h1 .small, h2 .small, h3 .small { font-size: .6em; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p { margin: 10px 0; }
.nowrap { white-space: nowrap; }
.uc { text-transform: uppercase; }
.ucf { text-transform: capitalize; }
.lc { text-transform: lowercase; }
.italic { font-style: italic; }
.light { font-family: 'pnl', sans-serif; }
.pn { font-family: 'pn', sans-serif; }
.scp { font-family: 'scp', sans-serif; }
.scpl { font-family: 'scpl', sans-serif; }
.scpsb { font-family: 'scpsb', sans-serif; }
strong, .strong { font-family: 'pnb' }
.semi-strong { font-family: 'pnsb', sans-serif; }
.nl { line-height: 25px; }
.point:hover { cursor: pointer; }
.page-title {
    font: 30px pf,sans-serif;
    letter-spacing: 0.5px;
    color: #2b3543;
    padding: 0;
    margin: 0;
    line-height: 40px;
    display: flex;          /* This is added to enable flexbox on the container */
    align-items: center;    /* This vertically centers the flex items */
    white-space: nowrap; /* This will prevent wrapping on the main title */
}
.modal-header .page-title { font: 24px pf,sans-serif; }
.page-title .sub {
    font: 18px pnl;
    color: #5d7391;
    margin-left: 35px;
    font-family: pn;
}
.page-title .sub label {
    font: 14px pnl;
    text-transform: uppercase;
}
.card-title {
    font: 18px pnsb;
    line-height: 24px;
    color:  #414b56;
}
.card-title.light { font-family: pn }
.sub-title {
    font:  21px pf;
    color:  #495a72;
    padding-bottom:  15px;
}
small, .small {
    letter-spacing: 1px;
    font-size: .85em;
}
label, .label {
    font-size: .95em;
    font-family: 'pn', sans-serif;
    letter-spacing: 1px;
    color: #69809f;
    font-weight: normal;
}
label.small, .label.small { font-size: .85em;  }
.control-label {
    margin: 5px 0 0 0;
    letter-spacing: 1px;
    text-transform: capitalize;
    font-family: 'pn';
    color:  #69809f;
    font-size: 1em;
    width:  100%;
}
p,.p { line-height: 1.6180em; }
.not-set { 
    color: #bbb;
    font-size: .9em;
    font-style: italic;
}


/* Layout */
/* ------------------------------------------------------------------------------ */
.tn-space { padding: 7px; }
.sm-space { padding: 15px; }
.md-space { padding: 25px; }
.lg-space { padding: 35px; }
.vlg-space { padding: 50px; }
.tn-br { margin-top: 10px; margin-bottom: 10px; }
.sm-br { margin-top: 20px; margin-bottom: 20px; }
.md-br { margin-top: 30px; margin-bottom: 30px; }
.lg-br { margin-top: 40px; margin-bottom: 40px; }
.vlg-br { margin-top: 50px; margin-bottom: 50px; }
.tn-br-s { margin-left: 10px; margin-right: 10px; }
.sm-br-s { margin-left: 20px; margin-right: 20px; }
.md-br-s { margin-left: 30px; margin-right: 30px; }
.lg-br-s { margin-left: 40px; margin-right: 40px; }
.vlg-br-s { margin-left: 40px; margin-right: 50px; }
.no-wrap { white-space: nowrap; }
.sep { padding: 0 5px; }
.no-p {
    padding: 0 !important;
    margin: 0 !important;
}
.tn-push-right { margin-right: -5px; }
.no-p-l {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.no-p-r {
    padding-right: 0 !important;
    margin-right: 0 !important;
}
.no-p-t {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.no-p-b {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.hide { display: none !important; }
.col-l { padding-left: 0; }
.col-r { padding-right: 0; }
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.fa-normal i { font-size: 1em !important; }


/* Header */
/* ------------------------------------------------------------------------------ */
nav, {
    border: 0;
    margin: 0;
}
    .navbar { margin-bottom: 20px }
nav .navbar-container {
    padding: 0 10px 0 10px;
}
nav .btn-link {
    margin: 5px 5px 0 0;
}
nav .btn-link { color: #495a72 }
nav .btn-link:hover,
nav .btn-link:focus { color: #1DA1F2; }
nav .navbar-right { 
    display: flex;
    align-items: center; 
    justify-content: flex-end;
    padding-right: 10px;
}
nav .nav.navbar-right > li > a { color: #777; }
nav .nav.navbar-right > li > a:hover,
nav .nav.navbar-right > li > a:focus {
    background-color: transparent; 
    color: #333;
}
nav .navbar-right > li.add-new .dropdown-menu { margin: -15px 15px 0 0; }
nav .navbar-right > li.profile .dropdown-menu { margin-top: -2px;}
nav .navbar-nav > li {
    display: flex;
    align-items: center;
}
nav .navbar-right .btn-notifications a {
    margin-left: 10px;
    color: #777;
}
nav .navbar-right .btn-alerts .fa { font-size: 26px; }
nav .navbar-right .fa.fa-user-circle-o:hover { color: #333; }
nav .navbar-right .fa.fa-user-circle-o {
    font-size: 26px;
    margin-left: 10px;
    color: #777;
}
a.text,
.btn.text {
    display: flex;
    align-items: center; /* Vertically aligns the icon and text */
}

a.text i.fa,
.btn.text i.fa {
    padding-right: 10px;
    display: inline-block;
}
a.text.right i.fa,
.btn.text.right i.fa {
    padding-right: 0;
    padding-left: 10px;
}

.main-content { position: relative; }
.message-main { 
    position: fixed;
    z-index: 99999;
    left: 40px;
    top: 70px;
    width: fit-content;
}
.message-main .alert {
    position: relative; 
    max-width: 100%; 
    width: auto; 
    min-height: 50px;
    padding: 10px 15px;
    border: 0;
    color: #333;
    font: 1.05em pnl;
    line-height: 30px;
    letter-spacing: 1px;
    box-shadow: 0 0.5px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    text-align: left; /* Align text to the left */
    margin-bottom: 0;
}
.message-main .btn-close-alert { line-height: 60px }
.message-main .alert-success { background: #e0f0fa; }
.message-main .btn {
    vertical-align:  middle;
    font-size:  2em;
    margin:  -15px -10px 0 20px;
    color:  #888;
}
.btn.text i.fa { padding-right: 10px; }
.clear { padding: 0; margin: 0; }
.hidden {display: none;}
.no-wrap {  white-space: nowrap;  }
.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}
.no-shadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/* Navigation */
/* ------------------------------------------------------------------------------ */
.dropdown-menu-end {
    right: 0;
    left: auto;
}
.dropdown:hover .dropdown-menu {  display: block;  }
.dropup:hover .dropdown-menu {  display: block;  }
.dropdown-menu i {
    min-width: 15px;
    text-align: center;
}
.dropdown-menu li.disabled a,
.dropdown-menu li.disabled a:focus,
.dropdown-menu li.disabled a:hover { color: #ddd; }
.dropdown-menu > li a
 {
    line-height: 25px;
    letter-spacing: 1px;
    text-align: left;
    color: #555;
}
.dropdown-menu > li a i,
.dropdown-menu > li a img { width: 15px; }
.dropdown-menu li a:focus,
.dropdown-menu li a:hover { color: #1da1f2;}
.dropdown-menu li a {
    padding-top: 6px;
    padding-bottom: 6px;
    font: 15px 'pnl';
    opacity:  1;
    background-color: #fff;
}
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover,
.dropdown-menu > li.active > a:focus {
   background-color: #1da1f2;
   color: #fff !important;
}
.dropdown-header {
    font: 16px pnl;
    letter-spacing: 1px;
    line-height: 25px;
    color:  #5d7391;
    padding: 10px 20px;
}
.nav > li > a { letter-spacing: 1px; }
.nav-pills > li > a {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
    border-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    margin-right: 40px;
    color: #47759e;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: transparent;
    color: #1DA1F2;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    color: #354153;
    background-color: transparent;
    border-bottom: solid 3px #1DA1F2;
}
.nav-pills > li.active > a:hover { 
    background-color: transparent;
    color: #1DA1F2;
}
.nav-pills > li.active.dropdown li.active {
    background-color: transparent;
    color: #354153;
}
.nav-sidebar {
    width: 240px;
    background: #eee;
    border-radius: 10px;
    padding: 20px 0;
}
.nav-sidebar.nav-pills > li > a { 
    color: #333;
    border-left: solid 3px transparent;
    font: 15.5px pn;
}
.nav-sidebar.nav-pills > li > a:hover,
.nav-sidebar.nav-pills > li > a:focus { color: #1DA1F2; }
.nav-sidebar.nav-pills > li { 
    margin-left: 0 !important;
    margin-bottom: 10px;
}
.nav-sidebar.nav-pills > li > a > i { 
    margin: 0 10px 0 20px;
    font-size: 1.05em;
}
.nav-sidebar.nav-pills > li.active > a,
.nav-sidebar.nav-pills > li.active > a:focus,
.nav-sidebar.nav-pills > li.active > a:hover {
    color: #1DA1F2 !important;
    background-color: transparent;
    border: none ; 
    border-left: solid 3px #1DA1F2; 
    border-radius: 0; 
}
.header-content-container { 
    border-bottom: solid 1px #e0e0e0;
}

.header-content-container ul.nav-pills { 
    margin-top: 20px;
    position: relative;
    top: 2px;
}

.header-content-container ul.nav-pills .dropdown-menu { 
    margin-top: -1px; 
}

/* Flexbox for the row container */
.d-flex {
    display: flex;
    justify-content: space-between;  /* Space out content between left and right */
    align-items: flex-start;         /* Align items to the top */
}

/* Left section takes available space */
.header-left {
    flex-grow: 1;  /* Ensures the left side takes up available space */
}

/* Right section (page links) should not wrap or shrink */
.header-right, .page-header-links {
                /*  white-space: nowrap; Prevent wrapping of content */
    display: flex;                   /* Use flexbox for inline items */
    justify-content: flex-end;       /* Align content to the right */
    flex-shrink: 0;                  /* Prevent the right section from shrinking */
}
.tt-menu {
    background: #fff;
    border: solid 1px #cdd2d6;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    width: 120%;
}
.tt-menu i {
    color: #777;
    line-height: 30px;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
.tt-menu .tt-suggestion {
    padding: 4px 15px;
    letter-spacing: 1px;
    font-family: 'pn', sans-serif;
    color:  #666;
}
.tt-menu .tt-suggestion:hover,
.tt-menu .tt-suggestion:focus {
    background: #e0f0fa;
    cursor: pointer;
}
.tt-highlight {
    color:  #000;
    background-color:  #e0f0fa;
}
.dropdown-menu { border-radius: 0; }
.ui-autocomplete { font-size: .95em; }
.circular-button {
    width: 50px;
    height: 50px !important;
    border-radius: 50%;
    background-color: #5889b4;
    border: none;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.circular-button .fa { font-size: 1.25em; }

/* Modals */
/* ------------------------------------------------------------------------------ */
.modal.show {
    display: block !important; /* Force visibility */
    opacity: 1 !important;
    z-index: 1050 !important;
}

.modal.fade .modal-dialog {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.1s;
}

.modal.fade.show .modal-dialog {
    transform: scale(1); /* Keep only one transform */
    opacity: 1;
}

.modal-dialog {
    text-align: left;
    vertical-align: middle; 
}

.modal-content {
    border: 0;
    border-radius: 5px;
}

.modal-body {
    padding: 0 35px 0 35px;
    font-size: 1.05em;
}

.modal-header {
    padding: 20px 30px;
    border-bottom: 0;
}

.modal-footer {
    border-top: 0 !important;
}

.modal-backdrop {
    opacity: 0.25 !important;
}

.btn-modal-close {
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 40px !important;
    z-index: 10000;
}
/* Forms */
/* ------------------------------------------------------------------------------ */
select { min-height: 45px !important; }
.button:focus, button:focus { box-shadow: none !important; }
input, input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=pattern], select, textarea {
    background-color: #fafafa !important;
}
input[type=file] {
    height: 50px;
    cursor: pointer;
    padding: 10px; /* Total Padding: 20px (left + right) */
    border: 2px dashed #ccc; /* Total Border: 4px (left + right) */
    background-color: #f5f5f5;
    border-radius: 10px;
    box-sizing: border-box;
    width: calc(100% - 24px); /* Subtract the total padding and border from 100% */
}
.form-control {
    color: #414b56;
    letter-spacing:  1px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border-radius: 10px;
    border: 1px solid rgb(225, 229, 230); /* #94a2b8; */
    height: 45px;
    margin: 5px 0;
    font-size: 15.5px;
}
.form-control:hover {
    background-color: #f0f0f0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.form-control:focus {
    border: solid 1px #1DA1F2 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.form-control::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999;
    font-family: pnl;
    letter-spacing: 1px;
}
.form-control[disabled], fieldset[disabled] .form-control {
    background-color: #f3f3f3 !important;
    color: #999;
}
ul.sel-items > li {
    padding: 25px;
    margin: 0 20px 10px 0;
    background-color:  #fafafa;
    color:  #666;
    border: solid 1px #d5dae2;
    border-radius: 25px;
    font: 1.2em pnl;
}
ul.sel-items > li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
ul.sel-items > li:focus,
ul.sel-items > li.active {
    border: solid 1px #333;
    color: #333;
    cursor: pointer
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
div[role=radiogroup] > label { margin-right: 15px; }
.glyphicon { padding-right: 5px; }
textarea { padding: 12px !important }
.form-group .checkbox-list { align: center; }
.form-group .checkbox-list label,
.checkbox label {
    color: #333;
    font: 1em pn;
}
.checkbox-list label,
label.checkbox,
.check-list label,
.checkbox label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .95em;
}
.checkbox-list label,
.form-group input[type=checkbox],
.form-group input[type=radio] {
    margin-right: 7px;
    margin-top:  2px;
}
input, input[type=text], input[type=password], input[type=date],
input[type=email], input[type=number], input[type=pattern] {
    -webkit-transition: background .1s,border .1s,color .1s;
    -moz-transition: background .1s,border .1s,color .1s;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }


/**
 * Buttons  
 * 
 * btn-link: aka <a> for page navigation (not action), with our without icon
 * btn-primary: used on page to denote main action link from when there are many
 * btn-primary-alt: used primarly to call out action on a page in a more subtle way, with our without icon
 * btn-success: any form submission
 * btn-default: used primarly as navigation when btn-link is not sufficient a callout
 * btn-extra: treated same as btn-primary-alt, but coupled with ellipsis for dropdown (h extra on row, v action items menu)
 */
a,
.btn-link,
a.blue { color: #0966a0;}
.btn-link:hover,
.btn-link:focus,
a:hover,
a:focus,
a.blue:hover,
a.blue:focus {
    text-decoration: none;
    color: #1DA1F2;
}
a.btn,
.btn {
    border-radius:  25px;
    font: 15.5px pn;
    line-height: 45px;
    height: 45px;
    padding:  0 20px;
}
.btn-default,
.btn-success,
.btn-primary,
.btn-danger,
.button, button {
    line-height: 43px; /* Adjustment for vertically misaligned buttons (except btn-link) */
    -webkit-transition: background .1s,border .1s,color .1s;
    -moz-transition: background .1s,border .1s,color .1s;
}
.btn:hover, .btn:focus, .btn:active {
    outline: none !important;
    border:  solid 1px transparent !important;
}
.btn-link {
    font-size: 1em;
    letter-spacing:  .5px;
    border:  solid 1px transparent !important;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
}
.btn-link.strong { font-family: 'pnsb', 'sans-serif'; }
.btn-link:hover,
.btn-link:focus { text-decoration: none; }
/* ------------------------------------------------*/
.btn-default {
    color: #666;
    background-color: #e9ebed;
    border: solid 1px #dbdee2;
}
.btn-default:hover,
.btn-default:focus {
    color:  #444;
    background-color: #cdd1d7;
    border: solid 1px #dbdee2;
}
.btn-default.dropdown-toggle:focus,
.btn-default.dropdown-toggle:hover { background-color: #e0e0e0 }
.btn-default.dropdown-toggle .fa-ellipsis-h {
    font-size: 1.35em;
    line-height:  20px;
    vertical-align:  middle;
}
/* ------------------------------------------------*/
.btn-primary,
.btn-extra.dropdown-toggle {
    background-color: #47759e;
    border: solid 1px #47759e;
}
.btn-primary:hover { border-color: transparent; }
.btn-extra.dropdown-toggle {
    color: #4f82b0;
    background-color:  transparent;
}
/* ------------------------------------------------*/
.btn-success {
    background-color: #47759e; 
    border: solid 1px #47759e;
}
.btn-success:hover, 
.btn-success:focus { background-color: #3f698e !important; }
/* ------------------------------------------------*/
.btn-extra { 
    width: 45px;
    line-height: 45px;
    text-align: center;
    padding: 2px 15px;
}
.btn-extra .fa-ellipsis-v { font-size:  1.5em; }
.btn-inside { 
    border-color: transparent;
    font-size: 1.5em; 
    width: 75px;
}
.btn-primary-alt { 
    color: #4f82b0;
    background-color: transparent; 
    border-color: #a8c1d8;
}
.btn-primary-alt:focus,
.btn-primary-alt:hover {  
    color: #47759e;
    background-color: #e0e0e0; 
}
/* ------------------------------------------------*/
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}
/* ------------------------------------------------*/
.btn-close {
    font-size:  3em;
    color:  #666;
    line-height: 20px;
}
.control-label .btn-reset {
    font: .9em pn;
    line-height: 20px;
    height: 25px;
    position: relative;
    bottom: -7px;
    padding-right: 5px;
}

/* ------------------------------------------------*/
.dropdown-menu {
    padding: 5px 0 !important;
}

/* Submenu should be hidden by default */
.dropdown-submenu > .dropdown-menu {
    display: none !important;
    position: absolute;
    top: 0;
    left: 100%;  /* Default: submenu opens to the right */
    margin-top: -6px;
}
/* Show submenu on hover */
.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
}
.dropdown-submenu > a {
    position: relative;  /* Make the parent <a> relative for positioning the arrow */
}

.dropdown-submenu > a::after {
    content: " ";
    display: inline-block;
    border-top: 5px solid transparent;
    border-left: 5px solid #999;  /* Arrow inherits the color of the link */
    border-bottom: 5px solid transparent;
    position: absolute;
    right: 10px;  /* Align the arrow to the right side of the submenu title */
    top: 50%;
    transform: translateY(-50%);  /* Vertically center the arrow */
}

/* Change arrow color on hover (it will still be the same as the link's color) */
.dropdown-submenu:hover > a::after {
    border-left-color: #999;  /* Keeps the arrow same as link's hover color */
}
/* Custom: If 'dropdown-submenu-right' is present, submenu opens to the left */
.dropdown-submenu-right > .dropdown-menu {
    right: 100%;  /* Override to position submenu on the left */
    left: auto;   /* Reset the default left position */
}

/* Arrow pointing left when 'dropdown-submenu-right' class is present */
.dropdown-submenu-right > a::after {
    border-left: none;
    border-right: 5px solid #ccc;  /* Arrow points to the left */
}

/* Change arrow color on hover (for left arrow) */
.dropdown-submenu-right:hover > a::after {
    border-right-color: #fff;
}


@keyframes blinkDots {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

.loading-dots {
    display: flex;
    justify-content: center; /* Horizontally center dots */
    align-items: center; /* Vertically center dots */
    gap: 5px; /* Space between dots */
    font-size: 1.5em; /* Adjust for bigger dots */
    font-weight: bold;
    margin-top: -10px;
}

.loading-dots span {
    animation: blinkDots 1.2s infinite ease-in-out;
}

/* Apply different delays to each dot for staggered effect */
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Reusable Components */
/* ------------------------------------------------------------------------------ */
.help,
help {
    font: 15px pn;
    color: #8a6d3b;
    line-height: 1.5;
    padding-top: 5px;
}
.alert-info {
    background-color: #eee;
    color: #333;
    border: 0;
}
.alert-danger.errors ul { padding-left: 15px; }
.alert { border: 0 }
.img-thumb img{ border: solid 4px #; }
.row {
    margin-left: 0;
    margin-right: 0;
}
.click-row { 
    transition: all 0.2s linear; 
    z-index: 1;
}
.hover-row:hover,
.hover-row:focus,
.click-row:hover,
.click-row:focus,
.list-group-item:hover,
.list-group-item:focus { background: #f5f5f5 !important; }
.click:hover,
.click:focus,
.click-row:hover,
.click-row:focus,
.list-group-item:hover,
.list-group-item:focus { cursor: pointer; }

.list-group-item.active,
.list-group-item.active:hover{
    background-color: #e0f0fa;
    color: #354153;
    border: solid 1px #ddd;
}
.card.click-row:hover,
.card.click-row:focus{
    transform: scale(1.02);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px 0px;
    z-index: 10;
}
.trunc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
.divider {
    height: 1px;
    margin: 20px 0;
    overflow: hidden;
    background-color: #eeeeee;
}
.divider-lg {
    height: 5px;
    margin: 40px 0;
    border-radius:  5px;
    overflow: hidden;
    background-color: #eeeeee;
}
.badge {
    border: 0;
    color: #555;
    border-radius: 5px;
    background: #f0f0f0;
    padding: 3px 10px;
    font-family: pn;
    font-size: 9pt;
    text-transform: capitalize;
    white-space: nowrap;
    line-height: 13px;
}
.badge-1.gray,
.badge-1 {
    border: 0;
    background: #f0f0f0;
    color: #666;
}
.badge-1.green {
    border: 0;
    background: #ddebdc;
}
.badge-1.maroon {
    border: 0;
    background: #f8eeee;
}
.badge-1.yellow {
    border: 0;
    background: #fff2cd;
}
.badge-1.blue {
    border: 0;
    background: #e0f0fa;
}
.badge-1.white {
    border: 0;
    background: #fff;
    color: #777;
}
.badge-1.purple {
    border: 0;
    background: #eeeefc;
}
.badge-1.black {
    border: 0;
    background: #777;
    color:#fff;
}
.badge-1.link {
    border: 0;
    background: transparent;
    color:#0966a0;
}
.badge-border.link {border: solid 1px #0966a0; }
.badge-border.green { border: solid 1px #598f52; }
.badge-border.maroon { border: solid 1px #9e474a; }
.badge-border.yellow { border: solid 1px #ffcc9a; }
.badge-border.blue  { border: solid 1px #1DA1F2; }
.badge-border.white  { border: solid 1px #999; }
.badge-border.purple { border: solid 1px #8081eb; }
.badge-border,
.badge-border.gray  { border: solid 1px #999; }
.well { border: 0; }
.tooltip {
    min-width: 100px;
    font-family: 'pnl', sans-serif;
    letter-spacing: 0.5;
    font-size: 14px;
    opacity: 1 !important;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.tooltip-inner {
    white-space:pre-wrap;
    background-color:  #798da9;
    border: solid 1px #798da9;
    color: #edeff3;
    border-radius: 5px;
    padding: 5px 10px;
}
.tooltip-arrow { display: none; }
span[data-bs-toggle="tooltip"] {
    text-decoration: underline dashed;
    text-underline-offset: 3px;
}
[data-bs-toggle="tooltip"],
span[data-bs-toggle="tooltip"] {
    cursor: default;
}
.popover {
    opacity: 1;
    padding: 10px 20px;
    max-width: none;
}
.popover-header {
    margin-bottom: 20px;
}
.popover-body {
    margin-bottom: 20px;
}

.table { table-layout: fixed; }
.table th,
.table > thead > tr > th,
.th {
    color: #5d7391;
    font-size: .95em;
    padding: ;
    background-color: transparent;
    letter-spacing: 1px;
    border-bottom: solid 1px #eeeeee;
    font-weight: normal;
    font-family: 'pn', sans-serif;
}
.table > thead > tr > th { 
    font-family: pnsb;
}
.table > tbody > tr > td {
    border:0;
    border-top: solid 1px #eeeeee;
}
.table > thead > tr > td,
.table > tfoot > tr > td,
.table > tbody > tr > td { padding: 10px 14px; }


.table > thead > tr > th,
.table > tbody > tr > th { padding: 14px; }
.table > tbody > tr.disabled:hover { cursor: not-allowed; }
ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}
ul.info { padding: 0px 15px; }
.pagination li.active a {
    background-color: transparent;
    border: solid 1px #1DA1F2;
    color: #1DA1F2 ;
}
.pagination li a:hover,
.pagination li.active a:hover,
.pagination li a:focus,
.pagination li.active a:focus {
    background-color: #EEF1F3;
    color: #1DA1F2 ;
    border: solid 1px #1DA1F2;
}
.pagination li a { color: #666; }
.pagination li.disabled > span { color: #ddd; }
.pagination li.disabled > span:hover { color: #ddd; }
.card {
    border: 0;
    background-color: #fff;
    transition: all 0.2s ease 0s;
    border-radius:  10px;
}
.card.section {
    padding: 25px;
    margin-bottom:  30px;
    border: solid 1px #f0f0f0;

}
.card.page {
    padding: 40px;
    min-height:  500px;
    border: solid 1px #f0f0f0;
}
.summary {
    color: #777;
    padding-bottom:  10px;
}
.empty {
    color: #888;
    letter-spacing: .5px;
    padding: 10px 5px;
}
.group-by-selector {
    width: 200px;
}
.group-label {
    white-space: nowrap;
    padding: 10px 5px;
    margin-bottom: 0;
}
.group-select {
    margin: 0;
}


/* Colors */
/* ------------------------------------------------------------------------------ */
.green { color: #008040; }
.maroon { color: #9e474a !important; }
.yellow { color: #8a6d3b; }
.blue { color: #1DA1F2; }
.lt-blue { color: #5d7391; } /* b3bdcc */
.lt-blue-2 { color: #69809f; }
.lt-blue-3 { color: #798da9 }
.lt-blue-4 { color: #94a2b8; }
.lt-blue-5 { color: #f0f2f5 }
.dk-blue { color: #495a72; }
.dk-blue-2 { color: #354153; }
.dk-blue-3 { color: #2b3543; }
.vlt-gray { color: #999; }
.lt-gray { color: #777; }
.md-gray { color: #555 ; }
.dk-gray { color: #333 ; }



/* profile/alerts
--------------------------------------------------------------------------------------------------------*/


#profile-alerts .list-group-item { 
    border-color: #eee;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
#profile-alerts .list-group-item:last-child { border-color: #eee; }
#profile-alerts .list-group-item:hover { background-color: #f5f5f5; }
#profile-alerts .list-group-item:focus { background-color: #e0f0fa; }
#profile-alerts .list-group-item .subject { font-family: pnsb; }
#profile-alerts .list-group-item.unread { 
    border-left: solid 2px #1DA1F2;
    font-family: pnsb;
}
#profile-alerts #alert-detail {
    padding: 1rem 2rem;
    background: #fff;
    min-height: 50px;
    margin-bottom: 10px;
    border: solid 1px #eee;
    border-radius: 10px;
}
/* Notifications container with flexible layout */
#profile-alerts .notifications-container {
    display: flex;
    gap: 20px;
}
/* Left column for the list */
#profile-alerts .list-group-container {
    width: 350px;
    flex-shrink: 0;
    overflow-y: auto;
}
/* Right column for the alert detail */
#profile-alerts .alert-detail-container {
    flex: 1;
    padding-left: 20px;
    overflow-y: auto;
}
#profile-alerts .alert-detail-container h4 { margin-top: 0 }
/* List group styling */
#profile-alerts .list-group {
    list-style: none;
    padding: 0;
    margin: 0;
}
#profile-alerts .list-group-item {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#profile-alerts .list-group-item i {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    text-align: center;
    font-weight: bold;
    margin-right: 5px;
    color: #777;
}
#profile-alerts .list-group-item .fa { margin-right: 15px; }
#profile-alerts .list-group-item.active {
    background-color: #f5f5f5;
    font-weight: bold;
}
/* Pagination styling */
#profile-alerts .pagination-container {
    text-align: center;
    margin-top: 15px;
}