@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* general vars */
:root {
  --actocrm-blue: #084298;
  --actocrm-blue-light: #0a56c7;
  --actocrm-blue-lighter: #126cf3;

  --actocrm-purple: #833ef4;
  --actocrm-purple-light: #a26ef7;
  --actocrm-purple-light-shadow-thin: rgba(162, 110, 247, 0.25);
  --actocrm-purple-light-shadow-thick: rgba(162, 110, 247, 0.5);
  --actocrm-purple-lighter: #c19efa;

  --actocrm-green: #0a9900;
  --actocrm-green-light: #0dcc00;
  --actocrm-green-lighter: #1f0;

  --actocrm-red: #cc331f;
  --actocrm-red-light: #e14f3c;
  --actocrm-red-lighter: #e87768;

  --actocrm-yellow: #e5cc22;
  --actocrm-yellow-light: #ebd752;
  --actocrm-yellow-lighter: #f0e27f;

  --actocrm-teal: #088e99;
  --actocrm-teal-light: #0bbdcc;
  --actocrm-teal-lighter: #16e2f3;

  --actocrm-cyan: #73abff;
  --actocrm-cyan-light: #a8cbff;
  --actocrm-cyan-lighter: #dbeaff;

  --actocrm-orange: #e57222;
  --actocrm-orange-light: #eb9052;
  --actocrm-orange-lighter: #f0ad7f;

  --actocrm-black: #1e2125;

  --actocrm-gray-1: #343a40;
  --actocrm-gray-2: #4b545d;
  --actocrm-gray-3: #626e79;
  --actocrm-gray-4: #7b8794;
  --actocrm-gray-5: #97a1aa;
  --actocrm-gray-6: #b3bac1;
  --actocrm-gray-7: #cfd4d8;
  --actocrm-gray-8: #ebedef;
  --actocrm-gray-9: #f5f8fc;

  --actocrm-white: #ffffff;
}


/* globals */
body {
  font-family: "Noto Sans", sans-serif;
  background-color: var(--actocrm-gray-9);
}

/*table {
    font-size: 14px;
}*/

h1 {
  font-weight: bold;
}

a {
  color: var(--actocrm-purple-light);
}

a:hover {
  color: var(--actocrm-blue);
}


/* navbar */
.sb-nav-fixed .sb-topnav {
  background: linear-gradient(
    to right,
    #152536,
    #112f57,
    #0e356b 15%,
    #0b3c83,
    #0a3f8c,
    #084298
  );
}


/* cards */
.card-header {
  font-weight: bold;
  background-color: white;
}


/* buttons, primary */
.btn-primary,
.btn-primary:visited {
  background-color: var(--actocrm-purple);
  border: 1px solid var(--actocrm-purple);
}

.btn-primary:hover,
.btn-primary:active {
  background-color: var(--actocrm-purple-light);
  border: 1px solid var(--actocrm-purple-light);
}

.btn-primary:active:focus,
.btn-primary:first-child:active,
.btn-primary:focus-visible {
  background-color: var(--actocrm-purple-light) !important;
  border: 1px solid var(--actocrm-purple-light) !important;
}


/* buttons, outline-primary */
.btn-outline-primary,
.btn-outline-primary:visited {
  border: 2px solid var(--actocrm-purple);
  color: var(--actocrm-purple);
  /* font-weight: 600; */
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--actocrm-purple-light);
  border: 2px solid var(--actocrm-purple-light);
}

.btn-outline-primary:active:focus,
.btn-outline-primary:first-child:active,
.btn-outline-primary:focus-visible {
  background-color: transparent;
  border: 2px solid var(--actocrm-purple-light) !important;
}

.btn-outline-primary:focus-visible {
  color: var(--actocrm-purple);
  box-shadow: 0 0 0 0.25rem var(--actocrm-purple-light-shadow-thick);
}

.btn.active {
  /* task type selector in Prospects */
  background-color: var(--actocrm-purple-light);
  border: 1px solid var(--actocrm-purple-light);
}

.btn-primary:focus-visible {
  /* focus ring */
  box-shadow: 0 0 0 0.25rem var(--actocrm-purple-light-shadow-thick);
}

:not(.btn-check) + .btn:active {
  /* in modals */
  background-color: var(--actocrm-purple-light);
  border: 1px solid var(--actocrm-purple-light);
}


/* buttons, secondary */
.btn-secondary,
.btn-secondary:visited {
  background-color: var(--actocrm-gray-4);
  border: 1px solid var(--actocrm-gray-4);
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--actocrm-gray-5);
  border: 1px solid var(--actocrm-gray-5);
}

.btn-secondary:active:focus{
  background-color: var(--actocrm-gray-5) !important;
  border: 1px solid var(--actocrm-gray-5) !important;
}


/* buttons, light */
.btn-light,
.btn-light:visited {
  background-color: var(--actocrm-gray-8);
  border: 1px solid var(--actocrm-gray-8);
}

