@import url("vagaro-button.css");

html * {
	line-height: normal;
	font-family: 'Proxima Nova';
	color: #212322;
}

body {
	background: #F8F8F8;
}

#vagaro-generic-card-form {
	background: #F8F8F8;
}

.master-container {
	padding-top: 187px;
	/* min-height: calc(100vh - 91px); */
}

.logo-header {
	padding-bottom: 25px;
}

.vagaro-logo {
	width: 220px;
	height: 100%;
}

.load-cards-row {
	padding-bottom: 50px;
}

.generic-card-title,
.design-title,
.accessories-title {
	font-family: 'Proxima Nova';
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
	text-align: center;
	color: #333333;
}

.generic-sub-title {
	font-weight: 500;
	padding-bottom: 24px;
}

.generic-sub-title p {
	font-family: 'Proxima Nova';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	color: #6D6E6F;
}

.generic-secondary-title {
	font-weight: 600;
}

.reorder-paragraph {
	padding-top: 10px;
	font-size: 18px;
}

/*image divs*/
.img-text-align {
	position: relative;
	text-align: center;
	cursor: pointer;
}

/*image divs*/
.img-text-align {
	position: relative;
	text-align: center;
	cursor: pointer;
}

/*card background border*/
.qc-border {
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
}

.qc-fill {
	border: 3px solid white;
	border-radius: 10px;
	width: 198px;
	height: 130px;
}

.card-label {
    letter-spacing: 1px;
    font-size: 14px;
    padding-top: 2px;
}

/*cards for design*/
.card-front, .card-back {
	margin: auto;
	width: 402px;
}

.front-frame, .back-frame {
	border: 1px solid black;
	border-radius: 10px;
	background-position: center;
    background-size: 100% auto;
}

.card-back {
	background-image: url("../img/Vagaro_Blank_Card_Backer.jpg?ver=123");
    position: relative;
    background-position: center;
    background-size: 100% auto;
}

/*change background*/
.change-background-go-back {
	text-align: center;
	padding-top: 10px;
	font-weight: 200;
	margin-bottom: 0;
}

#change-background-text{
	font-size: 18px;
	color: #72A0FF;
	cursor: pointer;
}

/*Vagaro Design Button*/
.btn-vagaro-design {
  color: #EBEBEB;
  background-color: #CC4744;
  border-color: #CC4744;
}
.btn-vagaro-design:focus {
  color: #EBEBEB;
  background-color: #333333;
  border-color: #333333;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.btn-vagaro-design:hover {
  color: #EBEBEB;
  background-color: #333333;
  border-color: #333333;
}
.btn-vagaro-design:active {
  color: #EBEBEB;
  background-color: #456367;
  border-color: #456367;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.btn-vagaro-design:active:hover,
.btn-vagaro-design:active:focus {
  color: #EBEBEB;
  background-color: #456367;
  border-color: #456367;
}

#text_7{
	margin-bottom: 4px;
}

.text-area-row{
	margin-top: 30px;
}

.card-design-titles {
	font-weight: 600;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.font-choice {
	padding-top: 5px;
	font-size: 20px;
}

hr {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    border-color: black;
}

textarea {
	resize:	none;
}

/* Design Section --> */
#design-section {
	max-width: 434px;
	margin: auto;
}

.design-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
	padding-bottom: 71px;
}

.design-title,
.design-main-body {
    display: flex;
    flex-direction: column;
}

#vagaro-generic-card-form label,
.front-font-section > div,
.text-color-section > div {
	color: #333333;
	font-weight: 500;
    font-size: 15px;
    line-height: 20px;
	margin-bottom: 5px;
}

.design-title > div {
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
	text-align: center;
	color: #333333;
}

.design-main-body {
	gap: 24px;
}

.design-card-side,
.design-card-quantity {
    padding: 16px;
    background: white;
}

.design-side-section-title > div {
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: #333333;
	padding: 8px 0;
	border-bottom: 1px solid #E7E7E7;
}

.design-front-of-card,
.design-back-of-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card-front-edit-tool-suite {
	display: flex;
    justify-content: space-between;
	margin-top: 4px;
}

.sizing-tools,
.movement-tools {
	display: flex;
}

.sizing-tools .btn:first-child,
.movement-tools .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sizing-tools .btn:last-child,
.movement-tools .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sizing-tools .btn + .btn,
.movement-tools .btn + .btn {
	margin-left: -1px;
}

