/*===========================
    FONT
===========================*/
/* poppins-300 - latin_devanagari_latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local('Poppins Light'),
       local('Poppins-Light'),
       url('/libs/fonts/poppins-300.woff2') format('font-woff2'),
       url('/libs/fonts/Poppins-Light.ttf') format('truetype');
}
/* poppins-400 - latin_devanagari_latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url('/libs/fonts/poppins-400.woff2') format('font-woff2'),
       url('/libs/fonts/Poppins-Regular.ttf') format('truetype');
}
/* poppins-500 - latin_devanagari_latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: local('Poppins Medium'), local('Poppins-Medium'), url('/libs/fonts/poppins-500.woff2') format('font-woff2'),
       url('/libs/fonts/Poppins-Medium.ttf') format('truetype');
}
/* poppins-600 - latin_devanagari_latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url('/libs/fonts/poppins-600.woff2') format('font-woff2'),
       url('/libs/fonts/Poppins-SemiBold.ttf') format('truetype');
}
/* poppins-700 - latin_devanagari_latin-ext */
  @font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: local('Poppins Bold'), local('Poppins-Bold'), url('/libs/fonts/poppins-700.woff2') format('font-woff2'),
       url('/libs/fonts/Poppins-Bold.ttf') format('truetype');
}
/* Fira Code 300 */
  @font-face {
  font-family: 'Fira Code'
  font-style: normal;
  font-weight: 300;
  src: local('FiraCode'), local('FiraCode-Light'), url('/libs/fonts/FiraCode-Light.woff2') format('font-woff2'),
       url('/libs/fonts/FiraCode-Light.ttf') format('truetype');
}
/* Fira Code 400 */
  @font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  src: local('FiraCode Regular'), local('FiraCode-Regular'), url('/libs/fonts/FiraCode-Regular.woff2') format('font-woff2'),
       url('/libs/fonts/FiraCode-Regular.ttf') format('truetype');
}
/* Fira Code 500 */
  @font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 500;
  src: local('FiraCode Medium'), local('FiraCode-Medium'), url('/libs/fonts/FiraCode-Medium.woff2') format('font-woff2'),
       url('/libs/fonts/FiraCode-Medium.ttf') format('truetype');
}
/* Fira Code 600 */
  @font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 600;
  src: local('FiraCode Bold'), local('FiraCode-Bold'), url('/libs/fonts/FiraCode-Bold.woff2') format('font-woff2'),
       url('/libs/fonts/FiraCode-Bold.ttf') format('truetype');
}

