/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 #aprx html {
   font-size: 62.5%; /*10px (so units can be based on 10)*/
}

#aprx body {
    background: #f9f9fb;
    width: 100%;
    height: 1024px;
    padding:0%;

   color: #101828;
   font-family: Inter;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.75;
   letter-spacing: 0px;
 }


 /* Layout CSS */

.aprx_container {
    display: flex;
    flex-direction:row;
    column-gap: 0px;
    height: 1024px;
 }

 /* Side Bar */
 .aprx_side_bar {
    flex: 1;
    background-color:ffffff;
    padding: 24px;
    display: flex;
    flex-direction:column;
    row-gap: 24px;
    box-shadow: 0px 4px 8px 0px #0000000A;

 }

 .aprx_side_logo {
   flex: 1;
   border-bottom: 1px solid #EAEBEC;
   padding: 0rem 1.0rem 0.5rem 1.0rem;

 }


 .aprx_side_menu {
   flex: 6;
   display: flex;
   flex-direction:column;
   row-gap: 24px;
 }

 .aprx_side_overview {
   flex: 2; 
   display: flex;
   flex-direction:column;
   row-gap: 16px;
 }

 .aprx_side_overview > p, .aprx_side_others > p 
 {
   font-family: Inter;
   font-size: 18px;
   font-weight: 400;
   line-height: 24px;
   letter-spacing: 0.17000000596046448px;
   text-align: left;
   color: #98A2B3;
   margin: 0px;

 }

 .aprx_side_overview_nav {
   flex: 1;
   
   
 }

 .aprx_side_overview_nav > ul, .aprx_side_others_nav > ul
 {
   display: flex;
   flex-direction:column;
   row-gap: 16px;
   list-style: none;
   padding: 0px;
   margin: 0px;
 }

 .aprx_side_overview_nav > ul > li > a, .aprx_side_others_nav > ul > li > a
 {
   flex:1;
   padding: 0.3rem 1.5rem;
   display: flex;
   flex-direction:row;
   column-gap: 10px;
   color:#5C6881;
   font-family: Inter;
   font-size: 18px;
   line-height: 24px;
   letter-spacing: 0.17000000596046448px;
   text-align: left;
   text-decoration: none;
   border-left: 4px solid transparent;
 }


 .aprx_side_overview_nav > ul > li > a:hover, .aprx_side_others_nav > ul > li > a:hover
 {
   background:#EAECF0;
   color: #101828;
   border-left: 4px solid #101828;
   font-weight: 600;
 }


 /* .aprx_side_overview_nav > ul > li > a:visited
 {
   background: #444;

 } */


 .aprx_side_others {
   flex: 2; 
  
 }


 .aprx_side_empty {
   flex: 12; 

 }
/* Main Content */
#aprx .aprx_main_content {
   flex: 5;
   display: flex;
   flex-direction:column;
   
 }

 #aprx .aprx_main_header {
   flex: 1;
   padding: 16px 32px 4px 32px;
   background: #FFFFFF;
   box-shadow: 0px 4px 8px 0px #0000000A;
}

#aprx .aprx_main_header > span 
{
   font-family: Inter;
   font-size: 18px;
   font-weight: 400;
   line-height: 25px;
   letter-spacing: 0.15000000596046448px;
   text-align: left;
   color: #101828;


}

#aprx .aprx_main_body {
   flex: 25;
   padding: 16px 50px 16px 32px;
   display: flex;
   flex-direction:column;
   row-gap: 16px;
}


#aprx .aprx_main_body_filter {
   flex: 4;
   display: flex;
   flex-direction:column;
   padding: 0px;
}

#aprx .aprx_main_body_filter > span
{
   flex: 1;
   font-family: Inter;
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
   letter-spacing: 0px;
   text-align: left;
   color:#0D1D7C;
   ;

}

#aprx .aprx_main_body_filter_box {
   flex: 3;
   display: flex;
   flex-direction:row;
   column-gap: 10px;
   background: #EAECF0;
   padding: 16px;


}

#aprx .aprx_main_body_filter_box > .form-group {
   flex: 1;
   display: flex;
   flex-direction:column;
   row-gap: 10px;
}

#aprx .aprx_main_body_filter_box > .form-group > span {
   font-family: Inter;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
   letter-spacing: 0px;
   text-align: left;
   color: #101828;
}

#aprx .selection_end_year {
   font-size: 11px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: 0px;
   text-align: left;
   color:red;
}

