@font-face{
  font-family: 'weekly360';
  src: url('../../assets/fonts/notosans-light-webfont.woff');
}
@font-face{
  font-family: 'Nunito';
  src: url('../../assets/fonts/Nunito-Medium.ttf');
}

:root{
  --weekly360-font-family: "Nunito";
  --weekly360-form-control-border: #d1d3e2;
  --weekly360-text-color: #a2a2aa;
  --weekly360-grey: #9395a7;
  --weekly360-light-grey: #dbdee0ef;
  --weekly360-lighter-grey: #edf2fd;
  --weekly360-bg-grey: #9c9c9c98 ;
  --weekly360-white: #fff;
  --weekly360-dark-grey: #424242;
  --weekly360-darker-grey: #212529;
  --weekly360-content-bg: #f6f9ff;
  --weekly360-textbox-bg-color:#edf2fd;
  /* Secondary */
  --weekly360-bs-secondary: #6c757d;
  --weekly360-bs-secondary-dark: #5f666d;
  /* Success */
  --weekly360-bs-success: #1cc88a;
  --weekly360-bs-success-dark: #16a570;
  /* Info */
  --weekly360-bs-info: #36b9cc;
  --weekly360-bs-info-dark: #30a4b6;
  /* Danger */
  --weekly360-bs-danger: #dc3545;
  --weekly360-bs-danger-dark: #b02a37;
  /* Warning */
  --weekly360-bs-warning: #ffc107;
  --weekly360-bs-warning-dark: #daa403;
  /* Dark */
  --weekly360-bs-black: #212529;
  --weekly360-bs-black-light: #32383d;
  /* Light */
  --weekly360-bs-light: #f8f9fa;
  --weekly360-bs-light-dark: #e2e2e2;
  /* Iclix Colors */
  --weekly360-iclix-blue: #154A94; 
  --weekly360-iclix-orange: #f36e22; 
}

body{
  background-color: var(--weekly360-content-bg);
  font-family: var(--weekly360-font-family) !important;
}
  
p, h1, h2, h3, h4, h5, h6{
  color:var(--weekly360-text-color) !important;
}
  
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
  
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}
  
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: var(--weekly360-text-color);
  text-decoration: none;
  background-color: transparent;
  -webkit-transition: color 0.2s;
  -moz-transition:    color 0.2s;
  -ms-transition:     color 0.2s;
  -o-transition:      color 0.2s;
  transition:         color 0.2s;
}

a:hover {
  color: var(--weekly360-primary);
}

textarea{
  height: 100%;
}

input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
  
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}

.content-wrapper{
  padding: 25px;
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

/* Topbar */
.topbar{
  background-color: var(--weekly360-white);
}

.topbar input{
  background-color: var(--weekly360-lighter-grey);
}

.topbar a{
  color: var(--weekly360-grey) !important;
}

.topbar .dropdown-list i{
  color: var(--weekly360-primary) !important;
}

.topbar .dropdown-list i:hover{
  color: var(--weekly360-primary) !important;
}

.topbar .dropdown-list a:hover{
  color: var(--weekly360-primary) !important;
}

.topbar .navbar-search input {
  font-size: 0.85rem;
  height: auto;
}

.img-profile {
  height: 2rem;
  width: 2rem;
}

@media (max-width: 767.98px) {
  .dropdown-list{
      width:10rem;
  }
}
  
.topbar .dropdown-list .dropdown-header {
  background-color: var(--weekly360-dark);
  border: 1px solid var(--weekly360-dark);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--weekly360-white) !important;
}


/* Profile Icons Standard */
.topbar .dropdown-list .dropdown-item .icon-circle {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--weekly360-dark);
}
a .icon-circle {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--weekly360-dark);
}

.topbar .dropdown-list .dropdown-item {
  white-space: normal;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  /* border-left: 1px solid var(--weekly360-content-bg);
  border-right: 1px solid var(--weekly360-content-bg);*/
  border-bottom: 1px solid var(--weekly360-content-bg); 
  line-height: 1.3rem;
}

.topbar .dropdown-list .dropdown-item :hover{
  color: var(--weekly360-primary);
}

.topbar .dropdown-list .dropdown-item{
  color: var(--weekly360-primary);
}

.topbar .dropdown-list {
  padding: 0;
  border: none;
  overflow: hidden;
}

.topbar .topbar-divider {
  width: 0;
  border-right: 1px solid var(--weekly360-grey);
  height: calc(4.375rem - 2rem);
  margin: auto 1rem;
}

.topbar .nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.topbar .nav-item{
  text-decoration: none;
  list-style: none;
}
  
.topbar .nav-link:hover{
  color: var(--weekly360-primary) !important;
}
/* End of Topbar */