/* Use Fira Code to differenciate code-related text from normal text*/
.code {
	font-family: 'Fira Code', monospace;
	font-weight: 400;
}
.text-blue {
	color: var(--color-blue);
}
.text-red {
	color: var(--color-red);
}
.text-green {
	color: var(--color-green);
}
.text-orange {
	color: var(--color-orange);
}
/*===========================
    COLOR css
===========================*/
:root {
  --color-primary: #0c1440; /* qoom navy */
  --color-secondary: #0067f4; /* qoom blue  */
  --color-navy: #0c1440;
  --color-blue: #0067f4;
  --color-orange: #F28729;
  --color-red: #E84855;
  --color-yellow: #FFCC00;
  --color-green: #4da422;
  
  --color-gray-10: #f5f6f7; 
  --color-gray-50: #e7e8ec;
  --color-gray-100: #d8d9e1;
  --color-gray-200: #bbbdca;
  --color-gray-300: #adafbe;
  --color-gray-400: #9ea1b3;
  --color-gray-500: #868998;
  --color-gray-600: #6f717d;
  --color-gray-700: #575962;
  --color-gray-800: #3f4048;
  --color-gray-900: #28282d;

  --color-navy-10: #e7e8ec; 
  --color-navy-50: #c2c4cf;
  --color-navy-100: #9ea1b3;
  --color-navy-200: #555b79;
  --color-navy-300: #30375d;
  --color-navy-400: #0c1440;
  --color-navy-500: #0a1136;
  --color-navy-600: #080e2d;
  --color-navy-700: #070b23;
  --color-navy-800: #05081a;
  --color-navy-900: #030510;


  /* https://noeldelgado.github.io/shadowlord/#0067f4 */
  --color-blue-10: #e6f0fe; 
  --color-blue-50: #bfd9fc;
  --color-blue-100: #99c2fb;
  --color-blue-200: #4d95f7;
  --color-blue-300: #267ef6;
  --color-blue-400: #0067f4;
  --color-blue-500: #0058cf;
  --color-blue-600: #0048ab;
  --color-blue-700: #003986;
  --color-blue-800: #002962;
  --color-blue-900: #001a3d;
  
  
  --color-secondary-10: #e6f0fe; 
  --color-secondary-50: #bfd9fc;
  --color-secondary-100: #73abf9;
  --color-secondary-200: #4d95f7;
  --color-secondary-300: #267ef6;
  --color-secondary-400: #0067f4;
  --color-secondary-500: #0058cf;
  --color-secondary-600: #0048ab;
  --color-secondary-700: #003986;
  --color-secondary-800: #002962;
  --color-secondary-900: #001a3d;
  
  --color-red-10: #fdedee; 
  --color-red-50: #f9d1d5;
  --color-red-100: #f6b6bb;
  --color-red-200: #ef7f88;
  --color-red-300: #eb636f;
  --color-red-400: #e84855;
  --color-red-500: #c53d48;
  --color-red-600: #a2323b;
  --color-red-700: #80282f;
  --color-red-800: #5d1d22;
  --color-red-900: #3a1215;
 
  --color-white: #fff;

  /* text colors for light background */
  --text-dark-high: #202024;
  --text-dark-medium: #58585b;
  --text-dark-disabled: #909092;

  /* text colors for dark background */
  --text-white-high: rgba(255,255,255,1);
  --text-white-medium: rgba(255,255,255,0.6);
  --text-white-disabled: rgba(255,255,255,0.38);
  
  /* icon filter */
  
  --ic-navy: invert(5%) sepia(82%) saturate(3253%) hue-rotate(230deg) brightness(96%) contrast(99%);
  --ic-blue: invert(22%) sepia(72%) saturate(3462%) hue-rotate(205deg) brightness(100%) contrast(108%);
  --ic-text-dark-high: invert(0%) sepia(6%) saturate(34%) hue-rotate(113deg) brightness(112%) contrast(74%);
  --ic-gray-400: invert(73%) sepia(6%) saturate(65%) hue-rotate(169deg) brightness(84%) contrast(85%);
  --ic-gray-200: invert(91%) sepia(3%) saturate(83%) hue-rotate(169deg) brightness(88%) contrast(88%);
 
}

/*==============================
	HTML TAGS css
==============================*/
*, ::after, ::before {
	box-sizing: border-box;
	will-change: auto !important;
}

body {
	color: var(--text-dark-high);
	font-family: "Poppins", sans-serif;
	font-style: normal;
	font-weight: normal;
	height: 100vh;
	margin: 0;
	overflow-x: hidden;
}

