@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@700&display=swap');
*
{
     
    font-weight:100;
}
.card
{
 
 
background: rgba( 255, 255, 255, 0.45 ) !important;
box-shadow: 0 8px 32px 0 rgba(223, 224, 250, 0.822) !important;
backdrop-filter: blur( 8.0px );
-webkit-backdrop-filter: blur( 8.0px ) !important;
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
margin-bottom: 16px;

}
.card-body {    
    padding: 0px;
}
.cards-grid[data-columns]::before {
content: '4 .column.size-1of4';
display:none; 
}
.card-typical .card-typical-content .photo img {
display: block;
width: auto;
height: 80px;
margin: auto;
}
.card-typical {
background: #f8f9fa;
border: solid 1px #d8e2e7;
-webkit-border-radius: .25rem;
border-radius: 0rem;
}
.card-grid-col{
color:#818181;
}
.user-card-row .user-card-row-name a {
color: #787878;
font-weight: 400;
font-size: 16px;
}
.card-typical .card-typical-content .title a {
color: #787878;
}
.shadow,
.subscription-wrapper {
box-shadow: 0px 2px 19px 0px rgb(8 18 109 / 10%) !important;
}

.icon-primary {
color: #4a26fd;
}

.icon-bg-circle {
position: relative;
}

.icon-lg {
font-size: 37px !important;
}

.icon-bg-circle::before {
z-index: 1;
position: relative;
}

.icon-bg-primary::after {
background: #4a26fd !important;
}

.icon-bg-circle::after {
content: '';
position: absolute;
width: 68px !important;
height: 68px !important;
top: -35px !important;
left: 15px !important;
border-radius: 50%;
background: inherit;
opacity: .1
}

 

.icon-bg-yellow::after {
background: #f6a622 !important;
}

.icon-bg-purple::after {
background: #7952f5;
}

.icon-dark-yellow {
color: #f6a622;
}

.icon-bg-red::after {
background: #ef0078;
}

.icon-red {
color: #ef0078 !important;
}

.icon-bg-green::after {
background: #41c300;
}

.icon-green {
color:  #41c300 !important;
}

.icon-bg-orange::after {
background: #f47100 !important;
}

.icon-orange {
color: #f47100 !important;
}

 
.icon-bg-blue::after {
background: #2085ff;
}

.icon-blue {
color: #2085ff !important;
}
h4 {
font-size: 19px;
font-weight: 500;
}
.tables-page-content .tabs-section .card {
margin: 0px 13px;

}
.p6 {
color: #8a8a8a;
font-size: 12px;
padding: 35px 0px 0px 0px;
}

