html, body {
    color: #000000;
    font-family: 'Inter', 'Lato', 'Helvetica Neue','Source Sans Pro' ; 
/*    font-weight: 400; */
    }
.font_default {
    font-family: 'Inter', 'Lato', 'Helvetica Neue','Source Sans Pro' ; 
    }
    
.main {
    min-height: 100vh; 
    padding-top: 45px;
    }

.border {
    border: 1px solid var(--gray-200) !important ; 
    }
.border-left {
    border-left: 1px solid var(--gray-200) !important ; 
    }
.border-right {
    border-right: 1px solid var(--gray-200) !important ; 
    }
.border-top {
    border-top: 1px solid var(--gray-200) !important ; 
    }
.border-bottom {
    border-bottom: 1px solid var(--gray-200) !important ; 
    }

#app_render_main {
    position: relative; 
    min-height: 100vh;
    }

/*TEMPLATE COMPONENT OVERRIDES*/
#kt_content {
    padding-bottom: 0;
    }
.header-fixed .wrapper {
    padding-top: 28px; 
    }




.custom-thing-job {
  color: var(--brand);
}



/*Animations*/
.colorchange_border_top {
    -webkit-animation:colorchange_border_top 240s infinite alternate;
    }

@-webkit-keyframes colorchange_border_top {
    0% { border-top-color: #621B6A; }
    20% { border-top-color: var(--primary); }
    40% { border-top-color: #3F0F40; }
    60% { border-top-color: #8e44ad; }
    80% { border-top-color: #22B77B; }
    100% { border-top-color: #621B6A; }
    }


.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    }
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    }


/** Typography **/
/*
h1, .h1 {
    font-family: 'Helvetica Neue','Source Sans Pro', Arial ;
    font-weight: 300; 
    font-size: 2.4rem; }

h2, .h2 {
    font-size: 1.75rem; }

h3, .h3 {
    font-size: 1.53125rem; }

h4, .h4 {
    font-size: 24px;
    font-weight: 200;
    }

h5, .h5 {
    font-size: 18px; 
    font-weight: 500 ; }

h6, .h6 {
    font-size: 0.875rem; }

.help-text {
    font-size: 12px ;
    line-height: 19px ; 
    font-weight: 500 ; 
    }
*/



/*Custom margins and padding*/
/*
.m-6 {
  margin: 4rem !important; }

.mt-6,
.my-6 {
  margin-top: 4rem !important; }

.mr-6,
.mx-6 {
  margin-right: 4rem !important; }

.mb-6,
.my-6 {
  margin-bottom: 4rem !important; }

.ml-6,
.mx-6 {
  margin-left: 4rem !important; }
*/


/*Custom NO UI SLIDER */
.noUi-target {
    height: 2px !important ; 
    background-color: var(--gray-800) !important ; 
}
.noUi-handle {
    height: 10px !important; 
    width: 10px !important; 
    }

/*Aside Menu Overrides*/
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
  color: var(--gray-100) ;
}
.aside-menu .menu-nav > .menu-item > .menu-link {
  padding: 5px 25px 5px 25px;
}

.aside-menu .menu-nav > .menu-item > .menu-heading,
.aside-menu .menu-nav > .menu-item > .menu-link {
  min-height: 20px ;
}


/*END: Aside Menu Overrides*/





/*SIDEBAR New Underlay*/

.sidebar-underlay {
  position: fixed;
  right: 65px;
  bottom: 0;
  top: 0;
  overflow-y:scroll;
  overflow-x:hidden;

  background-color: #ffffff;
  border-left: 1px solid #E5E5E5;
  box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
  transition: right 0.3s ease;
}

@media (min-width: 992px) {
  .sidebar-underlay {
    z-index: 95;
    width: 340px;
    transition: width 0.3s ease;
  }
  .kt_sidebar-underlay-content-position {
        width: 340px;
        }
  .kt_sidebar-topnav-underlay-content-position {
        width: 404px;
        }    
    
  .header-fixed.subheader-fixed .sidebar-underlay {
    top: 73px;
  }
  .header-fixed .sidebar-underlay {
    top: 72px;
  }
  .sidebar-underlay .sidebar-wrapper {
    flex-shrink: 0;
    border-right: 1px solid transparent;
    margin-right: -285px;
    width: 285px;
    transition: margin-right 0.3s ease;
  }
  .sidebar-underlay .sidebar-toolbar {
    flex-shrink: 0;
    width: 340px;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
  }

  .sidebar-underlay-enabled .scrolltop {
    right: 15px;
  }
  .sidebar-underlay-enabled .sticky-toolbar {
    z-index: 97;
    background-color: transparent;
    box-shadow: none;
    right: 7px;
  }

  .sidebar-underlay-enabled.sidebar-underlay-expanded .sidebar {
    width: 350px;
    transition: width 0.3s ease;
  }
  .sidebar-underlay-enabled.sidebar-underlay-expanded .sidebar-underlay .sidebar-underlay-wrapper {
    margin-right: 0;
    transition: margin-right 0.3s ease;
    border-right-color: #EBEDF3;
  }
  .sidebar-underlay-enabled.sidebar-underlay-expanded .scrolltop {
    right: 332px;
  }
}
@media (max-width: 991.98px) {
  .sidebar-underlay {
    overflow: visible !important;
  }
  .sidebar-underlay .sidebar-underlay-wrapper {
    border-right: 1px solid #EBEDF3;
  }
  .sidebar-underlay .sidebar-underlay-toolbar {
    flex-shrink: 0;
    width: 215px;
  }
}
@media (max-width: 991.98px) {
  .sidebar-underlay {
    z-index: 98;
    position: fixed;
    top: 0;
    bottom: 0;
    transition: left 0.3s ease, right 0.3s ease, bottom 0.3s ease, top 0.3s ease;
    left: -320px;
    width: 300px;
  }
  .sidebar-underlay.sidebar-on {
    transition: left 0.3s ease, right 0.3s ease, bottom 0.3s ease, top 0.3s ease;
    left: 0;
  }
}
@media screen and (max-width: 991.98px) and (-ms-high-contrast: active), (max-width: 991.98px) and (-ms-high-contrast: none) {
  .sidebar-underlay {
    transition: none !important;
  }
}
@media (max-width: 991.98px) {
  .sidebar-underlay.sidebar-underlay-right {
    right: -320px;
    left: auto;
  }
  .sidebar-underlay.sidebar-underlay-right.sidebar-underlay-on {
    transition: left 0.3s ease, right 0.3s ease, bottom 0.3s ease, top 0.3s ease;
    right: 0;
    left: auto;
  }
}


/*END: SIDEBAR New Underlay*/


/*Animations*/
.animate.fadeOut {
    opacity: 1;
    transition: opacity .3s ease-in ;
    }
.animate.fadeOut.fade {
    opacity: 0;
    }

/* Asset Library */

.app_viewpart_asset_library_master_container, 
.app_viewpart_asset_viewer_master_container,
.asset_viewer_container,
.asset_viewer_container img.asset_item,
asset_viewer_paging {
    opacity: 0;
    transition: opacity .3s ease-in ;
    }
.app_viewpart_asset_library_master_container.loaded, 
.app_viewpart_asset_viewer_master_container.loaded,
.asset_viewer_container.loaded,
.asset_viewer_container img.asset_item.loaded,
.asset_viewer_paging.loaded {
    opacity: 1;
    }

.asset_viewer_paging {
    z-index: 1000 ;
    position: fixed ; 
    bottom: 10px ; 
    left: 50% ; 
    transform: translateX(-50%) ;
    
    }
.asset_viewer_paging.paging_aside_active {
    left: calc(50% + 165px - 64px); /* Centered + P px to the right */
    }
.asset_viewer_paging.paging_sidebar_active {
    left: calc(50%); /* Centered - P px to the right */
    padding-right: 403px;
    }
.asset_viewer_paging.paging_aside_active.paging_sidebar_active {
    left: calc(50% + 165px); /* Centered - P px to the right */
    padding-right: 403px;
    }

.asset_library_item_container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9 / 16 * 100 */
    background: rgb(255,255,255);
    background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(186,189,196,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(186,189,196,1) 100%);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(186,189,196,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#babdc4",GradientType=1); 
    }
.asset_library_item_container_placeholder {
    width: 100%;            /* Full width of the container */
    height: 100px;          /* Set a fixed height */
    background-color: var(--gray-100);  /* Background color */
    overflow: hidden;       /* To prevent the animation from overflowing */
    position: relative;
    }

.loading-bar {
  position: relative;
  width: 100%;
  background-color: #F0F3F5; /* Light gray base */
  overflow: hidden;
}

.loading-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%; /* Start off-screen for smoother animation */
  width: 50%; /* Width of the animated block */
  height: 100%;
  background: linear-gradient(
    to right,
    #F0F3F5, /* Matches base color for seamless fade */
    #e6e9ec, /* Darker shade */
    #F0F3F5 /* Matches base color again */
  );
  animation: slide 1.5s linear infinite;
}

@keyframes slide {
  0% { left: -30%; }
  100% { left: 100%; }
}





.asset_library_item_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }




