/*COLOURS*/

:root {
  /* Yellow Shades */  
	--yellow-50: #FFFBE6;
    --yellow-100: #FFF3B0;
    --yellow-200: #FFED8A;
    --yellow-300: #FFE454;
    --yellow-400: #FFDF33;
    --yellow: #FFD700;
    --yellow-600: #E8C400;
    --yellow-700: #B59900;
    --yellow-800: #8C7600;
    --yellow-900: #6B5A00;

  /* Purple Shades */
    --purple-50: #EFE6FD;
    --purple-100: #CEB0FA;
    --purple-200: #B78AF7;
    --purple-300: #9654F4;
    --purple-400: #8133F1;
    --purple: #6200EE;
    --purple-600: #5900D9;
    --purple-700: #4600A9;
    --purple-800: #360083;
    --purple-900: #290064;

	/* Grey Shades */
	--grey-100: #FFFFFF;
	--grey-200: #EDEDED;
	--grey-300: #D9D9D9;
	--grey-400: #B6B6B6;
	--grey-500: #858585;
	--grey-600: #646464;
	--grey-700: #535353;
	--grey-800: #373737;
	--grey-900: #1C1C1C;
	--grey-000: #000000;
    --grey-100-80: rgba(255,255,255,0.8);

    /* Orange shades*/
    --orange-50: #fce9e6;
    --orange-100: #ffccb8;
    --orange-200: #ffab8a;
    --orange-300: #ff8b5a;
    --orange-400: #ff7134;
    --orange: #ff5900;
    --orange-600: #f45300;
    --orange-700: #e64c00;
    --orange-800: #d94400;
    --orange-900: #c13600;
}

/*------LIGHT THEME STYLES------*/
:root[data-bs-theme="light"] {
    color-scheme: light;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;

	/*CUSTOM*/
	--bs-body-colour-200: #69696a;
	--bs-body-colour-200-rgb: 105, 105, 106;
/*	--bs-focus-ring-color: rgba(255, 215, 0, 0.2);*/
	--bs-focus-ring-color: rgba(137, 169, 163, 0.2);
	--bs-check-input-toggle-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.75%29'/%3e%3c/svg%3e");
}

/*------DARK THEME STYLES------*/
:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;

	/*CUSTOM*/
	--bs-body-colour-200: #b7b7b7;
	--bs-body-colour-200-rgb: 183, 183, 183;
/*	--bs-focus-ring-color: rgba(255, 215, 0, 0.2);*/
	--bs-focus-ring-color: rgba(137, 169, 163, 0.2);
	--bs-check-input-toggle-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");

	--grey-100: #000000;
	--grey-200: #1C1C1C;
	--grey-300: #373737;
	--grey-400: #535353;
	--grey-500: #646464;
	--grey-600: #858585;
	--grey-700: #B6B6B6;
	--grey-800: #D9D9D9;
	--grey-900: #EDEDED;
	--grey-000: #FFFFFF;
    --grey-100-80: rgba(0,0,0,0.8);
}

/*Grey fonts*/
.grey-100-text {
	color: var(--grey-100);
}
.grey-200-text {
	color: var(--grey-200);
}
.grey-300-text {
	color: var(--grey-300);
}
.grey-400-text {
	color: var(--grey-400);
}
.grey-500-text {
	color: var(--grey-500);
}
.grey-600-text {
	color: var(--grey-600);
}
.grey-700-text {
	color: var(--grey-700);
}
.grey-800-text {
	color: var(--grey-800);
}
.grey-900-text {
	color: var(--grey-900);
}
.grey-000-text {
	color: var(--grey-000);
}
.grey-100-80-text {
	color: var(--grey-100-80);
}