@media (max-width:520px) {
    
    .p6 {
        color: #8a8a8a;
        font-size: 12px;
        padding: 63px 0px 0px 0px !important;
    }
}
h4 {

color: #454646;
font-size: 18px;
padding: 10px 0px 0px 0px;
font-weight: 600 !important;
margin-bottom: 10px !important;
font-family: 'Roboto', sans-serif !important;
}
.model-box
{
    border: 1px solid #81818152;
        
    font-size: 20px;
    background: white;
    border-radius: 5px;
}

 
    
     
      .card-body {
           
          padding: 0px;
      }
      .cards-grid[data-columns]::before {
          content: '4 .column.size-1of4';
          display:none; 
      }
      .card-typical .card-typical-content .photo img {
          display: block;
          width: auto;
          height: 80px;
          margin: auto;
      }
      .card-typical {
          background: #f8f9fa;
          border: solid 1px #d8e2e7;
          -webkit-border-radius: .25rem;
          border-radius: 0rem;
      }
      .card-grid-col{
          color:#818181;
      }
      .user-card-row .user-card-row-name a {
          color: #787878;
          font-weight: 400;
          font-size: 16px;
      }
      .card-typical .card-typical-content .title a {
          color: #787878;
      }
      .shadow,
      .subscription-wrapper {
          box-shadow: 0px 2px 19px 0px rgb(8 18 109 / 10%) !important;
      }
      
      .icon-primary {
          color: #4a26fd;
      }
      
      .icon-bg-circle {
          position: relative;
      }
      
      .icon-lg {
          font-size: 40px;
      }
      
      .icon-bg-circle::before {
          z-index: 1;
          position: relative;
      }
      
      .icon-bg-primary::after {
          background: #4a26fd !important;
      }
      
      .icon-bg-circle::after {
          content: '';
          position: absolute;
          width: 68px;
          height: 68px;
          top: -35px;
          left: 15px;
          border-radius: 50%;
          background: inherit;
          opacity: .1
      }
      
      p,
      .paragraph {
          
          color: #8b8e93;
          font-size: 14px;
          line-height: 1.6;
        
      }
      
      .icon-bg-yellow::after {
          background: #f6a622 !important;
      }
      
      .icon-bg-purple::after {
          background: #7952f5;
      }
      
      .icon-dark-yellow {
          color: #f6a622;
      }
      
      .icon-purple {
          color: #7952f5;
      }
      
      .icon-cyan {
          color: #02d0a1;
      }
      
      .icon-bg-cyan::after {
          background: #02d0a1;
      }
      
      .icon-bg-red::after {
          background: #ef0078;
      }
      
      .icon-red {
          color: #ee0290;
    

      }
      
      .icon-bg-green::after {
          background: #41c300;
      }
      
      .icon-green {
          color: #41c300;
      }
      
      /* orange #f47100
      red #ef0078
      green #41c300, #41c300
      blue #6002ee */




      .icon-bg-orange::after {
          background: #f47100;
      }
      
      .icon-orange {
          color: #f47100;
      }
      
      .icon-pink {
          color: #f977b9;
      }
      .icon-purple {
          color: #8295f5;
      }
      .icon-cream {
          color: #e2a355d6;
      }
      .icon-yellow {
          color: #ffde3a;
      }
      .icon-mahroon {
          color: #bb0000;
      }
      .icon-bg-blue::after {
          background: #3682ff
      }
      
      .icon-blue {
          color: #3682ff;
      }
      h4 {
          font-size: 19px;
          font-weight: 500;
      }
      .tables-page-content .tabs-section .card {
         margin: 0px 13px;
      }
      .p6 {
          color: #8a8a8a;
          font-size: 12px;
          padding: 35px 0px 0px 0px;
      }
      h4 {
        
          color: #454646;
          font-size: 18px;
          padding: 10px 0px 0px 0px;
          font-weight: 600;
          margin-bottom: 10px;
      }
      .model-box
          {
              border: 1px solid #81818152;
               
              font-size: 20px;
              background: white;
              border-radius: 5px;
          }
      
          @import url('https://fonts.googleapis.com/css?family=Exo:400,700');
          .context {
          width: 100%;
          position: absolute;
          top:10px;
          
      }
      
       
      .area{
          background: #4e54c8;  
          background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
          width: 100%;
      }
      
      .circles{
          
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
      }
      
      .circles li{
          position: absolute;
          display: block;
          list-style: none;
          width: 20px;
          height: 20px;
          background: rgba(255, 255, 255, 0.2);
          animation: animate 25s linear infinite;
          bottom: -150px;
          
      }
      
      .circles li:nth-child(1){
          left: 25%;
          width: 80px;
          height: 80px;
          animation-delay:1s;
      }
      
      
      .circles li:nth-child(2){
          left: 10%;
          width: 20px;
          height: 20px;
          animation-delay: 2s;
          animation-duration:12s;
      }
      
      .circles li:nth-child(3){
          left: 70%;
          width: 20px;
          height: 20px;
          animation-delay:12s;
      }
      
      .circles li:nth-child(4){
          left: 40%;
          width: 60px;
          height: 60px;
          animation-delay: 3s;
          animation-duration:15s;
      }
      
      .circles li:nth-child(5){
          left: 65%;
          width: 20px;
          height: 20px;
          animation-delay:12s;
      }
      
      .circles li:nth-child(6){
          left: 75%;
          width: 110px;
          height: 110px;
          animation-delay:12s;
      }
      
      .circles li:nth-child(7){
          left: 35%;
          width: 150px;
          height: 150px;
          animation-delay: 12s;
      }
      
      .circles li:nth-child(8){
          left: 50%;
          width: 25px;
          height: 25px;
          animation-delay: 15s;
          animation-duration:12s;
      }
      
      .circles li:nth-child(9){
          left: 20%;
          width: 15px;
          height: 15px;
          animation-delay: 1s;
          animation-duration: 3s;
      }
      
      .circles li:nth-child(10){
          left: 85%;
          width: 150px;
          height: 150px;
          animation-delay: 0s;
          animation-duration: 12s;
      }
      .alert-msg {
          background:#f47100;
          padding:5px; 
          color:#fff; 
          border-radius:10px;
          font-size: 18px;
      }
      .alert ul li:before {
          content: '';
          display: block;
          width: 6px;
          height: 6px;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 8px;
          border:none; 
      }
      .btn-green 
      {
          border-radius:50px;
      }
      
      
      @keyframes animate {
      
          10%{
              transform: translateY(0) rotate(0deg);
              opacity: 1;
              border-radius: 0;
          }
           
          100%{
              transform: translateY(-1000px) rotate(720deg);
              opacity: 1;
              border-radius: 50%;
          }
      
      }
      .flex-wrapper {
        display: flex;
        flex-flow: row nowrap;
      }
      
      .single-chart {
        width:94%;
        justify-content: space-around ;
      }
      
      .circular-chart {
          display: block;
          margin: 10px auto;
          max-width: 100%;
          max-height: 204px;
      }
      
      .circle-bg {
        fill: none;
        stroke: #eee;
        stroke-width: 3.8;
      }
      
      .circle {
        fill: none;
        stroke-width: 2.8;
        stroke-linecap: round;
        animation: progress 1s ease-out forwards;
      }
      
      @keyframes progress {
        0% {
          stroke-dasharray: 0 100;
        }
      }
      
      .circular-chart.blue .circle {
        stroke: #3c9ee5;
      }
      
      .percentage {
        fill: #666;
       
        font-size: 0.5em;
        text-anchor: middle;
      }
      ol {
          counter-reset: li; /* Initiate a counter */
          list-style: none; /* Remove default numbering */
          *list-style: decimal; /* Keep using default numbering for IE6/7 */
          font: 15px 'trebuchet MS', 'lucida sans';
          padding: 0;
          text-shadow: 0 1px 0 rgba(255,255,255,.5);
        }
      
        ol ol {
          margin: 0 0 0 2em; /* Add some left margin for inner lists */
        }
        .rounded-list li{
          position: relative;
          display: block;
          padding: 10px 45px;
          margin: .5em 0;
          background: #ece6e6;
          color: #444;
          text-decoration: none;
          border-radius: .3em;
          transition: all .3s ease-out;
        }
      
        .rounded-list a:hover{
          background: #71c016 !important;
          color: #fff;
          padding:2px;
          border-radius:50px;
          font-weight:0px;
        }
      
        .rounded-list a:hover:before{
          transform: rotate(360deg);
        }
         
        .rounded-list a:before {
          content: counter(li);
          counter-increment: li;
          color:#fff;
          position: absolute;
          left: -10px;
          top: 50%;
          margin-top: -1.3em;
          background: #ee741f;
          height: 37px;
          width: 37px;
          line-height: 2em;
          border: .3em solid #fff;
          text-align: center;
          border-radius: 2em;
          transition: all .3s ease-out;
      }
      .social {
          margin: 0;
          padding: 0;
      }
      
      .social ul {
          margin: 0;
          padding: 5px;
      }
      
      .social ul li {
          margin: 5px;
          list-style: none outside none;
          display: inline-block;
      }
      .social i {
          width: 40px;
          height: 40px;
          color: #FFF;
          
          font-size: 22px;
          text-align:center;
          padding-top: 12px;
          border-radius: 50%;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          -o-border-radius: 50%;
          transition: all ease 0.3s;
          -moz-transition: all ease 0.3s;
          -webkit-transition: all ease 0.3s;
          -o-transition: all ease 0.3s;
          -ms-transition: all ease 0.3s;
      }
      
      .social i:hover {
          color: #FFF;
          text-decoration: none;
          transition: all ease 0.3s;
          -moz-transition: all ease 0.3s;
          -webkit-transition: all ease 0.3s;
          -o-transition: all ease 0.3s;
          -ms-transition: all ease 0.3s;
      }
      .social .fa-facebook  { /* round facebook icon*/
          background: #4060A5;
      }
      
      .social .fa-twitter  { /* round twitter icon*/
          background: #00ABE3;
      }
      
      .social .fa-google-plus  { /* round google plus icon*/
          background: #e64522;
      }
      
      .social .fa-github  { /* round github icon*/
          background: #343434;
      }
      
      .social .fa-pinterest  { /* round pinterest icon*/
          background: #cb2027;
      }
      
      .social .fa-linkedin { /* round linkedin icon*/
          background: #0094BC;
      }
      
      .social .fa-flickr  { /* round flickr icon*/
          background: #FF57AE;
      }
      
      .social .fa-instagram  { /* round instagram icon*/
          background: #F77737;
      }
      
      .social .fa-share-square-o { /* round vimeo square icon*/
          background: #00a8ff;
      }
      
       
      
      .social .fa-youtube  { /* round youtube icon*/
          background: #FF1F25;
      }
      .fa-qrcode
      {
          background-color: rgb(230, 52, 111);
      }
      .social .fa:hover
      {
          background: #000 !important;
          color: #fff;
          transform: rotate(360deg);
         transition: 0.6s;
      }
      hr {
        height: 4px;
        margin-left: 3px;
        margin-bottom:0px;
        margin-top:0px;
      }
      .hr-success{
        background-image: -webkit-linear-gradient(left, rgba(15,157,88,.8), rgba(15, 157, 88,.6), rgba(0,0,0,0));
      }
      .hr-primary {
          background-image: -webkit-linear-gradient(left, rgb(0 168 255), rgb(241 142 73), rgba(0,0,0,0));
      }
       
      .search-bar{
          border-radius: 50px !important;
          border: 2px solid #b8b6b521  !important;
          width: 100%;
          padding: 5px 13px;
           
      } 
     
      .icon-bg-circle::after {
          content: '';
          position: absolute;
          width: 45px;
          height: 43px;
          top: -11px;
          left: 11px;
          border-radius: 50%;
          background: inherit;
          opacity: .1;
      }
        
      .icon-bg-blue::after {
          background: #7952f5
      }
      
      .icon-bg-red::after {
          background: #ef0078
      }
       
      .icon-bg-green::after {
          background: #41c300
      }
      .icon-bg-orange::after {
          background: #f47100;
      }
      .model-box
          {
              border: 1px solid #81818152;
              font-size: 20px;
              background: white;
              border-radius: 5px;
          }
          .modal-footer 
          {
           
          padding: 11px 18px;
          border-top:none !important;
      }
      .main-content {
          padding-top: 100px;
          padding-bottom: 100px;
      }
      
      .m-r-5 {
          margin-right: 5px;
      }
      
      .box {
          margin-bottom: 25px;
          border-radius: 5px;
          background: #fff;
           
      }
      .box__header {
          padding: 20px;
          border-bottom: 1px solid #ddd;
      }
      .box__header h1,
      .box__header h2,
      .box__header h3,
      .box__header h4,
      .box__header h5,
      .box__header h6 {
          margin-bottom: 0;
      }
      .box__body {
          padding: 20px;
      }
      
      .timeline__row {
          display: flex;
          position: relative;
      }
      .timeline__row_icon {
          width: 30px;
          margin-right: 20px;
          z-index: 1;
      }
      .timeline__row_content {
          width: calc(100% - 30px);
          margin-bottom: 20px;
      }
      .timeline__row_content .badge {
          margin-bottom: 10px;
      }
      .badge .badge-curved
      {
          font-size:17px;
      }
      /* .timeline__row_content_desc {
          padding: 15px;
          border-radius: 5px;
          background: #fff;
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
      } */
      .timeline__row:nth-last-child(1) .timeline__row_content {
          border: none;
          padding-bottom: 0;
          margin-bottom: 10px;
      }
      .timeline__row:nth-last-child(1):before {
          height: 0;
      }
      .timeline__row:before {
          content: "";
          position: absolute;
          width: 1px;
          height: 100%;
          left: 15px;
          background: #d5d5d5;
      }
      
      .timeline .timeline-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          width: 30px;
          border-radius: 30px;
          color: #03a9f4;
          background: #fff;
          border: 2px solid #03a9f4;
      }
      .timeline .timeline-icon.success {
          color: #4caf50;
          border-color: #4caf50;
      }
      .timeline .timeline-icon.warning {
          color: #ff9800;
          border-color: #ff9800;
      }
      .timeline .timeline-icon.danger {
          color: #f44336;
          border-color: #f44336;
      }
      @media (min-width: 576px)
      {
          .modal-dialog 
          {
          max-width: 580px;
          margin: 30px auto;
          }
      }
      .modal-footer {
          display: -ms-flexbox;
          display: block; 
      }

      .side-menu-list a, .side-menu-list li>span {
        padding: 0px 19px;
        display:block !important;
        
    }
     
    .new-icon
    {
        text-align:center;
        font-size:24px !important;
         
    }
      .side-menu-list>li a  {
         
        line-height:21px;
        font-size:20px;
        margin-left:0px !important;
        padding-left:8px !important;
        padding-top:4px !important; 
    }  

    .side-menu-list>li {
        text-align:center;
        margin-bottom:6px;
        
    }
    .side-menu-list a, .side-menu-list li>span 
        {
            padding: 0px 20px !important;
            display:block !important;
            color:#5a5858;
            text-align:center;
        }
     
    .jspVerticalBar
    {
        width:7px;
    }
    #left-side-menu
    {
        width:105px;
    }
    @media only screen and (max-width:1056px)
    {
        .control-panel .page-content {
            padding-right: 0;
            padding-left: 0 !important;
        }
    }
     
    .side-menu-list li a span
    {
        font-size:14px;
        color: #000;
    }
    
    .with-side-menu .page-content {
        padding-left: 132px;
    }
    .domain-link
    {
        padding: 10px 16px;
        
        border-bottom-right-radius:10px;
        border-bottom-left-radius:10px;

        background: rgb(54 130 255);
        backdrop-filter: blur( 6.0px );
        opacity: 0.8;

        backdrop-filter: blur( 6.0px );
        -webkit-backdrop-filter: blur( 6.0px );
 
    }

    .domain-link a
    {
        color:#fff;
        font-size: 17px;
        font-weight: 500;
    }
    .domain-link 
   {
    transition: all .3s ease-out;
   } 

   .domain-link :hover{
       color:#000;
       transform: rotate(360deg);
   }
   .select2-container--default .select2-selection--single {
    border-radius: 0px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3C8DBC;
    border: #3C8DBC;
    border-radius: 0px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
   color: white;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
    text-align: right;
}
.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #d2d6de;
     border-radius: 0px;
   cursor: text;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ced2d4!important;
  color: #21201f!important;
}
.select2-results__option[aria-selected=true] {
    color: #00a8ff!important;
    background-color: #d2bff3!important;
}