/* Asset Editor */
.asset_editor {
/*
    font-size: 18px;
    font-family: "Poppins";
    cursor: text ;
*/
    }

.asset_editor h1, .asset_editor .h1,
.asset_editor h2, .asset_editor .h2,
.asset_editor h3, .asset_editor .h3,
.asset_editor h4, .asset_editor .h4,
.asset_editor h5, .asset_editor .h5,
.asset_editor h6, .asset_editor .h6 {
/*
    font-family: "Oswald";
    cursor: text ;
*/
    }


/*Image overlays*/
.image-container {
  position: relative; /* Make sure the container is positioned */
  display: inline-block; /* Ensure that the container doesn't stretch to full width */
}

.text-overlay { 
  position: absolute; /* Position the text element relative to the container */
  top: 50%; /* Adjust this value to vertically center the text */
  left: 50%; /* Adjust this value to horizontally center the text */
  transform: translate(-50%, -50%); /* Center the text both vertically and horizontally */
/*  background-color: rgba(0, 0, 0, 0.5);  Semi-transparent background color */
    color: var(--gray-700);  /*  Text color */
    font-weight: 700 ; 
    font-size: 1.5em ; 
/*      padding: 10px;  Adjust as needed */
/*  border-radius: 5px;  Rounded corners */
}



/*Asset editor positioning classes*/
.asset_editor .position-top {
    position: absolute;
    top: 0; 
    }

.asset_editor .position-middle {
    position: absolute;
    top: 50% !important ; /* Position 50% down from the top of the parent */
    transform: translateY(-50%) !important ; /* Center the element vertically */
    }

.asset_editor .position-bottom {
    position: absolute;
    bottom: 0; 
    }

.asset_editor .section-parent, asset_editor .content-parent  {
    position: relative; 
    min-height: 10px; 
    }

.asset_editor .asset_editor_column {
    transition: 0.25s all ease;
    }

.asset_editor_active_edit {
/*
    margin-top: -1px !important ; 
    margin-bottom: -1px !important ; 
    border-top: 1px solid #a5d5ff !important ; 
    border-bottom: 1px solid #a5d5ff !important ; 
*/
    box-sizing: border-box ;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

.asset_editor_color_picker_sample_append {
    cursor: pointer ; 
    }

/* Override CK Editor styles for asset editors */
.asset_editor .ck-content {
    min-height: .1em ; 
    margin-top: 0 ;
    }
.asset_editor .editor {
    margin-top: 0 ;
    }

.asset_preview td {
    margin: 0 ; 
    padding: 0 ; 
    }


/*Images*/

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    font-family: 'Helvetica';
    font-weight: 300;
    line-height: 2;  
    text-align: center;
    content: attr(alt);
    }



/*Dropdown Menu*/
.dropdown-menu {
    border-color: rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);    
    }


a.dropdown-item {
/*    color: #000000 ;*/
    cursor: pointer; 
    }
.dropdown-item {
    border-bottom: 0;     
    }
  .dropdown-item:hover, .dropdown-item:focus {
/*
    color: #0b0e0f;
    text-decoration: none;
    background-color: #f0f3f5; 
*/
    }
  .dropdown-item.active.text-danger, .dropdown-item:active.text-danger {
    color: #FFFFFF !important;
    text-decoration: none; 
    }


.dropdown-item.unselected:before {
    color: transparent ; 
    font-family: "Font Awesome 5 Free";
    content: "\f058" ;
    padding-right: 8px; 
    }
.dropdown-item.selected:before {
    color: var(--primary) ; 
    font-family: "Font Awesome 5 Free";
    font-style: normal !important ;
    content: "\f058" ;
    padding-right: 8px; 
    }

.dropdown-submenu-container {
    position: relative ; 
    right: -99%; 
    top: -34px
    }

.dropdown-menu-right .dropdown-submenu-container {
    position: relative ; 
    right: -99%; 
    top: -34px
    }
    @media (max-width: 576px) {
        .dropdown-menu-right .dropdown-submenu-container {
            right: -1% !important; 
            }
        }

.dropdown-item.dropdown-submenu-toggle {
    padding-left: 20px;
    padding-right: 20px; 
    }

.dropdown-submenu-toggle::after {
    font-family: FontAwesome;
    content: "\f0da" ;
    }


/* Horizontally aligned navigation pills with asana style underline markers */
.nav-pills.nav-pills-header .nav-link, .nav-pills.nav-pills-header .navbar .dropdown-toggle, .navbar .nav-pills.nav-pills-header .dropdown-toggle {
    color: var(--gray-600);
    font-weight: 400; 
    font-size: 14px; 
    border-bottom: 4px solid transparent; 
    padding-left: 10px;
    padding-right: 10px;
    }
.nav-pills.nav-pills-header .nav-link.disabled, .nav-pills.nav-pills-header .navbar .dropdown-toggle.disabled, .navbar .nav-pills.nav-pills-header .dropdown-toggle.disabled {
    color: var(--gray-300);
    font-weight: 400; 
    border-bottom: 2px solid transparent; 
    padding-left: 10px;
    padding-right: 10px;
    }


.nav-pills.nav-pills-header .nav-link:hover, .nav-pills.nav-pills-header .navbar .dropdown-toggle:hover, .navbar .nav-pills.nav-pills-header .dropdown-toggle:hover {
    color: var(--gray-600);
    border-bottom: 4px solid var(--gray-600); 
    cursor: pointer; 
    }
.nav-pills.nav-pills-header .nav-link:hover.disabled, .nav-pills.nav-pills-header .navbar .dropdown-toggle:hover.disabled, .navbar .nav-pills.nav-pills-header .dropdown-toggle:hover.disabled {
    color: var(--gray-300);
    border-bottom: 4px solid transparent; 
    cursor: not-allowed; 
    }