.movement-tools .btn:not(:first-child):not(:last-child) {
	border-radius: 0;
}
/* <-- Design Section */

.production-title-row, .design-title-row {
	margin-top: 10px;
}

.company-input {
	margin-top: 5px;
	margin-bottom: 5px;
}

#billing-address-state, #shipping-address-state {
  color: #A9AEBE;
}

.different-shipping-span {
	font-size: 14px;
}

.card-back-review-row {
	padding-top: 15px;
	padding-bottom: 35px;
}

/*validation*/
input.error, select.error {
	border: 2px solid #FF0000;
}

/*Change Autofill Background To White*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #545454 inset !important;
    -webkit-text-fill-color: #CFD8D8 !important;
}


/* Review & Company Info --> */
.company-info-main {
	display: flex;
    flex-direction: column;
    gap: 16px;
	padding-bottom: 137px;
}

.company-info-inputs {
	padding: 16px 16px 0;
	background: white;
}

.generic-card-review-title-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.generic-card-review-title {
	font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    color: #333333;
}

.generic-card-review-subtitle {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #6D6E6F;
}

.company-info-section {
	max-width: 826px;
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#accessories-company-info-section {
	max-width: 538px;
}

.generic-card-review-information-title > div,
.shipping-box > div,
.contact-info > div {
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: #333333;
	padding: 8px 0;
	border-bottom: 1px solid #E7E7E7;
}

.card-review-section {
	display: flex;
	margin: auto;
	gap: 22px;
}

@media screen and (max-width: 991px) {
	.card-review-section {
		display: flex;
		flex-direction: column;
		margin: auto;
		gap: 22px;
	}
}

.company-info-title-section {
	align-items: center;
}

.company-info-title {
	font-family: 'Proxima Nova';
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
	text-align: center;
	color: #333333;
}

/* Company Inputs */
.company-info-flex {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.business-name-section,
.email-phone-section,
.city-state-country-zip-section,
.address-apt-section,
.first-last-name-section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

.company-info-flex .form-group {
	box-sizing: border-box;
}

.city-state-country-zip-section .form-group .form-control {
	margin: 5px 0px;
}

.business-name-box {
	flex: 1 1 calc(100% - 12px);
}

.first-name-box,
.last-name-box,
.email-box,
.phone-number-box {
	flex: 1 1 calc(50% - 12px);
}

.shipping-box {
	border-bottom: 1px solid #E7E7E7;
}

.address-box {
	flex: 1 1 calc(70% - 12px);
}

.apt-suite-box {
	flex: 1 1 calc(30% - 12px);
}

.city-box,
.zip-box {
	flex: 1 1 calc(33.33% - 12px);
}

.state-box,
.country-box {
	flex: 1 1 calc(16.67% - 12px);
}

.form-group.form-group-lg.state-box select,
.form-group.form-group-lg.country-box select {
	padding-left: 8px;
	padding-right: 8px;
}

@media screen and (max-width: 575px) {
	.first-name-box,
	.last-name-box,
	.email-box,
	.phone-number-box,
	.city-box,
	.zip-box {
		flex: 1 1 calc(100% - 12px);
	}

	.state-box,
	.country-box {
		flex: 1 1 calc(50% - 12px);
	}
}

@media screen and (max-width: 430px) {
	.address-box,
	.apt-suite-box {
		flex: 1 1 calc(100% - 12px);
	}
}

@media screen and (max-width: 240px) {
	.city-box,
	.zip-box,
	.state-box,
	.country-box {
		flex: 1 1 calc(100% - 12px);
	}
}
/* Company Inputs */
/* <-- Review & Company Info */

/*XS SCREEN*/
@media screen and (max-width: 479px){

	.back-nav-div{
		text-align:	center;
	}

	.continue-nav-div{
		text-align: center;
	}

}

/*MS SCREEN*/
@media screen and (min-width: 480px) and (max-width: 767px) {

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.left-ms-card-background {
		float: right;
	}

	.right-ms-card-background {
		float: left;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}

}

/*SM SCREEN*/
@media screen and (min-width: 768px) and (max-width: 991px) {

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.left-sm-card-background-col {
		padding-right: 0;
	}

	.right-sm-card-background-col {
		padding-left: 0;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}
}

/*MD SCREEN*/
@media screen and (min-width: 992px) and (max-width: 1199px) {

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}

	.text-color-row{
		padding-right: 2%;
	}

	.text-color-label>span{
		padding-left: 18%;
	}

}

