/*------------------------------------------------------------------
    File Name: new_frontend.css
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/
@import url('../fonts/fonts-local.css');


/*----- Basic css -----*/

/* Variables Style */
:root {
	--white: #fff;
	--black: #0000;
	--font-style-nunito: 'Inter', sans-serif;
	--font-style: 'Inter', sans-serif;
	/** theme color primary */
	--primary-25: #F7FAFF;
	--primary-50: #eff4ff;
	--primary-100: #dce7fd;
	--primary-200: #c0d5fd;
	--primary-300: #95bbfb;
	--primary-400: #6396f7;
	--primary-base: #4a79f3;
	--primary-600: #2951e7;
	--primary-700: #213ed4;
	--primary-800: #2134ac;
	--primary-900: #203088;
	--primary-950: #182053;
	/** theme color grey */
	/** grey **/
    --grey-25: #FCFCFD;
	--grey-50: #F9FAFB;
	--grey-100: #F2F5F7;
	--grey-200: #EAECF0;
	--grey-300: #D0D5DD;
	--grey-400: #98A2B3;
	--grey-base: #667085;
	--grey-600: #475467;
	--grey-700: #344054;
	--grey-800: #1D2939;
	--grey-900: #101828;
    /** error red */
	--error-25: #FFFBFA;
	--error-50: #FEF3F2;
	--error-100: #FEE4E2;
	--error-200: #FECDCA;
	--error-300: #FDA29B;
	--error-400: #F97066;
	--error-base: #F04438;
	--error-600: #D92D20;
	--error-700: #B42318;
	--error-800: #912018;
	--error-900: #7A271A;
	/** error warning yellow */
	--warning-25: #FFFCF5;
	--warning-50: #FFFAEB;
	--warning-100: #FEF0C7;
	--warning-200: #FEDF89;
	--warning-300: #FEC84B;
	--warning-400: #FDB022;
	--warning-base: #F79009;
	--warning-600: #DC6803;
	--warning-700: #B54708;
	--warning-800: #93370D;
	--warning-900: #7A2E0E;
	/** error warning yellow */
	--success-25: #F6FEF9;
	--success-50: #ECFDF3;
	--success-100: #DCFAE6;
	--success-200: #ABEFC6;
	--success-300: #75E0A7;
	--success-400: #47CD89;
	--success-base: #17B26A;
	--success-600: #079455;
	--success-700: #067647;
	--success-800: #085D3A;
	--success-900: #074D31;
	/** shadow **/
	--box-shadow-extra-small: 0px 0.8404255509376526px 1.6808511018753052px 0px rgba(16, 24, 40, 0.05);
	--box-shadow-small: 0px 0.8404255509376526px 1.6808511018753052px 0px rgba(16, 24, 40, 0.06), 0px 0.8404255509376526px 2.5212767124176025px 0px rgba(16, 24, 40, 0.10);
	--box-shadow-medium: 0px 1.6808511018753052px 3.3617022037506104px -1.6808511018753052px rgba(16, 24, 40, 0.06), 0px 3.3617022037506104px 6.723404407501221px -1.6808511018753052px rgba(16, 24, 40, 0.10);
	--box-shadow-large: 0px 3.3617022037506104px 5.042553424835205px -1.6808511018753052px rgba(16, 24, 40, 0.03), 0px 10.08510684967041px 13.446808815002441px -3.3617022037506104px rgba(16, 24, 40, 0.08);
	--box-shadow-extra-large: 0px 6.723404407501221px 6.723404407501221px -3.3617022037506104px rgba(16, 24, 40, 0.03), 0px 16.80851173400879px 20.17021369934082px -3.3617022037506104px rgba(16, 24, 40, 0.08);
	--box-shadow-large-2x: 0px 20.17021369934082px 40.34042739868164px -10.08510684967041px rgba(16, 24, 40, 0.18);
	--box-shadow-large-3x: 0px 26.893617630004883px 53.787235260009766px -10.08510684967041px rgba(16, 24, 40, 0.14);
	/** border radius **/
	--radius-global-lg: 16px;
	--radius-global-md: 12px;
	--radius-global-sm: 8px;
	--radius-global: 8px;
	--bs-accordion-inner-border-radius: 8px;
	--bs-form-switch-bg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
	--bs-modal-width: 520px;
}