/* Sidebar */
.sidebar-sticky {
  height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  font-size: 15px;
}

.user-sticky{
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  background-color: var(--weekly360-dark);
}

.user-email{
  color: var(--weekly360-light-grey) !important;
}

/* #accordionSidebar{
  color: rgba(var(--weekly360-white), 0.4);
} */

.weekly-sidebar .nav-link{
  color: var(--weekly360-light-grey)!important;
}

.weekly-sidebar .nav-link:hover{
  color: var(--weekly360-white)!important;
}

/* .weekly-sidebar .nav-link > i{
  color: var(--weekly-p-dark);
}

.weekly-sidebar .nav-link > a{
  color: var(--weekly-p-dark);
}

.weekly-sidebar .nav-link > span{
  color: var(--weekly-p-dark);
} */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  color: rgba(var(--weekly360-white), 0.8);
}


.sidebar .sidebar-divider{
  color: var(--weekly360-white);
}

.weekly-sidebar > ul .nav-item{
  padding:0.25rem 0;
}

.collapse-item{
  padding: 0.1rem 0.5rem;
  margin: 0 1rem;
  display: block;
  text-decoration: none;
  border-radius: 0.35rem;
  white-space: nowrap;
  transition: 0.1s;
  color: var(--weekly360-dark-grey) !important;
}

.collapse-item:hover{
  background-color: var(--weekly360-light-grey) !important;
  color: var(--weekly360-dark-grey) !important;
}

.sidebar-divider-a{
  margin: 0 1.25rem;
  color: transparent;
}

/* .sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
} */

.sidebar .nav-link .active {
  color: var(--weekly360-white) !important;
}

/*   
.sidebar .nav-link:hover .feather,
.sidebar .nav-link .active .feather {
  color: inherit;
} */

.sidebar-heading {
  font-size: .75rem;
}

.sidebar-brand-text{
  color: rgba(var(--weekly360-white), 0.8);
}

.bg-gradient-primary {
  background-color: var(--weekly360-dark);
  background-image: var(--weekly-sidebar-bg-gradient);
  background-size: cover;
}

.sidebar-dark .nav-item .nav-link {
  color: var(--weekly360-bs-secondary);
}

.sidebar .nav-item{
  text-decoration: none;
  list-style: none;
}

.dropdown-list{
  width:20rem;
}

.iradius-hr :not(:hover){
  color: var(--weekly360-white);
}

.username{
  font-size: 15px;
  font-weight: 400;
}
 .email{
  font-size: 12px; 
}
/* End of Sidebar */

/* Quattro sidebar (light theme baseline)
   Used by newadmin/examples/menu.php and intended to be ported into newadmin/public later. */
.quattro-sidebar {
  background: #f3f3f3;
  color: #1f2937;
}

.quattro-sidebar .qs-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #0f172a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.quattro-sidebar .qs-brand-mark i {
  font-size: 18px;
  line-height: 1;
}

.quattro-sidebar .qs-brand-text {
  font-weight: 600;
  color: #111827;
}

.quattro-sidebar .qs-section {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.quattro-sidebar .qs-link {
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111827 !important;
}

.quattro-sidebar .qs-link:hover {
  background: rgba(17, 24, 39, 0.06);
}

.quattro-sidebar .qs-link.active {
  background: rgba(17, 24, 39, 0.08);
}

.quattro-sidebar .qs-link i {
  font-size: 18px;
  line-height: 1;
  color: #111827;
}

.quattro-sidebar .qs-subnav {
  margin-left: 28px;
  padding-left: 10px;
  border-left: 2px solid rgba(17, 24, 39, 0.08);
  margin-bottom: 6px;
}

.quattro-sidebar .qs-sublink {
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #374151 !important;
}

.quattro-sidebar .qs-sublink:hover {
  background: rgba(17, 24, 39, 0.06);
}

.quattro-sidebar .qs-sublink.active {
  background: rgba(17, 24, 39, 0.08);
}

.quattro-sidebar .qs-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.25);
  display: inline-block;
}

.quattro-sidebar .qs-caret {
  color: #6b7280;
}

.quattro-sidebar .qs-collapse-toggle[aria-expanded="true"] .qs-caret {
  transform: rotate(180deg);
}

.quattro-sidebar .qs-collapse-toggle .qs-caret {
  transition: transform 0.15s ease-in-out;
}

/* Footer */
.sticky-footer{
  position: fixed; 
  bottom:0;
  width: 100%;
  background-color: var(--weekly360-white) !important;
  color: var(--weekly360-primary) !important;
}

.sticky-footer a{
  color: var(--weekly360-primary) !important;
}

.sticky-footer a:hover{
  color: var(--weekly360-dark) !important;
}