/*LG SCREEN*/
@media screen and (min-width: 1200px){

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}

	.left-sm-card-background-col {
		padding-right: 0;
	}

	.right-sm-card-background-col {
		padding-left: 0;
	}

	.left-tri-card-background {
		float: right;
	}

	.right-tri-card-background {
		float: left;
	}
}

/*Font & Text Adjustments*/
.btn-default:hover{
	background-color: white;
	border-color: #ccc;
}

.btn-default:focus{
	outline:none;
	background-color: white;
	border-color: #ccc;
}

/*Button Styling*/
.reset-text{
    background: green; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(green, darkgreen); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(green, darkgreen); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(green, darkgreen); /* For Firefox 3.6 to 15 */
    background: linear-gradient(green, darkgreen); /* Standard syntax */
    color: white;
}

.move-text{
    background: orange; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f7b733, #fc4a1a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f7b733, #fc4a1a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f7b733, #fc4a1a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f7b733, #fc4a1a); /* Standard syntax */
    color: white;
}

.left-justify-text, .center-text, .right-justify-text{
    background: gray; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgray, gray); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgray, gray); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgray, gray); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgray, gray); /* Standard syntax */
    color: white;
}

.delete-text{
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C00000, #800000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#C00000, #800000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C00000, #800000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C00000, #800000); /* Standard syntax */
    color: white;
}

.font-adjustment{
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#3a7bd5, #3a6073); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#3a7bd5, #3a6073); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#3a7bd5, #3a6073); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#3a7bd5, #3a6073); /* Standard syntax */
    color: white;
}

.reset-text, .move-text, .left-justify-text, .center-text, .right-justify-text, .delete-text, .font-adjustment:active{
	background-color: black !important;
	opacity: 0.8;
	border-color: #ccc;
}

.fa-undo, .fa-arrows, .fa-arrow-left, .fa-arrows-h, .fa-arrow-right, .fa-times, .glyphicon-plus, .glyphicon-minus {
	color: white;
}

/*Fonts*/
/* Anton */
#anton-font {
	font-family: 'Anton' !important;
}

/* Bentham */
#bentham-font {
	font-family: 'Bentham' !important;
}

/* EB Garamond */
#eb-garamond-font {
	font-family: 'EB Garamond' !important;
}

/* Faculty Glyphic */
#faculty-glyphic-font {
	font-family: 'Faculty Glyphic' !important;
}

/* Great Vibes */
#great-vibes-font {
	font-family: 'Great Vibes' !important;
}

/* Gupter */
#gupter-font {
	font-family: 'Gupter' !important;
}

/* Inter Bold */
#inter-bold-font {
	font-family: 'Inter Bold' !important;
}

/* Meow Script */
#meow-script-font {
	font-family: 'Meow Script' !important;
}

/* Norican */
#norican-font {
	font-family: 'Norican' !important;
}

/* Noto Serif */
#noto-serif-font {
	font-family: 'Noto Serif' !important;
}

/* Platypi */
#platypi-font {
	font-family: 'Platypi' !important;
}

/* Red Rose Bold */
#red-rose-bold-font {
	font-family: 'Red Rose Bold' !important;
}

/* Sansita */
#sansita-font {
	font-family: 'Sansita' !important;
}

/* Shadows Into Light Two */
#shadows-into-light-two-font {
	font-family: 'Shadows Into Light Two' !important;
}

/* Slabo */
#slabo-font {
	font-family: 'Slabo' !important;
}

/* Vujahday Script */
#vujahday-script-font {
	font-family: 'Vujahday Script' !important;
}

/*Colors*/
/*color boxes*/
.color-box {
	display: inline-block;
	width: 83px;
	height: 58px;
}

/*color choice border*/
.text-color-border{
	padding: 3px;
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}

/*color box divs*/
.color-box-div {
	text-align: center;
}

.text-color-border {
	width: 100%;
	cursor: pointer;
}

.text-color-label span {
	font-size: 14px;
	cursor: default;
}

/*white color box*/
#white-color-box {
	background-color: #FFFFFF;
}

/*black color box*/
#black-color-box {
	background-color: #000000;
}

/*gray color box*/
#gray-color-box {
	background-color: #989594;
}

/*red color box*/
#red-color-box {
	background-color: #DA202C;
}

/*blue color box*/
#blue-color-box {
	background-color: #314396;
}

/*green color box*/
#green-color-box {
	background-color: #3D773F;
}

/*gold color box*/
#gold-color-box {
	background-color: #D4A65B;
}