/* End Variables Style */

/* boostrap css */

.pb-4 {
    padding-bottom: 24px!important;
}
.px-4 {
    padding-right: 24px!important;
    padding-left: 24px!important;
}
/* boostrap css */

* {
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
	font-family: var(--font-style);
}

.grey-400 {
	color: var(--grey-400);
}


html,
body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	color: var(--grey-700);
	font-weight: normal;
	font-size: 14px;
}

body {
  background-color: #fff;
}

/* Button */
.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
	box-shadow: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
	background-color: var(--grey-200);
}

.success-base {
	color: var(--success-base);
}

.error-base {
	color: var(--error-base);
}

/* table section */

td {
	vertical-align: middle;
}

.responsive-table {
	width: 100%;
	overflow-x: auto;
	height: calc(100vh - 455px);
	position: relative;
}

.responsive-table thead {
	position: sticky;
	top: 0;
	left: 0;
}

.responsive-table table {
	margin-bottom: 0;
}

.responsive-table table th {
	color: var(--grey-400);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: 0.2px;
}

.responsive-table thead,
.responsive-table thead tr,
.responsive-table thead tr th {
	border-bottom: none;
}

.responsive-table table td {
	color: var(--grey-700);
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	/* 22.4px */
}

.table>:not(caption)>*>* {
	padding: 1rem 1.5rem;
}

svg.horizontal {
	transform: rotate(180deg);
}

.mt-4 {
    margin-top: 24px !important;
}

div#accordion-default {
    position: relative;
    top: 1px;
}

/* end table section */

/* global pagination start */

ul.pagination {
	padding: 1rem 1.5rem;
}

ul.pagination li {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 100%;
	/* 16px */
	letter-spacing: 0.2px;
	transition: ease all 0.25s;
}

ul.pagination li:hover,
ul.pagination li:focus {
	background-color: var(--grey-100);
}

ul.pagination li.disable svg {
	opacity: 0.35;
}

ul.pagination li+li {
	margin: 0 4px;
}

ul.pagination li:last-child {
	margin-right: 0;
}