img {
  max-width: 100%;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a, a:visited {
	color: var(--color-secondary);
	text-decoration: none;
	outline: none;
}

a:hover {
	outline: none;
	text-decoration: none;
}

b {
	font-weight: 500;
}

i,
span,
a {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	margin: 0px;
}

h1 {
  font-size: 48px;
  font-weight: 600;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
p {
  font-size: 16px;
  hyphens: auto;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 767px) {
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size: 32px;
	}
	h3 {
		font-size: 26px;
	}
	h4 {
		font-size: 22px;
	}
	h5 {
		font-size: 18px;
	}
	h6 {
		font-size: 16px;
	}
	p {
		font-size: 14px;
	}
}

/*==========================
	LAYOUT
==========================*/
.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.justify-content-center {
	-ms-flex-pack: center!important;
	justify-content: center!important;
}
.justify-content-right {
	-ms-flex-pack: right!important;
	justify-content: right!important;
}
.col-lg-12 {
	position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 992px) {
	.col-lg-12 {
		-ms-flex: 0 0 100%;
		flex:  0 0 100%;
		max-width: 100%;
	}
}
.col-lg-8 {
	position: relative;
	width: 66.6666%;
	padding-right: 15px;
	padding-left: 15px;
}
@media (min-width: 992px) {
	.col-lg-12 {
		-ms-flex: 0 0 100%;
		flex:  0 0 100%;
		max-width: 100%;
	}
}
.col-lg-6 {
	position: relative;
	width: 50%;
	padding-right: 15px;
	padding-left: 15px;
}
@media (max-width: 767px) {
	.col-lg-6 {
		-ms-flex: 0 0 100%;
		flex:  0 0 100%;
		max-width: 100%;
	}
}
.col-lg-4 {
	position: relative;
	width: 33.3333%;
	padding-right: 15px;
	padding-left: 15px;
}
@media (max-width: 767px) {
	.col-lg-4 {
		-ms-flex: 0 0 100%;
		flex:  0 0 100%;
		max-width: 100%;
	}
}

/* ========================
	FORM ELEMENTS
==========================*/
.form-input {
	margin-bottom: 16px;
}
.form-input label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-dark-medium);
	margin-bottom: 8px;
	display: block;
	text-align: left !important;
}
.form-input .input-items {
	position: relative;
}
.form-input .input-items input,
.form-input .input-items text,
.form-input .input-items-optional input,
.form-input .input-items textarea,
.form-input .input-items select {
	width: 100%;
	height: 48px;
	border: 1px solid;
	border-radius: 4px;
	padding-left: 16px;
	padding-right: 16px;
	position: relative;
	font-size: 1rem;
	font-weight: 300;
}
.form-input .input-items textarea {
	font-family: inherit!important;
	padding-top: 8px;
	height: 130px;
	resize: none;
}
.form-input .input-items i {
    position: absolute;
    top: 0;
    right: 16px;
    width: 24px;
    z-index: 9;
}
.form-input .input-items.default input,
.form-input .input-items-optional.default input, 
.form-input .input-items.default textarea,
.form-input .input-items.default select {
	border-color: var(--text-dark-medium);
	color: var(--text-dark-high);
}
.form-input .input-items.default input:focus,
.form-input .input-items-optional.default input:focus,
.form-input .input-items.default textarea:focus,
.form-input .input-items.default select:focus {
	border-color: var(--color-secondary);
}
.form-input .input-items.default input::placeholder,
.form-input .input-items-optional.default input::placeholder,
.form-input .input-items.default textarea::placeholder,
.form-input .input-items.default select::placeholder {
	color: var(--text-dark-medium);
	opacity: 1;
}
.form-input .input-items.default input::-moz-placeholder,
.form-input .input-items-optional.default input::-moz-placeholder,
.form-input .input-items.default textarea::-moz-placeholder,
.form-input .input-items.default select::-moz-placeholder {
	color: var(--text-dark-medium);
	opacity: 1;
}
.form-input .input-items.default input::-webkit-input-placeholder,
.form-input .input-items-optional.default input::-webkit-input-placeholder,
.form-input .input-items.default textarea::-webkit-input-placeholder,
.form-input .input-items.default select::-webkit-input-placeholder{
 	color: var(--text-dark-medium);
 	opacity: 1;
}
.form-input .input-items.default i {
    color: var(--text-dark-medium)
}
.form-input .input-items.active input,
.form-input .input-items.active textarea,
.form-input .input-items.active select {
	border-color: var(--color-secondary);
	color: var(--text-dark-high);
} 
.form-input .input-items.active input::placeholder,
.form-input .input-items.active textarea::placeholder,
.form-input .input-items.active select::placeholder {
	color: var(--text-dark-high);
	opacity: 1;
}
.form-input .input-items.active input::-moz-placeholder,
.form-input .input-items.active textarea::-moz-placeholder,
.form-input .input-items.active select::-moz-placeholder {
	color: var(--text-dark-high);
	opacity: 1;
}
.form-input .input-items.active input::-webkit-input-placeholder,
.form-input .input-items.active textarea::-webkit-input-placeholder,
.form-input .input-items.active select::-webkit-input-placeholder {
	color: var(--text-dark-high);
	opacity: 1;
}
.form-input .input-items.active i {
	color: var(--color-secondary);
}
.form-input .input-items.error input,
.form-input .input-items.error textarea,
.form-input .input-items.error select {
	border-color: var(--color-red);
	color: var(--color-red);
}
.form-input .input-items.error input::placeholder,
.form-input .input-items.error textarea::placeholder,
.form-input .input-items.error select {
	border-color: var(--color-red);
	color: var(--color-red);
	opacity: 1;
}
.form-input .input-items.error input::-moz-placeholder,
.form-input .input-items.error textarea::-moz-placeholder,
.form-input .input-items.error select::-moz-placeholder {
	border-color: var(--color-red);
	opacity: 1;
}
.form-input .input-items.error input::-moz-placeholder,
.form-input .input-items.error textarea::-moz-placeholder,
.form-input .input-items.error select::-moz-placeholder {
	border-color: var(--color-red);
	opacity: 1;
}
.form-input .input-items.error input::-webkit-input-placeholder,
.form-input .input-items.error textarea::-webkit-input-placeholder,
.form-input .input-items.error select::-webkit-input-placeholder {
	border-color: var(--color-red);
	opacity: 1;
}
.form-input .input-items.error i {
	border-color: var(--color-red);
}
.form-input .input-items.success input,
.form-input .input-items.success textarea,
.form-input .input-items.success select {
	border-color: var(--color-green);
	color: var(--color-green);
}
.form-input .input-items.success input::placeholder,
.form-input .input-items.success textarea::placeholder,
.form-input .input-items.success select::placeholder {
	color: var(--color-green);
	opacity: 1; }
