@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
    --border-btn: #3384F9;
    --body-bg: #F6F7F9;
    --dark-black: #000;
    --white: #fff;
    --cloud-gray: #E5E7EB;
    --brown: #281D1B;
    --dark-slate: #181D27;
    --box-shadow: 0px 10px 15px -3px #F3F4F6, 0px 4px 6px -4px #F3F4F6;
    --offcanvas-border: #E9EAEB;
    --charcoal-gray: #414651;
    --charcoal: #181D27;
    --light-gray: #D5D7DA;
    --gray-slate: #717680;
    --light-brown: #333333;
    --slate-black: #6D6D6D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*Heading Font Sizes */
h1 {
    font-size: 34px;
    font-family: "Inter", sans-serif;
}

h2 {
    font-size: 24px;
    font-family: "Inter", sans-serif;
}

h3 {
    font-size: 22px;
    font-family: "Inter", sans-serif;
}

h4 {
    font-size: 17px;
    font-family: "Inter", sans-serif;
}

h5 {
    font-size: 14px;
    font-family: "Inter", sans-serif;
}

h6 {
    font-size: 13px;
    font-family: "Inter", sans-serif;
}

p {
    font-size: 12px;
    font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    word-break: break-word;
    margin: 0px;
}

p,
a,
span {
    line-height: 1.6;
    word-break: break-word;
    text-decoration: none;
}

ul,
ol {
    margin: 0px;
    padding: 0px;
}

li {
    font-size: 16px;
    font-family: "Inter", sans-serif;
}

p {
    margin: 0px;
}

/* Custom-Font-size */

.fs-20 {
    font-size: 20px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-28 {
    font-size: 28px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-22 {
    font-size: 22px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-17 {
    font-size: 17px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-16 {
    font-size: 16px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-15 {
    font-size: 15px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-14 {
    font-size: 14px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}

.fs-12 {
    font-size: 12px;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
}



/* custom-color-classes */
.slate-black {
    color: var(--slate-black);
}

.light-brown {
    color: var(--light-brown);
}

.brown {
    color: var(--brown);
}

.gray-slate {
    color: var(--gray-slate);
}

.charcoal {
    color: var(--charcoal);
}

.light-white {
    color: var(--white);
    opacity: 0.4;
}

.charcoal-gray {
    color: var(--charcoal-gray);
}

.bg_white {
    background: var(--white);
}

.text-dark-black {
    color: var(--dark-black);
}

.text-white {
    color: var(--white);
}

.text-dark-slate {
    color: var(--dark-slate);
}

.bg-dark-slate {
    background-color: var(--dark-slate);
}

.light-white {
    color: var(--white);
    opacity: 0.6;
}

.border-btn {
    color: var(--border-btn);
}

.bg-linear {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(90deg, var(--burnt-peach) 48.36%, #9D6FD9 100%);
}

.table_opacity {
    opacity: 0.6;
}

.border-radius {
    border-radius: 100px;
}

body {
    background-color: var(--body-bg) !important;
}

/* font-weight  */
.fw-700 {
    font-weight: 700;
}

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

.fw-500 {
    font-weight: 500;
}

.fw-400 {
    font-weight: 400;
}

.fw-300 {
    font-weight: 300;
}

.border_btn {
    border: 1px solid var(cloud-gray);
}

.email-field input#email,
.name-field input#name,
.number-field input#number,
.postal-code-field input#postal_code,

.email-field input#email,
.name-field input#name,
.password-field input#password{color: #000;}
.service-name-field input {
    border-radius: 5px;
    border: 1px solid #D5D7DA;
    background: var(--White);
    /* Shadow/xs */
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.logo-image {
    width: 320px;
    height: 45px;
}
.log-in-btn{
    border-radius: 100px;
    background: var(--border-btn);
    color: var(--white);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.password-field input#password,.email-field input#email{
 border-radius: 6px;
    border: 1px solid #D5D7DA;
    background: var(--White);
    /* Shadow/xs */
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    padding-right: 30px;
}
.business-name-field input#name,
.business-type-field input,
.business-address-repeater input,
.employees-field input,
.business-website-field input,
.business-email-field input,
.business-phone-number-field input{
    border-radius: 6px;
    border: 1px solid #D5D7DA;
    background: var(--White);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.business-phone-number-field .iti {
    width: 100%;
}
.staff-phone .iti__selected-flag{
    height: unset !important; padding: 16px 6px 0 8px !important; 
}

.form-group .invalid-feedback { display: block !important; margin-top: 1px; font-size: 1rem; line-height: 1; }
.form-group .invalid-feedback.d-block { margin-top: 5px; }