.form-check-input {
position: absolute;
margin-top:0px;
margin-left:0px;
}
 .tabs-section-nav-inline .nav { 
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.tabs-section>.tab-content:not(.no-styled) 
{
padding-top:20px;
padding-bottom:5px;
}
.col_line_height
{
    line-height:30px;
}
select.form-control:not([size]):not([multiple]) {
height: calc(2rem + 2px);
font-size: 14px;
}
.btn-blue
{
    border-radius:50px;
    background-color:#0d75e1!important;
    border-color: #0d75e1 !important;
    width:auto;
    margin-bottom: 5px;	
}
.btn-red
{
    border-radius:50px;
    width:auto;
    background-color:#e62f2fd1!important;
    border-color: #e62f2fd1 !important;
    margin-bottom: 5px;	
}
.btn-fix-button
{
    position: relative !important;
    left:33%;
    
}
@media only screen and (max-width:1056px) {
.btn-fix-button {
    left:6%;
}
}

/* .tables-page-content .tabs-section .active, .tables-page-content .tabs-section .infobtn:hover {
    background-color: #6d6969;
    color: black;
} */
.model-box
    {
        border: none !important;
        padding: 0px 5px;
        font-size: 20px;
        background:none !important;
        border-radius: 5px;
}
.fix-button {
    position:fixed;
    left: 0px;
    bottom: 0;
    width: 100%;
    background-color: #ededed;
    color: white;
    text-align: center;
    padding: 5px 0px;
    box-shadow: 0px -15px 10px -15px #dcdcdc;
}

.red-background
{
	font-size: 18px;
    background: #fff !important;
    padding: 7px 4px 5px 8px;
    border-radius: 50px;
    border: 1px solid #fa6ab24f !important;

}
.green-background
{
	font-size: 18px;
    background:  #ffffff !important;
    padding: 8px 5px 6px 9px;
    border-radius: 50px;
    border: 1px solid #66cc3391 !important;
  
}
.blue-background
{
	font-size: 18px;
    padding: 8px 10px 6px 9px;
    border-radius: 50px;
    background: #fff !important;
    border: 1px solid #2085ff52 !important;
    backdrop-filter: blur( 4.0px );
    -webkit-backdrop-filter: blur( 4.0px );
    border-radius: 50px;
 
}
.orange-background
{
	font-size: 18px;
    background:#fff;
    padding: 8px 10px 6px 9px;
    border-radius: 50px;
    border: 1px solid #ffc28d;
  
}

.site-header .user-menu.dropdown {
    float: right !important;
    margin: 0 0 0 15px;
    height: 30px;
    line-height: 30px;
}
.back-button
{
     
    color: white;
    border-radius: 50px;
   
     
}

.btn.btn-primary {
    background-color: #00a8ff !important;
    border-color: #00a8ff !important;
}

.btn-red-background
{
	font-size: 18px;
    background: #fff;
    padding: 6px 4px;
    border-radius: 50px;
    border: 1px solid #f7e6e6 !important;
}
.btn-green-background
{
	font-size: 18px;
    background:  #fff;
    padding:5px;
    border-radius: 50px;
    border: 1px solid #dbf9d3;
}
.btn-blue-background
{
	font-size: 18px;
    background:#fff;
    padding:5px 5px;
    border-radius: 50px;
    border:1px solid #eae3ff !important;
}
.btn-orange-background
{
	font-size: 18px;
    background:#fff;
    padding: 5px;
    border-radius: 50px;
    border: 1px solid  #ebdacd;
}
#redbtb{
    color: #ef0078;
  }
  .btn-green-btn
  {
    background-color: #41c300!important;
    border-color: #41c300 !important;
    padding: 6px 15px;
    border-radius: 25px !important;
    color:#fff !important;
    font-size: 14px !important;
  }

  .btn-red-btn
  {
    background-color: #ff0000!important;
    border-color: #f52c2c !important;
    padding: 6px 15px;
    border-radius: 25px !important;
    color:#fff !important;
    font-size: 14px !important;
  }
  .import-csv {
    color: #6d6f71 !important;
    cursor: pointer  !important;
    font-size: 18px  !important;
    text-align: center  !important;
}
.download-csv-file-col {
    margin-top: 0px !important; 
    text-align: center;
}
.h5-heading {
   
    color: #454646;
    font-size: 14px;
    padding: 10px 0px 0px 0px;
    font-weight: 600;
    margin-bottom: 10px;
}
.image-not-found
{
    width: 360px;
}
@media only screen and (max-width:767px) {
    .menu-tabs {
      display:none !important;
    }
  }
