/* Stylesfor side navigations */
 .sidebarstyle1{
    /* Add the blur effect */
    /*filter: blur(2px);*/
    /*-webkit-filter: blur(2px);*/
    /*background-color: rgb(0,0,0); Fallback color 
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
    */
       background-color: rgba(230, 230, 230,.9); /* Black w/opacity/see-through */
       color:#fff;
       width:210px;
       
       font-weight:bold;
       margin-top:42px;
       overflow-x: hidden; /* Hide horizontal scrollbar */
       z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;
       }
     .sidebarstyle2{
     background-color:#ebf2f9;
     z-index:3;
     color:rgb(29, 31, 33);
     width:35px;
     font-weight:bold;
     margin-top:43px;
     }
    .accordion .fontx{
   background-color:none;
   color:#6092cd;
   font-weight: 600;
    }
    .accordion span{
     font-weight: 400;
   
       }

 .accordion {
    background-color:transparent;
    cursor: pointer;
    padding:0.44em;
    width:260px;
    text-align: left;
    border: none; 
    outline: none;
    transition: 0.4s;
    font-family: 'Segoe UI light', sans-serif;
    font-weight:600;
    text-transform: capitalize;
    color:gray;
   }
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color:rgba(255,255,255,0.1);
    font-weight:600;
    color:#6092cd;
    border-left: 4px solid #6092cd;
  }
  .active, .accordion { 
    border-left: 4px solid #6092cd;
  }
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 5px;
    background-color:rgba(96, 146, 205,0.1);
    max-height: 0;
    font-family:segoe ui light;
    font-weight:200;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    width:260px;
  }
  .panel p {
    cursor:pointer; 
    margin:7px;
    font-size:1em;
    color: rgb(96, 146, 205);
  }
   
  .panel p:hover, .a:hover {
    color:#6092cd;
    cursor:pointer;
    font-weight:600;
  }
  .panel > p > a > .fontx{
  margin-right:8px;
  }
  .panel p:active, .a:active {
    color:#6092cd;
    cursor:pointer;
    font-weight:600;
  }
  .accordion:after {
   /* content: '\02795';  Unicode character for "plus" sign (+) */
   content: '\02795';
   font-size: 13px;
    color: rgba(96, 146, 205,1);
    float: left;
    margin-left: 5px; 
  }
  .active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
     font-size: 13px;
    color:#6092cd;
    float:left;
    margin-left: 5px;
  }

 /* FORM ANIMATION */
 
  .highlight {
    animation: highlightAnimation 0.5s ease-in-out 0s 2;
}

@keyframes highlightAnimation {
    0% { border-color: red; }
    50% { border-color: rgba(96, 146, 205, 1); }
    100% { border-color: red; }
}
   
.heart {
  fill: red;
  position: relative;
  top: 25px;
  width: 50px;
  animation: heart-pulse 3.5s ease infinite;
  margin-bottom:20px;
}

@keyframes heart-pulse {
0% { transform: scale(1); } 
14% { transform: scale(1); } 
24% { transform: scale(1.03); transition-timing-function: ease-in; } 
31% { transform: scale(1); transition-timing-function: ease-out; } 
41% { transform: scale(1); } 
45% { transform: scale(0.96); } 
49% { transform: scale(1.3); } 
52% { transform: scale(0.92); } 
55% { transform: scale(1); } 
69% { transform: scale(1); } 
80% { transform: scale(1.06); transition-timing-function: ease-in; } 
86% { transform: scale(1); transition-timing-function: ease-out; } 
100% { transform: scale(1); } 

} 
.payment-loader {
  border: 4px solid #6495ED;
  border-radius: 50%;
  border-top:  4px solid #6495ED;
  border-right: 4px solid #eee;
  border-bottom: 4px solid #eee;
  border-left: 4px solid #eee;
  width: 80px;
  height: 80px;
  -webkit-animation: payment-loader-spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes payment-loader-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

  .accordion {
    background-color:transparent;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.9s;
    font-weight:600;
  }
  
  .accordion:after {
    content: '\002B';
    color:gray;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2212";
     color:gray;
  }
  
  .payment_panel {
    padding: 0 18px;
    background-color:transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease-out;
  }