.gracefulexit {
            margin: 100px auto;
            padding: 40px 25px;
            width: 60%;
            background-color: #fff4f4;
            border: 2px dashed #ffd7d7;
            color: #000;
            font-size: 18px;
            text-align: center;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            }

            .popup-content-area {
            margin: 10px;
            padding: 15px;
            background-color: #fff;
            border: 4px solid #e2e7e9;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius: 10px;
            overflow: auto!important;
            }

           .invoicescontent {
            text-align: center;
            background-color: #f7f7f7;
            border: 1px dashed #ccc;
            padding: 10px!important;
            } 
            
            
            #unpaidinvoiced{
            color: red!important; 
            }
            #paidinvoiced{
            color: green!important; 
            }
            #cancellinvoiced{
            color: blue!important;    
            }
            
            #draftinvoiced{
            color: #ADFF2F!important;  
            }
           
            .clientssummarybox .titleothers{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important; 
            }
           
            .clientssummarybox.titlerecents
            {
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;  
            }
            .clientssummarystats
            {
            width: 100%;
            border: 4px solid #fff;
            border-radius: 4px!important;
            }
           
           
            .clientssummarybox .titlefiles{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important; 
            }
            .clientssummarybox .titleotheractions{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;    
             }
            .clientssummarybox .titleproducts{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;    
            }

            .clientssummarybox .titleInvoices{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;      
            }
            .clientssummarybox .titleclientsinfo{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;    
            }

            .clientssummarybox .titlecontacts{
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;  
            }
            .clientssummarybox .titlesendemail {
            text-align: center;
            padding: 0 0 10px 0;
            font-family: Arial;
            font-size: 16px;
            font-weight: 700;
            color: #1a4d80!important;
            }
            #clientsearchresults{
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 3px;
            margin: 0;
            white-space: nowrap;
            font-size: 11px;
            font-family: Tahoma!important; 
            }
            
            
            #clientsearchresults .searchresultheader {
            background-color: #ccc;
            padding: 2px;
            font-weight: 700;
            text-align: center!important;
            }
            
            #clientsearchresults .searchresult{
            background-color: #f4f4f4;
            border-top: 3px solid #fff;
            padding: 2px 0 2px 5px!important;
            }
            
            #generatedownloadexport{
              background-color:#f8f8f8;
              margin:10px 0 20px;
              padding:20px;
              border-radius:4px!important;  
            }           
            .report-filters-wrapper {
            margin: 20px auto 0;
            padding: 20px;
            background-color: #f6f6f6;
            border-top: 1px solid #ccc!important;
            }
            
            .report-filters-wrapper
            .inner-container {
            margin: 0 auto;
            max-width: 1400px!important;
            } 
           
           
           
            .zoom {
            background-color: purple;
            transition: transform .1s;
            margin: 0 auto;
            }
            
            .zoom:hover {
            -ms-transform: scale(1); 
            -webkit-transform: scale(1);
            transform: scale(1.1); 
            animation: zoom-in-zoom-out 1s ease infinite;
            }
          
           .card-icon {
            font-size: 2rem;
            color: #B0B0B0;
            transition: color 0.3s;
        }
        .card-icon:hover {
            color: #003756;
        }
        .card-title {
            margin-bottom: 10px;
            color: #003756;
            font-size: 16px;
        }
        .card-text {
            color: #909090;
        }
       
        .card-img-holder {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
    
 .system-settings-index .setup-side-menu:after {
    content: "";
    display: table;
    clear: both!important;
}


    .system-settings-index{
    float: left;
    width: 236px;
    margin-top: 12px!important;   
    }

    @media only screen and (max-width: 919px) {
        .system-settings-index .setup-side-menu li {
            float:left !important;
        }
    }

.system-settings-index .setup-side-menu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #666;
    font-weight: 700;
    border-left: 3px solid rgba(0,0,0,.05)!important;
}

.system-settings-index .setup-side-menu li a:hover {
    background-color: rgba(0,0,0,.05)!important;
}

.system-settings-index .setup-side-menu li.active a {
    background-color: rgba(0,0,0,.1);
    border-left-color: #68a933;
    background-color: #e7efe2!important;
}

.system-settings-index .recently-visited {
    margin: 50px 0 25px 0;
    color: #999!important;
}

.system-settings-index .recently-visited h3 {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    font-size: 1.15em;
    color: #666;
    border-bottom: 1px solid #ddd!important;
}

.system-settings-index .recently-visited ol {
    margin: 10px 0;
    padding: 0 18px;
    border-left: 0;
    color: #848484!important;
}