ul.pagination li a {
	color: var(--grey-base);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

ul.pagination li.active a {
	color: var(--white);
}

.arrow-pagination {
	background-color: var(--grey-100);
}

ul.pagination li.active {
	background-color: var(--primary-base);
}

/* global pagination end */

/** toolip **/

a[data-bs-toggle="tooltip"] svg, a[data-bs-toggle="tooltip"] path {
    stroke: var(--grey-400);
	position: relative;
	top: 0;
}

a[data-bs-toggle="tooltip"]:hover svg, a[data-bs-toggle="tooltip"]:hover path,
a[data-bs-toggle="tooltip"]:focus svg, a[data-bs-toggle="tooltip"]:focus path {
	stroke: var(--primary-base);
}

.tooltip-inner {
    background-color: var(--grey-700);
    color: var(--white);
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    line-height: 18px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color:  var(--grey-700) !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-bottom-color:  var(--grey-700) !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-right-color:  var(--grey-700);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-left-color:  var(--grey-700);
}


/* input style */

label {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	/* 142.857% */
	color: var(--grey-900);
	margin-bottom: 6px;
}

label.light-label {
	color: var(--grey-400);
}

.ml-12 {
	margin-left: 12px;
}

.me-12 {
	margin-right: 12px;
}

input[type="text"], input[type="email"], select, select.form-select {
  width: 100%;
  background-color: var(--white);
  border: solid 1px var(--grey-300);
  padding: 5px 14px;
  height: 40px;
  border-radius: var(--radius-global-sm);
  font-size: 14px;
  line-height: normal;
  color: var(--grey-700);
  transition: ease all 0.25s;
  font-weight: 400;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

select.form-select option {
	padding: 8px 14px;
}

textarea {
	width: 100%;
	background-color: var(--grey-25);
	border: solid 1px var(--grey-300);
	padding: 10px 14px;
	min-height: 90px;
	border-radius: var(--radius-global-sm);
	font-size: 14px;
	line-height: normal;
	color: var(--grey-700);
	font-weight: normal;
	transition: ease all 0.25s;
	font-weight: 500;
}

textarea[readonly],
input.input-copy-readonly[type="text"] {
	background-color: var(--grey-100);
	border-color: var(--grey-300);
	box-shadow:  none;
	pointer-events: none;
	color: var(--grey-300);
}

textarea[readonly]:hover, textarea[readonly]:focus {
    background-color: var(--grey-100);
	border-color: var(--grey-300);
	box-shadow:  none;
}

select:hover,
select.form-select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:hover,
textarea:focus {
	border-color: var(--primary-400);
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
}

textarea.disable,
textarea.disable:hover,
textarea.disable:focus {
	background: var(--grey-100);
	color: var(--grey-300);
	border-color: var(--grey-300);
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
	pointer-events: none;
	cursor: none;
}

.form-control:focus {
	border-color: var(--primary-400);
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
}

.grey-column-b {
	background-color: var(--grey-50);
	border: solid 1px var(--grey-100);
	border-radius: var(--radius-global-md);
	overflow: hidden;
}

button {
	cursor: pointer;
}

/* phone number field */

body .separate-dial-code .flag-container .selected-flag .selected-dial-code {
    margin: 12px 0 11px !important;
}

.intl-tel-input.separate-dial-code .selected-flag {
	background-color: transparent !important;
}

body .intl-tel-input.separate-dial-code .selected-dial-code {
    font-weight: 500 !important;
    color: var(--grey-700) !important;
    font-size: 14px !important;
}

.p-4 {
    padding: 24px !important;
}

/* input style end */


/* Typography */

h1 {
	font-size: 40px;
	font-style: normal;
	line-height: 100%;
	/* 40px */
	letter-spacing: -0.5px;
	font-weight: 600;
}

h2 {
	font-size: 32px;
	font-style: normal;
	line-height: 100%;
	/* 32px */
	letter-spacing: -0.2px;
	font-weight: 600;
}

h3 {
	  font-size: 24px;
	  font-style: normal;
	  line-height: 135%;
	  font-weight: 600;
	  text-align: center;
	  letter-spacing: -0.24px;
}

h4 {
	font-size: 22px;
	font-style: normal;
	line-height: 135%;
	/* 29.7px */
	letter-spacing: -0.22px;
}

h5 {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.18px;
}

h6 {
	font-size: 14px;
	font-style: normal;
	line-height: 100%;
	/* 16px */
	letter-spacing: 0.2px;
	font-weight: 600;
}

.text-small {
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	/* 19.2px */
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--grey-700);
}

p.ex-large {
	font-size: 20px;
	font-style: normal;
	line-height: 150%;
	/* 30px */
	letter-spacing: 0.2px;
}

p.large {
	font-size: 16px;
	font-style: normal;
	line-height: 150%;
	font-weight: 400;
	letter-spacing: 0;
}

p {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	/* 21px */
}

p.small {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	/* 16.8px */
}

.basic-text {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	/* 14px */
}

.modal-body p {
	line-height: 150%;
}

.grey-500 {
	color: var(--grey-base);
}

.navbar-top li.active svg path {
    stroke: #fff;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

.simple-content-link {
	color: var(--primary-base);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dropdown-item.active,
.dropdown-item:active {
	color: var(--grey-700);
}

ul.dropdown-menu {
	box-shadow: 0px 0.78358px 3.9179px 0px rgba(0, 0, 0, 0.05);
	border: none;
	border: solid 1px var(--grey-200);
	padding: 4px 0;
	border-radius: var(--radius-global-sm);
}

.dropdown-item {
	color: var(--grey-700);
	border-radius: var(--radius-global);
	min-width: 153px;
}

.dropdown-menu li a {
	display: flex;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	padding: 11px 16px 11px 16px;
	align-items: center;
	border-radius: 0;
	margin: 0;
	color: var(--grey-700);
}

.dropdown-menu li a.danger {
	color: var(--error-base);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
	background: var(--grey-100);
}

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

.width-212 {
	max-width: 212px;
}

.social-info-content > span + h5 {
    margin-top: 16px;
}

.cr-viewport.cr-vp-square {
    border: solid var(--grey-300) 1px !important;
}

/* box shadow style */

.extra-small-shadow {
	box-shadow: var(--box-shadow-extra-small);
}

.small-shadow {
	box-shadow: var(--box-shadow-small);
}

.medium-shadow {
	box-shadow: var(--box-shadow-medium);
}

.large-shadow {
	box-shadow: var(--box-shadow-large);
}

.ex-large-shadow {
	box-shadow: var(--box-shadow-extra-large);
}

.large-2x-shadow {
	box-shadow: var(--box-shadow-large-2x);
}

.large-3x-shadow {
	box-shadow: var(--box-shadow-large-3);
}

a {
	color: var(--primary-base);
	text-decoration: none;
}

p a {
	color: var(--grey-700);
}

a:hover,
a:focus,
a:active {
	color: var(--dark);
}

p:hover a,
p:focus a {
	color: var(--primary-base);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.heading-off>span,
.heading-off {
	pointer-events: none;
}

.heading-off>span,
.heading-off,
.heading-off svg,
.heading-off path {
	color: var(--grey-300);
	stroke: var(--grey-300);
}

.heading-off>span svg {
	opacity: 0.20;
}

.preview-show .heading-off {
	display: none !important;
}

/* primary button */

.primary-btn {
	background-color: var(--primary-base);
	border: solid 1px var(--primary-base);
	color: var(--white);
	font-size: 14px;
	padding: 9px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.primary-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.primary-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.primary-btn:hover,
.primary-btn:focus,
.primary-btn:active {
	background-color: var(--primary-600);
	border-color: var(--primary-600);
	color: var(--white);
}

.primary-btn.white-btn {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--primary-base);
}

.primary-btn.white-btn.grey-txt {
	color: var(--grey-700);
}

.primary-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* grey button */

.grey-btn {
	background-color: var(--grey-100);
	border: solid 1px var(--grey-100);
	color: var(--grey-700);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.grey-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.grey-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.grey-btn:hover,
.grey-btn:focus,
.grey-btn:active {
	background-color: var(--grey-200);
	border-color: var(--grey-200);
	color: var(--grey-700);
}

.grey-btn.white-btn {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--primary-base);
}

.grey-btn.white-btn.grey-txt {
	color: var(--grey-700);
}

.grey-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* danger button */

.danger-btn {
	background-color: var(--error-50);
	border: solid 1px var(--error-50);
	color: var(--error-600);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.danger-btn:hover svg,
.danger-btn:hover path,
.danger-btn:focus svg,
.danger-btn:focus path {
	stroke: var(--white);
	transition: ease-in-out all 0.125s;
}

.danger-btn:hover,
.danger-btn:focus {
    background-color: var(--error-700);
    border-color: var(--error-700);
}

.danger-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.danger-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.danger-btn:hover,
.danger-btn:focus,
.danger-btn:active {
	background-color: var(--error-base);
	border-color: var(--error-base);
	color: var(--white);
}

.danger-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* danger button dark */

.danger-dark-btn {
	background-color: var(--error-base);
	border: solid 1px var(--error-base);
	color: var(--white);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.danger-dark-btn svg,
.danger-dark-btn path,
.danger-dark-btn:hover svg,
.danger-dark-btn:hover path,
.danger-dark-btn:focus svg,
.danger-dark-btn:focus path {
	stroke: var(--white);
	transition: ease-in-out all 0.125s;
}

.danger-dark-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.danger-dark-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.danger-dark-btn:hover,
.danger-dark-btn:focus,
.danger-dark-btn:active {
	background-color: var(--error-600);
	border-color: var(--error-600);
	color: var(--white);
}

.danger-dark-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* warning button */

.warning-btn {
	background-color: var(--warning-base);
	border: solid 1px var(--warning-base);
	color: var(--white);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.warning-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.warning-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.warning-btn:hover,
.warning-btn:focus,
.warning-btn:active {
	background-color: var(--warning-600);
	border-color: var(--warning-600);
	color: var(--white);
}

.warning-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* secondary button */
.secondary-btn {
	background-color: var(--white);
	border: solid 1px var(--primary-base);
	color: var(--primary-base);
	font-size: 14px;
	padding: 9px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.secondary-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.secondary-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.secondary-btn:hover,
.secondary-btn:focus {
	color: var(--primary-base);
	background-color: #F5F8FF;
	border-color: var(--primary-600);
}

.secondary-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* secondary grey btn */

a.secondary-btn.grey,
button.secondary-btn.grey {
	border-color: var(--grey-300);
	color: var(--grey-700);
}

button.secondary-btn.grey:hover,a.secondary-btn.grey:hover,
button.secondary-btn.grey:focus,a.secondary-btn.grey:focus {
	background-color: var(--grey-50);
	color: var(--grey-800);
}

/** secondary btn small */

.secondary-btn.grey-small {
	border-color: var(--grey-300);
	color: var(--grey-700);
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	background-color: var(--white);
}

.secondary-btn.grey-small:hover {
	background-color: var(--white);
}

/* border-button */

.border-button {
    background-color: var(--white);
    border: solid 1px var(--grey-200);
    padding: 9px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--primary-base);
    font-weight: 600;
    line-height: 24px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: var(--radius-global-sm);
	transition: ease all 0.25s;
}

.border-button:hover, .border-button:focus {
    color: var(--primary-base);
    border-color: var(--grey-300);
    background: var(--grey-50);
}

/* end border-button */

header {
    padding: 32px 24px;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
}


.left-content, .right-content {
  height: 100vh;
  width: 50%;
}

.whitelabel-left-content .login_box { max-height: 100%; }
.whitelabel-left-content .login_box form { padding-bottom: 2.5rem !important; }

.main {
    padding: 0;
    height: calc(100vh - 100px);
    display: flex;
}

.main::after {
    content: "";
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    /* background-image: url(../images/grandiant_bg.png); */
    background-color: var(--grey-50);
    background-size: 100% 100%;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: -1;
}

.left-content, .right-content {
  height: calc(100vh - 99px);
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.company_details_column {
  max-width: 387px;
  width: 100%;
  position: relative;
  top: -49px;
}

.top_content.text-align-center {
  text-align: center;
}

.top_content.text-align-center p {
  color: var(--grey-400);
  font-weight: 500;
  max-width: 338px;
  width: 100%;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
}

.company_details_column label {
    width: 100%;
    margin-bottom: 12px;
    position: relative;
    flex-flow: column;
    justify-content: flex-start;
    align-items: end;
}

.field.file-upload {
    border: solid var(--grey-200) 1px;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 16px;
    position: relative;
}

.field.file-upload label {
	margin-bottom: 0;
	cursor: pointer;
}

.field.file-upload p {
  margin-bottom: 0;
  color: var(--grey-base);
  font-size: 12px;
  margin-top: 4px;
}

.fixed-info {
  display: flex;
  align-items: center;
}

.fixed-info > span {
    border: solid var(--grey-300) 1px;
    height: 40px;
    border-radius: 8px 0 0px 8px;
    width: 79px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 12px;
    color: #98A2B3;
    border-right: none;
    position: absolute;
    left: 0;
    top: 0;
}

.fixed-info > span + input {
    border-radius: 0 8px 8px 0;
    width: calc(100% - 79px);
}

.image-column {
  width: 80px;
  height: 80px;
  background: #F2F4F7;
  border-radius: 80px;
  margin: 0 auto 12px;
}

.image-column img {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  object-fit: cover;
}

.field.file-upload label::before {
  content: "Upload logo";
  color: var(--primary-base);
  font-weight: 600;
  line-height: 100%;
}

.field.file-upload label input[type="file"] {
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  display: none;
  overflow: hidden;
}

.business-info {
    max-width: 576px;
    width: 100%;
    margin-top: -85px;
    position: relative;
    top: 0;
    left: 0;
}

/** right section **/

.power_icon span {
  width: 40px;
  height: 40px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
  border: 1px solid var(--Border-soft, #EAECF0);
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.power_icon {
  margin-bottom: 20px;
}

.business_info_content {
  border-bottom: solid #EAECF0 1px;
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.content-basic p {
  color: #475467;
}

.content-basic p a {
  color: var(--primary-base);
}

.price-info h4 {
  font-size: 24px;
}

.price-info > * {
  margin-bottom: 0;
}

.price-info {
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-bottom: 6px;
}

.price-info p {
  font-size: 16px;
  color: #98A2B3;
}

.price-info h4 {
  position: relative;
  top: 2px;
  left: 0;
}

.swft-list li {
  display: flex;
}

.swft-list .icon {
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  border: solid #EAECF0 1px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.swft-list h5 {
   margin-bottom: 0;
}

.swft-list li p {
    margin-bottom: 0;
    color: var(--grey-600);
}

.swft-list li {
    display: flex;
    padding-bottom: 32px;
    position: relative;
}

.swft-list li:last-child {
	padding-bottom: 0;
}

.swft-list li + li span.icon::before {
    background: var(--grey-200);
    content: "";
    width: 2px;
    height: 23px;
    position: absolute;
    top: -28px;
}

.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    color: var(--error-base);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
	border-color: var(--error-base);
}

button.delete-btn {
    position: absolute;
    background: #FEF3F2;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
}

.image-uploded .delete-btn {
	display: none;
}

.shape-header {
	display: none;
}

button.back-btn.secondary-btn.grey {
    display: none;
}

span.success-icon {
    width: 32px;
    height: 32px;
    display: block;
    background: #DCFAE6;
    border-radius: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
}

.success_msg {
    border-radius: 8px;
    border: 1px solid var(--grey-200);
    background: #fff;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-bottom: 24px;
}

.company_details_column p a {
	color: var(--primary-base);
}

@media (min-width: 1200px) and (max-width: 1340px) {
	.business-info {
	    padding: 0 32px;
	}
}


@media (min-width: 992px) and (max-width: 1199px) {
	.business-info {
	    max-width: 425px;
	}
}

@media (max-width: 991px) {

header {
    padding: 30px 24px;
    position: relative;
    /* background-image: url(../images/grandiant_bg_small.jpg); */
    background-color: var(--grey-50);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 32px;
}

header.whitelabel-header { background-color: transparent; }

.shape-header {
    width: 100%;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: auto;
    /* display: block; */
}

.logo {
    text-align: center;
}

.logo svg {
    width: 65px;
}

	.main {
	    padding: 0;
	    height: auto;
	    display: block;
	}
	.company_details_column {
	    max-width: 387px;
	    top: 0;
	}
	.left-content {
	    height: auto;
	    width: 100%;
	    margin-bottom: 32px;
	    padding: 0;
	}

	.right-content {
	    height: auto;
	    width: 100%;
	    margin-bottom: 20px;
	    padding: 0;
	}

	.business-info {
	    max-width: 387px;
	}
	.price-info {
	    align-items: flex-end;
	    justify-content: flex-start;
	    height: 100%;
	    padding-bottom: 0;
	    margin-top: 4px;
	}

	.main::after {
		display: none;
	}

	.business-info {
	    max-width: 100%;
	    width: 100%;
	    background: url(../images/grandiant_bg.png);
	    background-size: 100% 100%;
	    border-radius: 16px;
	    padding: 20px;
	    margin-top: 0;
	}

	.power_icon, .business_info_content, .swft-list {
	    max-width: 387px;
	    margin-left: auto;
	    margin-right: auto;
	}

	.main {
	    padding: 0 16px;
	}

.shape-header > svg {
    width: 100%;
    transform: rotatex(180deg);
}

button.back-btn.secondary-btn.grey {
    width: 36px;
    height: 36px;
    padding: 0;
    position: absolute;
    top: 16px;
    left: 16px;
    display: block;
}

}

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

.shape-header > svg {
    height: 35px;
}

}

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

.shape-header > svg {
    height: 28px;
}

}


@media (max-width: 575px) {

.shape-header > svg {
    height: 18px;
}

}
.company_pic_div {
	background-size: cover;
}

.successfull-animation {
    position: absolute;
    width: 100%;
    height: 190px;
    bottom: -5px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    cursor: none;
    overflow: hidden;
}

.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid {
    transition: ease all 0s;
}
@media (max-width: 767px)
{
	.xs-order-1 {
		order: -1;
	}
}

.swft-list li > span + span {
    width: calc(100% - 65px);
}

.button_section {
    margin-top: 16px;
}


@media (min-width: 576px) {

	.button_section .col-sm-6.col-xs-12 {
		padding: 0 6px;
	}

	.button_section > .row {
		margin: 0 -6px;
	}

}

@media (max-width: 575px) {

	.xs-order-1 {
		margin-bottom: 16px;
	}

}