.form-input .input-items.success input::-moz-placeholder,
.form-input .input-items.success textarea::-moz-placeholder,
.form-input .input-items.success select{
	color: var(--color-green);
	opacity: 1; }
.form-input .input-items.success input::-moz-placeholder,
.form-input .input-items.success textarea::-moz-placeholder {
	color: var(--color-green);
	opacity: 1; }
.form-input .input-items.success input::-webkit-input-placeholder,
.form-input .input-items.success textarea::-webkit-input-placeholder {
	color: var(--color-green);
	opacity: 1; }
.form-input .input-items.success i {
	color: var(--color-green);
}
.form-input .input-items.disabled input,
.form-input .input-items.disabled textarea {
	border-color: var(--text-dark-disabled);
	color: var(--text-dark-disabled);
	background: none;
}
.form-input .input-items.disabled input::placeholder,
.form-input .input-items.disabled textarea::placeholder {
	color: var(--text-dark-disabled);
	opacity: 1;
}
.form-input .input-items.disabled input::-moz-placeholder,
.form-input .input-items.disabled textarea::-moz-placeholder {
	color: var(--text-dark-disabled);
	opacity: 1;
}
.form-input .input-items.disabled input::-moz-placeholder,
.form-input .input-items.disabled textarea::-moz-placeholder {
	color: var(--text-dark-disabled);
	opacity: 1;
}
.form-input .input-items.disabled input::-webkit-input-placeholder,
.form-input .input-items.disabled textarea::-webkit-input-placeholder {
	color: var(--text-dark-disabled);
	opacity: 1;
}
.form-input .input-items.disabled i {
	color:var(--text-dark-disabled);
}
.form-input .text {
	font-size: 1rem;
}
.form-input .input-items input, .form-input .input-items textarea {
	font-size: 1rem;
}

/* error message for a form input */
.input-error-message {
	color: var(--color-red);
	font-size: 14px;
	margin-top: 8px;
}

/*===========================
    BUTTON css
===========================*/
.qoom-main-btn {
	border: 2px solid transparent;
	border-radius: 4px;
	color: var(--color-secondary);
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	height: 48px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0 32px;
	white-space: nowrap;
	width: 100%;
	transition: all 0.2s ease-out 0s;
	z-index: 5;
}
@media (max-width: 767px) {
  .qoom-main-btn {
  	border: 1px solid transparent;
    font-size: 14px;
    padding: 4px 16px;
    height: 36px;
  }
}
.qoom-main-btn:active {
	transform: scale(0.97);
}

.qoom-main-btn > * {
	vertical-align: middle;
}
.qoom-button-small {
	font-size: 14px;
	padding: 0 24px;
	height: 40px;
}
@media (max-width: 767px) {
  .qoom-button-small {
  	font-size: 12px;
    padding: 0 16px;
    height: 32px;
  }
}
.qoom-button-xsmall {
	font-weight: 300;
	font-size: 12px;
	padding: 0 8px 0 4px;
	height: 24px;
	gap: 2px;
}
.qoom-button-xsmall.qoom-button-outline {
	border-width: 1px;
}
.qoom-button-outline {
	background-color: var(--color-white);
	border-color: var(--color-secondary);
}
.qoom-button-outline:hover {
	background-color: var(--color-secondary);*/
	border-color: var(--color-secondary);
	color: var(--color-white);
}
.qoom-button-full {
	background-color: var(--color-secondary);
	color: #fff!important;
	
}
.qoom-button-full:hover {
	background-color: var(--color-secondary-700);
	color: #fff!important;
}
.qoom-button-round {
	border-radius: 24px;
}
.qoom-button-link {
	color: var(--color-secondary);
	font-weight: 300;
	text-decoration: none;
}
.qoom-button-link:hover {
	cursor: pointer;
	text-decoration: underline;
}
.qoom-button-link:visited {
	text-decoration: none;
}

