html{
	/*
		Makes it easier to read p tags and others if base font size
		is 17px instead of 16px
	*/
	font-size: 17px;
}

body{
	font-family: "proxima-nova",Arial,Helvetica,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #36394D;
}

*, *:before, *:after{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ratio{
    display: flex;
    position: relative;
    align-items: stretch;
}

.ratio:before{
    content: '';
    width: 0;
    height: 0;
    padding-bottom: var(--ratio-percent);
}

/* COMMON START */
/* COMMON START */
/* COMMON START */
/* COMMON START */
/* COMMON START */

.btn{
	padding: 0.46875rem 1rem;
}

.btn-primary{
	font-weight: 600;
}

/* The disabled state of buttons should not be editable */
.btn-primary.disabled,
.btn-primary:disabled{
	background-color: #6C757D;
	border-color: #6C757D;
}

.btn-secondary{
	color: #0D0C22 !important;
	background-color: #F3F3F4;
	border: 1px solid #B7C2CC;
	background: linear-gradient(180deg,#FFFFFF 0,#F9FAFA 100%);
}

.btn-secondary:hover,
.btn-secondary:focus{
	color: #FFFFFF;
	background-color: #E7E7E9;
}

.btn-light{
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px;
}

.btn-light:hover{
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(60 66 87 / 26%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px;
}

.btn .spinner-border{
    margin-right: 5px;
}

img{
	max-width: 100%;
}

img[data-src]:not([src]) {
    visibility: hidden;
    min-height: 1px;
    min-width: 1px;
}

/*
	I'm forced to override swal buttons to look the same as regular button
	with !important - no other choice
*/
.swal2-styled.swal2-confirm{
	background-color: #14AAF5 !important;
	border-color: #14AAF5 !important;
}
.custom-swal-confirm-button{
	margin-left: 1rem;
}

.logo-link{
	/* Don't allow seller defined link color to be used on logo */
	color: #222222 !important;
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 600;
}

.form-control{
	padding: 8px 16px;
	border-color: #CACCD6;
}

.form-control:focus,
.form-control:hover{
	border-color: #36394D;
	outline: 0;
}

.form-control.is-invalid,
.form-control.is-invalid:focus{
	border-color: #d83232;
}

.form-control:focus,
.form-control.is-invalid:focus,
.form-control.is-valid:focus{
	box-shadow: none;
}

.form-control:disabled{
	background-color: transparent;
	cursor: not-allowed;
	opacity: 0.45;
}

.form-control:read-only{
	background-color: transparent;
}

.form-floating>label{
	color: #737373;
}
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label{
	/* Bootstrap sets 0.65 by default */
	opacity: 1;
}

.error-message{
	color: #D83232;
}

.valid-feedback,
.invalid-feedback,
.form-text{
	margin: 8px 0 4px 4px;
	font-size: 0.875rem;
	line-height: 1rem;
}

.form-text{
	display: block;
	width: 100%;
	color: #6F7282;
}

.form-text.error-message{
	color: #d83232;
}

.invalid-feedback{
	color: #D83232;
}

.valid-feedback{
	color: #379A49;
}

.label{
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1rem;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4{
	margin: 0;
}

h1, .h1{
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2rem;
}

@media all and (min-width: 1024px){
	h1, .h1{
		font-size: 2rem;
		line-height: 3rem;
	}
}

h2, .h2{
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5rem;
}

@media all and (min-width: 1024px){
	h2, .h2{
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

h3, .h3{
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5rem;
}

h4, .h4{
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
}

p, .p,
/* li need to be treated the same as p tags */
.richtext li,
/*
	1) Setting 'body' get higher specificity than text-editor-component.css
	2) li within the text editor component is way too small, by default it's
	   set as 14px elsewhere which looks odd here. So override.
*/
body .text-editor-component.ql-container{
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.529rem;
}

/* Text editor component and placeholder style */
.text-editor-component.ql-container{
	font-family: "proxima-nova",Arial,Helvetica,sans-serif;
}
.text-editor-component .ql-editor.ql-blank::before{
	color: #6E757C;
	font-style: normal;
}

.input-box{
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
}

.input-box .input-label{
    flex-basis: 100%;
    margin: 0 0 8px 4px;
}

.input-box--input.error{
    border-color: #d83232;
}

.error-message-large{
	text-align: center;
	margin-top: 100px;
}

.form-check-input{
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.form-check-input:checked{
	background-color: #36394d;
    border-color: #36394d;
}

.form-check-input:focus{
	box-shadow: 0 0 0 0.25rem rgb(54 57 77 / 25%);
	border-color: #36394d;
}

.pagination-wrapper{
	margin-top: 2rem;
}

.pagination-wrapper .pagination{
	align-items: center;
	justify-content: center;
}

.pagination-wrapper .page-item.active .page-link{
	background-color: #14AAF5;
	border-color: #14AAF5;
}

.dropdown-item.active, .dropdown-item:active{
	background-color: #E9ECEF;
}

.richtext p{
	/* Quill has other ways of separating paragraph */
	margin-bottom: 0px;
}

/* COMMON END */
/* COMMON END */
/* COMMON END */
/* COMMON END */
/* COMMON END */