body {
  /*font-size: .875rem;*/
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Bootstrap addons
 */

.w-5{ width: 5%!important; }
.w-10{ width: 10%!important; }
.w-20{ width: 20%!important; }
.w-30{ width: 30%!important; }
.w-40{ width: 40%!important; }
.w-50{ width: 50%!important; }
.w-60{ width: 60%!important; }
.w-70{ width: 70%!important; }
.w-80{ width: 80%!important; }
.w-90{ width: 90%!important; }
.w-100{ width: 100%!important; }

.w-xs-100{ min-width: 100%!important; }
.w-sm-100{ min-width: 0!important; }
.w-md-100{ min-width: 0!important; } 
.w-lg-100{ min-width: 0!important; }  
.w-xl-100{ min-width: 0!important; } 
.w-xxl-100{ min-width: 0!important; }
.w-xs-50{ min-width: 50%!important; }
.w-sm-50{ min-width: 0!important; }
.w-md-50{ min-width: 0!important; } 
.w-lg-50{ min-width: 0!important; }
.w-xl-50{ min-width: 0!important; } 
.w-xxl-50{ min-width: 0!important; }
.w-xs-25{ min-width: 25%!important; }
.w-sm-25{ min-width: 0!important; }
.w-md-25{ min-width: 0!important; } 
.w-lg-25{ min-width: 0!important; }  
.w-xl-25{ min-width: 0!important; } 
.w-xxl-25{ min-width: 0!important; }
.w-xs-auto{ width: auto!important; }

/* Responsive widths */
@media (min-width: 576px) { 
    .w-xs-100{ min-width: 0!important; }
    .w-sm-100{ min-width: 100%!important; } 
    .w-md-100{ min-width: 0!important; } 
    .w-lg-100{ min-width: 0!important; }  
    .w-xl-100{ min-width: 0!important; } 
    .w-xxl-100{ min-width: 0!important; }
    .w-xs-50{ min-width: 0!important; }
    .w-sm-50{ min-width: 50%!important; }
    .w-md-50{ min-width: 0!important; } 
    .w-lg-50{ min-width: 0!important; }  
    .w-xl-50{ min-width: 0!important; } 
    .w-xxl-50{ min-width: 0!important; }
    .w-xs-25{ min-width: 0!important; }
    .w-sm-25{ min-width: 25%!important; }
    .w-md-25{ min-width: 0!important; } 
    .w-lg-25{ min-width: 0!important; }  
    .w-xl-25{ min-width: 0!important; } 
    .w-xxl-25{ min-width: 0!important; }
    .w-sm-auto{ width: auto!important; }
}
@media (min-width: 768px) { 
    .w-xs-100{ min-width: 0!important; }
    .w-sm-100{ min-width: 0!important; }
    .w-md-100{ min-width: 100%!important; } 
    .w-lg-100{ min-width: 0!important; }  
    .w-xl-100{ min-width: 0!important; } 
    .w-xxl-100{ min-width: 0!important; }
    .w-xs-50{ min-width: 0!important; }
    .w-sm-50{ min-width: 0!important; }
    .w-md-50{ min-width: 50%!important; } 
    .w-lg-50{ min-width: 0!important; }  
    .w-xl-50{ min-width: 0!important; } 
    .w-xxl-50{ min-width: 0!important; }
    .w-xs-25{ min-width: 0!important; }
    .w-sm-25{ min-width: 0!important; }
    .w-md-25{ min-width: 25%!important; } 
    .w-lg-25{ min-width: 0!important; }  
    .w-xl-25{ min-width: 0!important; } 
    .w-xxl-25{ min-width: 0!important; }
    .w-md-auto{ width: auto!important; }
}
@media (min-width: 992px) { 
    .w-xs-100{ min-width: 0!important; }
    .w-sm-100{ min-width: 0!important; }
    .w-md-100{ min-width: 0!important; } 
    .w-lg-100{ min-width: 100%!important; }  
    .w-xl-100{ min-width: 0!important; } 
    .w-xxl-100{ min-width: 0!important; }
    .w-xs-50{ min-width: 0!important; }
    .w-sm-50{ min-width: 0!important; }
    .w-md-50{ min-width: 0!important; } 
    .w-lg-50{ min-width: 50%!important; }  
    .w-xl-50{ min-width: 0!important; } 
    .w-xxl-50{ min-width: 0!important; }
    .w-xs-25{ min-width: 0!important; }
    .w-sm-25{ min-width: 0!important; }
    .w-md-25{ min-width: 0!important; } 
    .w-lg-25{ min-width: 25%!important; }  
    .w-xl-25{ min-width: 0!important; } 
    .w-xxl-25{ min-width: 0!important; }
    .w-lg-auto{ width: auto!important; }
}
@media (min-width: 1200px) { 
    .w-xs-100{ min-width: 0!important; }
    .w-sm-100{ min-width: inherit!important; }
    .w-md-100{ min-width: 0!important; } 
    .w-lg-100{ min-width: 0!important; }  
    .w-xl-100{ min-width: 100%!important; } 
    .w-xxl-100{ min-width: 0!important; }
    .w-xs-50{ min-width: 0!important; }
    .w-sm-50{ min-width: 0!important; }
    .w-md-50{ min-width: 0!important; } 
    .w-lg-50{ min-width: 0!important; }  
    .w-xl-50{ min-width: 50%!important; } 
    .w-xxl-50{ min-width: 0!important; }
    .w-xs-25{ min-width: 0!important; }
    .w-sm-25{ min-width: 0!important; }
    .w-md-25{ min-width: 0!important; } 
    .w-lg-25{ min-width: 0!important; }  
    .w-xl-25{ min-width: 25%!important; } 
    .w-xxl-25{ min-width: 0!important; }
    .w-xl-auto{ width: auto!important; }
}
@media (min-width: 1400px) {
    .w-xs-100{ min-width: 0!important; }
    .w-sm-100{ min-width: inherit!important; }
    .w-md-100{ min-width: 0!important; } 
    .w-lg-100{ min-width: 0!important; }  
    .w-xl-100{ min-width: 0!important; } 
    .w-xxl-100{ min-width: 100%!important; }
    .w-xs-50{ min-width: 0!important; }
    .w-sm-50{ min-width: 0!important; }
    .w-md-50{ min-width: 0!important; } 
    .w-lg-50{ min-width: 0!important; }  
    .w-xl-50{ min-width: 0!important; } 
    .w-xxl-50{ min-width: 50%!important; }
    .w-xs-25{ min-width: 0!important; }
    .w-sm-25{ min-width: 0!important; }
    .w-md-25{ min-width: 0!important; } 
    .w-lg-25{ min-width: 0!important; }  
    .w-xl-25{ min-width: 0!important; } 
    .w-xxl-25{ min-width: 25%!important; }
    .w-xxl-auto{ width: auto!important; }
}

/* Responsive positions */

.position-xs-absolute{ position: absolute;}
.position-xs-relative{ position: relative;}
.position-xs-static{ position: static;}
.position-xs-fixed{ position: fixed;}
.position-xs-sticky{ position: sticky;}

@media (min-width: 576px) { 
    .position-xs-absolute{ position: absolute;}
    .position-xs-relative{ position: relative;}
    .position-xs-static{ position: static;}
    .position-xs-fixed{ position: fixed;}
    .position-xs-sticky{ position: sticky;}
    .position-sm-absolute{ position: absolute;}
    .position-sm-relative{ position: relative;}
    .position-sm-static{ position: static;}
    .position-sm-fixed{ position: fixed;}
    .position-sm-sticky{ position: sticky;}
}
@media (min-width: 768px) { 
    .position-xs-absolute{ position: absolute;}
    .position-xs-relative{ position: relative;}
    .position-xs-static{ position: static;}
    .position-xs-fixed{ position: fixed;}
    .position-xs-sticky{ position: sticky;}
    .position-sm-absolute{ position: absolute;}
    .position-sm-relative{ position: relative;}
    .position-sm-static{ position: static;}
    .position-sm-fixed{ position: fixed;}
    .position-sm-sticky{ position: sticky;}
    .position-md-absolute{ position: absolute;}
    .position-md-relative{ position: relative;}
    .position-md-static{ position: static;}
    .position-md-fixed{ position: fixed;}
    .position-md-sticky{ position: sticky;}
}
@media (min-width: 992px) { 
    .position-xs-absolute{ position: absolute;}
    .position-xs-relative{ position: relative;}
    .position-xs-static{ position: static;}
    .position-xs-fixed{ position: fixed;}
    .position-xs-sticky{ position: sticky;}
    .position-sm-absolute{ position: absolute;}
    .position-sm-relative{ position: relative;}
    .position-sm-static{ position: static;}
    .position-sm-fixed{ position: fixed;}
    .position-sm-sticky{ position: sticky;}
    .position-md-absolute{ position: absolute;}
    .position-md-relative{ position: relative;}
    .position-md-static{ position: static;}
    .position-md-fixed{ position: fixed;}
    .position-md-sticky{ position: sticky;}
    .position-lg-absolute{ position: absolute;}
    .position-lg-relative{ position: relative;}
    .position-lg-static{ position: static;}
    .position-lg-fixed{ position: fixed;}
    .position-lg-sticky{ position: sticky;}
}
@media (min-width: 1200px) { 
    .position-xs-absolute{ position: absolute;}
    .position-xs-relative{ position: relative;}
    .position-xs-static{ position: static;}
    .position-xs-fixed{ position: fixed;}
    .position-xs-sticky{ position: sticky;}
    .position-sm-absolute{ position: absolute;}
    .position-sm-relative{ position: relative;}
    .position-sm-static{ position: static;}
    .position-sm-fixed{ position: fixed;}
    .position-sm-sticky{ position: sticky;}
    .position-md-absolute{ position: absolute;}
    .position-md-relative{ position: relative;}
    .position-md-static{ position: static;}
    .position-md-fixed{ position: fixed;}
    .position-md-sticky{ position: sticky;}
    .position-lg-absolute{ position: absolute;}
    .position-lg-relative{ position: relative;}
    .position-lg-static{ position: static;}
    .position-lg-fixed{ position: fixed;}
    .position-lg-sticky{ position: sticky;}
    .position-xl-absolute{ position: absolute;}
    .position-xl-relative{ position: relative;}
    .position-xl-static{ position: static;}
    .position-xl-fixed{ position: fixed;}
    .position-xl-sticky{ position: sticky;}
}
@media (min-width: 1400px) {
    .position-xs-absolute{ position: absolute;}
    .position-xs-relative{ position: relative;}
    .position-xs-static{ position: static;}
    .position-xs-fixed{ position: fixed;}
    .position-xs-sticky{ position: sticky;}
    .position-sm-absolute{ position: absolute;}
    .position-sm-relative{ position: relative;}
    .position-sm-static{ position: static;}
    .position-sm-fixed{ position: fixed;}
    .position-sm-sticky{ position: sticky;}
    .position-md-absolute{ position: absolute;}
    .position-md-relative{ position: relative;}
    .position-md-static{ position: static;}
    .position-md-fixed{ position: fixed;}
    .position-md-sticky{ position: sticky;}
    .position-lg-absolute{ position: absolute;}
    .position-lg-relative{ position: relative;}
    .position-lg-static{ position: static;}
    .position-lg-fixed{ position: fixed;}
    .position-lg-sticky{ position: sticky;}
    .position-xl-absolute{ position: absolute;}
    .position-xl-relative{ position: relative;}
    .position-xl-static{ position: static;}
    .position-xl-fixed{ position: fixed;}
    .position-xl-sticky{ position: sticky;}
    .position-xxl-absolute{ position: absolute;}
    .position-xxl-relative{ position: relative;}
    .position-xxl-static{ position: static;}
    .position-xxl-fixed{ position: fixed;}
    .position-xxl-sticky{ position: sticky;}
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

@media (max-width: 576px) {
    .sidebar-sticky {
      position: relative;
      top: 0;
      height: calc(100vh - 48px);
      padding-top: .5rem;
      overflow-x: hidden;
      overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

/*
.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}
*/

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/*
 * Tables
 */
.table-head-link{
    text-decoration: none;
    color: #212529;
}

.table-head-link.active, .table-head-link:hover{
    color: #0d6efd;
}

/*
 * Dashboard messages
 */
pre.dashboard .section{
    
}

/**
 * Utility classes
 */
.hidden{ display: none; }
.hidden-xs{ display: none; }


/* Responsive widths */
@media (min-width: 576px) {
    .hidden-xs{ display: none; }
    .hidden-sm{ display: none; }
}
@media (min-width: 768px) { 
    .hidden-xs{ display: none; }
    .hidden-sm{ display: none; }
    .hidden-md{ display: none; }
}
@media (min-width: 992px) { 
    .hidden-xs{ display: none; }
    .hidden-sm{ display: none; }
    .hidden-md{ display: none; }
    .hidden-lg{ display: none; }
}
@media (min-width: 1200px) { 
    .hidden-xs{ display: none; }
    .hidden-sm{ display: none; }
    .hidden-md{ display: none; }
    .hidden-lg{ display: none; }
    .hidden-xl{ display: none; }
}
@media (min-width: 1400px) {
    .hidden-xs{ display: none; }
    .hidden-sm{ display: none; }
    .hidden-md{ display: none; }
    .hidden-lg{ display: none; }
    .hidden-xl{ display: none; }
    .hidden-xxl{ display: none; }
}

.cursor-pointer{
    cursor: pointer;
}

.cursor-not-allowed{
    cursor: not-allowed;
}

.cursor-none{
    cursor: none;
}

.cursor-move{
    cursor: move;
}

.text-truncate{
    text-overflow: ellipsis;
}

.cursor-auto{
    cursor: auto;
}

/**
 * Hover class variants (for all text colors)
 * @see https://getbootstrap.com/docs/5.3/utilities/colors/
 */
.hover-text-primary:hover{
    color: var(--bs-primary) !important;
}
.hover-text-primary-emphasis:hover{
    color: var(--bs-primary-emphasis)!important
;}
.hover-text-secondary:hover{
    color: var(--bs-secondary)!important
;}
.hover-text-secondary-emphasis:hover{
    color: var(--bs-secondary-emphasis)!important
;}
.hover-text-success:hover{
    color: var(--bs-success)!important
;}
.hover-text-success-emphasis:hover{
    color: var(--bs-success-emphasis)!important
;}
.hover-text-danger:hover{
    color: var(--bs-danger)!important
;}
.hover-text-danger-emphasis:hover{
    color: var(--bs-danger-emphasis)!important
;}
.hover-text-warning:hover{
    color: var(--bs-warning)!important
;}
.hover-text-warning-emphasis:hover{
    color: var(--bs-warning-emphasis)!important
;}
.hover-text-info:hover{
    color: var(--bs-info)!important
;}
.hover-text-info-emphasis:hover{
    color: var(--bs-info-emphasis)!important
;}
.hover-text-light:hover{
    color: var(--bs-light)!important
;}
.hover-text-light-emphasis:hover{
    color: var(--bs-light-emphasis)!important
;}
.hover-text-dark:hover{
    color: var(--bs-dark)!important
;}
.hover-text-dark-emphasis:hover{
    color: var(--bs-dark-emphasis)!important
;}
.hover-text-body:hover{
    color: var(--bs-body)!important
;}
.hover-text-body-emphasis:hover{
    color: var(--bs-body-emphasis)!important
;}
.hover-text-body-secondary:hover{
    color: var(--bs-body-secondary)!important
;}
.hover-text-body-tertiary:hover{
    color: var(--bs-body-tertiary)!important
;}
.hover-text-black:hover{
    color: var(--bs-black)!important
;}
.hover-text-white:hover{
    color: var(--bs-white)!important
;}
.hover-text-black-50:hover{
    color: var(--bs-black-50)!important
;}
.hover-text-white-50:hover{
    color: var(--bs-white-50)!important
;}

/**
 * Hover class variants (for all background colors)
 * @see https://getbootstrap.com/docs/5.3/utilities/background/#background-color
 */
.hover-bg-primary:hover{
    background: var(--bs-primary) !important;
}
.hover-bg-primary-emphasis:hover{
    background: var(--bs-primary-emphasis)!important
;}
.hover-bg-secondary:hover{
    background: var(--bs-secondary)!important
;}
.hover-bg-secondary-emphasis:hover{
    background: var(--bs-secondary-emphasis)!important
;}
.hover-bg-success:hover{
    background: var(--bs-success)!important
;}
.hover-bg-success-emphasis:hover{
    background: var(--bs-success-emphasis)!important
;}
.hover-bg-danger:hover{
    background: var(--bs-danger)!important
;}
.hover-bg-danger-emphasis:hover{
    background: var(--bs-danger-emphasis)!important
;}
.hover-bg-warning:hover{
    background: var(--bs-warning)!important
;}
.hover-bg-warning-emphasis:hover{
    background: var(--bs-warning-emphasis)!important
;}
.hover-bg-info:hover{
    background: var(--bs-info)!important
;}
.hover-bg-info-emphasis:hover{
    background: var(--bs-info-emphasis)!important
;}
.hover-bg-light:hover{
    background: var(--bs-light)!important
;}
.hover-bg-light-emphasis:hover{
    background: var(--bs-light-emphasis)!important
;}
.hover-bg-dark:hover{
    background: var(--bs-dark)!important
;}
.hover-bg-dark-emphasis:hover{
    background: var(--bs-dark-emphasis)!important
;}
.hover-bg-body:hover{
    background: var(--bs-body)!important
;}
.hover-bg-body-emphasis:hover{
    background: var(--bs-body-emphasis)!important
;}
.hover-bg-body-secondary:hover{
    background: var(--bs-body-secondary)!important
;}
.hover-bg-body-tertiary:hover{
    background: var(--bs-body-tertiary)!important
;}
.hover-bg-black:hover{
    background: var(--bs-black)!important
;}
.hover-bg-white:hover{
    background: var(--bs-white)!important
;}
.hover-bg-black-50:hover{
    background: var(--bs-black-50)!important
;}
.hover-bg-white-50:hover{
    background: var(--bs-white-50)!important
;}

/**
 * Hover class variants (for all border colors)
 */
.hover-border-primary:hover{
    border-color: var(--bs-primary) !important;
}
.hover-border-primary-emphasis:hover{
    border-color: var(--bs-primary-emphasis)!important
;}
.hover-border-secondary:hover{
    border-color: var(--bs-secondary)!important
;}
.hover-border-secondary-emphasis:hover{
    border-color: var(--bs-secondary-emphasis)!important
;}
.hover-border-success:hover{
    border-color: var(--bs-success)!important
;}
.hover-border-success-emphasis:hover{
    border-color: var(--bs-success-emphasis)!important
;}
.hover-border-danger:hover{
    border-color: var(--bs-danger)!important
;}
.hover-border-danger-emphasis:hover{
    border-color: var(--bs-danger-emphasis)!important
;}
.hover-border-warning:hover{
    border-color: var(--bs-warning)!important
;}
.hover-border-warning-emphasis:hover{
    border-color: var(--bs-warning-emphasis)!important
;}
.hover-border-info:hover{
    border-color: var(--bs-info)!important
;}
.hover-border-info-emphasis:hover{
    border-color: var(--bs-info-emphasis)!important
;}
.hover-border-light:hover{
    border-color: var(--bs-light)!important
;}
.hover-border-light-emphasis:hover{
    border-color: var(--bs-light-emphasis)!important
;}
.hover-border-dark:hover{
    border-color: var(--bs-dark)!important
;}
.hover-border-dark-emphasis:hover{
    border-color: var(--bs-dark-emphasis)!important
;}
.hover-border-body:hover{
    border-color: var(--bs-body)!important
;}
.hover-border-body-emphasis:hover{
    border-color: var(--bs-body-emphasis)!important
;}
.hover-border-body-secondary:hover{
    border-color: var(--bs-body-secondary)!important
;}
.hover-border-body-tertiary:hover{
    border-color: var(--bs-body-tertiary)!important
;}
.hover-border-black:hover{
    border-color: var(--bs-black)!important
;}
.hover-border-white:hover{
    border-color: var(--bs-white)!important
;}
.hover-border-black-50:hover{
    border-color: var(--bs-black-50)!important
;}
.hover-border-white-50:hover{
    border-color: var(--bs-white-50)!important
;}

/**
 * Loading spinner
 * @see https://loading.io/css/
 */
.spinner-dual-ring {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.spinner-dual-ring:after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 50%;
  border: 4px solid #333;
  border-color: #333 transparent #333 transparent;
  animation: spinner-dual-ring 0.8s linear infinite;
}
@keyframes spinner-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**
 * Paused and idle symbols
 * (using bootstraps spinner animation)
 */

@-webkit-keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.1; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.1; }
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.1; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.1; }
}

@-webkit-keyframes pulse-light {
    0% { transform: scale(0.9); opacity: 0.1; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.1; }
}

@keyframes pulse-light {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.paused{
    height: 1rem;
    line-height: 1rem;
    z-index: 1050;
    background: #fff;
    opacity: 0;
    -webkit-animation: 2s linear infinite pulse-light;
    animation: 10s linear infinite pulse-light;
}

.paused:before{   
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    content: "\f28b";
    margin-right: 1rem;
}

.idle{
    height: 1rem;
    line-height: 1rem;
    z-index: 1050;
    background: #fff;
    opacity: 0;
    -webkit-animation: 2s linear infinite pulse;
    animation: 4s linear infinite pulse;
}

.idle:before{   
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    content: "\f2f2";
    margin-right: 0.5rem;
}

/**
 * Sortable components */
.sortable .sort-handle{
    opacity: 0.6;
    cursor: move; 
    font-size: 1rem;
    height: 100%;
    z-index: 1000;
}

.sortable .sort-handle:hover{
    opacity: 1.0;
}

/**
 * Chart App */

/* Trade labels */
.chart-trade-labels{
    opacity: 0.7;
}
.chart-trade-labels:hover{
    cursor: pointer;
    opacity: 1.0;
}

/*
 * Login 
 */
body.login {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-login {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-login .checkbox {
  font-weight: 400;
}

.form-login .form-floating:focus-within {
  z-index: 2;
}

.form-login input {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/**
 * Payment overview
 */

.payment-card{
    margin-top: .5rem !important
}

.payment-card-border{
    border-radius: .25rem !important;
    border: 1px solid rgba(0,0,0,.125);
}

@media (min-width: 992px) { 
    .payment-card{    
        margin-top: .25rem !important;
    }
    .payment-card-border{
        border: 0px;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
}

.payment-card .payment-card-text,
.payment-card .recurring-card-text{
    min-height: 2rem;
}

/* forms */
.payment-card .form{
    z-index: 1051; 
    width: 98%; 
    left: 0.25rem;
    top: 4rem;
}

@media (min-width: 992px) { 
    .payment-card .form{
        width: 30vw;
        left: -8px; 
        top: -8px;
        right: initial;
    }
}

.form-control-plaintext {
    padding: .5rem 1rem;
}

/* placeholder */
.payment-card .placeholder{
    animation: placeholder-glow 2s ease-in-out infinite;
    border-radius: .2rem !important;
    padding: .25rem !important;
    margin-bottom: .25rem !important;
    margin-right: .25rem !important;
    display: block !important;
    min-height: 2rem;
    background-color: currentColor;
    opacity: .5;
    line-height: 1.5;
    user-select: none;
    border: 1px solid transparent;
    font-size: 1rem;
}

/* add button */
.payment-card .add-payment{
    transition: all .01s ease-in-out;
}

@media (min-width: 992px) { 
    .payment-card .add-payment{
        visibility: hidden;
    }

    .payment-card:hover .add-payment{
        visibility: visible;
    }
}

/* custom popover */
.payment-card .custom-popover{
    display: none;
    position: absolute;
    width: 200%;
    bottom: 150%;
    left: 0;
    z-index: 1000;
}

.payment-card .payment:hover .custom-popover,
.payment-card .recurring:hover .custom-popover{
    display: block;
}

/**
 * Consistency balances
 */
/* custom popover */
.consistency-balances .custom-popover{
    display: none;
    position: absolute;
    width: 15rem;
    bottom: 95%;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    overflow-y: scroll;
    max-height: 30vh;
    cursor: initial;
}

/*
.consistency-balances .day:hover .custom-popover,
.consistency-balances .day:active .custom-popover{
    display: block;
}*/

.consistency-balances .day.haspopover{
    cursor: pointer;
}

/**
 * Verification verify
 */

.verification .payment,
.verification .v-payment{
    overflow: hidden;
}

.verification .subject{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    max-height: 1.5rem;
}

.verification .payment:not(.in-use) .subject:hover,
.verification .v-payment:not(.in-use) .subject:hover{
    transition-delay: 1s;
    overflow: initial;
    white-space: initial;
    max-height: 20rem;
}

/**
 * Bootstrap accordion extension
 */
.accordion.plus-minus{
    --bs-accordion-btn-icon-transform: none;

}
.accordion-plus-minus:after{
    position: relative;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    content: "";
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="5" width="8" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>');
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-plus-minus:not(.collapsed):after{
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="5" width="8" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>');
}