:root {
    --drk-green: #1a3301;
    --shade: #4f564f;
    --drk-green-gray: #4f514d;
    --shade-dark: #23291f;
    --shade-green: #1a401d;
    --lt-shade-green: #546448;
    --deep-green: #2f5b01;
    --mid-green: #448302;
    --forest-green: #175d2f;
    --lt-green: #abfd54;
    --bright-green: #7dc244;
    --lt-mid-green: #8ec640;
    --mint-green: #befc7f;
    --shade-white: #d5d9d1;
    --shade-mid: #adb5a5;
    --green-shade: #738563;
    --lt-mint: #d2fda7;
    --lt-grn-white:#e7f0df;
    --white-green: #d5e5d6;
    --card-shade: #e9f0e2;
    --logo-lt-green: #7dc242;
    --logo-drk-green: #313430;
    --deep-green: #071a0e;
}
body {
    /* font-family: 'Jost', var(--bs-body-font-family); */
    font-family: Just;
    font-weight: 100;

}

@font-face{
    font-family: Jost;
    font-stretch: 10%;
        /* Note that font-stretch is a % of normal width */
        font-style: normal;
        /* See note below */
        font-weight: 500 ;
        /* src: url(Jost-VariableFont_wght.ttf) format('ttf'); */
    src: url("fonts/Jost/Jost-VariableFont_wght.ttf") ;

}

@font-face{
    font-family: Centra;
    src: url("/fonts/Centra-No2-Medium.ttf");
}



.fnt-color-dark{
color: var(--drk-green-gray);
}
.ts-4 {
    font-size: 1.3rem;
    font-weight: 100;

}
.ts-5{
    font-size: 2rem;
    font-weight: 300;

}
  .display-4 {
    font-family: Jost; 
    font-size: 10vmin;
   
    }
 
 
.bg-deep-green {
    background-color: var(--shade-mid);
    color: var(--lt-mint);
}
.bg-forest-green {
    background-color: var(--forest-green);
    color: var(--shade-white);
}
.bg-card {
    background-color: var(--card-shade);
}
.bg-logo-drk{
    background-color: var(--logo-drk-green);
    color: var(--lt-grn-white);
}

.bg-lt-green{
    background-color: var(--logo-lt-green);
    color: var(--logo-drk-green);
}
.bg-white-green{
    background-color: var(--white-green);
    color: var(--logo-drk-green);
}
/* nav.nonmember-bar */
.btn-colors{
    color: var(--shade-dark);
    background: var(--shade-green);
    border: var(--bs-border-width) solid var(--bright-green);
}
.btn-logo-lt-green{
    background-color: var(--logo-lt-green);
    color: var(--logo-drk-green);
}
:hover.btn-logo-lt-green{
    background-color: var(--mid-green);
        color: #ffff;
}
.btn-logo-drk-green{
    background-color: var(--logo-drk-green);
    color: #ffff; 
}
:hover.btn-logo-drk-green{
    background-color: var(--forest-green);
    color: var(--mint-green);
}
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: #1c8e05;
}
.navbar-dark {
    background: var(--card-shade);
}

.navbar-lite {
    background-color: var(--shade-white);
}

.logo.site-icon-1 {
    background-attachment: fixed;
    background-image: url("///img/Splacy_logo_LTgreen.png");
}

.logo.site-icon-2 {
    background-attachment: fixed;
    background-image: url("//img/Splacy_logo_DRgreen.png");
}

.nonmember-bar ul {
    text-align: right;
    margin-left: auto;
    margin-right: 1rem !important;
}

.nonmember-bar ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.nonmember-bar li a {
    padding: 0.20rem 0.7rem;
    text-decoration: none;
    color: var(--shade-dark);
}

.nonmember-bar li a:hover {
    color: var(--lt-mid-green);
}

