/*
  copyrightslap css start
  https://docs.google.com/document/d/1Bqe8LWjUz0G9ImHsYwXL2KqnIypLTE_GOzGeYbXrTrc/edit
  #e3dfd7 - grey
  #9bddff - columbia blue
  #ff8f00 - orange
  #d4d7dc - white-ish.  text in sidebar
  #24305E - sidebar dark blue



  2024 update
  #075395 - dark blue
  #4f7eaf - lighter blue

  11/24 update
  #5941FF - purple
  #61CE70 - green 

  // no longer using
  #2b2b2b - dark grey

*/

/*
  specific elements
*/

:root{
  --cs-primary-hsl-color: hsl(248, 100%, 63%);
  --cs-primary-hsl-color-dark: hsl(248, 100%, 53%);
  --cs-primary-hsl-color-darkest: hsl(248, 100%, 43%);
  --cs-secondary-hsl-color: hsl(128, 53%, 59%); /*lighter blue for button*/
  --cs-secondary-hsl-color-dark: hsl(128, 53%, 49%);
  --cs-secondary-hsl-color-darkest: hsl(128, 53%, 39%);
  --cs-secondary-color-rgb: 255, 155, 61;
  
  --cs-top-dropdown-primary-hsl-color: hsl(0, 0%, 0%);
  --cs-top-dropdown-secondary-hsl-color:hsl(0, 0%, 100%);
  
  --cs-sidebar: #fff;
  --cs-progress-bar-background-color: #5941FF;
  --cs-icon-hover: #61ce70;

/*   --cs-btn-hsl-cancel-color: hsl(0, 0%, 67%);
  --cs-btn-hsl-cancel-color-dark: hsl(0, 0%, 57%);
  --cs-btn-hsl-cancel-color-darkest: hsl(0, 0%, 47%); */
  --cs-btn-hsl-cancel-color: hsl(0, 0%, 80%);
  --cs-btn-hsl-cancel-color-dark: hsl(0, 0%, 70%);
  --cs-btn-hsl-cancel-color-darkest: hsl(0, 0%, 60%);
   
  --cs-dark-color: #1b1b1b;
  --cs-light-color: #ebebeb;
  --cs-light-grey: #d9d9d9;
  --test-color: #b1a6a6;
}

/*
  Classes
*/

/* Boostrap Overides using CSS*/
.btn-cs-primary {
  --bs-btn-font-weight: bold;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cs-secondary-hsl-color);
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: var(--cs-light-color);
  --bs-btn-hover-bg: var(--cs-secondary-hsl-color-dark);
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: var(--cs-secondary-color-rgb);
  --bs-btn-active-color: var(--cs-light-grey);
  --bs-btn-active-bg: var(--cs-secondary-hsl-color-darkest);
  --bs-btn-active-border-color: #000;
  border-width: 1px;
  --bs-btn-padding-y: .25rem; 
  --bs-btn-padding-x: .5rem; 
  border-radius: 0;
}

.btn-cs-modal-cancel {
  --bs-btn-font-weight: bold;
  --bs-btn-color: #000;
  --bs-btn-bg: var(--cs-btn-hsl-cancel-color);
  --bs-btn-border-color: var(--cs-dark-color);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--cs-btn-hsl-cancel-color-dark);
  --bs-btn-hover-border-color: var(--cs-dark-color);
  --bs-btn-focus-shadow-rgb: var(--cs-secondary-color-rgb);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--cs-btn-hsl-cancel-color-darkest);
  --bs-btn-active-border-color: var(--cs-dark-color);
  --bs-btn-padding-y: .25rem; 
  --bs-btn-padding-x: .5rem; 
  border-width: 1px;
  border-radius: 0; 
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cs-primary-hsl-color);
  --bs-btn-border-color: var(--cs-primary-hsl-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cs-primary-hsl-color-dark);
  --bs-btn-hover-border-color: var(--cs-primary-hsl-color-dark);
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cs-primary-hsl-color-darkest);
  --bs-btn-active-border-color: var(--cs-primary-hsl-color-darkest);;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}