#aprx .container_end_year {
   border-left: 0.35rem solid #ccc;
   padding-left: 0.35rem;
}


#aprx .aprx_main_body_filter_box  select {
   width: 200px;
   height: 46px;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 22px;
   letter-spacing: 0.15000000596046448px;
   text-align:left;
   color:#101828;
   padding-left: 10px;
   border: none;
   box-shadow: 0px 4px 8px 0px #0000000A;
   /* for Firefox */
   -moz-appearance: none;
   /* for Chrome */
   -webkit-appearance: none;
}


#aprx .aprx_main_body_filter_box  select,  #aprx .selection > select  {
   background-image:
     linear-gradient(45deg, transparent 50%, gray 50%),
     linear-gradient(135deg, gray 50%, transparent 50%),
     linear-gradient(to right, #ccc, #ccc);
   background-position:
     calc(100% - 20px) calc(1em + 2px),
     calc(100% - 15px) calc(1em + 2px),
     calc(100% - 2.5em) 0.5em;
   background-size:
     5px 5px,
     5px 5px,
     1px 1.5em;
   background-repeat: no-repeat;
 }
 
 #aprx .aprx_main_body_filter_box  select:focus,  #aprx .selection > select:focus  {
   background-image:
     linear-gradient(45deg, green 50%, transparent 50%),
     linear-gradient(135deg, transparent 50%, green 50%),
     linear-gradient(to right, #ccc, #ccc);
   background-position:
     calc(100% - 15px) 1em,
     calc(100% - 20px) 1em,
     calc(100% - 2.5em) 0.5em;
   background-size:
     5px 5px,
     5px 5px,
     1px 1.5em;
   background-repeat: no-repeat;
   border-color: green;
   outline: 0;
 }
 
 
 #aprx .aprx_main_body_filter_box  select:-moz-focusring,  #aprx .selection > select  {
   color: transparent;
   text-shadow: 0 0 0 #000;
 }
 
 /* For IE10 */
 #aprx .aprx_main_body_filter_box select::-ms-expand,  #aprx .selection > select::-ms-expand {
      display: none;
   }


/* Filter End Year Dropdown  and Pharmacy */

#aprx .aprx_dropdown_filter_button, #aprx .aprx_dropdown_pharmacy_button 
{
   width: 100%;
   height: 46px;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 22px;
   letter-spacing: 0.15000000596046448px;
   text-align:left;
   color:#101828 !important;
   padding-left: 20px;
   border: none;
   box-shadow: 0px 4px 8px 0px #0000000A;
   background-color: white !important;
   cursor: pointer;
   box-sizing: border-box;
   background-image: url('data:image/svg+xml;utf8,%3Csvg%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath%20d=%27M6.175%206.9126L10%2010.7293L13.825%206.9126L15%208.0876L10%2013.0876L5%208.0876L6.175%206.9126Z%27%20fill=%27%23757575%27/%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position: right 10px center;
}

#aprx .aprx-checkbox-wrapper 
{
   display: flex;
   flex-direction:row;
   column-gap: 0.25rem;
}

#aprx .aprx-checkbox-wrapper input[type="checkbox"]
{
   flex: 1;
   cursor: pointer;
   outline: none;
}



#aprx .aprx-checkbox-wrapper label
{
  flex: 8;
}

#aprx .aprx_dropdown_filter_content, #aprx .aprx_dropdown_pharmacy_content  
{
   position:absolute;
   width: 310px;
   height: auto;
   background-color: white;
   z-index: 10;
   padding: 1rem;
   display: none;
   border: 1px solid #ccc;
   top:200px;
}

#aprx .aprx_dropdown_filter_content   #aprx .checkbox-wrapper, #aprx .aprx_dropdown_pharmacy_content #aprx .checkbox-wrapper{
   cursor: pointer;
}
#aprx .aprx_dropdown_filter_content   #aprx .checkbox-wrapper label, #aprx .aprx_dropdown_pharmacy_content  #aprx .checkbox-wrapper label{
   font-weight: 300;
}
/* .aprx_dropdown_filter_content  .checkbox-wrapper input[type="checkbox"] {
   display: none;
} */

#aprx .aprx_dropdown_endyear_button_search, #aprx .aprx_pharmacy_button_search 
{
   width: 90%;
   height: 35px;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: 0.15000000596046448px;
   margin: 10px;
   border-radius: 5%;
   border: none;
   background-color: #0D1D7C;
   color: white;
   padding: 0.25rem;
   
}