/*Nav Buttons*/
.btn-nav, .btn-display {
	margin: 10px;
}

.btn-display {
	width: 200px;
	height: 5em;
}

.display-front-div{
	text-align: right;
}

.display-back-div{
	text-align: left;
}

.design-nav-button-row {
	margin-top: 25px;
	margin-bottom: 25px;
}

.accessories-nav-row {
	margin-bottom: 25px;
}

/* Navigation Buttons --> */
.navigation-buttons-section {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
  }

  .navigation-button-group {
	display: flex;
	flex-direction: row;
	gap: 16px;
  }

@media screen and (max-width:370px) {
	#quick-card-navigation-button-group {
		display: flex;
		flex-direction: column;
		gap: 16px;
		align-items: flex-end;
	}
}

  /* .navigation-back-button-section,
  .navigation-continue-button-section {
	flex: 1 1 calc(50% - 16px);
  } */

  .navigation-back-button-section button {
	margin: 0;
	box-sizing: content-box;
	width: 35px;
	height: 20px;
	border: 2px #CDCDCD solid;
	padding: 6px 14px;
	color: #333333;
	background: white;
	border-radius: 3px;
	display: inline-flex;
	justify-content: center;
	/* align-items: center; */
	cursor: pointer;
	transition: background-color 0.3s ease;
  }

.accessories-save-submit {
	width: 56px;
}

.quick-card-save-and-continue {
	font-size: 16px;
	white-space: normal;
	width: 255px;
}

  .navigation-back-button-section button:hover {
	background: #F0F0F0; /* Light gray for hover effect */
  }

  .navigation-back-button-section button:active {
	background: #E0E0E0; /* Slightly darker gray for active effect */
	transform: scale(0.98);
  }

  .navigation-continue-button-section button {
	margin: 0;
	box-sizing: content-box;
	/* width: 64px; */
	height: 20px;
	border: 3px;
	border-color: #3E8438;
	padding: 8px 16px;
	color: #FFFFFF;
	background: #3E8438;
	border-radius: 3px;
	display: inline-flex;
	justify-content: center;
	/* align-items: center; */
	cursor: pointer;
	transition: background-color 0.3s ease;
  }

  .navigation-continue-button-section button > span {
	color: #FFFFFF;
  }

  .navigation-continue-button-section button:hover {
	background: #34692E;
  }

  .navigation-continue-button-section button:active {
	background: #2C5826;
	transform: scale(0.98);
  }

  #companyInformationContinue {
	width: 223px;
  }
  /* <-- Navigation Buttons */

/* Font Selection Section -->*/
.font-grid {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.font-selection-intake {
	display: none;
}

.font-choice {
	padding-top: 5px;
	font-size: 20px;
}

.font-col {
	text-align: center;
}

.font-box {
	position: relative;
    text-align: center;
    padding: 1%;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    /* width: 313px; */
	width: 100%;
    height: 70px;
    cursor: pointer;
}

.font-box:hover,
.font-color-border {
	box-shadow: 0 0 0 2px #CC4744;
	border: 1px solid #CC4744;
	cursor: pointer;
}

.font-col .font-box img {
    width: 255px;
    height: 52px;
}

.font-checkbox {
    margin: auto;
    /* position: relative; */
    top: 0;
    width: 0;
    height: 0;
}

.font-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
}

.font-tag-activated {
	color: #CC4744;
}

.font-tag.anton-tag {
	font-family: 'Anton';
}

.font-tag.bentham-tag {
	font-family: 'Bentham';
}

.font-tag.eb-garamond-tag {
	font-family: 'EB Garamond';
	font-size: 25px;
}

.font-tag.faculty-glyphic-tag {
	font-family: 'Faculty Glyphic';
	font-size: 25px;
}

.font-tag.great-vibes-tag {
	font-family: 'Great Vibes';
	font-size: 25px;
}

.font-tag.gupter-tag {
	font-family: 'Gupter';
}

.font-tag.inter-bold-tag {
	font-family: 'Inter Bold';
	font-size: 25px;
}

.font-tag.meow-script-tag {
	font-family: 'Meow Script';
	font-size: 27px;
}

.font-tag.norican-tag {
	font-family: 'Norican';
}

.font-tag.noto-serif-tag {
	font-family: 'Noto Serif';
	font-size: 25px;
}

.font-tag.platypi-tag {
	font-family: 'Platypi';
}

.font-tag.red-rose-bold-tag {
	font-family: 'Red Rose Bold';
	font-size: 21px;
}