/*Grey Backgrounds*/
.grey-100 {
	background-color: var(--grey-100);
}
.grey-200 {
	background-color: var(--grey-200);
}
.grey-300 {
	background-color: var(--grey-300);
}
.grey-400 {
	background-color: var(--grey-400);
}
.grey-500 {
	background-color: var(--grey-500);
}
.grey-600 {
	background-color: var(--grey-600);
}
.grey-700 {
	background-color: var(--grey-700);
}
.grey-800 {
	background-color: var(--grey-800);
}
.grey-900 {
	background-color: var(--grey-900);
}
.grey-000 {
	background-color: var(--grey-000);
}
.grey-100-80 {
	background-color: var(--grey-100-80);
}


/*Global*/

body {
	padding-top: 60px;
	padding-bottom: 60px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'DM Serif Display', serif;
	color: var(--grey-800);
}

p, a, label, ol > li {
	font-family: 'Space Grotesk', monospace;
	color: var(--grey-700);
}

code {
	background: var(--grey-200);
    padding: 3px;
    border-radius: 4px;
}

.display-heading {
	font-family: 'DM Serif Display';
    font-size: 4rem;
    line-height: 3.5rem;
}

h1.display-heading {
	font-size: 2.75rem;
	line-height: 2.5rem;
}

h2.display-heading {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

h3.display-heading {
	font-size: 2rem;
	line-height: 2rem;
}

.display-gradient {
	background: linear-gradient(130deg, #3A6073 0%, #16222A 130%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-tag {
	padding: 2px 4px;
	border-radius: 2px;
	background: #3A6073;
	color: var(--grey-100);
	letter-spacing: 1px;
	font-size: 0.8rem;
	font-family: 'Space Grotesk', monospace;
}


/*Boostrap overrides/specifiers*/
.toast-body span {
    color: #fff !important;
}
.popover {
    font-family: 'Space Grotesk';
}

.accordion-button:not(.collapsed) {
    color: var(--grey-800);
    background-color: var(--grey-200);
}

.accordion-button {
	font-size: 1.3rem;
}

.accordion {
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	--bs-accordion-border-radius: 24px;
	border-radius: 24px;
}
.accordion-button:not(.collapsed) {
    color: var(--grey-200);
    background: linear-gradient(130deg, #3A6073 0%, #16222A 130%);
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
}

.btn {
	font-family: 'Space Grotesk', monospace;
}


/*Remove focus ring unless keyboard user*/
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

.shadow-light-bottom {
	box-shadow: 0 4px 8px 0 rgba(09, 0, 0, 0.15);
}

.shadow-light-top {
	box-shadow: 0 -4px 8px 0 rgba(09, 0, 0, 0.15);
}

.ptb-80 {
	padding-top: 80px;
	padding-bottom: 80px;
}

.ptb-60 {
	padding-top: 60px;
	padding-bottom: 60px;
}

.plr-40 {
	padding-left: 40px;
	padding-right: 40px;
}

.vh-100 {
	height: 100vh;
}

.h-100 {
	height: 100%;
}

.r-32 {
	border-radius: 32px;
}

.r-24 {
	border-radius: 24px;
}

.r-16 {
	border-radius: 16px;
}

.ls-1 {
	letter-spacing: 1px;
}


/*NAV STYLES*/

.fixed-top {
  position: fixed;
  width: 100%;
  left: 0; 
  right: 0;
}

/*.navbar > .container {
	background-color: rgba(255,255,255,0.2);
	backdrop-filter: blur(10px);
}*/

.glass-nav {
	background-color: rgba(255,255,255,0.4);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 32px;
}

.navbar-brand img {
	margin-right: 12px;
}

.navbar-brand span {
    font-family: 'DM Serif Display';
    line-height: 18px;
    font-size: 16px;
}

.navbar-nav {
	margin-bottom: 12px;
}

li.nav-item {
    margin: 2px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 20px;
}

.login-register-nav-item {
	margin: 2px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 20px;
    justify-content: center;
}


/*Login/Register*/

.cover-bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.login-bg, .login-bg-underlay {
	background-image: url(../img/login-bg-hq.jpg);
}

.register-bg {
	background-image: url(../img/register-bg-hq.jpg);
}

.img-peek {
	background: #ffffff;
	margin-top: 40px;
}

/* Landing Page */
.hero-bg {
	background-image: url(../img/register-bg-hq.jpg);
}

.cta-bg {
	background-color: var(--grey-900);
	background-image: url(../img/blur-ball.svg);
	background-size: cover;
    background-position: 50% -50%;
    background-repeat: no-repeat;
}


/*colour picker styles*/

.color-selector {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 38px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0rem;
/*    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);*/
    border: 1px solid #dee2e6;
    border-radius: 8px;
}
.color-selector::-webkit-color-swatch {
	border-radius: 0.375rem;
	border: none;
}
.color-selector::-moz-color-swatch {
	border-radius: 0.375rem;
	border: none;
}


.main-options-container {
    border-radius: 24px;
    padding: 20px 40px;
}

.option-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px;
    padding: 8px;
    border-top: 1px solid #cdcdcd;
}

.label-wrapper{
	width: 100%;
}

.label-text{
	font-weight: bold;
	margin-bottom: 4px;
}
.label-description{
	font-weight: 100;
	color: var(--bs-body-colour-200);
}

.input-wrapper{
	width: 100%;
}


.icon-wrapper {
	margin-right: 12px;
	color: inherit;
}


/*DASHBOARD*/

.url-rule-row {
	display: flex;
    gap: 8px;
}

.status-icon-wrapper {
	margin-right: 4px;
}
.status-icon-wrapper svg {
	max-height: 16px;
}

.status-wrapper {
    border-radius: 4px;
    padding: 8px 12px;
}


/*CUSTOM BUTTON COLOURS*/
.btn.btn-yellow {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--yellow);
    --bs-btn-border-color: var(--yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--yellow-400);
    --bs-btn-hover-border-color: var(--yellow-900);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--yellow-900);
    --bs-btn-active-border-color: var(--yellow-900);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--yellow);
    --bs-btn-disabled-border-color: var(--yellow);
}