#aprx .aprx_main_body_filter_box input[type="month"] {
   width: 100%;
   height: 46px;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 22px;
   letter-spacing: 0.15000000596046448px;
   text-align:left;
   color:#101828;
   padding: 0px 20px;
   border: none;
   box-shadow: 0px 4px 8px 0px #0000000A;
   

}

#aprx .aprx_main_body_filter_box input[type="month"]:disabled {
   background-color: #fff;
   color: #aaa;
   cursor: not-allowed;
 }


#aprx .aprx_main_body_record {
   flex: 18;
   display: flex;
   flex-direction:column;
  

   
   
}

#aprx .aprx_main_body_record_report {
   flex: 1;
   display: flex;
   flex-direction:row;
   border-bottom: #D0D5DD solid 1px;
   padding-left: 32px;
   padding-bottom: 16px;
   margin-left: auto;
   

}

/* #aprx .aprx_main_body_record_report > span 
{
   flex: 1;
   font-family: Inter;
   font-size: 24px;
   font-weight: 500;
   line-height: 34px;
   letter-spacing: 0px;
   text-align: left;
   color: #101828;
} */

#aprx .aprx_main_body_record_report > form 
{
   flex: 0 0 25%;
   margin-left: auto;
   display: flex;
   flex-direction:row;
   column-gap: 10px;
   
}

#aprx .selection {
   flex: 1;
}

#aprx .selection > select 
{
   width: 350px;
   height: 46px;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 22px;
   letter-spacing: 0.15000000596046448px;
   text-align:left;
   color:#101828;
   padding-left: 10px;
   border: none;
   box-shadow: 0px 4px 8px 0px #0000000A;
   /* for Firefox */
   -moz-appearance: none;
   /* for Chrome */
   -webkit-appearance: none;

}

#aprx .print_selection {
   flex: 1;
}
#aprx .print_selection > button{
   width: 145px;
   height: 46px;
   padding: 12px;
   border-radius: 4px;
   gap: 8px;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 22px;
   letter-spacing: 0.15000000596046448px;
   text-align:center;
   
   

}

#aprx .button-disabled {
   background-color: #ccc;
   color: #666;
   cursor: not-allowed;
   pointer-events: none;
}

#aprx .button-abled {
   color:#FFFFFF;
   background:#0D1D7C;
   cursor:pointer;
   pointer-events: visible;
}



#aprx .aprx_main_body_record_table{
   flex: 11; 
   
}


#aprx .main_panel,  #aprx .panel{
   display: flex;
   flex-direction:column;
   margin-bottom: 20px;
   /* width: 85%; */
   /* overflow-x:scroll; */
   white-space: nowrap;
}


#aprx .records > tbody th, #aprx .sub_records > tbody th{
   font-family: Inter;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
   letter-spacing: 0px;
   text-align:right;
   color: #101828; 
   padding: 10px;
   background-color: #ddd;  
}

#aprx .long-cell {
   width: 200px; 
   text-align: left !important;
 }

 #aprx .date-cell {
   width: 700px; 
   text-align: left !important;
 }

 #aprx .company-cell {
   width: 300px; 
   text-align: left !important;
 }

 #aprx .empty-cell {
   width: 60px; 
 }

#aprx .records > tbody td, #aprx .sub_records > tbody td
{
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: 0px;
   text-align:right;
   color: #101828; 
   /* width: 250px;  */
   
   padding: 10px;  
}

#aprx .records > tbody td:first-child, #aprx .sub_records > tbody td:first-child 
{
   text-align:left;
}
#aprx .records > tbody td:last-child, #aprx .sub_records > tbody td:last-child 
{
   text-align:center;
}

#aprx .records > tbody tr, #aprx .sub_records > tbody tr {height: 20px;}
#aprx .records > tbody tr:nth-child(even), #aprx .sub_records > tbody tr:nth-child(even){background-color: #f2f2f2;}

#aprx .records tr:hover, #aprx .sub_records tr:hover {background-color: #ddd;}



/* Accordion  */