.pagination {
  --bs-pagination-color: var(--cs-primary-hsl-color);
  
  --bs-pagination-active-bg: var(--cs-primary-hsl-color);  
  --bs-pagination-active-border-color: var(--cs-primary-hsl-color);
  --bs-pagination-border-color: var(--cs-primary-hsl-color);
  --bs-pagination-hover-bg: var(--cs-primary-hsl-color-dark);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-border-color: var(--cs-primary-hsl-color-dark);
  
}

.btn-cs-top-dropdown-left {
  
  --bs-btn-color: #000;
  --bs-btn-bg: var( --cs-top-dropdown-secondary-hsl-color);
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: var(--cs-secondary-color-rgb);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #000;
  border-width: 1px;
  --bs-btn-padding-y: .1rem; 
  --bs-btn-padding-x: .5rem; 
  border-radius: 0;
  width: 200px;
  text-align: left;
}

.btn-cs-top-dropdown-right {
  
  --bs-btn-color: #000;
  --bs-btn-bg: var( --cs-top-dropdown-secondary-hsl-color);
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var( --cs-light-color);
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: var(--cs-secondary-color-rgb);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var( --cs-light-color);
  --bs-btn-active-border-color: #000;
  border-width: 1px;
  --bs-btn-padding-y: .1rem; 
  --bs-btn-padding-x: .5rem; 
  border-radius: 0;
}

.dropdownmenu-cs-top-dropdown {
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-border-color: #000;
}

.cs-brand{
  vertical-align: middle;
  align-items: center;
  display: flex;
  
}

.cs-top-menu-card{
  --bs-card-spacer-y: .1rem;
  --bs-card-spacer-x: .5rem;
  --bs-card-border-width: 1px;
  --bs-card-border-color: rgb(0 0 0);
  --bs-card-border-radius: 0;

}

.progress-bar {
  --bs-progress-bar-bg: var(--cs-progress-bar-background-color);
}

.cs-badge-subscription-info {
  border-radius: 0;
}

.border-left-danger {
  border-left: .25rem solid #dc3545!important;
}

.border-left-periwinkle {
  border-left: .25rem solid #74a1eb!important;
}

/*
.border-left-grey {
  border-left: .25rem solid #7d808f!important;
} */

.border-left-takedowns-sent {
  border-left: .25rem solid #a3c3d7!important;
}

.border-left-success {
  border-left: .25rem solid #198754!important;
}

.border-left-warning {
  border-left: .25rem solid #ffc107!important;
}

.border-left-orange {
  border-left: .25rem solid #FF8F00!important;
}

.border-left-purple {
  border-left: .25rem solid rgb( 98,90,250 )!important;
}

.border-left-teal {
  /*border-left: .25rem solid #14ccd4!important;*/
  border-left: .25rem solid #6cebf1!important;
  
}

.btn-circle {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 10px;
}

.hoHover {
  pointer-events: none;
}

.circle-periwinkle {
  color: #000;
  background-color: #74a1eb;
  border-color: #74a1eb;
}

.dashboard-overview .number {
  font-size: 1em;
  font-weight: 300;
}

.dashboard-overview .title {
  font-size: 1em;
  font-weight: 650;
  color: #5a5c69;
  margin: 0 20px;
}

.dashboard-overview .no-underline-link {
  text-decoration: none;
}

.dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: .5rem;
}

.cs-faq-accordian-button:not(.collapsed) {
    color: #d4d7dc;
    /* background-color: #24305E; */

}

*/
.cs-faq-accordian-button-{
  color: #d4d7dc;
  /* background-color: #24305E; */

}

/* change the placeholder font color / transparency for new project form */
.form-control::-webkit-input-placeholder {
  color: #0c0b0c3a;
}
.form-control:-moz-placeholder {
  color: #0c0b0c3a;
}
.form-control::-moz-placeholder {
  color: #0c0b0c3a;
}
.form-control::placeholder {
  color: #0c0b0c3a;
}
.form-control:-ms-input-placeholder {
  color: #0c0b0c3a;
}

.f-w-400 {
  font-weight: 400;
}