.border-radius
{
    border-radius:50px !important;  
}
.table-heading th 
   {
     text-align:center;
     background:#41c300 !important;
     color:#fff !important;
     margin-bottom:5px;
     padding: 13px 0px !important;
   }

   .heading
{
    border-bottom: 1px solid #f1f1f1;
    font-size: 15px;
    color: #ffffff !important;
    background: #41c300 !important;
    text-transform: uppercase !important;
    font-weight: 500;
    padding:10px;
    text-align:center;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
     
}
.thead th {
    border-bottom: 1px solid #f1f1f1;
    font-size: 12px !important;
    color: #ffffff !important;
    background: #41c300 !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-top:none !important;
}
.tables-page-content form label {
    color: #818181;
    font-size: 14px !important;
}
label
{
    font-size: 14px !important;
    color: #818181;
}
.btn-rounded
{
    border-radius:50px !important;
    padding:6px 10px;
}
.bold
{
    font-weight: bold;
}
.border-top-left
{
    border-top-left-radius: 10px;
     
}
.border-top-right
{
    border-top-right-radius: 10px;
}
.border-box {
    border-radius:50px; /*1*/
    border:3px solid transparent; /*2*/
    background:linear-gradient(221deg,#41c300 ,#f47100, #00ABE3 ) border-box; /*3*/
    -webkit-mask: /*4*/
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
    mask-composite: exclude; /*5*/
    animation: glowing 20s linear infinite;
  }
  @keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button {
    position: absolute;
    padding: 5px 7px;
    /* margin: 0px -61px 10px 0px; */
    float: left;
    width: 32px;
    height: 35px;
    border-radius: 50px;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
    opacity: .5;
    top: 4px;
    left: 10px;
}
/* .blue
{
	background-color: #007bff;
    border-bottom: 5px solid #a5a099;
    text-shadow: 0px -2px #dedede;
}  */
  
.selfcircleadd {
padding: 5px 9px !important;
}
  .thead th {
    border-bottom: 1px solid #f1f1f1;
    font-size: 15px;
    color: #ffffff !important;
    background: #6b7a85 !important;
    text-transform: uppercase !important;
    font-weight: 500;
}
.table-body td
{
    font-size: 14px;
    color: #818181 !important;
    height:40px;
}
 
@media only screen and (max-width: 926px) {
	.swap-on-mobile {
		display: flex !important;
		flex-direction: column-reverse;
	}
}
.text-center
{
    text-align: center !important;
}
.btn-orange-btn
{
    padding: 6px 15px;
    background: #f47100 !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: 14px !important;
}

.btn-blue-btn
{
    padding: 6px 15px;
    background-color: #00a8ff !important;
    border-color: #00a8ff !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: 14px !important;
}

.qr-header {
    background: #3682ff;
    border-bottom-left-radius: 46%;
    border-bottom-right-radius: 46%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.qr-code {
    background: #3682ff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

 #left-side-menu::before
 {
    background: rgba( 255, 255, 255, 0.55 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 6.0px );
    -webkit-backdrop-filter: blur( 6.0px !important);
    border: 1px solid rgba(245, 245, 245, 0.938);
 }
 .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: linear-gradient( 225deg,  #c4ecfb,#ecf9fe, #ffe2e4) !important;     
    box-shadow: none !important;
    padding: 20px 15px 0 0;
    
    }
    
    .hamburger-new
    {
        margin-left: 100px !important;
        position: absolute !important;
        left: 1% !important;
    }
    .company-name
    {
        margin-left: 100px !important;
        position: absolute !important;
        left: 7% !important;
        top: 12px;
    }
    /* #left-side-menu .side-menu-list
    {
        margin-top:0px !important;
    } */

    .alert 
    {
        font-size: 14px !important;
    }

    body{
        background-image: linear-gradient(160deg, #c0f3ffb8, #fff, #fbc5c3) !important;
            /* background: linear-gradient(180deg
        ,#cdeef2,#fff 20%,#fff 60%,#cdeef2) !important; */
        font-family: 'Oxygen', sans-serif !important;
        }
    .tab-content 
    {
       background: rgba( 255, 255, 255, 0.25 ) !important;
       box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
       /* backdrop-filter: blur( 4px ) !important;
       -webkit-backdrop-filter: blur( 4px ) !important; */
       border-radius: 10px !important;
       border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
       
    }

    .key-green
    {
    color: #b8f3cb;
    position: relative;
    top: -21px;
    bottom: 0;
    font-size: 30px;
    }

    .key-red
    {
    color: #ffd7d7;
    position: relative;
    top: -21px;
    bottom: 0;
    font-size: 30px;
    }

    .key-orange
    {
    color: #f5e2cb;
    position: relative;
    top: -21px;
    bottom: 0;
    font-size: 30px;
    }

    .key-blue
    {
    color: #d5e8ff;
    position: relative;
    top: -21px;
    bottom: 0;
    font-size: 30px;
    left: -5px;
    }
.color-red
{
    color:red;
}
 
.icon-md
{
    font-size:20px;
}

.report-list li{
    line-height: 21px;
    font-size: 14px;
     padding: 5px  !important;
     text-align: left !important;
     
    
  } 
   
  .report-list>li a {
    line-height: 21px;
    padding: 5px  !important;
      color:#454646!important 
  }

  .bootstrap-table .table a, .fixed-table-body .table a, .table a {
    border-bottom: none !important;
    position: relative; 
    top: -1px;
}

.ribbon.right-top {
    position: relative;
    top: 10px;
    right: -1px;
    color: #fff;
    background: #00a8ff;
    padding: 5px 12px 5px 9px;
    white-space: nowrap;
    top: -22px;
    bottom: auto;
    right: auto;
    left: -34px;				
}
.ribbon.right-top:before {
    position: absolute;
    left: -10px;
    bottom: 0;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 17px 10px;
    border-top-color: transparent!important;
    border-right-color: transparent!important;
    border-bottom-color: #00a8ff;
    border-left-color: transparent!important;
}
.ribbon.right-top:after {
    position: absolute;
    left: -10px;
    top: 0;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 17px 0;
    border-top-color: transparent!important;
    border-right-color: #00a8ff;
    border-bottom-color: transparent!important;
    border-left-color: transparent!important;
}
 

@media screen and (max-width:767px){
    .ribbon.right-top{	
        position: absolute;
        top: 10px;
        right: 0px;
        color: #fff;
        background: #00a8ff;
        padding: 5px 12px 5px 9px;
        white-space: nowrap;
        top: 0px;
        bottom: auto;
        right: -17px;
        left: auto;
    }
    .pagination.pagination-sm.for-ribbon{
        margin-bottom: 0px!important;
    }
}

.ribbon {
    font-size: 16px !important;
    width: 100px;   
    position: relative;
    background-color:#41c300 ;
    color: #fff;
    text-align: center;    
    padding: 5px 0px;
    margin: 0px;
    top: 0px;
}
.ribbon_inactive{
    font-size: 16px !important;
    width: 65px;   
    position: relative;
    background-color:red ;
    color: #fff;
    text-align: center;    
    padding: 5px,0px;
    margin: 0px;
    top: 0px;
}
.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    border:16px solid #41c300 !important;
}
.ribbon:before {
    left: -16px;
    border-right-width: 1.5em;
    border-left-color: transparent !important;
}
.ribbon:after {
    left: 82px ;
    border-left-width: 1.5em;
    border-right-color: transparent !important;
}
.ribbon_inactive:before, .ribbon1:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    border:16px solid red !important;
}
.ribbon_inactive:before {
    left: -16px;
    border-right-width: 1.5em;
    border-left-color: transparent !important;
}
.ribbon_inactive:after {
    left: 82px ;
    border-left-width: 1.5em;
    border-right-color: transparent !important;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
.ribbon_inactive .ribbon_inactive-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon_inactive .ribbon_inactive-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

.ribbon_due {
    font-size: 16px !important;
    width: 100px;   
    position: relative;
     background-color: #f5a623;
    color: #fff;
    text-align: center;    
    padding: 5px 0px;
    margin: 0px;
    top: 0px;
}
.ribbon_due:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    border:16px solid #f5a623;
}
.ribbon_due:before {
    left: -16px;
    border-right-width: 1.5em ;
    border-left-color: transparent;
}
.ribbon_due:after {
    left: 82px;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon_due .ribbon-content_due:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon_due .ribbon-content_due:after {
    right: 0;
    border-width: 1em 1em 0 0;
}


.ribbon_unpaid {
    font-size: 16px !important;
    width: 100px;   
    position: relative;
    background-color: red;
    color: #fff;
    text-align: center;    
    padding: 5px 0px;
    margin: 0px;
    top: 0px;
}
.ribbon_unpaid:before,.ribbon_unpaid:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    border:16px solid  red;
}
.ribbon_unpaid:before {
    left: -16px;
    border-right-width: 1.5em;
    border-left-color: transparent;
}
.ribbon_unpaid:after {
    left: 82px;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon_unpaid .ribbon-content_unpaid:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon_unpaid .ribbon-content_unpaid:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
/* dues */


.ribbon_dues {
    font-size: 16px !important;
    width: 100px;   
    position: relative;
    background-color: orange;
    color: #fff;
    text-align: center;    
    padding: 5px 0px;
    margin: 0px;
    top: 0px;
}
.ribbon_dues:before,.ribbon_dues:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    border:16px solid  orange;
}
.ribbon_dues:before {
    left: -16px;
    border-right-width: 1.5em;
    border-left-color: transparent;
}
.ribbon_dues:after {
    left: 82px;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon_dues .ribbon-content_dues:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon_dues .ribbon-content_dues:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
.tab-content{
    background: rgba( 255, 255, 255, 0.45 ) !important;
    box-shadow: 0 8px 32px 0 rgb(223 224 250 / 82%) !important;
    backdrop-filter: blur( 8.0px ) !important;
}

  
.h-divider {
    margin: auto;
    width: 100%;
    position: relative;
  }
  
  .h-divider .shadow {
    overflow: hidden;
    height:6px;
  }
  
  .h-divider .shadow:after {
    content: '';
    display: block;
    margin: 5px auto 0;
    width: 100%;
    border: 1px solid #c2c2c2;
  }
  
  .h-divider .text {
    width: 145px;
    height: 34px;
    padding: 10px;
    position: absolute;
    bottom: 100%;
    margin-bottom: -18px;
    left: 47%;
    margin-left: -60px;
    border-radius: 5px;
    box-shadow:0 2px 2px #eef8fe;
    background:#e6f6fc;
    top: -11px;
  }
  
  .h-divider .text i {
    position: absolute;
    top: -4px;
    bottom: 5px;
    left: 4px;
    right: 4px;
    border-radius:10px;
    
    text-align: center;
    line-height: 40px;
    font-style: normal;
    color: #202121;
  }
   
  .side-icons-youtube{
    padding: 6px 4px 6px 4px !important;
  }
  .side-icons-back{
    padding: 6px 10px 5px 10px !important;
  }
  .support-icon
  {
    background: #2085ff;
    color: #fff !important;
    padding: 7px;
    font-size: 28px;
  }
   
  .keynum
  {
    font-size: 1rem;
    line-height: 1.7;
    margin: 15px;
    padding: .375rem .75rem;
    box-shadow: 0 0 #d9d9d9, 0 0 #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 0 5px #d9d9d9, 2px 2.5px 4px #adb5bd, 0 -1px 2.5px #adb5bd;
    background-color: #fff;
    border-color: #e6e6e6;
    color: #343a40;
    cursor: pointer;
    border: 1px solid #e6e6e6;
     
  }
   
.keynum::after {
    border-width: .125rem;
    bottom: -13px;
    left: -.375rem;
    right: -.375rem;
    top: 3px;
   
    transform-style: preserve-3d;
    transition: all .25s cubic-bezier(.2,1,.2,1);
}
.keynum :active {
    background-color: #e6e6e6;
    box-shadow: 0 0 1px 1px #b3b3b3;
    color: #343a40;
}
  .keynum:hover {
    box-shadow: 0 0 #d9d9d9, 0 0 #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 2px 2px 4px #adb5bd, 0 -1px 2px #adb5bd;
    background-color: #e6e6e6;
    color: #343a40;
}
 .keynum:focus  
 {
    outline: none;
}
/* Radio Button for Language */
    /* =============================================== */
    .rad-label {
        display: flex;
        align-items: center;

        border-radius: 100px;
        padding: 7px 16px;
        margin: 5px 0;

        cursor: pointer;
        transition: .3s;
        }

        .rad-label:hover,
        .rad-label:focus-within {
        background: hsla(0, 0%, 80%, .14);
        }

        .rad-input {
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
        z-index: -1;
        }

        .rad-design {
        width: 17px;
        height: 17px;
        border-radius: 100px;
        background: linear-gradient(to right bottom, hsl(150, 100%, 54%), hsl(225, 97%, 62%));
        position: relative;
        }

        .rad-design::before {
        content: '';

        display: inline-block;
        width: inherit;
        height: inherit;
        border-radius: inherit;

        background: hsl(0, 0%, 90%);
        transform: scale(1.1);
        transition: .3s;
        }

        .rad-input:checked+.rad-design::before {
        transform: scale(0);
        }

        .rad-text {
        color: hsl(0, 0%, 60%);
        margin-left: 14px;
         
        font-size: 15px;
        font-weight: 900;

        transition: .3s;
        }

        .rad-input:checked~.rad-text {
        color: hsl(0, 0%, 40%);
        }