.btn-green{
    color: var(--deep-green);
    background-color: var(--lt-mid-green);
    border-color: var(--lt-mid-green);
}
:hover.btn-green {
    color: var(--lt-green);
    background-color: var(--deep-green);
    border-color: var(--deep-green);
}
/* 
.navbar-brand img{
    background-image: url('../img/Logo_One_S.svg') ;
    width: 10rem;
    height: 3rem;
} */


/* .mid-img { */


/* background-image: url('../img/mid_img.jpg') ; */


/* height:max-content ;
        width: max-content;
        background-repeat: no-repeat;
        line-height: 30rem;
        
        } */

img.logo {
    height: 3rem;
    width: auto;
}

/* cards */
.img-sm-center{
    -moz-box-pack: center;
        justify-content: center;
        display: flex;
        height: auto;
        width: 65%;
        align-self: center;
}
/* Joining */
.list-group {
    width: 100%;
    max-width: 460px;
    margin-inline: 1.5rem;
}

.form-check-input:checked+.form-checked-content {
    opacity: .5;
}

.form-check-input-placeholder {
    border-style: dashed;
}

[contenteditable]:focus {
    outline: 0;
}

.list-group-checkable .list-group-item {
    cursor: pointer;
}

.list-group-item-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.list-group-item-check:hover+.list-group-item {
    background-color: var(--bs-secondary-bg);
}

.list-group-item-check:checked+.list-group-item {
    color: #fff;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.list-group-item-check[disabled]+.list-group-item,
.list-group-item-check:disabled+.list-group-item {
    pointer-events: none;
    filter: none;
    opacity: .5;
}

.list-group-radio .list-group-item {
    cursor: pointer;
    border-radius: .5rem;
}

.list-group-radio .form-check-input {
    z-index: 2;
    margin-top: -.5em;
}

.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
    background-color: var(--bs-secondary-bg);
}