.copyright{
  padding: 8px;
  font-size: 9pt;
}
/* End of Footer */

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: var(--weekly360-dark); 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--weekly360-primary);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--weekly360-primary-lighter); 
}
/* End of Scrollbar */

/* Scroll to Top */
.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 2.5rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: var(--weekly360-white);
  background: var(--weekly360-scroll-to-top);
  line-height: 46px;
  z-index: 10;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: var(--weekly360-white);
  background: var(--weekly360-primary);
}

/*End of Scroll to Top */

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--weekly360-text-color);
  background-color: var(--weekly360-textbox-bg-color);
  background-clip: padding-box;
  border: solid 1px transparent!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.35rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-select {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--weekly360-text-color);
  background-color: var(--weekly360-textbox-bg-color);
  background-clip: padding-box;
  border: solid 1px transparent!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.35rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

textarea .form-control {
  height: auto;
}

.select2-selection__rendered {
  line-height: 32px !important;
}
.select2-container .select2-selection--single {
  height: 37px !important;
}
.select2-selection__arrow {
  height: 34px !important;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--weekly360-grey);
}

input {
  margin-bottom: 0.5rem;
}
  
.badge{
  padding-left: 0.45em;
  padding-right: 0.45em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  font-size: 0.60em;
  /* color: var(--weekly-bg);
  background-color: var(--weekly-badge); */
}

.minw-300{
  min-width: 300px;
}


  
/* Buttons */
.btn-primary {
  --bs-btn-color: var(--weekly360-white) !important;
  --bs-btn-bg: var(--weekly360-dark);
  --bs-btn-border-color: var(--weekly360-dark);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-primary);
  --bs-btn-hover-border-color: var(--weekly360-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-primary);
  --bs-btn-active-border-color: var(--weekly360-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-dark);
  --bs-btn-disabled-border-color: var(--weekly360-dark);
}

.btn-secondary {
  --bs-btn-color: var(--weekly360-white);
  --bs-btn-bg: var(--weekly360-bs-secondary);
  --bs-btn-border-color: var(--weekly360-bs-secondary);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-secondary-dark);
  --bs-btn-hover-border-color: var(--weekly360-bs-secondary-dark);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-secondary-dark);
  --bs-btn-active-border-color: var(--weekly360-bs-susecondaryccess-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-secondary-dark);
  --bs-btn-disabled-border-color: var(--weekly360-bs-secondary-dark);
}

.btn-success {
  --bs-btn-color: var(--weekly360-white);
  --bs-btn-bg: var(--weekly360-bs-success);
  --bs-btn-border-color: var(--weekly360-bs-success);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-success-dark);
  --bs-btn-hover-border-color: var(--weekly360-bs-success-dark);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-success-dark);
  --bs-btn-active-border-color: var(--weekly360-bs-success-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-success-dark);
  --bs-btn-disabled-border-color: var(--weekly360-bs-success-dark);
}

.btn-info {
  --bs-btn-color: var(--weekly360-white) !important;
  --bs-btn-bg: var(--weekly360-bs-info);
  --bs-btn-border-color: var(--weekly360-bs-info);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-info-dark);
  --bs-btn-hover-border-color: var(--weekly360-bs-info-dark);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-info-dark);
  --bs-btn-active-border-color: var(--weekly360-bs-info-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-info-dark);
  --bs-btn-disabled-border-color: var(--weekly360-bs-info-dark);
}

.btn-info a{
  --bs-btn-color: var(--weekly360-white) !important;
}

.btn-warning {
  --bs-btn-color: var(--weekly360-white);
  --bs-btn-bg: var(--weekly360-bs-warning);
  --bs-btn-border-color: var(--weekly360-bs-warning);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-warning-dark);
  --bs-btn-hover-border-color: var(--weekly360-bs-warning-dark);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-warning-dark);
  --bs-btn-active-border-color: var(--weekly360-bs-warning-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-warning-dark);
  --bs-btn-disabled-border-color: var(--weekly360-bs-warning-dark);
}

.btn-danger {
  --bs-btn-color: var(--weekly360-white);
  --bs-btn-bg: var(--weekly360-bs-danger);
  --bs-btn-border-color: var(--weekly360-bs-danger);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-danger-dark);
  --bs-btn-hover-border-color: var(--weekly360-bs-danger-dark);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-danger-dark);
  --bs-btn-active-border-color: var(--weekly360-bs-danger-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-danger-dark);
  --bs-btn-disabled-border-color: var(--weekly360-bs-danger-dark);
}

.btn-danger a{
  --bs-btn-color: var(--weekly360-white) !important;
}
.btn-danger a:hover{
  --bs-btn-color: var(--weekly360-white) !important;
}

.btn-light {
  --bs-btn-color: var(--weekly360-white);
  --bs-btn-bg: var(--weekly360-bs-light);
  --bs-btn-border-color: var(--weekly360-bs-light);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-light-dark);
  --bs-btn-hover-border-color: var(--weekly360-bs-light-dark);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-light-dark);
  --bs-btn-active-border-color: var(--weekly360-bs-light-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-light-dark);
  --bs-btn-disabled-border-color: var(--weekly360-bs-light-dark);
}

.btn-dark {
  --bs-btn-color: var(--weekly360-white);
  --bs-btn-bg: var(--weekly360-bs-black);
  --bs-btn-border-color: var(--weekly360-bs-black);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-light);
  --bs-btn-hover-border-color: var(--weekly360-bs-light);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-light);
  --bs-btn-active-border-color: var(--weekly360-bs-light);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-white);
  --bs-btn-disabled-bg: var(--weekly360-bs-black);
  --bs-btn-disabled-border-color: var(--weekly360-bs-black);
}

/* Button Outline */
.btn-outline-primary {
  --bs-btn-color: var(--weekly360-dark);
  --bs-btn-border-color: var(--weekly360-dark);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-dark);
  --bs-btn-hover-border-color: var(--weekly360-dark);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-dark);
  --bs-btn-active-border-color: var(--weekly360-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-dark);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-dark);
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--weekly360-bs-secondary);
  --bs-btn-border-color: var(--weekly360-bs-secondary);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-secondary);
  --bs-btn-hover-border-color: var(--weekly360-bs-secondary);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-secondary);
  --bs-btn-active-border-color: var(--weekly360-bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-secondary);
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: var(--weekly360-bs-success);
  --bs-btn-border-color: var(--weekly360-bs-success);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-success);
  --bs-btn-hover-border-color: var(--weekly360-bs-success);
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-success);
  --bs-btn-active-border-color: var(--weekly360-bs-success);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-success);
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: var(--weekly360-bs-info);
  --bs-btn-border-color: var(--weekly360-bs-info);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--weekly360-bs-info);
  --bs-btn-hover-border-color: var(--weekly360-bs-info);
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--weekly360-bs-info);
  --bs-btn-active-border-color: var(--weekly360-bs-info);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-info);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-info);
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: var(--weekly360-bs-warning);
  --bs-btn-border-color: var(--weekly360-bs-warning);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--weekly360-bs-warning);
  --bs-btn-hover-border-color: var(--weekly360-bs-warning);
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--weekly360-bs-warning);
  --bs-btn-active-border-color: var(--weekly360-bs-warning);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-warning);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-warning);
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: var(--weekly360-bs-danger);
  --bs-btn-border-color: var(--weekly360-bs-danger);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-danger);
  --bs-btn-hover-border-color: var(--weekly360-bs-danger);
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-danger);
  --bs-btn-active-border-color: var(--weekly360-bs-danger);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-danger);
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: var(--weekly360-bs-light);
  --bs-btn-border-color: var(--weekly360-bs-light);
  --bs-btn-hover-color: var(--weekly360-bs-black);
  --bs-btn-hover-bg: var(--weekly360-bs-light);
  --bs-btn-hover-border-color: var(--weekly360-bs-light);
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: var(--weekly360-bs-black);
  --bs-btn-active-bg: var(--weekly360-bs-light);
  --bs-btn-active-border-color: var(--weekly360-bs-light);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-light);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-light);
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: var(--weekly360-bs-black);
  --bs-btn-border-color: var(--weekly360-bs-black);
  --bs-btn-hover-color: var(--weekly360-white);
  --bs-btn-hover-bg: var(--weekly360-bs-black);
  --bs-btn-hover-border-color: var(--weekly360-bs-black);
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: var(--weekly360-white);
  --bs-btn-active-bg: var(--weekly360-bs-black);
  --bs-btn-active-border-color: var(--weekly360-bs-black);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--weekly360-bs-black);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--weekly360-bs-black);
  --bs-gradient: none;
}

/* Button link */
.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--weekly360-bs-secondary);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: underline;
}
/* End of Buttons */

/* Check Inputs */
.form-check-input:checked {
  background-color: var(--weekly360-dark);
  border-color: var(--weekly360-dark);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--weekly360-dark);
}

.form-range::-webkit-slider-thumb:active {
  opacity: 1;
  background-color: var(--weekly360-dark);
}
/* End of Check inputs */

/* Navbars */
/* Navbar Background */
.bg-primary{
  background-color: var(--weekly360-dark) !important;
}

/* Nav Plain */
.nav .nav-link{
  color: var(--weekly360-dark) !important;
}

.nav .nav-link:hover{
  color: var(--weekly360-primary) !important;
}

.nav .nav-link .active{
  color: var(--weekly360-primary) !important;
}

/* Nav Pill */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: var(--weekly360-dark) !important;
  color: var(--weekly360-white) !important;
}

.nav-pills .nav-link{
  color: var(--weekly360-dark) !important;
}

.nav-pills .nav-link:hover{
  color: var(--weekly360-primary) !important;
}

/* Nav Tabs */
.nav-tabs .nav-link{
  color: var(--weekly360-dark) !important;
}

.nav-tabs .nav-link:hover{
  color: var(--weekly360-primary) !important;
}

.nav-tabs .nav-link .active{
  color: var(--weekly360-primary) !important;
}

/* Pagination */
/* Page links */
.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--weekly360-primary);
  text-decoration: none;
  border: var(--bs-pagination-border-width) solid var(--weekly360-light-grey);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-link:hover {
  z-index: 2;
  color: var(--weekly360-dark);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}

.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}

.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--weekly360-white) !important;
  background-color: var(--weekly360-dark) !important;
  border-color: var(--weekly360-dark) !important;
}

/* End of Page Links */

.navbar .active {
    color: var(--weekly360-primary) !important;
}

.nav-pills .nav-link.active:hover {
  color: var(--weekly360-white) !important;
}

/* End of Navbars */

.text-primary{
  color: var(--weekly360-dark) !important;
}

/* Alert */
.alert-primary{
  background-color: var(--weekly360-light);
  color: var(--weekly360-dark);
}

.alert-primary .alert-link{
  color: var(--weekly360-dark);
}

/* List items */
.list-group-item-primary {
  color: var(--weekly360-dark);
  background-color: var(--weekly360-light) !important;
}
  
.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover {
  color: var(--weekly360-dark);
  background-color: var(--weekly360-light) !important;
}
/* End of List items */

/* Accordion */
.accordion-button:not(.collapsed) {
  color: var(--weekly360-dark);
  background-color: var(--weekly360-light) !important;
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 rgba(var(--weekly360-primary), 0.8);
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--weekly-accrodion-btn-active-icon) !important;
  transform: var(--bs-accordion-btn-icon-transform);
}
/* End of Accordion */
  
@keyframes firework {
  0% {
      transform: translate(var(--x), var(--initialY));
      width: var(--initialSize);
      opacity: 1;
  }
  50% {
      width: 0.5vmin;
      opacity: 1;
  }
  100% {
      width: var(--finalSize);
      opacity: 0;
  }
}
.firework,
.firework::after,
.firework::before {
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0 50%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}
.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
}
.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
}
.firework:nth-child(2) {
  --x: 30vmin;
}
.firework:nth-child(2),
.firework:nth-child(2)::after,
.firework:nth-child(2)::before {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.25s;
}
.firework:nth-child(3) {
  --x: -30vmin;
  --y: -50vmin;
}
.firework:nth-child(3),
.firework:nth-child(3)::after,
.firework:nth-child(3)::before {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 70%;
  top: 60%;
  animation-delay: -0.4s;
}

/* Tables */
.table {
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--weekly360-light-grey);
}

.table-striped{
  overflow-x:auto;
}

.table-striped thead tr, .table-striped thead th {
  border-top: none;
  border-bottom: none !important;
  color: var(--weekly360-text-color);
  font-size: 11px;
  text-transform: uppercase;
}

.table-striped tfoot tr, .table-striped tfoot th {
  border-top: none;
  border-bottom: none !important;
  color: var(--weekly360-text-color);
  font-size: 11px;
  text-transform: uppercase;
}

.table-striped tbody th, .table-striped tbody td {
  color: var(--weekly360-grey);
  padding-bottom: 20px;
  padding-top: 20px;
  border: none;
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; 
}

.table-striped tbody th small, .table-striped tbody td small {
  color: var(--weekly360-grey);
}

.table-striped tbody th a, .table-striped tbody td a {
  color: var(--weekly360-grey);
}

.table-striped tbody th a .btn i, .table-striped tbody td a .btn i{
  color: var(--weekly360-white) !important;
}

.table-striped tbody tr {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; 
}

.table-striped tbody tr:hover td, .table-striped tbody tr:focus td {
  color: var(--weekly360-primary);
}

.table-striped tbody tr:hover td a, .table-striped tbody tr:focus td a {
  color: var(--weekly360-dark); 
}

.table-striped tbody tr:hover td a .btn , .table-striped tbody tr:focus td a .btn  {
  color: var(--weekly360-white) !important; 
}

.table-striped tbody tr:hover, .table-striped tbody tr:focus{
  background-color: var(--weekly360-light-grey) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #e6e9ecb6;
  color: var(--weekly360-grey);
}

.table-striped-responsive {
  padding: 20px;
  border-radius: 4px; 
}

@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}

/* Select menu */
.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: var(--weekly360-textbox-bg-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
  
select.decoration option:hover { 
  box-shadow: 0 0 10px 100px #a81818 inset !important; /*???*/
}

/* Borders */
.border-left-primary {
  border-left: 0.25rem solid var(--weekly360-primary) !important;
}

.border-bottom-primary {
  border-bottom: 0.25rem solid var(--weekly360-primary) !important;
}

.border-left-secondary {
  border-left: 0.25rem solid var(--weekly360-bs-secondary) !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid var(--weekly360-bs-secondary) !important;
}

.border-left-success {
  border-left: 0.25rem solid var(--weekly360-bs-success) !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid var(--weekly360-bs-success) !important;
}

.border-left-info {
  border-left: 0.25rem solid var(--weekly360-bs-info) !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid var(--weekly360-bs-info) !important;
}

.border-left-warning {
  border-left: 0.25rem solid var(--weekly360-bs-warning) !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid var(--weekly360-bs-warning) !important;
}

.border-left-danger {
  border-left: 0.25rem solid var(--weekly360-bs-danger) !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid var(--weekly360-bs-danger) !important;
}

.border-left-light {
  border-left: 0.25rem solid var(--weekly360-bs-light) !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid var(--weekly360-bs-light) !important;
}

.border-left-dark {
  border-left: 0.25rem solid var(--weekly360-bs-black) !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid var(--weekly360-bs-black) !important;
}

/* messages.php style */
.i-dropme-container{
  position: relative;
}
.i-dropme-overlay{
  border: 1px dotted var(--weekly360-light-grey);
  border-radius: 0.35rem;
  width: 100%;
  height: 100%;            
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  background-color:#000;
  z-index: -1;
}
.i-dropme-overlay-toggle{
  z-index: 9;
}
.notementioned-profile{
    width:25px;
    height:25px;
}
.notementioned-remove{
    border-width:0px;
}
  
/* contract-builder Styling */
.pricing-currency {
  color: var(--weekly360-iclix-orange);
  font-size: 16px;
}

.pricing {
  background-color: #fff !important;
  background-clip: border-box;
  border: 1px solid var(--weekly360-iclix-blue);
  border-radius: .25rem;
}

.pricing :hover{
  color: var(--weekly360-iclix-blue) !important;
}

.pricing-card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: #fff !important;
  border-bottom: 1px solid var(--weekly360-iclix-blue)!important;
}

.pricing-card-header-p {
  padding: 0;
  color: #fff !important;
}

.pricing-monthly {
  color: var(--weekly360-iclix-orange);
  font-size: 14px;
}

.adsl-carousel-items {
  padding: 2% 10%;
}

.text-gray-800 {
  color: var(--weekly360-grey) !important;
}

.fibre-carousel-items {
  padding: 2% 10%;
}
/* End of contract-builder Styling */

/* calender leave edit */
.fc-more-popover {
  max-height: 95%;
  overflow-y: auto;
}
.card {
  border-radius: 9px;
  overflow: auto;
  border: 1px solid var(--weekly360-content-bg);
}
/* .card i{
  color: var(--weekly360-primary) !important;
} */

.card .department i{
  color: var(--weekly360-text-color) !important;
}

.card .profile-card i{
  color: var(--weekly360-grey) !important;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: var(--weekly360-white);
  border-bottom: 1px solid var(--weekly360-lighter-grey);
  color: var(--weekly360-primary);
}

/* Web wireless providers */
.pac-container{
  z-index: 2000;
}
/* Form Select2 */
.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: calc(1.5em + 0.75rem + 2px) !important;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container--default .select2-selection--single {
  background-color: var(--weekly360-content-bg);
  border: 1px solid #aaa;
  border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem + 2px) !important;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}

.card .web-doc a{
  color: var(--weekly360-dark) !important;
}

.text-success{
  color: var(--weekly360-bs-success) !important;
}

.text-warning{
  color: var(--weekly360-bs-warning) !important;
}

.text-info{
  color: var(--weekly360-bs-info) !important;
}

/* Sales Stats */

#rightbar{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  transition: width 0.5s;
  transition-timing-function:ease-in-out;
  z-index: 1500;
}

.bg-providers{
  background-color: var(--weekly360-bs-black);
}

/* Modal Styling */
.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: none;
}

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

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

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

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

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--weekly360-white);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--weekly360-bs-black);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--weekly360-form-control-border) !important;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: auto;
  background-color: transparent;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--weekly360-primary) !important;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.close {
  float: right !important;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--weekly360-form-control-border) !important;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

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

.datepicker {
  z-index: 10000 !important;
}

#chart_div{
  min-height: 400px;
}

/* Diagram View */
#canvas {
  height: 70vh;
  min-height: 400px;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--weekly360-white);
}

#whiteboard {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--weekly360-white);
}

#rightbar{
position: fixed;
right: 0;
bottom: 0;
width: 0;
height: 100%;
transition: width 0.5s;
transition-timing-function:ease-in-out;
z-index: 1500;
}

.diagram-note {
  background-color: rgba(66, 180, 21, 0.7);
  color: White;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 5px;
  min-height: 16px;
  width: 50px;
  text-align: center;
}

.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
  stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}

/* End of Diagram View */

/* Jobs Workload View */
.progress-bar-vertical {
  width: 100%;
  max-width: 100px;
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  margin-right: 20px;
  float: left;
}

.progress-bar-vertical .progress-bar {
  width: 100%;
  height: 0;
  -webkit-transition: height 0.6s ease;
  -o-transition: height 0.6s ease;
  transition: height 0.6s ease;
}
/* End of Jobs Workload */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  border-radius: 0.35rem;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--weekly360-white);
  text-align: center;
  white-space: nowrap;
  background-color: var(--weekly360-dark);
  transition: width 0.6s ease;
}

.progress-bar-vertical {
  width: 100% !important;
  max-width: 100px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-right: 20px !important;
  float: left !important;
}

.progress-bar-vertical .progress-bar {
  width: 100% !important;
  height: 0 !important;
  -webkit-transition: height 0.6s ease !important;
  -o-transition: height 0.6s ease !important;
  transition: height 0.6s ease !important;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}

.progress-sm {
  height: .5rem;
}
/*End of Jobs Workload View */

.rem-14{
  max-width: 14rem;
}
.rem-12{
  max-width: 12rem;
}

.vh-30{
  height: 30vh;
}

.vh-40{
  height: 40vh;
}

.mvh-80{
  max-height: 80vh;
}

.fs-7 {
  font-size: 0.75rem!important;
}

.progrss-circle {
  width: 130px;
  height: 130px;
  background: none;
  position: relative;
}

.progrss-circle::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}

.progrss-circle>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progrss-circle .progrss-circle-left {
  left: 0;
}

.progrss-circle .progrss-circle-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progrss-circle .progrss-circle-left .progrss-circle-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progrss-circle .progrss-circle-right {
  right: 0;
}

.progrss-circle .progrss-circle-right .progrss-circle-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progrss-circle .progrss-circle-value {
  position: absolute;
  top: 0;
  left: 0;
}

.border-primary {
  border-color: var(--weekly360-primary) !important;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  text-align: center;
  white-space: nowrap;
  background-color: #eaecf4;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
  height: 2.3rem;
}

/* Job View Print */
.user-circle{
  width:80px;
  height:80px;
  background-color: #1C68AA;
  border-radius: 50%;
  display: inline-block;
}
.user-circle i{
  margin:0 auto;
}

ul.timeline {
  list-style-type: none;
  position: relative;
}
ul.timeline:before {
  content: ' ';
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  left: 29px;
  width: 2px;
  height: 100%;
  z-index: 400;
}
ul.timeline > li {
  margin: 20px 0;
  padding-left: 20px;
}
ul.timeline > li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #22c0e8;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}

#imagepreview-outer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#imagepreview {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
}
div#imagepreview > img {
  width: 100%;
  height: auto;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.text-grey{
  color: var(--weekly360-text-color);
}

.bg-dark{
  background-color: #e0e1e1 !important;
}

.bg-nav-pills {
  background-color: #154a94 !important;
}

i.text-danger{
  color: var( --weekly360-bs-danger) !important;
}

i.text-success{
  color: var( --weekly360-bs-success) !important;
}

i.text-warning{
  color: var(--weekly360-bs-warning) !important;
}

i.text-info{
  color: var(--weekly360-bs-info) !important;
}


.pac-container{
  z-index: 2000;
}

/* Messages.php style */
.i-dropme-container{
  position: relative;
}
.i-dropme-overlay{
border: 1px dotted #d1d3e2;
border-radius: 0.35rem;
  width: 100%;
  height: 100%;            
  position: absolute;
  top: 0;
  left: 0;
opacity: 0.4;
background-color:#000;
  z-index: -1;
}
.i-dropme-overlay-toggle{
  z-index: 9;
}
.notementioned-profile{
width:25px;
height:25px;
}
.notementioned-remove{
border-width:0px;
}

/* Hotspot-batches-pdf */
@media print
	{    
		.no-print, .no-print *
		{
			display: none !important;
		}
	}
	
  .invoice-box {
      max-width: 800px;
      margin: auto;
      padding: 30px;
      border: 1px solid #eee;
      box-shadow: 0 0 10px rgba(0, 0, 0, .15);
      font-size: 16px;
      line-height: 24px;
      font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
      color: #555;
  }

  .invoice-box table {
      width: 100%;
      line-height: inherit;
      text-align: left;
  }

  .invoice-box table td {
      padding: 5px;
      vertical-align: top;
  }

  .invoice-box table tr.top table td {
      padding-bottom: 20px;
  }

  .invoice-box table tr.top table td.title {
      font-size: 45px;
      line-height: 45px;
      color: #333;
  }

  .invoice-box table tr.information table td {
      padding-bottom: 40px;
  }

  .invoice-box table tr.heading td {
      background: #eee;
      border-bottom: 1px solid #ddd;
      font-weight: bold;
  }

  .invoice-box table tr.details td {
      padding-bottom: 20px;
  }

  .invoice-box table tr.item td{
      border-bottom: 1px solid #eee;
  }

  .invoice-box table tr.item.last td {
      border-bottom: none;
  }

  .invoice-box table tr.total td:nth-child(2) {
      border-top: 2px solid #eee;
      font-weight: bold;
  }

  @media only screen and (max-width: 600px) {
      .invoice-box table tr.top table td {
          width: 100%;
          display: block;
          text-align: center;
      }
      
      .invoice-box table tr.information table td {
          width: 100%;
          display: block;
          text-align: center;
      }
  }

  /** RTL **/
  .rtl {
      direction: rtl;
      font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  }

  .rtl table {
      text-align: right;
  }

  .rtl table tr td:nth-child(2) {
      text-align: left;
  }

.btn i{
  color: var(--weekly360-white) !important;
}

.btn-outline-primary i {
    color: var(--weekly360-primary) !important;
}

.clients-card .card-icon {
  color: var(--weekly360-primary);
  background-color: var(--weekly360-primary-opacity); 
  padding: 10px;
}

.iclix-users-card .card-icon {
  color: var(--weekly360-bs-success);
  background-color: #1cc8892a;
  padding: 10px;
}

.jobs-card .card-icon {
  color: var(--weekly360-bs-warning);
  background-color: #ffc1072c;
  padding: 10px;
}

.todo-card .card-icon {
  color: var(--weekly360-bs-info);
  background-color: #36b8cc2a;
  padding: 10px 15px;
}

.form-check-input:checked {
  background-color: var(--weekly360-dark);
  border-color: var(--weekly360-dark);
}

.form-check .form-check-input:checked + label .card {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
  border-width: 3px;
  /* border-color: crimson; */
  border: 3px solid var(--weekly360-primary);
}

/* .alert h1, h2, h3, h4 ,h5, h6 {
  color: var(--weekly360-white) !important;
} */

code, .code, pre {
  font-family: "Source Code Pro", sans-serif;
  font-size: 16px;
  padding: 0;
  padding: 10px;
}
code:before, .code:before, pre:before {
  display: block;
  width: 100%;
  margin-left: -3px;
  margin-top: -3px;
  padding: 3px;
  text-transform: uppercase;
  content: attr(data-lang);
}
code .o, .code .o, pre .o {
  color: orange;
}
code .w, .code .w, pre .w {
  color: white;
}

.text-listgroup{
  color: var(--weekly360-text-color) !important;
}

.bg-hover{
  cursor: pointer;
}

.sidebar .nav-item .nav-link .bg-counter,
.topbar .nav-item .nav-link .bg-counter {
    position: absolute;
    transform: scale(0.7);
    transform-origin: top right;
    right: 0.25rem;
    margin-top: -0.25rem;
}

/* Drag and Drop */
#vvveb-builder #top-panel {
    height: 50px;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: center;
    background-color: var(--bs-secondary-bg-subtle);
    overflow: hidden;
    width: 100%; 
}

#vvveb-builder #top-panel .btn-group .btn.btn-light {
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem; 
}

#vvveb-builder #top-panel .btn-group .btn.btn-primary {
    margin-top: 0.2rem; 
}

#vvveb-builder #top-panel .btn-group .btn.btn-primary i {
    font-size: 21px;
    line-height: 21px; 
}

#vvveb-builder #top-panel .btn-group .btn span {
    font-size: 14px; 
}

#vvveb-builder #top-panel .btn-group.responsive-btns .btn.btn-light {
    font-size: 1.6rem;
    padding: 0rem 0.5rem; 
}

.tempus-dominus-widget{
  background-color: var(--weekly360-white);
}

.sidebarToggleTop .texttext-primary{
  color: var(--weekly360-primary) !important;
}