.system-settings-index .recently-visited ol a {
    display: block;
    color: #848484;
    font-size: .96em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis!important;
}

.system-settings-index .recently-visited ol a:hover {
    color: #666!important;
}

@media only screen and (max-width: 919px) {
    .system-settings-index .recently-visited {
        display:none!important;
    }
}

.system-settings-index .setup-category-title {
    display: block;
    margin: 0 0 15px 0;
    padding: 0 0 20px 0;
    font-size: 18px;
    color: #555;
    font-weight: 700;
    border-bottom: 5px solid rgba(0,0,0,.05)!important;
}

.system-settings-index .filter-container {
    position: relative;
    margin: 0 0 25px 0!important;
}

.system-settings-index .filter-container i {
    position: absolute;
    z-index: 1;
    top: 13px;
    color: #888;
    width: 0!important;
}

.system-settings-index .filter-container i:first-child {
    left: 13px!important;
}

.system-settings-index .filter-container i:last-child {
    display: none;
    right: 28px!important;
}

.system-settings-index .filter-container i:last-child:hover {
    cursor: pointer!important;
}

.system-settings-index .filter-container input {
    padding-left: 40px;
    height: 40px!important;
}

.system-settings-index .highlight {
    background-color: #ff9!important;
}

.system-settings-index .setup-links-container {
    margin: 0 -10px!important;
}

.system-settings-index .setup-links-container:after {
    content: "";
    display: table;
    clear: both!important;
}

.system-settings-index .setting-col {
    float: left;
    width: 280px;
    padding: 10px!important;
}

@media only screen and (max-width: 2250px) {
    .system-settings-index .setting-col {
        width:16.6%!important;
    }
}