.list-group-radio .form-check-input:checked+.list-group-item {
    background-color: var(--bs-body);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.list-group-radio .form-check-input[disabled]+.list-group-item,
.list-group-radio .form-check-input:disabled+.list-group-item {
    pointer-events: none;
    filter: none;
    opacity: .5;
}

 .bd-placeholder-img {
     font-size: 1.125rem;
     text-anchor: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
 }

 @media (min-width: 768px) {
     .bd-placeholder-img-lg {
         font-size: 3.5rem;
     }
 }

 .b-example-divider {
     width: 100%;
     height: 3rem;
     background-color: rgba(0, 0, 0, .1);
     border: solid rgba(0, 0, 0, .15);
     border-width: 1px 0;
     box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
 }

 .b-example-vr {
     flex-shrink: 0;
     width: 1.5rem;
     height: 100vh;
 }

 .bi {
     vertical-align: -.125em;
     fill: currentColor;
 }

 .nav-scroller {
     position: relative;
     z-index: 2;
     height: 2.75rem;
     overflow-y: hidden;
 }

 .nav-scroller .nav {
     display: flex;
     flex-wrap: nowrap;
     padding-bottom: 1rem;
     margin-top: -1px;
     overflow-x: auto;
     text-align: center;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
 }

 .btn-bd-primary {
     --bd-violet-bg: #712cf9;
     --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

     --bs-btn-font-weight: 600;
     --bs-btn-color: var(--bs-white);
     --bs-btn-bg: var(--bd-violet-bg);
     --bs-btn-border-color: var(--bd-violet-bg);
     --bs-btn-hover-color: var(--bs-white);
     --bs-btn-hover-bg: #6528e0;
     --bs-btn-hover-border-color: #6528e0;
     --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
     --bs-btn-active-color: var(--bs-btn-hover-color);
     --bs-btn-active-bg: #5a23c8;
     --bs-btn-active-border-color: #5a23c8;
 }

 .bd-mode-toggle {
     z-index: 1500;
 }

 .bd-mode-toggle .dropdown-menu .active .bi {
     display: block !important;
 }

 /* alignment */
.v-align{
    align-content:  center;
}

/* Profile */

.profile-sidebar {
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
}

.nav-pills .nav-link {
    color: #6c757d;
    border-radius: 10px;
    padding: 12px 20px;
    margin: 4px 0;
    transition: all 0.3s ease;
}

.nav-pills .nav-link:hover {
    background-color: #f8f9fa;
}

.nav-pills .nav-link.active {
    background-color: #fff;
    color: #4158D0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.profile-header {
    background: linear-gradient(135deg, rgb(34, 78, 7) 0%, rgb(18, 90, 3) 100%);
    height: 150px;
    border-radius: 15px;
}

.profile-pic {
    width: 120px;
    height: 120px;
    border: 4px solid #fff;
    margin-top: -60px;
    background-color: #fff;
}

.settings-card {
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.settings-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    margin-left: -3.5em;
}

.activity-item {
    border-left: 2px solid #e9ecef;
    padding-left: 20px;
    position: relative;
}

.activity-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4158D0;
    position: absolute;
    left: -7px;
    top: 5px;
}
/* Login */
          .bd-placeholder-img {
              font-size: 1.125rem;
              text-anchor: middle;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
          }
    
          @media (min-width: 768px) {
              .bd-placeholder-img-lg {
                  font-size: 3.5rem;
              }
          }
    
          .b-example-divider {
              width: 100%;
              height: 3rem;
              background-color: rgba(0, 0, 0, .1);
              border: solid rgba(0, 0, 0, .15);
              border-width: 1px 0;
              box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
          }
    
          .b-example-vr {
              flex-shrink: 0;
              width: 1.5rem;
              height: 100vh;
          }
    
          .bi {
              vertical-align: -.125em;
              fill: currentColor;
          }
    
          .nav-scroller {
              position: relative;
              z-index: 2;
              height: 2.75rem;
              overflow-y: hidden;
          }
    
          .nav-scroller .nav {
              display: flex;
              flex-wrap: nowrap;
              padding-bottom: 1rem;
              margin-top: -1px;
              overflow-x: auto;
              text-align: center;
              white-space: nowrap;
              -webkit-overflow-scrolling: touch;
          }
    
          .btn-bd-primary {
              --bd-violet-bg: #712cf9;
              --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    
              --bs-btn-font-weight: 600;
              --bs-btn-color: var(--bs-white);
              --bs-btn-bg: var(--bd-violet-bg);
              --bs-btn-border-color: var(--bd-violet-bg);
              --bs-btn-hover-color: var(--bs-white);
              --bs-btn-hover-bg: #6528e0;
              --bs-btn-hover-border-color: #6528e0;
              --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
              --bs-btn-active-color: var(--bs-btn-hover-color);
              --bs-btn-active-bg: #5a23c8;
              --bs-btn-active-border-color: #5a23c8;
          }
    
          .bd-mode-toggle {
              z-index: 1500;
          }
    
          .bd-mode-toggle .dropdown-menu .active .bi {
              display: block !important;
          }

          /* Footer */
          #footer-color-1 {
            color: aliceblue;
            background-color: #3b423d;
          }

                  
             .list-group > .lists-style {
                    text-decoration: navy;
                    list-style: none;
                    padding: 10px 0 10px 0;
                }

/* Jombotron image */

.splacy-community {
    background-image: url("/img/Splacy-community.svg");
    height: 400px;
    margin-top: 58px;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.img-positioner {
    text-align: center !important;
    position: absolute;
    top: 14vh;
    bottom: 4vh;
    z-index: 100;
    left: 2%;
    right: 2%;
}
@media (max-width: 435px){
    .bg{
        background-size: 300%;
    }
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: #0000001a;
    border: solid rgba(0, 0, 0, 0.15);
    border-width: 1px 0;
    box-shadow:
        inset 0 0.5em 1.5em #0000001a,
        inset 0 0.125em 0.5em #00000026;
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -0.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}