/* Style the buttons that are used to open and close the accordion panel */
#aprx .accordion {
   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
 }
 
 /* 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) */
 #aprx .active, #aprx .accordion:hover {
   background-color: #ccc;
 }
 
 /* Style the accordion panel. Note: hidden by default */
 /* #aprx  .panel {
   padding: 0px;
   display:block;
   overflow: hidden;
 } */


 #aprx .accordion:after {
   /* content: '\02795';  */
   content: '\2B9F';
   font-size: 20px;
   color: #777;
   float: right;
   margin-left: 5px;
 }
 
 #aprx .active:after {
   /* content: "\2796";  */
   content: "\2B9D"; 
 }

 /* Mobile filter accordion */

 #aprx .accordion_filter 
 {
   display: none;
 }



 #aprx .aprx_dashboard_body_pagination {
   flex: 1;
   display: flex;
   flex-direction:row;
   
}

#aprx  .aprx_dashboard_body_pagination > span{
   flex: 4;
   font-family: Inter;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: 0px;
   text-align: left;
   color: #101828;
   padding-top: 20px;
}


#aprx .aprx_dashboard_body_pagination > ul{
   flex: 1;
   display: flex;
   flex-direction:row;
   list-style: none;
   padding: 0px;
   border-radius: 25px;
   
}

#aprx .aprx_dashboard_body_pagination > ul li{
   flex: 1;
   padding: 8px;
   border: 0px, 1px, 0px, 0px;
   background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
   linear-gradient(0deg, #D0D5DD, #D0D5DD);
   border-right: 1px solid #D0D5DD;
   text-align: center;
   
}
#aprx .aprx_dashboard_body_pagination > ul li a {
   text-decoration: none;
}

#aprx .aprx_dashboard_body_pagination > ul li:hover:not(.actived) {
  background: #eee;
  color: #fff;
}

#aprx .actived {
   background: #0D1D7C !important; 
 }

 #aprx .actived > a { 
   color: white;
 }


 #aprx .aprx_dashboard_body_pagination > ul li > span
{
   font-size: 22px;
   align-content: center;

}
#aprx .aprx_mobile_sidebar 
{
   display: none;
}

#aprx .aprx_mobile_menu, #aprx .more_column
{
   display: none;
}


@media screen and (min-width: 1300px) {
   #aprx .aprx_main_body_filter_box  select {
      width: 300px;
   }
}