@media only screen and (max-width: 2035px) {
    .system-settings-index .setting-col {
        width:20%!important;
    }
}
 @media all and (min-width: 992px) {
      
      .mega-submenu {
          left: 100%;
          top: 0;
          min-width: 25rem!important;
      }
      .ktm-mega-menu {
          position: static!important;
      }
      .mega-menu {
          left: 0;
          right: 0;
          width: 100%!important;
      }
      
      	.tld-pricing-header {
        border-color: #369;
        background-color: #f5f5f5!important;
        }
        
        .no-gutters {
         margin-right: 0;
         margin-left: 0!important;
        }
      
        .domain-promo-box i {
        float: right!important;
        }
      
        .domain-promo-box {
        margin-top: 20px;
        margin-bottom: 20px;
        padding-left: 5px;
        margin-left: 6px;
        margin-right: 4px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        color: #333;
        border-radius: 4px!important;
        }
      
       
        
        .domain-checker-container {
        margin: 20px 0;
        padding: 0;
        background-color: #ffce44;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffb201), to(#ffd960));
        background: -webkit-linear-gradient(top, #ffd960, #ffb201);
        background: -moz-linear-gradient(top, #ffd960, #ffb201);
        background: -ms-linear-gradient(top, #ffd960, #ffb201);
        background: -o-linear-gradient(top, #ffd960, #ffb201)!important;
        }
      
      

    .sidebar .nav.sub-menu .nav-item .nav-link 
    {
    color: #888;
    padding: 0.75rem 2rem 0.75rem 2rem;
    position: relative;
    font-size: 0.8125rem;
    line-height: 1;
    height: auto;
    border-top: 0;
    }
      
        #usfullinfo
        {
        text-align: justify;
        text-align: center;
        margin-top: 12px!important;
        }
        #cltlogin
        {
        background-color: #245568!important;
        }
      
         #fabcolor{
         background-color: #3b5998!important;  
          }
          
        #fabtwitter{
        background-color: #55acee!important;
        }
        
        #fabgoogle{
        background-color: #dd4b39!important;
        }
        
        #fabinstagram{
        background-color: #ac2bac!important;  
        }
        
        #fablinkedin{
         background-color: #0082ca!important;   
        }
        
         #myinvoicd{
         color: white!important;   
         }
         
         #myserviced{
         color: white!important;    
         }
         
         #myrefudpolcy{
         color: white!important;     
         }
         
         #myservcs{
         color: white!important;     
         }
         
         #mycontus{
         color: white!important;  
         }
         
         #myhoms{
          color: white!important;   
         }
         
         #myrefudpolicys{
          color: white!important;   
         }
         
        .footer#userfoot {
        background-color: black;
        color: white!important;
        }
      
          .card #mysevicestitle
          {
          color: white!important;  
          }
          .card #myrecenttickets{
           color: white!important;     
          }
          
          .card #myrecentnews{
           color: white!important;     
          }
          
          .card #myregisterdomain{
           color: white!important;     
          }
          
          
        .card-header#myserviceproduct{
        background-color:#4682B4;
        color:white!important;
        }
       
       .card-header#openrecentsuppt{
         background-color:#87CEFA; 
         color:white!important;
       }
        
        .card-header#registnewdomain{
        background-color:#82caaf; 
        color:white!important;
        }
        
        .card-header#viewrecentnews{
        background-color:#34495E; 
        color:white!important;
        }
        
         #homehelps
         {
         color:white!important; 
         }
      
          #spamvalues{
           margin-top: 20px!important;
          }
 
         
          #customerRetentionTime{
             margin-left:-33px!important; 
          }
        #domainregstration{
         margin-bottom: 23px!important; 
        }
        #cancellrequests{
         margin-bottom: 23px!important;  
        }
        #serviceaddon{
        margin-bottom: 7px!important;
        }
        
      
      .dropdown-menu .submenu {
          display: none;
          left: 100%;
          top: 0!important;
      }
      
      /*cart  */  
      .collapsable-card-body{
      display: block!important;
      }
      .card-minimise.minimised
      {
        cursor: pointer;
        transition: transform .2s ease;
        transform: rotate(180deg)!important;
      }
      #continue-shopping
      {
      color:white!important;
      }
      
      
    .order-summary {
    margin: 0 0 20px 0;
    padding: 0;
    background-color: #29537c;
    color: white;
    border-bottom: 3px solid #29537c;
    box-shadow: -3px 6px 5px 0px rgba(176,164,176,1);
    transition: all .3s ease-in-out;
    border-radius: 4px!important;
      }
      
    .order-summary:hover {
      box-shadow: -3px 18px 20px 0px rgba(99,89,99,1);
       background-color: #297C7B!important;
    }

     
     
    #order-standard_cart .view-cart-items {
    margin: 0 0 20px 0;
    border-bottom: 2px solid #058!important;
     }
      
      #order-standard_cart .secondary-cart-body 
      {
        float: left;
        width: 65%;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px!important;
      }
      
      
    .view-cart-items-header
    {
    margin: 0;
    padding: 8px 15px;
    background-color: #058;
    color: #fff;
    font-size: .9em;
    border-radius: 4px 4px 0 0!important; 
    }
         
      
      #billingDropdown{
     margin-bottom: 24px!important;
      }
   
        .label{
            
       float:left!important;
        }
                
      #addtransact{
        float:right!important;
        }

      #dapaid{
        text-align: center!important;    
      }

      #pameth{

        text-align: center!important;  
      }

      .viewclients{

        margin-top: 21px!important;
      }
      
      #productsd{
         
         text-align:center!important;
      }
      

     .viewusers{
       margin-top: 23px!important;
      }
      
      #genrep{
       text-align: center!important;   
      }
      
      #billrep{
     text-align: center!important;   
      }
      
      #Increp{
     text-align: center!important;   
      }
      
      #Clirep{
        text-align: center!important;     
      }
      
      #sslcert{
      margin-left: 86px!important;
      }
      
      #monthord{
     margin-left: 149px!important;
      }
       #dalpery{
        margin-left: -67px!important;   
       }
       
       #dskspa{
         margin-left: 34px!important;    
       }
      
      
      #prdctsup{
         margin-left: 51px!important;    
      }
      
      #promousa{
         margin-left: 159px!important; 
      }
      
      #prodsuspension{
         margin-left: 39px!important;   
      }
      
      #agInvoi{
        margin-left: -83px!important;   
      }
      
      #credreve{
        margin-left: -194px!important;   
      }
      
      #diretdebitproces{
        margin-left: -242px!important;   
      }
      
      #Saletax{
        margin-left: 49px!important;   
      }
      
      #Vatmoss{
        margin-left: 109px!important;   
      }
      
      #AnnulIncome{
        margin-left: -81px!important;   
      }
      
      #Incomedfore{
       margin-left: -139px!important;    
      }
      
      
      #MonthTransact{
        margin-left: 16px!important;   
      }
      
      #ServeRevenue{
        margin-left: 140px!important;   
      }
      
      #Sslcertificatemont{
         margin-left: 109px!important;  
      }
      
      #newcustomrs{
        margin-left: -34px!important;   
      }
      
      
      #clintsources{
        margin-left: -127px!important;   
      }
      
      #clitststemt{
        margin-left: -49px!important;   
      }
      
      #clintbycontry{
        margin-left: 49px!important;   
      }
      
      #Top10clintInc{
        margin-left: 92px!important;   
      }
      
      #pdfbth{
        margin-left: 93px!important;  
      }
      
      #AffltesOvervie{
        margin-left: 57px!important;   
      }
      
      #agInvoi{
         margin-left: -66px!important;  
      }
      
      #credreve{
           margin-left: 182px!important;  
      }
      
      #diretdebitproces{
          margin-left: -230px!important; 
      }
      
      #Saletax{
          margin-left: -92px!important; 
      }
      
      
      #Vatmoss{
           margin-left: 136px!important;
      }
      
      #AnnulIncome{
           margin-left: -69px!important;
      }
      
      
      #Incomedfore{
           margin-left: -133px!important;
      }
      
      #Incomebypro{
          margin-left: -52px!important; 
      }
      
      #MonthTransact{
          margin-left: -42px!important; 
      }
      
      #ServeRevenue{
        margin-left: 137px!important;   
      }
      
      #Sslcertificatemont{
         margin-left: -42px!important;     
      }
      
      #newcustomrs{
          margin-left: -63px!important; 
      }
      
      #clintsources{
          margin-left: -172px!important; 
      }
      
      #clitststemt{
          margin-left: -100px!important;
      }
      
      #clintbycontry{
          margin-left: -11px!important; 
      }
      
      #Top10clintInc{
         margin-left: -11px!important;   
      }
      
      
      #AffltesOvervie{
          margin-left: 138px!important;  
      }
      
      #billentries{
          float:right!important;
      }
      
      #billingadd{
        float:right!important;  
      }
      
      #addquotes{
          
      float:right!important;
          
      }
      
      #suppticreplies{
        margin-left: -79px!important;    
      }
      
      #ticketfeedbackscore{
        margin-left: -131px!important;   
      }
      #tickfeebaccommt{
      margin-left: -11px!important;   
      }
      
      #ticktratireviewer{
      margin-left: 106px!important;    
      }
      #tickettgs{
       margin-left: 216px!important;     
      }
      
      #clt{
        margin-left: -81px!important;    
      }
      
      #clts{
         margin-left: -244px!important;  
      }
      
      #doms{
       margin-left: -218px!important;    
      }
      
     #Invcs{
     margin-left: -178px!important;
     }
     
     #Servics{
     margin-left: -141px!important; 
     }
     
     #transctns{
      margin-left: -101px!important;   
     }
     
     #pdtch{
       margin-left: 98px!important;    
     }
     
   
   .checkbox-group {
      display: flex;
      flex-wrap: wrap; 
      gap: 5px; 
    }

    .checkbox-group label {
      display: flex;
      align-items: center;
      margin-bottom: 10px; 
    }

    .checkbox-group input[type="checkbox"] {
      margin-right: 5px; 
    }
    
    .checkbox-inline {
      margin-right: 20px; /* Space between checkboxes */
    }
    
    
    .table th {
  border: 1px solid #ddd;
  padding: 8px;
  background-color: #f8f9fa;
}