.btn.btn-yellow {
    color: var(grey-800);
    background-color: var(--yellow);
    border-color: var(--yellow);
}

.btn.btn-yellow:hover {
    color: var(grey-800);
    background-color: var(--yellow-400);
    border-color: #d3b200;
}

.btn.btn-yellow:focus {
    box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.btn.btn-yellow:active {
    color: var(grey-800);
    background-color: #d3b200;
    border-color: #d3b200;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.btn-yellow:disabled {
    color: var(grey-800);
    background-color: var(--yellow);
    border-color: var(--yellow);
}

/*Checkbox/toggle switch style*/
.option-container .checkbox {
	height: 30px;
    width: 60px;
    box-shadow: inset 0 0px 8px 0 rgba(0, 0, 0, 0.1);
}
.form-switch .form-check-input:checked, .form-switch .form-check-input:checked:focus {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.75%29'/%3e%3c/svg%3e");
/*    background-color: var(--yellow);*/
    background-color: #3A6073;
    box-shadow: inset 0 0px 8px 0 rgba(0, 0, 0, 0.3);
}

.form-switch .form-check-input:focus {
    background-image: var(--bs-check-input-toggle-img);
}


.form-check-input:focus, .form-select:focus, .form-control:focus {
    border-color: var(--grey-400);
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: var(--grey-700);
}



/*------MEDIA QUERIES------*/

/*MIN WIDTH*/
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.login-bg-underlay {
		background-image: none;
	}
	.img-peek {
		background: #ffffff;
		margin-top: 0;
	}
	.cta-bg {
	    background-position: 50% 0%;
	}
	li.nav-item {
	    margin: 0;
	    background: none;
	    padding: 0;
	}
	.navbar-nav {
		margin-bottom: 0;
	}
	.login-register-nav-item {
		margin: 0;
	    background: none;
	    border-radius: 0;
	    padding: 0;
	    justify-content: inherit;
	}
	h1.display-heading {
		font-size: 3.75rem;
		line-height: 3.5rem;
	}

	h2.display-heading {
		font-size: 3.25rem;
		line-height: 3.5rem;
	}

	h3.display-heading {
		font-size: 3rem;
		line-height: 3rem;
	}
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}