[type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled, button:disabled {
	cursor: default;
	background-color: var(--color-gray-200);
	border-color: transparent;
	color: #fff;
}
[type=button]:disabled:hover, [type=reset]:disabled:hover, [type=submit]:disabled:hover, button:disabled:hover {
	background-color: var(--color-gray-200);
	border-color: transparent;
	color: #fff;
}

/* buttons on dark-theme */
.qoom-dark-theme.qoom-button-outline {
	background-color: var(--color-gray-800);
	border-color: var(--color-gray-600);
	color: var(--text-white-high);
}
.qoom-dark-theme.qoom-button-outline:hover {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}
.qoom-dark-theme.qoom-button-full {
	background-color: var(--color-gray-700);
	color: var(--text-white-high);
}
.qoom-dark-theme.qoom-button-full:hover {
	background-color: var(--color-secondary);
}

/*===========================
    Popup Dialog css
===========================*/
.modal-background {
	background-color: rgba(0, 0, 0, 0.38);
	height: 100vh;
	left: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 5;
}
.modal-background.processing {
	pointer-events: none;
}
.modal {
	--scale-value: 1;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	display: block;
	left: 50%;
	min-height: 10rem;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%) scale(var(--scale-value));
	animation: popup 0.3s ease 0s;
	width: 32rem;
	height: unset;
	z-index: 11;
}

@keyframes popup {
	from {
		opacity: 0;
		--scale-value: 0.8;
	}
	to {
		opacity: 1;
		--scale-value: 1;
	}
}
.modal .modal-title {
	background-color: var(--color-secondary);
	height: 56px;
	margin: 0;
	padding: 8px 24px;
	width: 100%;
}
.modal .modal-title h1 {
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 40px;
	text-align: left;
}
.modal .modal-container {
	font-weight: 300 !important;
	padding: 24px 24px;
}
.modal .modal-container .modal-description {
	color: var(--text-dark-high);
	font-weight: 300;
	hyphens: auto;
	line-height: 1.5;
	margin-bottom: 16px;
}
.modal .modal-container .modal-description p {
	margin-bottom: 8px;
}
.modal .modal-container .modal-description div {
	margin-bottom: 12px;	
}
.modal .modal-container .domain-name-container
,.modal .modal-container .coding-space-container {
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	height: 40px;
	line-height: 1.5;
	padding: 8px 12px;
	background-color: var(--color-light-blue);
	border-radius: 4px;
	margin-top: 4px;
	margin-left: -4px;
}
.modal .col-lg-12
,.modal .col-lg-6 {
	padding: 0;
}

/* Form Input in Modal */

.modal .form-input > p {
	margin-bottom: 8px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.modal .form-input label::after {
	content: "";
}
.modal .form-input .input-items {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: nowrap;
}
.modal .form-input .input-items input
,.modal .form-input .input-items-optional input {
	height: 42px;
	padding-left: 16px;
	padding-right: 16px;
}
.modal .form-input.url span:first-child{
	margin-right: 8px;
}
.modal .form-input .description {
	color: var(--color-secondary);
	font-size: 12px;
}
.modal .buttons-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-top: 24px;
}
.modal .buttons-container button {
	margin-left: 16px;
	min-width: 120px;
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}
.modal .form-input .input-items .domain-name {
	line-height: 48px;
	margin-left: 8px;
}
.modal .form-input.url .input-items input {
	width: 240px;
}
.modal .form-input.password-reset {
	text-align: right;
}

@media (max-width: 577px) {
	.modal {
		font-size: 14px;
		max-width: 480px;
		width: calc(100% - 32px);
	}
	.modal .buttons-container {
		justify-content: flex-start;
	}
	.modal .buttons-container button {
		margin-left: 0;
	}
	.modal .buttons-container button:last-child {
		flex: 1 0 auto;
		margin-left: 8px;
	}
	.modal .form-input .input-items .domain-name {
		line-height: 48px;
		margin-left: 8px;
	}
	.modal .form-input.url .input-items input {
		width: 120px;
	}
}

#alertAlternative {
	position: fixed;
}

#alertAlternative .modal {
	left: 50vw;
	position: fixed;
	width:unset;
	height:unset;
	padding:1rem;
}

#alertAlternative .modal .container {
	padding:20px 0 0 0;
}