.nav-pills.nav-pills-header .nav-link.active, .nav-pills .navbar .active.dropdown-toggle, .navbar .nav-pills .active.dropdown-toggle,
.nav-pills.nav-pills-header .show > .nav-link,
.nav-pills.nav-pills-header .navbar .show > .dropdown-toggle, .navbar
.nav-pills.nav-pills-header .show > .dropdown-toggle {
  color: var(--primary);
  font-weight: 500;
  background-color: transparent; 
  border-bottom: 4px solid var(--primary); 
  }


.nav.nav-pills.nav-group.nav-secondary .nav-link {
    color: var(--gray-600) ; 
    font-weight: 500 ; 
    }
.nav.nav-pills.nav-group.nav-secondary .nav-link.active {
    font-weight: 700 ; 
    }



/*
.nav-pills:not(.flex-column) li.nav-item:first-child {
    border-top-left-radius: 2px; 
    border-bottom-left-radius: 2px; 
    }
.nav-pills:not(.flex-column) li.nav-item:last-child {
    border-top-right-radius: 2px; 
    border-bottom-right-radius: 2px; 
    border-right: 1px solid #CED4DA ; 
    }
.nav-pills:not(.flex-column) li.nav-item {
    border-top: 1px solid #CED4DA ; 
    border-bottom: 1px solid #CED4DA ; 
    border-left: 1px solid #CED4DA ;     
    }
   
.nav-pills.flex-column li.nav-item {
    border-top-right-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
    border-top: 1px solid #CED4DA ; 
    border-right: 1px solid #CED4DA ; 
    border-left: 1px solid #CED4DA ;     
    }
.nav-pills.flex-column li.nav-item:first-child {
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px;  
    }
.nav-pills.flex-column li.nav-item:last-child {
    border-bottom-right-radius: 2px; 
    border-bottom-left-radius: 2px; 
    border-bottom: 1px solid #CED4DA ; 
    }

.nav-pills .nav-link {
    color: var(--gray-600) ; 
    font-weight: 500;
    }
*/


/* INACTIVE pill navigation color*/
.nav-pills.nav-selectors .nav-link  {
      color: #77838F;
      font-weight: 500 ; 
      background-color: #F8F9FA;
      border-color: #F8F9FA; 
      z-index: 800 ;} 
    

/*ACTIVE pill navigation color*/
.nav-pills.nav-selectors .nav-link.active 
 {
    color: #621B6A;
    font-weight: 500 ; 
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15) !important ;
    z-index: 900 !important; 
    }






.nav-pills.nav-pills-sidebar .nav-link, .nav-pills.nav-pills-sidebar .navbar .dropdown-toggle, .navbar .nav-pills.nav-pills-sidebar .dropdown-toggle {
    color: #8C8C8C;
    font-weight: 500; 
    }

.nav-pills.nav-pills-sidebar .nav-link.active, .nav-pills .navbar .active.dropdown-toggle, .navbar .nav-pills .active.dropdown-toggle,
.nav-pills.nav-pills-sidebar .show > .nav-link,
.nav-pills.nav-pills-sidebar .navbar .show > .dropdown-toggle, .navbar
.nav-pills.nav-pills-sidebar .show > .dropdown-toggle {
  color: #1D1D1D;
  font-weight: 600;
  background-color: transparent; }

.navbar-nav .divider {
    border-top: 1px solid #CED4DA ; 
    }


/** Random Stuff **/
.content-wrapper {
    display: flex;
    width: 100%;
    }

.multiselect_uber_content {
    width: 800px; 
    max-width: 100%;
    }

/*Used to vertically center content within a div*/
.align-middle-parent {
    position: relative;
}
.align-middle-child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    margin: auto;
}

.align-middle {
    position: absolute;
    top: 50% !important ; /* Position 50% down from the top of the parent */
    transform: translateY(-50%) !important ; /* Center the element vertically */
    }

/*Pace Loading bar*/
.pace .pace-progress {
  background: #E6DEE7; }



/** NestedSortable **/
/*
ul.sortable, ol.sortable {
    padding: 0; 
    margin: 0;
    }
*/
.sortable li {
    list-style: none; 
    }
.sortable .handle {
    cursor: pointer;
    }
.sort_placeholder {
    padding: 20px 0 20px 0;
    outline: 2px solid #97b7ff;
    background-color: #cde6ff;
    }

.sort_placeholder_error {
    outline: 1px dashed transparent;
    background-color: #ffb4b4;
    height: 22px; 
    list-style-type: none;
    }


/* Custom App Styles */
.form-about-me {
/*    position: absolute; */
    font-size: 16px;     
/*    right: -20px;*/
    color: #000000 !important ;
    }

.form-about-me::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;      
    content: "\f2c1"; 
    font-family: FontAwesome;
    padding-top: 5px;  
    padding-left: 15px;  
    }


.form-response {
    max-width: 50%; 
    }


    @media (max-width: 576px) {
      .form-sm-response {
        max-width: 100% !important ; } 
        }

    @media (max-width: 576px) {
        .flex-sm-row .input-group-prepend {
            width: 100% !important ; 
            }
        .flex-sm-row input {
            width: 100% !important ; 
            } 
        
        .flex-sm-row .input-group-prepend .selectdiv {
            width: 100% !important ; 
            border-right: 1px solid var(--gray-200) !important;
            }
        }





/** Custom Main App Sidebar **/
.slideout .slideout-header {
    border-bottom: 1px solid rgba(0,0,0,0.05) ; 
    height: 100px;
    color:#000000 ; 
/*
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.03);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.03);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.03);   
*/
    }