/* Mobile CSS */
@media only screen and (max-width: 768px) {

   body
   {
      overflow-x:hidden !important;
   }
   .aprx_container {
      flex-direction:column;
      row-gap: 0px;
  }
  #aprx .aprx_side_bar {
      display:none;

   }

   #aprx .aprx_mobile_sidebar 
   {
      display:flex;
      flex-direction: row;
      width: 100%;
      height: 62px;
      padding: 10px;
      gap: 5px;
      background: #FFFFFF;
      box-shadow: 0px 10px 23px 0px #C7C7C71A;
      z-index: 2;
   }

   #aprx .aprx_mobile_logo 
   {
      flex:8;
      padding: 10px 30px;
      
   }

   #aprx .aprx_mobile_nav 
   {
      flex:1;
      padding: 0px 20px;
      justify-content: center;
      font-size: 42px;
   }
   
   #aprx .aprx_mobile_nav > a 
   {
      text-decoration: none;
      color: #000;
   }

   #aprx .aprx_main_body_filter_box 
   {
      flex-direction: column;
      column-gap: 10px;
   }
   #aprx .aprx_main_body_filter_box > form 
   {
      flex-direction: row;
      column-gap: 5px;

   }

   #aprx .aprx_main_body_filter_box select 
   {
      width: 100%;

   }

   #aprx .aprx_dropdown_filter_button, #aprx .aprx_dropdown_pharmacy_button
   {
      width: 100%;
      padding-left: 10px;
      margin-top: 20px;

   }

   #aprx .aprx_dropdown_filter_content
   {
      width:90%;
      top: 520px;
   }

   #aprx .aprx_dropdown_pharmacy_content
   {
      width:90%;
      top: 300px;
   }
 
   
   #aprx .container_end_year {
      margin-top: 0.5rem;
      border-left: none;
      border-top: 0.35rem solid #ccc;
      padding-top: none;
   }

   #aprx .selection_mobile {
      display: none;
   }

   /* #aprx .selection_end_year {
      display: none;
   } */

   
   #aprx .aprx_main_body_filter_box input[type="month"] {
      width: 96%;
      padding-left: 10px;
   }

   #aprx .aprx_main_header
   {
      background: none;
      box-shadow: none;

   }

   #aprx .aprx_main_body 
   {
      padding: 16px 10px 16px 32px;
   }

   #aprx .accordion_filter 
   {
      display:block;
      background-color: #fff;
      color: #444;
      cursor: pointer;
      padding: 10px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
      height: 50px;
   }

   #aprx .accordion_filter::after {
      content: '\2B9F'; 
      font-size: 18px;
      color: #777;
      float: right;
      margin-left: 5px;
    }
    
    #aprx   .active::after {
      content: "\2B9D"; 
    }

    #aprx .aprx_main_body_filter_box > span 
   {
      display:none;
   }
   
   #aprx .aprx_main_body_filter_box > .form-group
   {
      display:none;
      /* overflow: hidden; */
   }

   #aprx .aprx_main_body_record_report
   {
      padding-left: 0px;
   }

   #aprx .aprx_main_body_record_report > form
   {
      flex: 4;
   }

   #aprx .aprx_mobile_menu 
   {
      position:absolute;
      display: none;
      width: 266px;
      height: 812px;
      top: 85px;
      left: calc(100% - 250px);
      padding: 24px;
      background: #fff;
      z-index: 2;

   }

   #aprx .records, #aprx .sub_records 
   {
      border-spacing: 5px;
   }

   
   #aprx .main_panel, #aprx .panel {
      width: 100%;
      overflow-x: auto;
      white-space: nowrap;
    }

    


 }


 @media only screen and (max-width: 600px) {
   
   #aprx .aprx_main_body_record_report 
   {
      flex-direction:column;
      row-gap: 5px;
      padding-left: 10px;
   }

   

   #aprx .accordion {
      overflow-x: auto;
   }

  

   #aprx .aprx_main_body_record_report > form
   {
      display:flex;
      flex-direction: row;
      column-gap: 10px;
      
   }

   .selection 
   {
      grid-column: 1 / span 2;

   }

   #aprx .selection > select 
   {
      width:90%;
   }

   #aprx .aprx_main_body 
    {
      padding: 16px 10px 16px 10px;
    }
    #aprx .aprx_dashboard_body_pagination 
    {
       padding: 5px;
       column-gap: 10px;
    }
    #aprx .aprx_dashboard_body_pagination > span
    {
      flex:1;
    }

    #aprx .aprx_main_body_filter_box input[type="month"] {
      width: 100%;
      padding-left: 8px;
   }

 }