.f-w-500 {
  font-weight: 500;
}

.h-lg-100 {
    height: 100% !important;
}

.cs-hidden {
  display: none;
}

.icon-orange {
  color: #FF8F00;
}

.icon-black {
  color:#000;
}

.icon-purple {
  color: rgb( 98,90,250 );
}

.icon-takedowns-sent {
  color: #a3c3d7;
}

.icon-text-success {
  color: #198754;
}

.icon-text-error {
  color: #198754;
}

.cs-text-grey {
  color: #e3dfd7;
}
.cs-text-columbia-blue{
  color: #9bddff;
}
.cs-text-orange {
  color: #ff8f00;
}

.cs-text-purple {
  color: #5941FF;
}

.cs-text-whiteish {
  color: #d4d7dc;
}

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

.cs-text-dark-blue{
  color: #24305E;
}

.cs-text-teal{
  /*#14ccd4;*/
  color: #6cebf1;  
}

.cs-text-periwinkle{
  color: #74a1eb;  
}

.cs-text-light-grey{
  color: #a3c3d7;  
}




.m-b-5 {
  margin-bottom: 5px;
}

.nav {
  --bs-nav-link-padding-y: 0.3rem;
}

.new-project-literary-work {
  display: none;
}

.left-sidebar-root {
  /* background-color: #525252; 
  
  background-color: #1a5093; 
  background-color: #1a5093; 
  background-color: var(--cs-secondary-hsl-color);*/
  background-color: var(--cs-sidebar)
}



.cs-background-color-teal {
  /*background-color: #14ccd4;  */
  background-color: #6cebf1;
}

.cs-background-color-purple {
  background-color: #5941FF;
}
.cs-background-purple-10 {
  background-color: rgba(89, 65, 255, 0.1); /* #5941FF at 10% opacity */
}

.cs-background-color-dark-blue {
  background-color: #24305F;
  /* border-color: #24305F; */
}

.cs-button-background-color-dark-blue {
  background-color: #24305F;
}
.cs-button-background-color-dark-blue:hover, 
.cs-button-background-color-dark-blue:focus:active {
  background-color: #74a1eb;
} 

.cs-sidebar-header:hover, 
.cs-sidebar-header:focus:active {
  color: #7BED9F;
} 

.cs-button-background-color-orange {
  background-color: #ff8f00;
}

.cs-border-color-dark-blue{
  border-color: #24305F;
}

.cs-border-color-black{
  border-color: #0c0c0c;
}

.cs-border-color-orange{
  border-color: #ff8f00;
}

.cs-button-background-color-grey {
  background-color: #7d808f;
}

.cs-border-color-grey{
  border-color: #7d808f;
}

.cs-border-color-teal{
  /*border-color: #14ccd4;*/
  border-color: #6cebf1;
}

.left-sidebar-nav-a {
  font-weight: 500;
  /* width: 100%; */
  color: #d4d7dc;
}

.left-sidebar-nav-a:hover,
.left-sidebar-nav-a:focus:active {
  color: #74a1eb;
}

a:hover,
a:focus:active {
  color: var(--cs-icon-hover);
}
a {
  color: var(--cs-dark-color);
}

.left-sidebar-nav-li {
  font-weight: 500;
  width: 100%;
}

.left-sidebar-nav-span{
  font-family: Arial, Helvetica, sans-serif;
}

.left-sidebar-ul-parent-div{
  width: 100%;
}



/*
.site-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: #ff8f00;
} */

.subscription-change-img {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 150px; /* Set a small width */
}

.subscription-change-img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.um-submit-btn {
  background: #ff8f00;
}

.um-link {
  display: none;
}



button.updateProject{
  visibility:hidden;
}
/*
  IDs
*/



/*
  copyrightslap css end
*/


/*
new sidebar with hamburger
*/


/* github sidebar */

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*,
::after,
::before {
    box-sizing: border-box;
}


/* Layout skeleton */

.wrapper {
  display: flex;
  width: 100%;
  transition: all 0.3s ease-in-out;
}