.sidebar {
    color: var(--gray-600);
    font-weight: 500; 
    background: #F0F3F5;     
    }

    .sidebar .nav-link, .sidebar .navbar .dropdown-toggle, .navbar .sidebar .dropdown-toggle {
        color: var(--gray-600);
        cursor: pointer; 
        transition: all .05s ease-in 0s;
        }
    .sidebar .nav-link i, .sidebar .navbar .dropdown-toggle i, .navbar .sidebar .dropdown-toggle i {
        color: var(--gray-600);
        }

    .sidebar .nav-link.active, .sidebar .navbar .active.dropdown-toggle, .navbar .sidebar .active.dropdown-toggle {
        color: #621B6A;
        background: #FFFFFF; 
        font-weight: 600;
        }
    .sidebar .nav-link.active i, .sidebar .navbar .active.dropdown-toggle i, .navbar .sidebar .active.dropdown-toggle i {
        color: #621B6A; 
        }

    .sidebar .nav-link:hover, .sidebar .navbar .dropdown-toggle:hover, .navbar .sidebar .dropdown-toggle:hover {
        color: #FFFFFF;
        background: #621B6A; 
        }
    .sidebar .nav-link:hover i, .sidebar .navbar .dropdown-toggle:hover i, .navbar .sidebar .dropdown-toggle:hover i {
        color: #FFFFFF; 
        }

  .sidebar .nav-title {
    padding: 0.75rem 1rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase; }

    .sidebar .nav-link:hover, .sidebar .navbar .dropdown-toggle:hover, .navbar .sidebar .dropdown-toggle:hover {
/*        background: #f2f2f2; */
/*        background: #ededed; }*/
        }
  .sidebar .nav-dropdown.open {
        background: #ededed; }
    .sidebar .nav-dropdown.open .nav-link, .sidebar .nav-dropdown.open .navbar .dropdown-toggle, .navbar .sidebar .nav-dropdown.open .dropdown-toggle {
        color: var(--gray-600);
        }

    .sidebar .nav-dropdown.open .nav-link.active {
        color: #621B6A;
        }

    .sidebar .nav-dropdown.open .nav-link:hover {
        color: #FFFFFF;
        }



/*Sidebar Scrollbar*/
    .sidebar .sidebar-nav::-webkit-scrollbar {
      position: absolute;
      width: 10px;
      margin-left: -10px;
      -webkit-appearance: none; }
    .sidebar .sidebar-nav::-webkit-scrollbar-track {
      background-color: #F8F9FA;
      border-right: 1px solid #F8F9FA;
      border-left: 1px solid #F8F9FA; }
    .sidebar .sidebar-nav::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #e8e8e8;
      background-clip: content-box;
      border-color: transparent;
      border-style: solid;
      border-width: 1px 2px; }


/*Custom Badges*/
.badge {
    display: inline-block;
    padding: 3px 0.6em;
    font-size: .75rem; 
    font-weight: 500; 
    border-radius: 2px;
    }

.badge-brand {
  color: #FFFFFF;
  background-color: #621B6A ; }
  .badge-brand[href]:hover, .badge-brand[href]:focus {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #621B6A ; }

.badge-outline-brand {
  color: #621B6A;
  border: 1px solid #621B6A  ;
  background-color: transparent; }
  .badge-outline-brand[href]:hover, .badge-outline-brand[href]:focus {
    color: #621B6A;
    text-decoration: none;
    background-color: transparent; }

.badge-outline-black {
  color: #000000;
  border: 1px solid #000000  ;
  background-color: transparent; }
  .badge-outline-black[href]:hover, .badge-outline-black[href]:focus {
    color: #000000;
    text-decoration: none;
    background-color: transparent; }

.badge-outline-light {
  color: var(--gray-600);
  border: 1px solid var(--gray-600)  ;
  background-color: transparent; }
  .badge-outline-light[href]:hover, .badge-outline-light[href]:focus {
    color: var(--gray-600);
    text-decoration: none;
    background-color: transparent; }

.badge-success {
  color: #fff;
  background-color: #22B77B; }
  .badge-success[href]:hover, .badge-success[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #22B77B; }

.badge-outline-success {
  color: #22B77B;
  border: 1px solid #22B77B ;
  background-color: transparent; }
  .badge-outline-warning[href]:hover, .badge-outline-warning[href]:focus {
    color: #22B77B;
    text-decoration: none;
    background-color: transparent; }

.badge-warning {
  color: #4C4C4C;
  background-color: #FFBF11; }
  .badge-warning[href]:hover, .badge-warning[href]:focus {
    color: #4C4C4C;
    text-decoration: none;
    background-color: #FFBF11; }

.badge-outline-warning {
  color: #FFBF11;
  border: 1px solid #FFBF11  ;
  background-color: transparent; }
  .badge-outline-warning[href]:hover, .badge-outline-warning[href]:focus {
    color: #FFBF11;
    text-decoration: none;
    background-color: transparent; }

.badge-outline-danger {
  color: #FF1963;
  border: 1px solid #FF1963  ;
  background-color: transparent; }
  .badge-outline-danger[href]:hover, .badge-outline-danger[href]:focus {
    color: #FF1963;
    text-decoration: none;
    background-color: transparent; }

.badge-info {
  color: #FFFFFF;
  background-color: var(--primary); }
  .badge-info[href]:hover, .badge-info[href]:focus {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #0069D9; }

.badge-outline-info {
  color: var(--primary);
  border: 1px solid var(--primary)  ;
  background-color: transparent; }
  .badge-outline-info[href]:hover, .badge-outline-info[href]:focus {
    color: var(--primary);
    text-decoration: none;
    background-color: transparent; }


/*Override Button Styles*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none; }


.btn-group-undivided button:first-child {
    border-top-right-radius: 0 ; 
    border-bottom-right-radius: 0 ; 
    border-right: none !important ; 
    }
.btn-group-undivided button:last-child {
    border-top-left-radius: 0 ; 
    border-bottom-left-radius: 0 ; 
    border-left: none !important ; 
    }


.btn i.fa-sm {
    font-size: .925em !important ; 
    }





/*Custom Label Styles*/
/*For styling metadata and collection label background / text color pairs*/
span.label_color_gray, div.label_color_gray, a.label_color_gray {
    background-color: #b5b5c2 !important ; 
    }
    .label_color_gray i, a.label_color_gray .label_color {
        color: #000000 !important ; 
        }
    .label_color_gray i.secondary_label_color, a.label_color_gray .secondary_label_color {
        color: var(--gray-500) !important;
        }
    .label_color_gray i.secondary_label_color:hover, a.label_color_gray .secondary_label_color:hover {
        color: var(--gray-400) !important;
        }
i.label_color_gray {
    color: #b5b5c2 !important ; 
    }

/*DEFAULT LABEL COLOR*/
span.label_color_lightgray, div.label_color_lightgray, a.label_color_lightgray {
    background-color: #E4E6EF !important ; 
    }
    .label_color_lightgray i, a.label_color_lightgray .label_color {
        color: #3F4254 !important ; 
        }
    .label_color_lightgray i.secondary_label_color, a.label_color_lightgray .secondary_label_color {
        color: var(--gray-500) !important;
        }
    .label_color_lightgray i.secondary_label_color:hover, a.label_color_lightgray .secondary_label_color:hover {
        color: var(--gray-400) !important;
        }
i.label_color_lightgray {
    color: #E4E6EF !important ; 
    }


span.label_color_charcoal, div.label_color_charcoal, a.label_color_charcoal {
    background-color: #6d6e6f !important ; 
    }
    .label_color_charcoal i, a.label_color_charcoal .label_color {
        color: #FFFFFF !important ; 
        }
    .label_color_charcoal i.secondary_label_color, a.label_color_charcoal .secondary_label_color {
        color: var(--gray-500) !important;
        }
    .label_color_charcoal i.secondary_label_color:hover, a.label_color_charcoal .secondary_label_color:hover {
        color: var(--gray-400) !important;
        }
i.label_color_charcoal {
    color: #6d6e6f !important ; 
    }

span.label_color_red, div.label_color_red, a.label_color_red {
    background-color: #e0726e !important ; 
    }
    .label_color_red i, a.label_color_red .label_color {
        color: #FFFFFF !important ; 
        }
i.label_color_red {
    color: #e0726e !important ; 
    }

span.label_color_orange, div.label_color_orange, a.label_color_orange {
    background-color: #df9177 !important ; 
    }
    .label_color_orange i, a.label_color_orange .label_color {
        color: #000000 !important ; 
        }
i.label_color_orange {
    color: #df9177 !important ; 
    }

span.label_color_amber, div.label_color_amber, a.label_color_amber {
    background-color: #e9be78 !important ; 
}
.label_color_amber i, a.label_color_amber .label_color {
    color: #000000 !important ; 
}
i.label_color_amber {
    color: #e9be78 !important ; 
}

span.label_color_yellow, div.label_color_yellow, a.label_color_yellow {
    background-color: #f4df82 !important ; 
}
.label_color_yellow i, a.label_color_yellow .label_color {
    color: #000000 !important ; 
}
i.label_color_yellow {
    color: #f4df82 !important ; 
}

span.label_color_lightgreen, div.label_color_lightgreen, a.label_color_lightgreen {
    background-color: #bcdd9e !important ; 
}
.label_color_lightgreen i, a.label_color_lightgreen .label_color {
    color: #000000 !important ; 
}
i.label_color_lightgreen {
    color: #bcdd9e !important ; 
}

span.label_color_green, div.label_color_green, a.label_color_green {
    background-color: #92c7ab !important ; 
}
.label_color_green i, a.label_color_green .label_color {
    color: #FFFFFF !important ; 
}
i.label_color_green {
    color: #92c7ab !important ; 
}

span.label_color_turquoise, div.label_color_turquoise, a.label_color_turquoise {
    background-color: #71c8c3 !important ; 
}
.label_color_turquoise i, a.label_color_turquoise .label_color {
    color: #000000 !important ; 
}
i.label_color_turquoise {
    color: #71c8c3 !important ; 
}

span.label_color_blue, div.label_color_blue, a.label_color_blue {
    background-color: #4e74cb !important ; 
}
.label_color_blue i, a.label_color_blue .label_color {
    color: #FFFFFF !important ; 
}
i.label_color_blue {
    color: #4e74cb !important ; 
}

span.label_color_seablue, div.label_color_seablue, a.label_color_seablue {
    background-color: #ade5e2 !important ; 
}
.label_color_seablue i, a.label_color_seablue .label_color {
    color: #000000 !important ; 
}
i.label_color_seablue {
    color: #ade5e2 !important ; 
}

span.label_color_lavender, div.label_color_lavender, div.label_color_lavender {
    background-color: #a4a1ed !important ; 
}
.label_color_lavender i, a.label_color_lavender .label_color {
    color: #FFFFFF !important ; 
}
i.label_color_lavender {
    color: #a4a1ed !important ; 
}

span.label_color_purple, div.label_color_purple, a.label_color_purple {
    background-color: #c499e5 !important ; 
}
.label_color_purple i, a.label_color_purple span.label_color {
    color: #FFFFFF !important ; 
}
i.label_color_purple {
    color: #c499e5 !important ; 
}

span.label_color_pink, div.label_color_pink, a.label_color_pink {
    background-color: #edafeb !important ; 
}
.label_color_pink i, a.label_color_pink span.label_color {
    color: #000000 !important ; 
}
i.label_color_pink {
    color: #edafeb !important ; 
}

span.label_color_brightpink, div.label_color_brightpink, a.label_color_brightpink {
    background-color: #e278b0 !important ; 
}
.label_color_brightpink i, a.label_color_brightpink span.label_color {
    color: #FFFFFF !important ; 
}
i.label_color_brightpink {
    color: #e278b0 !important ; 
}

span.label_color_salmon, div.label_color_salmon, a.label_color_salmon {
    background-color: #ee9c9c !important ; 
}
.label_color_salmon i, a.label_color_salmon span.label_color {
    color: #000000 !important ; 
}
i.label_color_salmon {
    color: #ee9c9c !important ; 
}







/*Custom Button Styles*/


/*btn-aside-light is based on btn-light in unselected state and btn-light-primary in the selected state*/
.btn.btn-aside-light {
  color: #7E8299;
  background-color: #F3F6F9;
  border-color: #F3F6F9;
}
.btn.btn-aside-light i {
  color: #7E8299;
}
.btn.btn-aside-light .svg-icon svg g [fill] {
  transition: fill 0.3s ease;
  fill: #7E8299;
}
.btn.btn-aside-light .svg-icon svg:hover g [fill] {
  transition: fill 0.3s ease;
}
.btn.btn-aside-light.dropdown-toggle:after {
  color: #7E8299;
}
.btn.btn-aside-light:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-light:focus:not(.btn-text), .btn.btn-aside-light.focus:not(.btn-text) {
    color: #3699FF;
    background-color: #E1F0FF;
    border-color: #E1F0FF;
}
.btn.btn-aside-light:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-light:focus:not(.btn-text) i, .btn.btn-aside-light.focus:not(.btn-text) i {
  color: #7E8299;
}
.btn.btn-aside-light:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-aside-light:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-aside-light.focus:not(.btn-text) .svg-icon svg g [fill] {
  transition: fill 0.3s ease;
  fill: #7E8299;
}
.btn.btn-aside-light:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg:hover g [fill], .btn.btn-light:focus:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-aside-light.focus:not(.btn-text) .svg-icon svg:hover g [fill] {
  transition: fill 0.3s ease;
}
.btn.btn-aside-light:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-light:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-aside-light.focus:not(.btn-text).dropdown-toggle:after {
  color: #7E8299;
}
    /*Active Variant*/
    .btn.btn-aside-light:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-aside-light:not(:disabled):not(.disabled).active, .show > .btn.btn-aside-light.dropdown-toggle, .show .btn.btn-aside-light.btn-dropdown {
    color: #3699FF;
    background-color: #E1F0FF;
    border-color: transparent;
    }
    .btn.btn-aside-light:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-aside-light:not(:disabled):not(.disabled).active i, .show > .btn.btn-aside-light.dropdown-toggle i, .show .btn.btn-aside-light.btn-dropdown i {
      color: #3699FF;
    }
    .btn.btn-aside-light:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-aside-light:not(:disabled):not(.disabled).active .svg-icon svg g [fill], .show > .btn.btn-aside-light.dropdown-toggle .svg-icon svg g [fill], .show .btn.btn-aside-light.btn-dropdown .svg-icon svg g [fill] {
      transition: fill 0.3s ease;
      fill: #3699FF;
    }
    .btn.btn-aside-light:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-aside-light:not(:disabled):not(.disabled).active .svg-icon svg:hover g [fill], .show > .btn.btn-aside-light.dropdown-toggle .svg-icon svg:hover g [fill], .show .btn.btn-aside-light.btn-dropdown .svg-icon svg:hover g [fill] {
      transition: fill 0.3s ease;
    }
    .btn.btn-aside-light:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-aside-light:not(:disabled):not(.disabled).active.dropdown-toggle:after, .show > .btn.btn-aside-light.dropdown-toggle.dropdown-toggle:after, .show .btn.btn-aside-light.btn-dropdown.dropdown-toggle:after {
      color: #3699FF;
    }







/*Metadata Labels*/
/*Tag remove buttons*/
/* Initial styling */
.metadata-remove i {
    padding: 0 !important ;
    margin: 0 !important ;
    border-radius: 50% ; 
/*    color: var(--gray-500) !important;  Default color */
    }
/* Hover effect */
.metadata-remove:hover i {
/*    // color: var(--gray-300) !important;  Color on hover */
/*    // background-color: var(--gray-700) !important;  Color on hover */
}

/* Active/Clicked effect */
.metadata-remove:active i {
/*    // color: var(--gray-300) !important;  Color on hover */
/*    // background-color: var(--gray-900) !important;  Color on hover */
}


/*Custom Pagination*/
.page-link, .pagination-datatables li a, .pagination li a {
  color: var(--gray-600) ;
  background-color: #FFFFFF ;
  border-color: #E4E6EF ; 
  font-weight: 500;
    }
  .page-link:hover, .pagination-datatables li a:hover, .pagination li a:hover {
    color: var(--gray-700);
    text-decoration: none;
    background-color: var(--gray-100) ;
    border-color: #E4E6EF ; }
  .page-link:focus, .pagination-datatables li a:focus, .pagination li a:focus {
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.25); }

.page-item.active .page-link, .pagination-datatables li.active .page-link, .pagination li.active .page-link, .page-item.active .pagination-datatables li a, .pagination-datatables li .page-item.active a, .pagination-datatables li.active a, .page-item.active .pagination li a, .pagination li .page-item.active a, .pagination li.active a {
  color: var(--gray-700) ;
  font-weight: 700;
  background-color: #F3F6F9;
  border-color: #E4E6EF; }

.page-item.disabled .page-link, .pagination-datatables li.disabled .page-link, .pagination li.disabled .page-link, .page-item.disabled .pagination-datatables li a, .pagination-datatables li .page-item.disabled a, .pagination-datatables li.disabled a, .page-item.disabled .pagination li a, .pagination li .page-item.disabled a, .pagination li.disabled a {
  color: #536c79;
  background-color: #fff;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid #E4E6EF;
}




/*Custom Navbar Settings*/
.navbar-tall {
    height: 60px ;
    }


/*Full height list*/
.list-container-full-height {
    background-color: #FFFFFF; 
    min-height: calc(100vh - 36px);
    }

/** Slideouts **/
.slideout-trigger {
    transition: width .5s, max-width 0.3s, min-width 0.3s, height .1s;
    }
.slideout-trigger-button.active {
    width: 212px;    
    }
.slideout {
    position: relative ; 
    width: 0; 
    background: #FFFFFF;     
    top: 0; 
    right: 0; 
    bottom: 0; 
/*    height: 100% ; */
    z-index: 1035;
    color: #fff;
    transition: width .3s, max-width 0.3s, min-width 0.3s, height .1s;
    overflow-x: hidden;
/*    overflow-y: scroll;*/
    }
.slideout .slideout-content-header {
    position: fixed;
    z-index: 1036;    
    top: 0 ; 
    width: inherit ; 
    margin-left: 0; margin-right: 0;
    padding-left: 0 ; margin-right: 0; 
/*    border-top-width: 3px ; */
/*
    border-top-style: solid ;
    border-top-color: #621B6A ; 
*/
    background: #FFFFFF ;    
/*    background: #f5faff ; */
    }


.slideout-content-header .nav-item:first-child .active {
    border-left: none !important ; 
    }
.slideout-content-header .nav-item:last-child .active {
    border-right: none !important ; 
    }

.slideout .slideout-content-body {
    position: relative ;
    bottom: 0; 
    margin-top: 1px;
    top: 101px ; 
    margin-left: 0; margin-right: 0;
    padding-left: 0 ; padding-right: 0; 
    }
    @media (max-width: 768px) {
        .slideout .slideout-content-body { top: 190px ;  !important; }
        }
.slideout-content-body .tab-content {
    padding-bottom: 30px; 
    border: none; 
    bottom: 0 ; 
    }

.slideout-expanded-sm {
    width: 150px ; 
    } 
.slideout-expanded {
    width: 265px ; 
    min-width: 265px ; 
    }
.slideout-expanded-md {
    width: 400px ; 
    }
.slideout-expanded-lg,
.slideout-expanded-lg .slideout-fixed-footer {
    width: 700px ; 
    }
    @media (max-width: 768px) {
        .slideout-expanded-lg { width: 90% !important; }
        }

.slideout-expanded-xlg {
    width: 850px ; 
    }
    @media (max-width: 768px) {
        .slideout-expanded-xlg { width: 90% !important; }
        }



.slideout-shadow {
    -webkit-box-shadow: -16px 0px 16px -3px rgba(0,0,0,0.22);
    -moz-box-shadow: -16px 0px 16px -3px rgba(0,0,0,0.22);
    box-shadow: -16px 0px 16px -3px rgba(0,0,0,0.22);
    }
.slideout-section {
    border-bottom: 1px solid #6d6d6d;
    }
.slideout-section .section-expand {
    position: absolute;
    right: 0;
    top: 5px; 
    cursor: pointer; 
    }

.nav-link-slideout {
    color: var(--gray-600) !important ; 
    font-weight: 500 ; 
    }
.nav-link.nav-link-slideout.active {
    color: #000000 !important ; 
    }  

.slideout.filter-slideout {
    z-index: 900;
    }





/* On/Off toggle switch*/
/* https://proto.io/freebies/onoff/ */
.onoffswitch { 
    position: relative; 
    width: 68px; 
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none; 
    } 
.onoffswitch.onoffswitch-md {
    width: 80px; 
    }
.onoffswitch.onoffswitch-lg {
    width: 100px; 
    }
.onoffswitch.onoffswitch-xlg {
    width: 150px; 
    }
.onoffswitch-checkbox { display: none; } 
.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; border: 2px solid transparent; 
    border-radius: 20px; 
    } 
.onoffswitch-inner { 
    display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; 
    } 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; 
    float: left; 
    width: 50%; 
    height: 24px; 
    padding: 0; 
    line-height: 24px; 
    font-size: 12px; color: white; 
    font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; 
    } 
.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 10px; 
    background-color: var(--primary); 
    color: #FFFFFF; 
    } 
.onoffswitch-inner:after { 
    content: "OFF"; 
    padding-right: 10px; background-color: var(--gray-600); color: #FFFFFF; text-align: right; 
    } 
.onoffswitch-switch { 
    height: 20px ; 
    width: 20px; 
    display: block;     
    margin-top: 4px;
    margin-left: 2px; 
    margin-right: 4px; 
    background: #FFFFFF; position: absolute; 
    top: 0; bottom: 0; right: 40px; border: 2px solid transparent; border-radius: 20px; transition: all 0.3s ease-in 0s; 
    } 
.onoffswitch-md .onoffswitch-switch {
    right: 52px;
    }
.onoffswitch-lg .onoffswitch-switch {
    right: 72px;
    }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
    } 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
    } 

.onoffswitch-inner-anyall:before { 
    content: "ALL" !important; 
    } 
.onoffswitch-inner-anyall:after { 
    content: "ANY" !important; 
    }

.onoffswitch-inner-yesno:before { 
    content: "YES" !important; 
    } 
.onoffswitch-inner-yesno:after { 
    content: "NO" !important; 
    }

.onoffswitch-inner-showhide:before { 
    content: "VISIBLE" !important; 
    } 
.onoffswitch-inner-showhide:after { 
    content: "HIDDEN" !important; 
    }

.onoffswitch-inner-activeinactive:before { 
    content: "ACTIVE" !important; 
    } 
.onoffswitch-inner-activeinactive:after { 
    content: "INACTIVE" !important; 
    }




/*Modals*/
@media (min-width: 992px) {
  .modal-xl {
    max-width: 800px; } }

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px; } }

@media (min-width: 576px) {
  .modal-sm {
    min-width: 318px; 
    max-width: 350px; } 
    }

.modal-title {
    color: #000000 ; 
    }

.modal-content {
    color: var(--gray-600) ; 
    border-radius: 4px ; 
    border: 1px solid rgba(0, 0, 0, 0.15) ; 
    }

.modal-header {
  padding: 1rem;
  padding-top: 1.5rem;
/*  padding-bottom: 1.5rem;*/
  border-bottom: none; }

.modal-footer, .modal-border-top {
  border-top: 1px solid rgba(0, 0, 0, 0.15) ;
  }
.modal-border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) ;
  }