/*********** User Management Specific Styles ***********/
:root {
   --aprx-blue: #0D1D7C; /* blue */
   --aprx-light-blue: #1570EF; /* light blue */
   --aprx-red: #B42318; /* red */
}
#aprx .aprx_small_text {
   font-size: 12px;
   font-style: italic;
}
#aprx .aprx_main_body_records table {
   width: 100%;
   border-collapse: collapse;
   font-size: 16px;
}
#aprx .aprx_main_body_records th:nth-child(1), #aprx .aprx_main_body_records td:nth-child(1) { 
   width: 35%; 
}
#aprx .aprx_main_body_records th:nth-child(2), #aprx .aprx_main_body_records td:nth-child(2) { 
   width: 21.5%; 
}
#aprx .aprx_main_body_records th:nth-child(3), #aprx .aprx_main_body_records td:nth-child(3) { 
   width: 15.5%; 
}
#aprx .aprx_main_body_records th:nth-child(4), #aprx .aprx_main_body_records td:nth-child(4) { 
   width: 18%; 
}
#aprx .aprx_main_body_records th:nth-child(4), #aprx .aprx_main_body_records td:nth-child(5) { 
   width: 10%; 
}
#aprx .aprx_main_body_records table,
#aprx .aprx_main_body_records table tr,
#aprx .aprx_main_body_records table td,
#aprx .aprx_main_body_records table th {
   border: none;
}
#aprx .aprx_main_body_records table tr {
   height: 32px;
}
#aprx .aprx_main_body_records td,
#aprx .aprx_main_body_records th {
   padding: 0 20px 0 0;
   height: 32px;
   font-size: 14px;
   line-height: 20px;
}
#aprx .aprx_main_body_records th {
   text-align: left;
   padding-top: 12px;
   padding-bottom: 12px;
}
#aprx .aprx_main_body_records table tbody tr:nth-child(odd) {
   background-color: #F2F4F7 !important;;
}
#aprx .aprx_main_body_records table tbody tr:nth-child(even) {
   background-color: #FFFFFF !important;;
   border-top: 6px solid #FFF !important;
   border-bottom: 6px solid #FFF !important;
}
#aprx .aprx_main_body_records table tr th:first-child,
#aprx .aprx_main_body_records table tr td:first-child {
   padding-left: 100px;
}
#aprx .aprx_sort_indicator {
   display: inline-block;
   margin-left: 5px;
}
#aprx .aprx_sort_indicator.asc::after {
   content: "▲"; /* Unicode character for upward arrow */
}
#aprx .aprx_sort_indicator.desc::after {
   content: "▼"; /* Unicode character for downward arrow */
}
#aprx .aprx_header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
#aprx .aprx_user_management_title {   
   font-size: 24px;     
   font-weight: 600;
   color: var(--aprx-blue) !important;;
   line-height: 33.6px;
}
#aprx .aprx_btn {
   border: none;                     
   padding: 12px;
   text-align: center;
   font-size: 14px;
   line-height: 20px;
   cursor: pointer;
   border-radius: 4px;        
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
   font-weight: 200;         
   display: inline-block;
   transition: background-color 0.3s ease; 
}
#aprx .aprx_btn:hover {
   opacity: 0.9;
}
#aprx .aprx_btn_group {
   text-align: center;
}
#aprx .aprx_btn_confirm {
   background-color: var(--aprx-blue) !important;;
   color: white !important;
   margin-top: 16px;
}
#aprx .aprx_btn_cancel {
   background-color: #ccc !important;
}
#aprx button.aprx_btn_add_user {
   background-color: var(--aprx-blue) !important;;      
   color: white !important;          
   font-size: 18px;     
   padding: 12px 24px 12px 48px;
   position: relative;     
   box-sizing: border-box;
   height: 46px;   
}
#aprx .aprx_btn_add_user::before {
   content: "+";             
   color: var(--aprx-blue) !important;;           
   background-color: #ffffff !important; 
   font-weight: bold;         
   font-size: 15px;           
   position: absolute;       
   left: 20px;                
   top: 50%;                  
   transform: translateY(-50%); 
   width: 15px;               
   height: 15px;              
   line-height: 12px;         
   text-align: center;        
   border-radius: 2px;   
}
#aprx .aprx_btn_link {
   background: none;
   border: none;
   text-decoration: none;
   padding: 0;
   font-family: inherit;
   font-size: inherit;
   cursor: pointer;
   outline: none;
}
#aprx .aprx_btn_link:hover {
   text-decoration: underline;
}
#aprx .aprx_btn_link:active {
   text-decoration: underline;
}
#aprx .aprx_btn_edit_user {
   color: var(--aprx-light-blue) !important;; 
   text-decoration: underline;
   background-color: rgba(0, 0, 0, 0) !important;
} 
#aprx .aprx_btn_edit_user:hover {
   text-decoration: none;
}
#aprx .aprx_btn_edit_user:active {
   text-decoration: none;
}
#aprx .aprx_btn_reset_password {
   color: var(--aprx-blue) !important;
   background-color: rgba(0, 0, 0, 0) !important;
}    
#aprx .aprx_btn_delete_user {
   color: var(--aprx-red) !important;;
   display: flex; 
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0) !important;
}
#aprx .aprx_btn_delete_user svg {
   background-color: rgba(0, 0, 0, 0) !important;
   margin-right: 5px;
   height: 16px;
}
#aprx .aprx_modal {
   display: none; 
   position: fixed; 
   z-index: 1; 
   left: 0;
   top: 0;
   width: 100%; 
   height: 100%; 
   overflow: auto; 
   background-color: rgba(0,0,0,0.4) !important; 
}
#aprx .aprx_modal_content {
   box-sizing: border-box;
   background-color: #fefefe !important;
   margin: 15% auto; 
   padding: 20px;
   border: 1px solid #888;
   width: 15%; 
   max-width: 348px;
   min-width: 300px;
   border-radius: 4px;        
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) !important;;
}
#aprx .aprx_modal_content h3 {
   text-align: center;
}
#aprx .aprx_modal_content p {
   font-weight: 600;
}
#aprx .aprx_modal_content .aprx_btn {
   width: 45%;
}
#aprx .aprx_modal_content .aprx_btn_left {
   /*margin-right: 8%;*/
   margin-top: 16px;
}
#aprx .aprx_add_user_form .aprx_loading,
#aprx .aprx_modal_content .aprx_loading {
   width: 20px;
}
#aprx .aprx_add_user_form {
   box-sizing: border-box;
   width: 60%;
   max-width: 370px;
   min-width: 300px;
   margin: 5% auto;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 4px;        
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
   background-color: #fff !important;;
}
#aprx .aprx_add_user_form .inputs-separator {
   border: .5px solid #D0D5DD;
   margin: 0 -20px 10px;
}
#aprx .aprx_add_user_form h3,
#aprx .aprx_modal_content h3 {
   text-align: center;
   font-weight: bold;
   font-family: Inter, sans-serif;
   font-size: 24px;
   margin-top: 0px;
   margin-bottom: 20px;
   line-height: 33.6px;
}
#aprx .aprx_add_user_form label {
   font-weight: bold;
   font-size: 14px;
   line-height: 20px;
}
#aprx .aprx_add_user_form .input-group {
   margin-bottom: 20px;
}
#aprx .aprx_add_user_form input[type="text"], 
#aprx .aprx_add_user_form input[type="email"], 
#aprx .aprx_add_user_form .aprx_dropdown_checkbox_button {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
   line-height: 22.4px;
}
#aprx .aprx_dropdown_checkbox {
   position: relative;
   display: flex;
   width: 100%;
}
#aprx .aprx_dropdown_checkbox_button {
   background-color: #FFF !important;;
   color: rgba(0, 0, 0, 1) !important;
   border: 1px solid #ccc;
   padding: 10px;
   cursor: pointer;
   width: 100%;
   text-align: left;
   border-radius: 4px;
   box-sizing: border-box;
   background-image: url('data:image/svg+xml;utf8,%3Csvg%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath%20d=%27M6.175%206.9126L10%2010.7293L13.825%206.9126L15%208.0876L10%2013.0876L5%208.0876L6.175%206.9126Z%27%20fill=%27%23757575%27/%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position: right 10px center;
   padding-right: 30px;
}
#aprx .aprx_dropdown_checkbox_content {
   display: none;
   position: absolute;
   background-color: #FFF !important;;
   width: 100%;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   border-radius: 4px;
   box-sizing: border-box; 
}
#aprx .aprx_dropdown_checkbox_content div {
   color: black !important;;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   cursor: pointer;
}
#aprx .aprx_dropdown_checkbox_content div:last-child {
   border-bottom: none;
}
/* Hide the default checkbox */
#aprx .aprx_dropdown_checkbox_content input[type="checkbox"] {
   display: none;
}
#aprx .aprx_dropdown_checkbox_content .custom-checkbox {
   position: relative;
   height: 18px; 
   width: 18px;
   border: 1.5px solid #757575;
   display: inline-block;
   vertical-align: middle;
   margin-right: 10px;
   border-radius: 2px; 
   background-color: white !important;;
}
#aprx .aprx_dropdown_checkbox_content .custom-checkbox.disabled {
   background-color: #f0f0f0 !important; 
   border-color: #ccc; 
}
#aprx .aprx_dropdown_checkbox_content .custom-checkbox.disabled:after {
   color: #ccc !important; 
}
#aprx .aprx_dropdown_checkbox_content input[type="checkbox"]:checked + .custom-checkbox {
   background-color: #34A853 !important;;
   border-color: #34A853;
}
#aprx .aprx_dropdown_checkbox_content input[type="checkbox"]:checked + .custom-checkbox:after {
   content: '\2713'; /* Unicode character for checkmark */
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   color: white !important;
   font-size: 16px; 
}
#aprx .aprx_dropdown_checkbox_content .checkbox-wrapper {
   cursor: pointer;
}
#aprx .aprx_dropdown_checkbox_content .checkbox-wrapper label {
   font-weight: 400;
}
#aprx .aprx_dropdown_checkbox_content .checkbox-wrapper input[type="checkbox"] {
   display: none;
}
#aprx .aprx_add_user_form .aprx_btn {
   width: 40%;
}
#aprx .aprx_add_user_form .aprx_btn_left {
   margin-right: 18%;
}
#aprx .aprx_add_user_form .aprx_error {
   color: red !important;
   font-size: 14px;
   margin-top: 5px;
}
#aprx .aprx_add_user_form .aprx_error_message,
#aprx #aprx_deleteModal  .aprx_error_message {
   color: red !important;
   font-size: 14px;
   margin-top: 15px;
}