.font-tag.book-sansita-tag {
	font-family: 'Sansita';
}

.font-tag.shadows-into-light-two-tag {
	font-family: 'Shadows Into Light Two';
	font-size: 19px;
}

.font-tag.slabo-tag {
	font-family: 'Slabo';
}

.font-tag.vujahday-script-tag {
	font-family: 'Vujahday Script';
	font-size: 25px;
}

/*checkboxes to be shown for chosen fonts*/
.font-activated::before {
    /* content: "";
    position:absolute;
    display: block;
    border-radius: 50%;
    left: 135px;
    top: 40px;
    float: left;
    background-color: #CC4744;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border: 3px solid #ffffff; */
	content: "";
	position: absolute;
	bottom: -12px;
	right: -10px;
	border-radius: 50%;
	background-color: #CC4744;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	border: 3px solid #ffffff;
}

.font-activated::after {
    /* content: "";
    position: absolute;
    display: block;
    height: 14px;
    width: 18px;
    left: 142px;
    top: 50px;
    position:absolute;
    background: url("../img/check.svg"); */
	content: "";
	position: absolute;
	bottom: -3px;
	right: -3px;
	background: url(../img/check.svg);
	height: 14px;
	width: 18px;
}

/*SPECIFIC: move font checkboxes on smallest devices*/
/* @media screen and (max-width: 330px) {
    .font-activated::before {
        content: "";
        position:absolute;
        display: block;
        border-radius: 50%;
        left: 129px;
        top: 40px;
        float: left;
        background-color: #CC4744;
        width: 32px;
        height: 32px;
        margin: 0 auto;
        border: 3px solid #ffffff;
    }

    .font-activated::after {
        content: "";
        position: absolute;
        display: block;
        height: 14px;
        width: 18px;
        left: 137px;
        top: 50px;
        position:absolute;
        background: url("diy-square-qc-images/other-images/check.svg");
    }
}

@media screen and (max-width: 479px) {

    .left-font-col,
	.right-font-col {
        padding-bottom: 0;

    }

	.left-font-col:not(.first-font-col),
	.right-font-col {
        padding-top: 20px;
	}
}

@media screen and (min-width: 480px) and (max-width: 767px) {

    .left-font-col,
	.right-font-col {
        padding-bottom: 10px;

    }

	.left-font-col:not(.first-font-col),
	.right-font-col {
        padding-top: 20px;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    .left-font-col {
        text-align: right;
        padding-bottom: 10px;
        padding-right: 10px;

    }

    .right-font-col {
        text-align: left;
        padding-bottom: 10px;
        padding-left: 10px;
    }

	.left-font-col:not(.first-font-col),
	.right-font-col:not(.second-font-col) {
		padding-top: 20px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {

    .left-font-col {
        text-align: right;
        padding-bottom: 10px;
        padding-right: 10px;

    }

    .right-font-col {
        text-align: left;
        padding-bottom: 10px;
        padding-left: 10px;
    }

	.left-font-col:not(.first-font-col),
	.right-font-col:not(.second-font-col) {
		padding-top: 20px;
	}
}

@media screen and (min-width: 1200px) {

    .left-font-col {
        text-align: right;
        padding-bottom: 10px;
        padding-right: 10px;

    }

    .right-font-col {
        text-align: left;
        padding-bottom: 10px;
        padding-left: 10px;
    }

	.left-font-col:not(.first-font-col),
	.right-font-col:not(.second-font-col) {
		padding-top: 20px;
	}
} */
/* <-- Font Selection Section */

/* Text Color Selection --> */
.text-color-grid {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
/* <-- Text Color Selection */

.moveActive{
	border-color: limegreen;
	-webkit-box-shadow: inset 0 1px 1px limegreen, 0 0 8px limegreen;
	box-shadow: inset 0 1px 1px limegreen, 0 0 8px limegreen;
}

.loader-background{
    position: fixed;
    background: #ffffffb3;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    display: none;
}
.loader-background div{
    margin-top: 30vh;
    margin-left: auto;
    margin-right: auto;
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

@media screen and (max-width: 450px) {
	.font-tag {
		font-size: 27px;
	}
}

@media screen and (max-width: 348px) {
	.design-card-side,
	.design-card-quantity {
		padding: 16px 2px;
	}
}

@media screen and (max-width: 316px) {
	.master-container {
		padding-right: 9px;
		padding-left: 9px;
	}
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}