.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 3rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 4rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}


/*  Table header styling  */
.table thead tr { 
    height: 60px; 
    }

.table thead th { 
    font-weight: 500; 
    border-top: 0px; 
    border-bottom: 1px solid #C0C2C4 ; 
/*    background-color: #FFFFFF;*/
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f0f3f5+100 */
    backgroundx: rgb(255,255,255);  /* Old browsers */
    backgroundx: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(240,243,245,1) 100%); /* FF3.6-15 */
    backgroundx: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(240,243,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
    backgroundx: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(240,243,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filterx: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f3f5',GradientType=0 ); /* IE6-9 */
    }

.table thead th.bg-white { 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }

.table td { 
    border-top: 1px solid #f4f4f4; 
    }
 


/*Row Hover Styling*/
.hoverer {
    cursor: pointer; 
    border: 1px solid transparent ; 
    box-sizing: border-box ; 
    }
.hoverer:hover {
    background-color: var(--gray-100) !important ; 
    }

.hoverer2 {
/*    cursor: pointer; */
    border: 0 solid transparent ; 
    box-sizing: border-box ; 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;    
    }
.hoverer2:hover {
/*    filter: drop-shadow(0px 0px 6px #3088ff); */
/*    border-left: 3px solid red ; */
    }
.hoverer:hover .hoverer-target { 
/*    color: #2d2d2d !important ; */
    transition: all .1s ; 
    }
.hoverer.activerow {
    background-color: var(--blue-100) !important ; 
    }
.hoverer.dangerow {
    background-color: rgba(255, 25, 99, 0.1) !important ; 
    }



/*Toggle the display of a child item on hover*/
/*Place hovershow on the parent, and hovershow_target on the child to be shown on hover*/
.hovershow_target, .hovershow_target2 {  
    opacity: 0 ;
    background: rgba(0,0,0, 0);
    transition: all .2s ease-in; 
    -moz-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    }

.hovershow_target {  
    top: 0; bottom: 0; right: 0; left: 0; 
    }

:hover.hovershow .hovershow_target, :hover.hovershow .hovershow_target2, .hovershow_target_locked { 
    opacity: 1 !important ;    
    }



.email_footer {
    border: 0px solid transparent; 
    background: transparent; 
    background-color: transparent; 
    }
:hover.email_footer {
    border: 2px solid #3799ff; 
    }

/*
.hovershow_self {  
    opacity: 0 ;
    top: 0; bottom: 0; right: 0; left: 0; 
    background: rgba(0,0,0, 0);
    transition: all .1s linear; 
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    }

:hover.hovershow_self { 
    opacity: 1 !important ;          
    }
*/

:hover.hovershow .hovershow_target.bg-transparent-dark { 
    background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 100%); 
    background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 100%); 
    background: linear-gradient(135deg,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#33000000',GradientType=1 ) ;
    }



