body, html {
    background:
        linear-gradient(
            45deg, rgb(238, 237, 243) 0%, 
            0.77381%, rgb(239, 238, 244) 1.54762%, 
            6.72619%, rgb(239, 236, 243) 11.9048%, 
            12.381%, rgb(240, 237, 244) 12.8571%, 
            27.9167%, rgb(242, 236, 244) 42.9762%, 
            51.9048%, rgb(239, 236, 243) 60.8333%, 
            61.9643%, rgb(238, 235, 246) 63.0952%, 
            66.7262%, rgb(235, 234, 249) 70.3571%, 
            73.2738%, rgb(232, 232, 248) 76.1905%, 
            77.1429%, rgb(230, 231, 248) 78.0952%, 
            79.9405%, rgb(228, 229, 249) 81.7857%, 
            84.1667%, rgb(227, 228, 248) 86.5476%, 
            87.0238%, rgb(226, 227, 248) 87.5%, 
            89.3452%, rgb(224, 224, 252) 91.1905%, 
            95.5952%, rgb(220, 223, 252) 100%) !important;
            margin: 0;
            padding: 0;
            height: 100%;
    }
    body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .wrapper {
    flex:1
  }
  .footer{
    padding: 2rem;
    text-align: center;
  }    
    .card, .form-control, .form-control:focus{
        /* background-color: rgba(255, 255, 255, 0.25) !important; */
        background-color: white !important;
        border: 1px solid rgb(123 0 123 / 32%);
    }
    .card-home{
        border: 2px solid rgba(123, 0, 123, 0.167);
    }
    .home-sub-label {
        font-size: 0.7rem;
    }
    .no-border {
      border: none !important;
    }
    #sidebar-wrapper{
        background-color: rgba(255, 255, 255, 0.750);
        padding: 0rem 0rem .5rem 0rem;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
        border: 0px solid rgb(203, 200, 246);
        min-height: 28rem;
    }

    #sidebar {
        background-color: transparent;
        padding: calc((100vh - 28rem)/2) 0rem;
        border-right: none !important;
        box-shadow: inset;
    }
    #offcanvasResponsive{
      background-color: transparent;
      border: none;
    }
    #rightbar{
      min-width: 150px;
      max-width: 150px;
      min-height: 100vh;
      min-height: 100vh;
      overflow: auto;
    }
    :focus,
    :focus:not(:focus-visible) {
      outline: 0;
      box-shadow: none !important;
    }
    .header-tabs .nav-link {
        padding: .4rem .6rem;
        padding-top: .4rem;
        padding-bottom: .4rem;
        background-color: rgba(203, 200, 246,.2);
        margin-right: .2rem;
        border-radius: 1rem;
        color:#666;
        font-size: .71rem;
        text-align: center;
    }
    .header-tabs a.nav-link:hover{
        background-color: rgba(203, 200, 246,.3);
        color:#333;
    }
    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #421c6c !important;
        background-color: rgba(203, 200, 246,.5) !important;
        border-radius: 2rem;
    }
    .header-body {
        border-bottom: none;
    }

    #sidebar ul li a {
      padding: 0.1rem .65rem;
      font-size: 0.77rem;
      display: block;
      /* color: rgb(126, 121, 198); */
      border-left: none;
      border-right: none;
      background: radial-gradient( circle farthest-corner at center center, rgb(155, 23, 149) 17.8%, rgb(49, 0, 140) 100.2% );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    #sidebar ul li a i {
      padding-right: 0.7rem;
    }

    #sidebar ul li a:hover {
      color: #3528cc;
    }

    #sidebar ul li.active > a, a[aria-expanded=true] {
      color: #3528cc;
      border-left: none;
      border-right: 3px solid #3528cc;
    }

    ul ul a {
      background: #F9FBFD;
      width: 100%;
      border-left: 2px solid #2C7BE6 !important;
    }
    #sidebar ul.components {
      border-bottom: none;
  }
    .btn-primary{ 
      background-color: #21D4FD;
      background-image: linear-gradient(50deg, #7ecbf8 0%, #d893f8 100%);
      border: 1px solid #f6faff;
      border-radius: 3rem !important;
    }
    .rainbow-text{
      background: radial-gradient( circle farthest-corner at center center, rgb(155, 23, 149) 17.8%, rgb(49, 0, 140) 100.2% );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    input.form-control {
      border-radius: 3rem !important;
    }
    ::placeholder {
      color: #ccc !important;
    }
    label{
      color: #888 !important;
      font-size: .65rem;
      text-transform: uppercase;
      padding-left: 1.2rem;
    }
    legend {
      font-size: .6rem;
      color: #888;
      float: left; 
      text-transform: uppercase;
      padding-top: 0.2rem;
    }
    fieldset {
      margin-top: .5rem;
      padding-left:1rem;
      display: inline-flex;
    }
    .form-radio-input {
      display: flex;
    }
    .avatar-xxxl {
        width: 12rem;
        height: 12rem;
    }