.btn-light:hover,
.btn-light:active {
  background-color: var(--actocrm-gray-9);
  border: 1px solid var(--actocrm-gray-9);
}

.btn-light:active:focus{
  background-color: var(--actocrm-gray-9) !important;
  border: 1px solid var(--actocrm-gray-9) !important;
}


/* forms */
.form-control:focus, .datatable-input:focus {
  color: var(--actocrm-black);
  border-color: var(--actocrm-purple-light);
  box-shadow: 0 0 0 0.25rem var(--actocrm-purple-light-shadow-thin);
}

.form-check-input:focus {
  border-color: var(--actocrm-purple-light);
  box-shadow: 0 0 0 0.25rem var(--actocrm-purple-light-shadow-thin);
}

.form-select:focus {
  border-color: var(--actocrm-purple-light);
  box-shadow: 0 0 0 0.25rem var(--actocrm-purple-light-shadow-thin);
}


/* sidebar */
.sb-sidenav-light {
  font-weight: bold;
  text-transform: uppercase;
}

.sb-sidenav-light .sb-sidenav-menu .nav-link.active {
  border-right: 5px solid var(--actocrm-cyan);
  background-color: var(--actocrm-cyan-lighter);
  color: black;
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
  overflow-y: auto;
  border-right: 2px solid var(--actocrm-cyan-lighter);
}

.sb-sidenav-light .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
  color: black;
}

.sb-sidenav .sb-sidenav-menu .nav .nav-link {
  padding-top: 8px;
  padding-bottom: 8px;
}

.sb-sidenav-light {
  background-color: white;
}


/* pagination */
.page-link.active,
.datatable-pagination a.active,
.active > .page-link,
.datatable-pagination .active > a {
  background-color: var(--actocrm-purple);
  border: var(--actocrm-purple) solid var(--actocrm-purple);
}

.page-link,
.datatable-pagination a {
  color: var(--actocrm-purple);
}

.page-link:hover,
.datatable-pagination a:hover {
  color: var(--actocrm-purple-light);
}


/* dropdowns */
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--actocrm-gray-8)
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--actocrm-color-black);
  background-color: var(--actocrm-gray-9);
}


/* accents */
.bg-primary {
  background-color: var(--actocrm-blue) !important;
}

.bg-warning {
  background-color: var(--actocrm-orange) !important;
  color: white !important;
}

.bg-danger {
  background-color: var(--actocrm-red) !important;
}

.bg-success {
  background-color: var(--actocrm-teal) !important;
}


/* alerts and icons (i) inside alerts */
.alert-primary {
  background-color: white;
  border: 1px solid var(--actocrm-blue);
  color: black;
}

.alert-primary i {
  color: var(--actocrm-blue);
}

.alert-success {
  background-color: white;
  border: 1px solid var(--actocrm-green);
  color: black;
}

.alert-success i {
  color: var(--actocrm-green);
}

.alert-warning {
  background-color: white;
  border: 1px solid var(--actocrm-orange);
  color: black;
}

.alert-warning i {
  color: var(--actocrm-orange);
}

.alert-danger {
  background-color: white;
  border: 1px solid var(--actocrm-red);
  color: black;
}

.alert-danger i {
  color: var(--actocrm-red);
}


/* helpers */
.link-no-decoration {
  /* used in dropdowns */
  color: var(--actocrm-black);
  text-decoration: none;
}

.link-no-decoration:hover {
  /* used in dropdowns */
  color: var(--actocrm-blue);
  text-decoration: underline;
}

.link-in-table {
  color: var(--actocrm-blue);
  text-decoration: none;
}

.link-in-table:hover {
  color: var(--actocrm-blue);
  text-decoration: underline;
}

.actocrm-text-blue {
  color: var(--actocrm-blue);
}

.actocrm-text-blue-light {
  color: var(--actocrm-blue-light);
}

.actocrm-text-gray-3 {
  color: var(--actocrm-gray-3);
}

.actocrm-text-red {
  color: var(--actocrm-red);
}

.actocrm-text-white {
  color: var(--actocrm-white);
}

.actocrm-bg-teal {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-teal) !important;
}

.actocrm-bg-red {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-red) !important;
}

.actocrm-bg-orange {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-orange) !important;
}

.actocrm-bg-blue {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-blue) !important;
}

.actocrm-bg-purple {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-purple) !important;
}

.actocrm-bg-green {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-green) !important;
}

.actocrm-bg-gray {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-gray-8) !important;
}

.actocrm-bg-cyan {
  /* used in status pills, e.g. via Twig custom filters */
  background-color: var(--actocrm-cyan) !important;
}

.actocrm-placeholder-light.form-control::placeholder {
  /* used in navbar search */
  color: var(--actocrm-gray-6) !important;
}

/*.actocrm-bg-blue {
    --bs-bg-opacity: 1;
    background-color: var(--actocrm-blue);
}*/

.input-group-prepend > .input-group-text {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}