.form-required { 
    -webkit-box-shadow: -3px 0px 0px 0px rgba(98,27,106,1);
    -moz-box-shadow: -3px 0px 0px 0px rgba(98,27,106,1);
    box-shadow: -3px 0px 0px 0px rgba(98,27,106,1);
    }

.form-required-label {
    font-size: 16px;
    color: #E21457 !important ;
    }

.form-required-label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;      
    content: "*"; 
    font-family: Arial;
    padding-top: 5px;
    padding-left: 5px;
    }


.form-fader, .right-fader {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&0+0,0.8+48,1+68 */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 48%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 48%,rgba(255,255,255,1) 68%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 48%,rgba(255,255,255,1) 68%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    top: 0; right: 0; left: 90%; bottom: 0;
    position: absolute;
    }

.bottom-fader {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&0+0,0.8+48,1+68 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 48%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 48%,rgba(255,255,255,1) 68%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 48%,rgba(255,255,255,1) 68%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }

.bottom-fader-black10p {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+99&0+0,0.8+48,1+68 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(240,240,240,0.8) 48%, rgba(234,234,234,1) 68%, rgba(224,224,224,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(240,240,240,0.8) 48%,rgba(234,234,234,1) 68%,rgba(224,224,224,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(240,240,240,0.8) 48%,rgba(234,234,234,1) 68%,rgba(224,224,224,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
    }

/*Override Standard Form Styles*/
/*
    .form-control {
        border-color: #CED4DA ;
        }
    .form-control, .form-control:focus {
    color: #000000 ; 
    font-weight: 500 ;
    }
    .form-control::-webkit-input-placeholder {
    color: #000000 ; 
    font-weight: 500 ;
    opacity: 1; }
    .form-control:-ms-input-placeholder {
    color: #000000 ; 
    font-weight: 500 ;
    opacity: 1; }
    .form-control::-ms-input-placeholder {
    color: #000000 ; 
    font-weight: 500 ;
    opacity: 1; }
    .form-control::placeholder {
    color: #C1C4C8;
    opacity: 1; }
*/

    .form-control:hover, .form-control:active, .form-control:focus {
        -webkit-box-shadow: none !important;  
        -moz-box-shadow: none !important;  
        box-shadow: none !important;
        border-color: #E4E6EF ;
        }

/*
    .custom-select, .custom-select:focus {
    color: #000000 ; 
    font-weight: 500 ;
    border-color: #CED4DA ;
    outline: 0;
    box-shadow: none; }
*/

small.form-text, .small.form-text {
    font-weight: 500 ;
    font-size: .82rem !important;
    color: var(--gray-500) ; 
    }



/* Custom Card Types */
.card-form {
    background-color: #F0F3F5 ; 
    border-radius: 2px; 
    border: none ;
    }

.card-form h5.card-title {
    font-size: 1.1rem ; 
    font-weight: 500 ;
    color: #000000 ; 
    margin-bottom: 0.25rem ;
    }

.card-form p.card-description {
    font-size: .9rem ; 
    font-weight: 400 ;
    color: var(--gray-600) ; 
    margin-bottom: 1.25rem ;
    }

.card-form p.form-label, .form-label {
    font-size: .80rem ; 
    font-weight: 500 ;
    color: #475867 ; 
    text-transform: uppercase ;
    margin-bottom: 0.25rem ;
    }

.card-form .form-help-text {
    font-size: .88rem ; 
    font-weight: 400 ;
    color: var(--gray-600) ; 
    
    }


.card-form .form-control {
  border-radius: 2px; 
  border: none ;  
  }
  
.card-form .input-group {
  border-radius: 2px; 
  }

.card-form .input-group .input-group-text {
  border: none ;    
  color: #000000 ; 
  font-weight: 500 ; 
  background-color: #F8F9FA ; 
  }


/* Override custom radio*/
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  border: 1px solid var(--primary) ; 
    background-color: var(--primary); }

/* Override custom checkbox */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  border: 1px solid var(--primary) ; 
    background-color: var(--primary); }

.custom-control-label::before {
    border: 1px solid #CED4DA ; 
    border-radius: 2px; 
    background-color: #F0F3F5; }





/* Custom form & input styles */
.input-group-text {
/*
    padding-top: .375rem ; 
    padding-right: .75rem ; 
    padding-bottom: .375rem ; 
    padding-left: .75rem ; 
    border: 1px solid #E4E6EF ; 
*/
    }

/*Form Validation Styles*/

.is-invalid {
    border-color: #FF1963 !important ; 
    -webkit-box-shadow: 0px 0px 5px 1px rgba(255,25,98,0.61);
    -moz-box-shadow: 0px 0px 5px 1px rgba(255,25,98,0.61);
    box-shadow: 0px 0px 5px 1px rgba(255,25,98,0.61);
    }


/*Navbar*/
.app-header.navbar {
    border-bottom: 1px solid rgba(0,0,0,0.05) ; 
    height: 100px;
/*
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.03);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.03);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.03);   
*/
    }

  .app-header.navbar .navbar-brand {
    display: inline-block;
    width: 155px;

    padding-top: 35px;
    margin-right: 0;
    background-color: transparent;
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70px auto;

    border-bottom: transparent ; 
    height: 100px;
    }


/*Page Navigation*/

.page-navigation {
    position: relative; 
    padding-right: 0;
    height: 100px;
    }

.page-navigation .page-navigation-previous {
    position: absolute;     
    top: 4px; 
    left: 0; 
    font-size: .75rem;
    font-weight: 500; 
    }

.page-navigation .page-navigation-actions {
    position: absolute; 
    left: 0; 
    bottom: -36px; 
    width: 100%; 
    }

.page-navigation .page-navigation-title-block {
    padding-left: 20px;
    position: absolute; 
    top: 26px; 
    left: 0; 
    }

.page-navigation .page-navigation-title {
    padding-bottom: 0;
    margin-bottom: 0; 
    display: inline-block;
    font-size: 24px;   
    font-weight: 300;
    }

.page-navigation .page-navigation-actions {
    padding-left: 20px;
    position: absolute; 
    bottom: 0; 
    left: 0;    
    }

.page-navigation .page-navigation-actions.page-navigation-actions-mobile {
    left: -15px;    
    }



.slideout-page-navigation {
    position: relative; 
    padding-right: 0;
    height: 100px;
    }

.slideout-page-navigation .page-navigation-previous {
    position: absolute;     
    top: 4px; 
    left: 0; 
    font-size: .75rem;
    font-weight: 500; 
    }

.slideout-page-navigation .page-navigation-actions {
    position: absolute; 
    left: 0; 
    bottom: -36px; 
    width: 100%; 
    }

.slideout-page-navigation .page-navigation-title-block {
    padding-left: 20px;
    padding-right: 20px;
    position: relative; 
    top: 26px; 
    left: 0; 
    }

.slideout-page-navigation .page-navigation-title {
    padding-bottom: 0;
    margin-bottom: 0; 
    display: inline-block;
    font-size: 24px;   
    font-weight: 300;
    }

.slideout-page-navigation .page-navigation-actions {
    padding-left: 20px;
    position: absolute; 
    bottom: 0; 
    left: 0;    
    }

.slideout-page-navigation .slideout-page-navigation-actions.page-navigation-actions-mobile {
    left: -15px;    
    }



/* Fixes bug in Bootstrap 4 where dropdown-menu-right doesn't work outside navbar */
.dropdown-menu-right-fix {
    right: 0;
    left: auto;
    }

/*Custom Dropdown Menus*/
.dropdown-header {
  display: block;
  padding: 0 1.5rem;
  margin-bottom: 0;
  font-size: 0.76563rem;
  color: var(--gray-600);
    font-family: 'Helvetica Neue','Source Sans Pro', Arial, sans-serif;
  white-space: nowrap; }

.dropdown-header {
    padding: 8px 10px;
    font-weight: 500 ; 
    background: transparent;
    border-bottom: none ; }
  .dropdown-header .btn {
/*    margin-top: -7px;*/
    color: var(--gray-600); }
    .dropdown-header .btn:hover {
      color: #151b1e; }
    .dropdown-header .btn.pull-right {
      margin-right: -20px; }


/*Tooltips*/
.tooltip-inner {
    border-radius: 2px;     
    }

.tooltip-inner .divider-line {
    border-top: 1px solid var(--gray-700) ; 
    }


/*Toastr alerts*/
#toast-container > div {
    opacity: .96;
    }


/*
.toast-bottom-lift-center {
  bottom: 80px;
  right: 0;
  width: 100%;
}
.toast-bottom-push-center {
  top: 150px;
  right: 0;
  width: 100%;
}
#toast-container.toast-bottom-lift-center > div,
#toast-container.toast-bottom-push-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}


#toast-container > .toast {
    background-image: none !important;
}

#toast-container > .toast:before {
    position: fixed;
    font-family: FontAwesome;
    -webkit-font-smoothing: antialiased;      
    font-size: 24px;
    line-height: 18px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}        
#toast-container > .toast-warning:before {
    content: "\f05a";
}
#toast-container > .toast-error:before {
    content: "\f071";
}
#toast-container > .toast-info:before {
    content: "\f0f3"; 
}
#toast-container > .toast-success:before {
    content: "\f058";
}

.toast-info {
  background-color: var(--gray-100);
}

.toast-info .toast-title,
.toast-info .toast-message, 
.toast-info .toast-close-button,
#toast-container > .toast-info:before {
    color: var(--gray-600); 
    }

.toast-info .toast-message a,
.toast-info .toast-message label {
  color: var(--primary);
}

.toast-error {
    background-color: var(--danger);
    }
*/



/** These were for a previous iteration of sortable... not relevant anymore but shoulud we use them? **/
body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}


/* NOUI SLIDER OVERRIDES: RANGE SLIDER*/
        .noUi-target {
          background: #F0F3F5;
          border-radius: 2px;
          border: none ;
          box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
        }
        
    .noUi-horizontal {
      height: 6px;
    }
    .noUi-horizontal .noUi-handle {
      width: 20px;
      height: 20px;
/*      left: 20px;*/
/*      right: -50px;*/
      top: -7px;
    }
        
    .noUi-handle.noUi-handle-upper {
      right: 0;
    }
        
        
    .noUi-handle {
        border: 1px solid #D9D9D9;
        border-radius: 10px;
        }
    .noUi-handle:before,
    .noUi-handle:after {
      content: "";
      display: block;
      position: absolute;
      height: 10px;
      width: 2px;
      background: #6C757D ;
      left: 8px;
      top: 4px;
    }      
    .noUi-connect {
      background: var(--primary) ;
    }  
        
.noUi-tooltip {
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 1px; 
    padding-top: 1px; 
    }

.noUi-target {
    border: 0px !important ; 
    background-color: var(--gray-800) !important ; 
    }                            
.noUi-handle {
    top: -4px !important; 
    left: 2px !important ; 
    }





/*Emoji*/
.line{
    width:100%;
    height:0;
    border-bottom:1px solid #e3e3e3;
    float:left;
    margin:0;
    position:absolute;
    z-index:1;
    top:50%;
    left:0
    }
    
.emoji-menu-bottom .emoji-menu     {
    bottom: 0 !important ; 
    }


/*Upload Care*/
.uploadcare-panel {
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}

    
/* TWITTER TYPEAHEAD corejs typeahead*/
span.twitter-typeahead {
    width: 100% ; 
}
.tt-menu {
    top: 3px; 
    right: 0;            
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #3F4254;
  text-align: left;
  list-style: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 0 solid rgba(0, 0, 0, 0.15);
  border-radius: 0.42rem;
  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);            
    }

.tt-suggestion {
    cursor: pointer; 

      display: block;
      width: 100%;
      padding: 0.75rem 1.25rem;
      clear: both;
      font-weight: 400;
      color: #181C32;
      text-align: inherit;
      white-space: nowrap;
      background-color: transparent;
      border: 0;            
    }
.tt-cursor {        
    color: #101221;
    text-decoration: none;
    background-color: #EBEDF3;  
    }

    
/*KEEN THEMES OVERRIDE AND CUSTOMS */
.switch.switch-xs input:empty ~ span {
  margin: 2px 0;
  height: 16px;
  width: 30px;
  border-radius: 8px;
}
.switch.switch-xs input:empty ~ span:before,
.switch.switch-xs input:empty ~ span:after {
  width: 28px;
  border-radius: 12px;
}
.switch.switch-xs input:empty ~ span:after {
  height: 12px;
  width: 12px;
  top: 2px;
  bottom: 2px;
  margin-left: 2px;
  font-size: 0.55em;
  text-align: center;
  vertical-align: middle;
}
.switch.switch-xs input:checked ~ span:after {
  margin-left: 12px;
}