body{
margin-top:20px;
background-color: #f0efed;
}
.radius-10 {
    border-radius: 10px !important;
}

.border-share {
    border-top: 5px solid  #0C2F53 !important;
    border-bottom: 5px solid  #0C2F53 !important;
}
.border-warning1{
    border-top: 5px solid  #fff200 !important;
    border-bottom: 5px solid  #fff200 !important;
}
/* .border-warning1{
    border-top: 5px solid  #fff200 !important;
    border-bottom: 5px solid  #fff200 !important;
} */

/* .border-success {
    border-left: 5px solid  #15ca20 !important;
} */
/* .border-warning {
    border-left: 5px solid  #ffc107 !important;
} */

.formhidden{
    display: inline-block;
  }
.card_fund {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /* background-color: #f6eae0; */
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(56, 56, 55, 0.8), 0 2px 6px 0 rgba(246, 241, 195, 0.55);
}
.card_share{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgb(61, 62, 70), 0 2px 6px 0 rgba(246, 241, 195, 0.55);
}
.card_bank{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgba(102, 163, 238, 0.65), 0 2px 6px 0 rgb(206 206 238 / 55%);
}
.bg-gradient-scooter {
    background: #17ead9;
    background: -webkit-linear-gradient( 
45deg
 , #17ead9, #6078ea)!important;
    background: linear-gradient( 
45deg
 , #17ead9, #6078ea)!important;
}
.fa-bitcoin-sign{
    font-size: 30px;
}
.widgets-icons-2 {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 16px;
    border-radius: 10px;
}
.widgets-icons-3 {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff200;
    /* background-color: #ededed; */
    font-size: 16px;
    border-radius: 10px;
}
.widgets-icons-4 {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff200;
    /* background-color: #ededed; */
    font-size: 16px;
    border-radius: 10px;
}
.widgets-icons-5{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #10100f;
    background-color: #ededed; */
    font-size: 16px;
    border-radius: 10px;
}
.widgets-icons-6{
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 16px;
    border-radius: 10px;
}
.bg-gradient-ohhappiness-5{
    background: #e7e3e3;
    color: #000;
}
.card .profile {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 0px;
}
.rounded-circle {
    border-radius: 50%!important;
}
.text-white {
    color: #fff!important;
}
.ms-auto {
    margin-left: auto!important;
}
.bg-gradient-depa{
    background: #0C2F53;
}
.bg-gradient-bloody {
    background: #f54ea2;
    background: -webkit-linear-gradient( 
45deg
 , #f54ea2, #ff7676)!important;
    background: linear-gradient( 
45deg
 , #f54ea2, #ff7676)!important;
}

.bg-gradient-ohhappiness {
    background: #0C2F53;
    background: -webkit-linear-gradient( 
45deg
 , #0C2F53, #0C2F53)!important;
    background: linear-gradient( 
45deg
 , #0C2F53, #0C2F53)!important;
}

.bg-gradient-blooker {
    background: #fff200;
    background: -webkit-linear-gradient( 
45deg
 , #fff200, #f1bc50)!important;
    background: linear-gradient( 
45deg)!important;
}

.bg-gradient-blooker1{
    background: #fff200;
    background: -webkit-linear-gradient( 
45deg
 , #fff200, #f1dc50)!important;
    background: linear-gradient( 
45deg)!important;
}

.bg-gradient-blooker2 {
    color: #fff;
    background: #0C2F53;
    background: -webkit-linear-gradient( 
45deg
 , #0C2F53, #0C2F53)!important;
    background: linear-gradient( 
45deg
 , #0C2F53, #0C2F53)!important;
}

.btn-fund{
    /* box-shadow: 0 2px 6px 0 rgba(205, 222, 247, 0.65), 0 2px 6px 0 rgba(132, 175, 240, 0.55); */
    border: 1.5px solid #6078ea;
    border-radius: 10px;
}
.fa-coins{
    font-weight: 500;
    font-size: 25px;
    color: #000;
}
.fa-piggy-bank{
    font-weight: 500;
    font-size: 25px;
    color: #000;
}

/* ----- plus bank ----- */
@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
  }
.plus_bank{
  cursor: pointer;
}
.from-s-profile{
   border-radius: 12px;
   background-color: #0C2F53; 
   opacity: 0.8; 
}
/* .card-img-top{
    background: #0C2F53;
} */

.fa-image{
    font-size: 18px;
}
.card-create-post{
    box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
}
.text-post{
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.img-post{
    border-radius: 15px;
    width: 100%;
    height: auto;
}
.fa-comment{
    font-size: 18px;
    font-weight: 600px;
}
.bx-pin{
    font-size: 18px;
    font-weight: 600px;
}
.card-pie-user{
  border: 0px solid #000000; border-radius: 22px !important;
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1) !important;
  background: #fff200c7 !important;
}
.dash-user-1{
  min-height: 380px; 
  max-height: 325px;  
  background: rgb(252, 244, 211) !important;
  border: 0px solid #000000; border-radius: 22px !important;
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1) !important;
  border: 0px solid #0C2F53 !important;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.11);
}
.card-cont-DBpie{
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1) !important;
  border: 0px solid #0C2F53 !important;
  border-radius: 10px !important;
}
.card-cont-DBfund{
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1) !important;
  border: 0px solid #0C2F53 !important;
  border-radius: 10px !important;
}
.card-cont-db-share{
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1) !important;
  border: 0px solid #0C2F53 !important;
}
.card-cont-db-fund{
  overflow-x: auto ;
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1) !important;
  border: 0px solid #0C2F53 !important;
}
.h-card-cont-DBpie{
  border-radius: -10px -10px -10px -10px !important;
  background-color: #fff200 !important;
}
.header-cont-DBfund{
  border-radius: -10px -10px -10px -10px !important;
  background-color: #fff200 !important;
}


.title-dashbbord-user{
  color: #0C2F53;
  font-size: 23px;
  font-weight: 700;
}
.card-content-pie-user{
  max-height: 130px;
  background: rgb(252, 244, 211) !important;
  border: 0px !important;
  border-radius: 0px !important;
}
.img-card{
  margin-top: -60px;
}

.card-post{
  border: 0px solid #000000; 
  border-radius: 15px !important;
}
.pin:hover,.pin:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}
.btn-comment:hover {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}
.img-Slide{
    border: 2px solid #0C2F53;
}
.persen-fund{
    border-radius: 12px;
}
/* ------------------ BUTTON ---------------------- */
.button {
    position: relative;
    overflow: hidden;
    height: 2.2rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background: #FFF200;
    background-size: 400%;
    color: #000;
    border: none;
    cursor: pointer;
  }
  .button:hover{
    color: #FFF200 !important;
  }
  .button:hover::before {
    transform: scaleX(1);
  }
  
  .button-content {
    position: relative;
    z-index: 1;
  }
  
  .button::before {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background: linear-gradient(
      82.3deg,
      rgb(12, 47, 83, 1) 10%,
      rgb(12, 47, 83, 1) 90%
    );
    transition: all 0.300s;
  }
 /* ------------------- BUTTON Share ------------------- */
  .button-share {
    position: relative;
    overflow: hidden;
    height: 2.2rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background: #0C2F53;
    background-size: 400%;
    color: #ffffff;
    border: none;
    cursor: pointer;
  }
  .button-share:hover{
    border: 0%;
    color: #0C2F53 !important;
  }
  .button-share:hover::before {
    transform: scaleX(1);
  }
  
  .button-share-content {
    position: relative;
    z-index: 1;
  }
  
  .button-share::before {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background: linear-gradient(
      82.3deg,
      rgb(255, 242, 0, 1) 10%,
      rgb(255, 242, 0, 1) 90%
    );
    transition: all 0.300s;
  }
 /* ------------------- END ------------------- */
button {
    margin: 20px;
  }
  .custom-btn {
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }
  /* ---------------- BUTTON 2 ---------------- */
  .button2 {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #090909;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 13px;
    border-radius: 0.5em;
    background: #FFF200;
    border: 1px solid #e8e8e8;
  }
  
  .button2:active {
    color: #666;
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
  }
  
  .button2:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button2:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #0c2f53;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button2:hover {
    color: #ffffff;
    border: 1px solid #0c2f53;
  }
  
  .button2:hover:before {
    top: -35%;
    background-color: #0c2f53;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  
  .button2:hover:after {
    top: -45%;
    background-color: #0c2f53;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  /* ------------------- END ------------------- */

  /* ------------------- BUTTON 3 ------------------- */
  .button3 {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    color: #fff !important;
    z-index: 1;
    color: #090909;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 13px;
    border-radius: 0.5em;
    background: #0C2F53;
    border: 1px solid #e8e8e8;
  }
  
  .button3:active {
    color: #666;
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
  }
  
  .button3:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button3:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #fff200;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button3:hover {
    color: #0C2F53 !important;
    border: 1px solid #fff200;
  }
  
  .button3:hover:before {
    top: -35%;
    background-color: #fff200;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  
  .button3:hover:after {
    top: -45%;
    background-color: #fff200;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  /* -----------------  END ------------- */

 /* ------------- BUTTON DROPDOWN IN TABLE -------------- */
 .button-in-table {
    font-size: 13px;
    padding: 0.3em 0.5em;
    border: transparent;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    background: dodgerblue;
    color: white;
    border-radius: 4px;
   }
   
   .button-in-table:hover {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
   }
   
   .button-in-table:active {
    transform: translate(0em, 0.2em);
   }
  /* ------------ END ------------- */
  
  .btn-warning:hover{
    box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.1);
  }
  
  .btn-primary-1{
    color: #fff !important;
    background: #0C2F53 !important; 
    border: 0px solid #0C2F53 !important;
  }
  .btn-primary-1:hover{
    box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.1);
  }
  .plus-icon:hover{
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    25% {
      transform: rotate(-20deg);
    }
  
    50% {
      transform: rotate(0deg);
    }
  
    75% {
      transform: rotate(20deg);
    }
  
    100% {
      transform: rotate(0deg);
    }
  }

  /* 14 */
  .btn-14 {
    background: rgb(255,151,0);
    border: none;
    z-index: 1;
  }
  
.btn-14:hover {
    transform: translateY(-3px);
}
.btn-user-pro{
    background: rgb(255,151,0);
    border: none;
    z-index: 1;
  }
.btn-pro_user:hover{
    transform: scale(1.05);
}

   /* ---------- BUTTON add bank ----------- */
   .button-name {
    background-color: #fff200 !important;
    box-shadow: rgba(241, 238, 247, 0.3) 0 2px 4px,rgba(45, 35, 66, 0.15);
    color: #0C2F53;
    font-weight: 600 !important;
   }   
   .button-name:hover {
    transform: translateY(-2px);
   }
 
   /* ---------- BUTTON user ----------- */ 
   .btn-user-3:hover {
    transform: translateY(-1.50px);
   }

  .primary-share{
    background: #0C2F53 !important; 
    border: 0px solid #0C2F53 !important;
  }
  .editBtn {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    border: none;
    background-color: #4e6af5c9 !important;
    color: #000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.123);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  .btn-edit-news{
    background-color: #fff200 !important;
    border: #fff200 !important;
  }
  .btn-delete-news{
    border: red !important;
  }

  .deleteBtn {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    border: none;
    background-color: #f7061af1 !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.123);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }