:root {
  --comodo-sand: #f5e6c8;
  --comodo-foam: #fffdf7;
  --comodo-turquoise: #1fa2a6;
  --comodo-turquoise-rgb: 31, 162, 166;  
  --comodo-turquoise-dark: #16787b;
  --comodo-turquoise-dark-rgb: 22, 120, 123;  
  --comodo-ocean: #0a4b6e;
  --comodo-ocean-rgb: 10, 75, 110;
  --comodo-ocean-dark: #073a56;
  --comodo-ocean-dark-rgb: 7, 58, 86;
  --comodo-coral: #ff7e4d;
  --comodo-coral-rgb: 255, 126, 77;  
  --comodo-coral-dark: #f0592c;
  --comodo-coral-dark-rgb: 240, 89, 44;
  --comodo-sunlight: #ffc94a;
  --comodo-sunlight-rgb: 255, 201, 74;
  --comodo-sunlight-dark: #e0a927;
  --comodo-border: #d8c69c;

  --bs-primary: var(--comodo-ocean);
  --bs-primary-rgb: var(--comodo-ocean-rgb);

  --bs-secondary: var(--comodo-turquoise);
  --bs-secondary-rgb: var(--comodo-turquoise-rgb);

  --bs-secondary-bg: var(--comodo-turquoise);
  --bs-secondary-bg-rgb: var(--comodo-turquoise-rgb);
  
  --bs-success: #2f9e6e;
  --bs-info: var(--comodo-turquoise);

  --bs-warning: var(--comodo-sunlight);
  --bs-warning-rgb: var(--comodo-sunlight-rgb);

  --bs-danger: var(--comodo-coral);
  --bs-danger-rgb: 255, 126, 77;

  --bs-light: var(--comodo-foam);
  --bs-dark: var(--comodo-ocean-dark);
  --bs-dark-rgb: var(--comodo-ocean-dark-rgb);
  
  --bs-body-bg: var(--comodo-sand);
  --bs-body-color: var(--comodo-ocean);
  --bs-border-color: var(--comodo-border);

  --bs-link-color: var(--comodo-coral);
  --bs-link-color-rgb: var(--comodo-coral-rbg);
  --bs-link-hover-color: var(--comodo-coral-dark);
  --bs-link-hover-color-rgb: var(--comodo-coral-dark-rbg);
  
}
body {
	font-family: "Nunito"
}
.navbar{
	--bs-navbar-brand-padding-y: 1.2rem;
	--bs-navbar-brand-color: var(--comodo-foam);
	--bs-navbar-brand-hover-color: var(--comodo-sand);
}


.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding: 48px 0 0;
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
	a {
		color: var(--bs-primary);
		padding-left: 1.3rem;
	}
}
.sidebar-sticky {
	position: relative;
	top: 0;
	height: calc(100vh - 48px);
	padding-top: 0.5rem;
	overflow-x: hidden;
	overflow-y: auto;
}

.nav{
	--bs-nav-link-padding-y: 0.4rem;
}

footer, .footer {
	color: var(--comodo-foam);
}

footer a, .footer a {
  color: var(--comodo-sunlight);
}


.footer {
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);	
	width: 100%;
	height: 60px;
}

.navbar {
  --bs-navbar-color: var(--comodo-foam);
  --bs-navbar-hover-color: var(--comodo-sunlight);
  --bs-navbar-active-color: var(--comodo-sunlight);
  --bs-navbar-disabled-color: rgba(255, 253, 247, 0.4);
  --bs-navbar-brand-color: var(--comodo-foam);
  --bs-navbar-brand-hover-color: var(--comodo-sunlight);
}

.card {
  --bs-card-bg: var(--comodo-foam);
  --bs-card-border-color: var(--comodo-border);
  --bs-card-color: var(--comodo-ocean);
  --bs-card-cap-bg: var(--comodo-turquoise);
  --bs-card-cap-color: var(--comodo-foam);
}

.panel {
  background-color: var(--comodo-foam);
  border-color: var(--comodo-border);
}
.panel-heading {
  background-color: var(--comodo-turquoise);
  color: var(--comodo-foam);
  border-color: var(--comodo-border);
}

.btn-primary {
  --bs-btn-color: var(--comodo-foam);
  --bs-btn-bg: var(--comodo-ocean);
  --bs-btn-border-color: var(--comodo-ocean);
  --bs-btn-hover-bg: var(--comodo-ocean-dark);
  --bs-btn-hover-border-color: var(--comodo-ocean-dark);
  --bs-btn-active-bg: var(--comodo-ocean-dark);
  --bs-btn-active-border-color: var(--comodo-ocean-dark);
  --bs-btn-disabled-bg: var(--comodo-ocean);
  --bs-btn-disabled-border-color: var(--comodo-ocean);
}

.btn-secondary {
  --bs-btn-color: var(--comodo-foam);
  --bs-btn-bg: var(--comodo-turquoise);
  --bs-btn-border-color: var(--comodo-turquoise);
  --bs-btn-hover-bg: var(--comodo-turquoise-dark);
  --bs-btn-hover-border-color: var(--comodo-turquoise-dark);
  --bs-btn-active-bg: var(--comodo-turquoise-dark);
  --bs-btn-active-border-color: var(--comodo-turquoise-dark);
}

.btn-warning {
  --bs-btn-color: var(--comodo-ocean);
  --bs-btn-bg: var(--comodo-sunlight);
  --bs-btn-border-color: var(--comodo-sunlight);
  --bs-btn-hover-bg: var(--comodo-sunlight-dark);
  --bs-btn-hover-border-color: var(--comodo-sunlight-dark);
  --bs-btn-hover-color: var(--comodo-ocean);
  --bs-btn-active-bg: var(--comodo-sunlight-dark);
  --bs-btn-active-border-color: var(--comodo-sunlight-dark);
  --bs-btn-active-color: var(--comodo-ocean);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--comodo-ocean);
  --bs-table-striped-bg: rgba(var(--bs-secondary-rgb), 0.08);
  --bs-table-border-color: var(--comodo-border);
}

.table > thead {
  --bs-table-bg: var(--comodo-ocean);
  --bs-table-color: var(--comodo-foam);
}

.form-control,
.form-select {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), 0.25);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--comodo-turquoise);
}