/* Style for table data cells */
.table td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* Optional: Style for table */
.table {
  border-collapse: collapse;
  width: 100%;
}
    
    
// Utility classes for cards
.card {
  &.bg-gradient-purple {
    background: linear-gradient(135deg, #6a1b9a, #d500f9); // Example gradient
  }

  &.text-black {
    color: #000;
  }

  &.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem; // Consistent padding
  }

  .card-title {
    margin-bottom: 10px;
    margin-top: 10px;
    color: #003756;
    font-size: 16px;
  }

  .card-text {
    color: #909090;
  }

  .card-icon {
    font-size: 3rem;
    color:  #B0B0B0;
    transition: color 0.3s;

    &:hover {
      color: #003756;
    }
  }

  .card-link {
    text-decoration: none;
    color: inherit;
  }
}

// Container and grid layout
.container-fluid {
  padding: 0;

  .row {
    margin-bottom: 1rem; // Consistent spacing between rows

    .col-md-4 {
      margin-bottom: 1rem; // Consistent spacing between columns

      .card {
        &.bg-body-tertiary {
          background-color: #f8f9fa; // Use a variable or a predefined color
        }
      }
    }
  }
}

// Page Header
.page-header {
  .page-title {
    margin: 0;
    font-size: 1.5rem; // Adjust as necessary
  }
}

// Responsive design for smaller screens
@media (max-width: 768px) {
  .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
    
     .dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px; /* Adjusts the vertical position */
    margin-left: -1px; /* Adjusts the horizontal position */
    display: none; /* Initially hidden */
   
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block; /* Show on hover */
}



.dropdown-submenu .dropdown-item:last-child {
    margin-bottom: 0; /* Remove margin from the last item */
}