/* Default expanded sidebar */
#sidebar {
  width: 264px;
  min-width: 264px;
  max-width: 264px;
  height: 100vh;
  transition: transform 0.3s ease-in-out;
  background-color: var(--cs-sidebar, #2c2c2c);
  color: #fff;
  border-right: 1px solid rgba(39, 38, 38, 0.1);
  overflow: hidden;
}

/* Collapsed state — hide but keep layout flow */
#sidebar.collapsed {
  width: 0;
  min-width: 0;
  max-width: 0;
}

/* Optional: ensure content doesn't shift */
body.sidebar-collapsed main {
  margin-left: 0 !important;
}

.main {
  flex-grow: 1;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.sidebar-heading {
    padding: 15px 0px 5px 0px;
}

/* add overlay */
/* On mobile, make sure main content isn't scroll-locked or visually squished */
@media (max-width: 767.98px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    z-index: 999;
  }

  #sidebar.active {
    transform: translateX(0);
  }

  #sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
  }

  #sidebar-overlay.active {
    display: block;
  }

  .main.dimmed::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
}




#sidebar .h6 {
  color: #fff; }

#sidebar h1 {
  margin-bottom: 20px;
  font-weight: 700; }
#sidebar h1 .logo {
  color: #fff; }
#sidebar ul.components {
  padding: 0; }
#sidebar ul li {
  font-size: 12px;
}
#sidebar ul li > ul {
  margin-left: 10px; }
#sidebar ul li > ul li {
  font-size: 14px; }
#sidebar ul li a {
  padding: 10px 0;
  display: block;
  /*color: rgba(255, 255, 255, 0.8);*/
  color: var(--cs-dark-color);
  border-bottom: 1px solid rgba(39, 38, 38, 0.1); }

  #sidebar ul li a:hover {
  color: var(--cs-dark-color);
  
}
#sidebar ul li.active > a {
  background: transparent;
  color: #fff; }

.content {
    flex: 1;
    max-width: 100vw;
    width: 100vw;
}

/* Responsive */

@media (min-width:768px) {
    .content {
        width: auto;
    }
}

#sidebar .custom-menu .btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.btn-cs-sidebar {
  border: 1px solid;
  border-color: black;
  
    /*padding: 0.375rem 0.75rem;*/
    width: 40px;
    /*font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem; */
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    font-weight: 400;
}

.btn-cs-sidebar:hover{
  border-color: black;
  border: 1px solid;
  background-color: var(--cs-light-color);
}

.cs-left-nav {
  /* background-color: var(--cs-sidebar); */
  padding: 0;
}

.cs-left-nav li:hover {
background-color: #7BED9F;
}

.cs-left-sidebar-user-dropdown {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.dropdown-item:focus:active {
  background-color: var(--cs-secondary-hsl-color);
}

.dropdown-item:hover {
  background-color: #7BED9F;
}

.previous-title-list-item:hover {
  background-color: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* add a title styles */
/* Container card for Add a Title */
.cs-add-title-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 1rem;
}

/* Small description text under the heading */
.cs-add-title-description {
  font-size: 0.9rem;
  color: #6c757d; /* muted gray */
  margin: 0.25rem 0 1rem;
}

/* Inputs & Selects - EXCLUDE checkboxes */
.cs-add-title-form input:not([type="checkbox"]),
.cs-add-title-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* Checkbox specific styling */
.cs-add-title-form .form-check-input {
  width: 16px !important;
  height: 16px !important;
  margin-top: 0.3rem; /* aligns with label text */
  /* Reset any conflicting styles */
  padding: 0 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.25rem !important;
  background-color: #fff !important;
  /* Ensure the checkbox can show its checked state */
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* Optional: Style the checked state */
.cs-add-title-form .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* Form wrapper */
.cs-add-title-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Submit button styling */
.cs-add-title-submit {
  background-color: var(--cs-primary-hsl-color); /* solid purple */
  background: var(--cs-primary-hsl-color);       /* fallback */
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  display: inline-block;
}

.cs-add-title-submit:hover {
  background-color: rgba(89, 65, 255, 0.85) !important;
  background: rgba(89, 65, 255, 0.85) !important;
}