/* =================================================================================================
   BASE THEME STYLING
   Static part of layouts/includes/theme_styling.html, moved to a file so browsers cache it instead of receiving it
   inline on every page. It is linked from that template at the same point of the page, so the cascade is unchanged.
   The organization theme colours (from the database) stay inline in the template.
   ================================================================================================= */

/* --------------------------------- ORIGINAL STYLING TEXT [START] --------------------------------- */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-secondary-color);
    --bs-btn-hover-bg: var(--bs-dropdown-link-hover-color)
    --bs-btn-hover-border-color: var(--bs-body-color);
    --bs-btn-focus-shadow-rgb: 108,117,125;
    --bs-btn-active-color: var(--bs-secondary-color);
    --bs-btn-active-bg: var(--bs-dropdown-link-hover-color)
    --bs-btn-active-border-color: var(--bs-body-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-body-color);
    --bs-gradient: none;
}
/* TEXT [START] */
.text-success {
  color: var(--sd-green-ink) !important;
}
.bg-success-static {
  background-color: var(--sd-green) !important;
}
/* TEXT [END] */

/* BUTTONS [START] */
.btn-danger:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-outline-danger:not(label):not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-warning:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-outline-warning:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-secondary:not(label):not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-outline-secondary:not(label):not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-light:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm):not(.dropdown-toggle),
.btn-outline-light:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-dark:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm):not(.dropdown-toggle),
.btn-outline-dark:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm),
.btn-info:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm):not(.dropdown-toggle),
.btn-outline-info:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-sm){
    /* padding: 6px 8px; */
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8rem;
}
.btn-danger:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-outline-danger:not(label):not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-warning:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-outline-warning:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-secondary:not(label):not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-outline-secondary:not(label):not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-light:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-outline-light:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-info:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm,
.btn-outline-info:not(.btn-icon):not(.btn-icon-sm):not(.btn-small):not(.btn-tags):not(.btn-small).btn-sm{
    text-transform: uppercase;
    font-weight: 600;
    font-size: .7rem;
}
.btn.button-create {
    color: var(--sd-on-green);
    background-color: var(--sd-green);
    border-color: var(--sd-green);
    padding: 6px 8px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8rem;    
}
.btn.button-create:hover {
    color: var(--sd-on-green);
    background-color: var(--sd-green-hover);
    border-color: var(--sd-green-hover);
}
.btn.button-create.disabled, .btn.button-create:disabled {
    color: var(--sd-on-green);
    background-color: var(--sd-green-active);
    border-color: var(--sd-green-active);
}
.btn.button-create:not(:disabled):not(.disabled).active, .btn.button-create:not(:disabled):not(.disabled):active, .show > .btn.button-create.dropdown-toggle {
    color: var(--sd-on-green);
    background-color: var(--sd-green-active);
    border-color: var(--sd-green-active);
}        
.btn.button-create:hover a {
    color: var(--sd-on-green)  !important;
}
.btn.button-outline-primary {
    color: var(--sd-primary-ink);
    background-color: transparent;
    border-color: var(--sd-primary-ink);
    /* padding: 6px 8px; */
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8rem;    
}
.btn.button-outline-primary:hover {
    color: var(--sd-primary-ink);
    background-color: var(--sd-primary-soft);
    border-color: var(--sd-primary-ink);
}
.btn.button-outline-create {
    color: var(--sd-green-ink);
    background-color: transparent;
    border-color: var(--sd-green-ink);
    /* padding: 6px 8px; */
    text-transform: uppercase;
    font-weight: 700;
    font-size: .8rem;    
}
.btn.button-outline-create:hover {
    color: var(--sd-green-ink);
    background-color: var(--sd-green-soft);
    border-color: var(--sd-green-ink);
}
.btn.button-outline-create.disabled, .btn.button-outline-create:disabled {
    color: var(--sd-green-ink);
    background-color: transparent;
    border-color: var(--sd-green-ink);
}
.btn.button-outline-create:not(:disabled):not(.disabled).active, .btn.button-outline-create:not(:disabled):not(.disabled):active, .show > .btn.button-outline-create.dropdown-toggle {
    color: var(--sd-green-ink);
    background-color: var(--sd-green-soft);
    border-color: var(--sd-green-ink);
}   
.btn.button-outline-create:hover a {
    color: #FFF  !important;
}
.btn-outline-danger {
  color: #DC3545;
  background-color: transparent;
  background-image: none;
  border-color: #DC3545;
}
.btn-outline-danger:hover {
  color: #DC3545;
  background-color: rgb(220, 53, 69, .12);
  border-color: #DC3545;
}
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #DC3545;
  background-color: transparent;
}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
  color: #DC3545;
  background-color: rgb(220, 53, 69, .1);
  border-color: #DC3545;
}
.btn-outline-info {
  color: #11CAF0;
  background-color: transparent;
  background-image: none;
  border-color: #11CAF0;
}
.btn-outline-info:hover {
  color: #11CAF0;
  background-color: rgb(220, 53, 69, .12);
  border-color: #11CAF0;
}
.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #11CAF0;
  background-color: transparent;
}
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
  color: #11CAF0;
  background-color: rgb(220, 53, 69, .1);
  border-color: #11CAF0;
}
.btn.button-create.btn-sm {
    color: var(--sd-on-green);
    background-color: var(--sd-green);
    border-color: var(--sd-green);
    padding: 4px 8px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .7rem;
}
.btn.button-outline-create.btn-sm, .btn.button-outline-primary.btn-sm{
    padding: 4px 8px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .7rem;
}
.btn-outline-tertiary {
  color: var(--bs-secondary-color);
  background-color: transparent;
  background-image: none;
  border-color: var(--bs-card-border-color);
  font-weight: 600;
  font-size: .85rem;
  border-radius: var(--bs-border-radius-sm);
}
.btn-outline-tertiary:hover {
  /* color: #fff !important; */
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
.btn-outline-tertiary.disabled, .btn-outline-tertiary:disabled {
  color: var(--bs-secondary-color);
  background-color: transparent;
}
.btn-outline-tertiary:not(:disabled):not(.disabled).active, .btn-outline-tertiary:not(:disabled):not(.disabled):active, .show > .btn-outline-tertiary.dropdown-toggle {
  /* color: #fff !important; */
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
/* BUTTONS [END] */

/* SLIDERS [START] */
.irs--flat .irs-min, 
.irs--flat .irs-max,
.irs--flat .irs-from, 
.irs--flat .irs-to, 
.irs--flat .irs-single {
    color: #FFF !important;
    background-color: var(--sd-navy) !important;
}
.irs--flat .irs-bar {
    background-color: var(--sd-green) !important;
}
.irs--flat .irs-handle>i:first-child     {
    background-color: var(--sd-green) !important;
}
.irs--flat .irs-shadow {
  height: 1px;
  bottom: 16px;
  background-color: var(--bs-tertiary-color);
}
.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
    border-top-color: var(--sd-green) !important;
    display: none !important;
}
.btn.button-secondary {
    padding: 7px 13px;
    background-color: var(--sd-green);
    color: var(--sd-on-green); 
    border-color: var(--sd-green);
}
/* SLIDERS [END] */

/* ORIGINAL STYLING BACKGROUND [START] */
.bk-success {
    background-color: var(--sd-navy) ;   
    border: 1px solid var(--sd-navy) ;                                         
}  
.bk-success:before {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;      
    opacity: .4;                
} 
.bg-body  {
    background-color: var(--bs-body-bg) ;   
    /* border: 1px solid var(--bs-body-bg) ;  */
}
.bg-secondary {
    background-color: var(--bs-secondary-bg) ;   
    border: 1px solid var(--bs-secondary-bg) ; 
}
.bg-tertiary {
    background-color: var(--bs-tertiary-bg) ;   
    border: 1px solid var(--bs-tertiary-bg) ; 
}
/* ORIGINAL STYLING BACKGROUND [END] */

/* PROGRESS BAR [START] */
.progress-bar.progress-c-success {
    background: var(--sd-green);
}           
/* PROGRESS BAR [END] */

/* ATHLETE VIEW [START] */
.theme-bg {
    border-left: 5px solid #5db508;
}

/* ATHLETE VIEW [END] */

/* REPORTS [START] */
.report-card-header{
    background-color: var(--sd-navy) !important;
    border-bottom: 2px solid var(--sd-navy);
}

/* EMPTY STATES [START] */
.warning-container {
  /* height: 200px; */
  width: 100%;
  /* margin-bottom: 3rem; */
  /* margin-left: 1rem; */
  padding: 2.5rem 1rem;
  /* position: relative; */
  border: 2px solid var(--sd-green) ;
  border-radius: 0.375rem; 
}

.warning-container-tertiary {
  /* height: 200px; */
  width: 100%;
  /* margin-bottom: 3rem; */
  /* margin-left: 1rem; */
  padding: 2rem 1rem;
  /* position: relative; */
  border: 2px solid var(--bs-border-color) ;
  background-color: var(--bs-tertiary-bg);
  border-radius: 0.375rem; 
}
.warning-container-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.warning-container-icon i {
  color: var(--sd-green);
  font-size: 4rem;
  text-shadow: 5px 5px 10px var(--bs-tertiary-color);
}

.warning-container-icon-tertiary {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.warning-container-icon-tertiary i {
  color: var(--bs-secondary-color);
  font-size: 5rem;
  text-shadow: 5px 5px 10px var(--bs-tertiary-color);
}
.warning-text-title {
    color: var(--bs-body-color);
    font-weight: 600;
}

.warning-text-text {
  color:  var(--bs-secondary-color);
  font-size: .9rem;
  font-weight: 400;
}
/* EMPTY STATES [END] */

/* SIDEBAR SWITCH STYLES [START] */
.switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid green;
  margin: 15px 0;
  border-radius:  .375rem;
  background: transparent;
}
.switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}
.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
  color: white;
}
.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
  background: transparent;
}
.switch-wrapper
  [type="radio"]:checked#monthly
  + label[for="yearly"]
  ~ .highlighter {
  transform: none;
}
.switch-wrapper
  [type="radio"]:checked#yearly
  + label[for="monthly"]
  ~ .highlighter {
  transform: translateX(100%);
}
.switch-wrapper label {
  font-size: 1rem;
  z-index: 1;
  min-width: 65px;
  line-height: 25px;
  cursor: pointer;
  border-radius: .375rem;
  transition: color 0.25s ease-in-out;
  text-align: center;
  margin: auto;
}
.switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius:  .375rem;
  background: green;
  transition: transform 0.25s ease-in-out;
}
/* SIDEBAR SWITCH STYLES [END] */
/* --------------------------------- ORIGINAL STYLING TEXT [END] --------------------------------- */