/*===========================
    Snackbar css
===========================*/
.snackbar {
	background-color: var(--text-dark-high);
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	color: #fff;
	display: flex;
	flex-flow: row nowrap;
	font-size: 14px;
	justify-content: space-between;
	left: 50%;
	max-width: 720px;
	padding: 14px 21px 14px 21px;
	position: fixed;
	top: 40px;
	transform: translateX(-50%);
	z-index: 99;
}

.snackbar.red {
	background-color: var(--color-red);
}
.snackbar.blue {
	background-color: var(--color-blue);
}
.snackbar.white {
	background-color: #fffffffa;
	color: var(--color-blue);
}
.snackbar.white a {
	color: var(--color-blue);
}
.snackbar.white a:hover 
,.snackbar.white a:visited{
	color: var(--color-blue);
	font-weight: 500;
}
.snackbar a {
	color: #fff;
}
.snackbar a:hover
, .snackbar a:visited {
	color: #fff;
	font-weight: 500;
}
.snackbar.top-right {
	left: auto;
	right: 24px;
	transform: translateX(0);
}
.snackbar.top-left {
	left: 24px;
	transform: translateX(0);
}
.snackbar.bottom {
	bottom: 24px;
	top: auto;
}
.snackbar.bottom-right {
	bottom: 24px;
	left: auto;
	right: 24px;
	top: auto;
	transform: translateX(0);
}
.snackbar.bottom-left {
	bottom: 24px;
	right: auto;
	left: 24px;
	top: auto;
	transform: translateX(0);
}
.snackbar .message {
	flex-grow: 1;
	font-weight: 300;
	margin-right: 28px;
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}
.snackbar .message span {
	line-height: 1.5em;
}
.snackbar .action {
	line-height: 1.5em;
	margin-left: 14px;
	text-transform: uppercase;
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}
.snackbar .action:hover {
	cursor: pointer;
}

@media (max-width: 577px) {
	.snackbar {
		top: initial;
		bottom: 40px;
		width: calc(100% - 32px);
	}
}

/*===========================
    Indicator css
===========================*/
.indicator {
	width: fit-content;
    color: var(--color-gray-400);
    font-size: 12px;
    padding-top: 5px;
	overflow: hidden;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.indicator .message span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */   
    animation-fill-mode: both;
}

.indicator .message span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.indicator .message span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}
/*===========================
    Sticker css
===========================*/
.qoom-sticker {
	background-color: rgba(255,255,255,0.9);
	border-radius: 4px;
	bottom: 24px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
	color: #333;
	display: block;
	font-weight: 300;
	padding: 4px 16px;
	position: absolute;
	right: 24px;
	-webkit-transition: height .1s ease-out;
	transition: height .1s ease-out;
	width: 284px;
	overflow: hidden;
	height: 32px;
}
.qoom-sticker:hover {
	overflow: visible;
	height: auto;
	padding: 16px 16px;
}
.qoom-sticker > div {
	font-size: 14px;
	margin-bottom: 16px;
}
.qoom-sticker > div:first-child {
	line-height: 24px;
}
.qoom-sticker > div:first-child i {
	height: 12px;
	margin-top: -2px;
	vertical-align: middle;
	width: 64px;
}
/*.qoom-sticker > div:last-child {*/
/*	color: #666;*/
/*	margin-bottom: 0;*/
/*}*/
.qoom-sticker .btn {
	background-color: #0067f4;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	float: right;
	font-size: 14px;
	font-weight: 400;
	padding: 4px 12px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px; 
}
.qoom-sticker .btn:hover {
	background-color: #111559;
}
.qoom-sticker a {
	background: none;
	color: inherit;
	text-decoration: underline;
}


/*===========================
    STRIPE Form css
===========================*/

.StripeElement {
	background-color: var(--color-gray-10) !important;
	border: solid 1px var(--color-gray-100);
	border-radius: 4px;
	color: var(--text-dark-high);
	margin-bottom: 16px;
	padding: 16px;
	width: 100%;
}

.StripeElement--focus {
	box-shadow: 0 1px 3px 0 var(--color-gray-200);
}

.StripeElement--invalid {
	border-color: var(--color-gray-400);
}

.StripeElement--webkit-autofill {
	background-color: var(--color-gray-10) !important;
}

.StripeElement--complete {
	border-color: var(--color-secondary);
}

#card-errors {
	color: var(--color-red);
}