/*@import url(https://fonts.googleapis.com/css2?family=Open + Sans:wght@300..700&display=swap);*/
:root {
    --button-height: 4rem;
    --border-radius: 1rem;
    --font: "Poppins", serif;
    --theme-color: #108a00;
    --theme-color-hover: #e3fedf;
    --btn-disabled: #e0e0e0;
    --theme-accent-color: #e0ca3c;
    --background-color: #f6f6f6;
    --foreground-color: #fff;
    --secondary-foreground-color: #eaf2ed;
    --base-font-color: #6f6f77;
    --header-font-color: #111;
    --shadow-color: #00000022;
    --border-color: #ddd;
    --white: #fff;
    --background-orange: #ead8b7;
    --color-orange: #d58b00;
    --background-blue: #85cbfa;
    --color-blue: #0073ff;
    --background-red: #f8a1a1;
    --color-red: #da0808;
    --background-color-light: #effaec;
    font-size: 10px;
}
 * {
     box-sizing: border-box;
     font-family: var(--font);
     margin: 0;
     padding: 0;
     text-align: left;
}
 body, html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-color: #f6f6f6;
     background-color: var(--background-color);
     font-size: 1rem;
     font-weight: 400;
     margin: 0;
}
 h1, h2, h3, h4, h5, h6 {
     color: #6f6f77;
     color: var(--base-font-color);
     font-weight: 400;
}
 h1 {
     color: #111;
     color: var(--header-font-color);
     font-size: 3rem;
     margin: 1rem 0;
}
 h2 {
     font-size: 2rem;
}
 h3 {
     color: #111;
     color: var(--header-font-color);
     font-weight: 500;
}
 p {
     color: #6f6f77;
     color: var(--base-font-color);
     cursor: default;
     font-size: 1.5rem;
     font-weight: 400;
     line-height: 1.5;
     margin: 0.5rem 0 1rem;
}
 p a {
     color: #108a00;
     color: var(--theme-color);
     font-weight: 600;
}
 b {
     color: #111;
     color: var(--header-font-color);
     font-weight: 500;
}
 ul {
     padding-left: 1rem;
}
 li {
     font-weight: 500;
     line-height: 1.5;
     margin-bottom: 0.2rem;
}
 a {
     color: inherit;
     text-decoration: none;
}
 a:hover {
     text-decoration: underline;
}
 .big-section {
     font-size: 5rem;
     margin: 10rem 0;
     text-align: center;
}
 .container-left-padded {
     padding-left: 10rem;
     padding-right: 3.5rem;
}
 @media only screen and (max-width: 768px) {
     .container-left-padded {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
    }
}
/*# sourceMappingURL=main.c0cc4835.css.map*/
 .landing-page-hero-image {
     display: block;
     width: 100%;
}
 .hero-section {
     background-color: var(--foreground-color);
     overflow: hidden;
     padding: 0;
}
 .hero-section .padded {
     padding: 5rem 8px;
}
 .services-section {
     padding: 5rem 0;
}
 .themed-section {
     background-color: var(--theme-color);
     padding: 0;
}
 .themed-section .padded {
     padding: 5rem 8px;
}
 .text-center{
    text-align:center
}
 .team-section img {
     display: block;
     width: 100%;
}
 .header {
     color: var(--font-black);
     cursor: default;
     font-family: inherit!important;
     font-size: 3.5rem!important;
     font-weight: 400;
     line-height: 1.2;
     margin: 0 0 1rem;
     text-align: left;
     word-break: break-word;
}
 .header .fas.fa-check-circle {
     color: var(--success-font-color);
}
 .flex-start {
     align-items: center;
     display: flex;
     justify-content: flex-start;
}
 .logo-size {
     color: var(--theme-color);
     font-family: var(--font-one);
     font-size: 4rem;
     font-weight: 400;
     letter-spacing: 1.5rem;
     position: relative;
     text-transform: uppercase;
     z-index: 2;
}
 .bold {
     font-weight: bolder;
}
 .italic {
     font-style: italic;
}
 .header.danger {
     color: var(--error-font-color);
}
 .xxl-size {
     font-size: 7rem;
     line-height: 1.3;
}
 .xxl-size.uppercase {
     letter-spacing: 4rem;
}
 .xl-size {
     font-size: 5rem;
     line-height: 1.3;
}
 .xl-size.uppercase {
     letter-spacing: 2rem;
}
 .lg-size {
     font-size: 4rem;
     line-height: 1.3;
}
 .lg-size.uppercase {
     letter-spacing: 1.1rem;
     margin-left: 0.6rem;
}
 .md-size {
     font-size: 3.2rem;
     line-height: 1.3;
}
 .md-size.uppercase {
     letter-spacing: 1rem;
}
 .sm-size {
     font-size: 3rem;
     line-height: 1.2;
}
 .sm-size.uppercase {
     letter-spacing: 0.6rem;
}
 .xs-size {
     font-size: 2rem !important;
}
 .xs-size.uppercase {
     letter-spacing: 0.8rem;
     line-height: 1.7;
}
 .xxs-size {
     font-size: 1.5rem;
     letter-spacing: 0.7rem;
}
 .xxs-size.uppercase {
     letter-spacing: 0.6rem;
}
 .logo-size .fas {
     font-size: 15rem;
     left: 50%;
     opacity: 0.1;
     position: absolute;
     top: 50%;
     transform: translateX(-50%) translateY(-100%);
     z-index: 1;
}
 .light {
     font-weight: lighter;
}
 .upper {
     letter-spacing: 10px;
     text-transform: uppercase;
}
 .inline {
     display: inline-block;
}
 .accent {
     color: var(--theme-color);
}
 .black {
     color: var(--black);
}
 .white {
     color: var(--white) !important;
}
 .header.green {
     color: var(--green) !important;
}
 .header-tag {
     background-color: var(--accent-button-color);
     border-radius: 6rem;
     color: var(--base-font-color);
     font-size: 2rem;
     padding: 1rem 2rem;
     position: absolute;
     right: 0;
     top: 0;
}
 .uppercase {
     text-transform: uppercase;
}
 .gold {
     color: var(--theme-color);
}
 .light-gold {
     color: var(--light-gold-color);
}
 .silver {
     color: var(--theme-color);
     font-weight: 700;
}
 .alt {
     color: var(--main-background-color);
}
 .altThree, .altTwo {
     color: var(--border-color);
}
 .altThree {
     line-height: 1.5;
     opacity: 0.7;
}
 @media only screen and (max-width: 768px) {
     .xxl-size {
         font-size: 7rem;
         line-height: 1.3;
    }
     .xxl-size.uppercase {
         letter-spacing: 4rem;
    }
}
 .btn-primary {
     -webkit-tap-highlight-color: transparent;
     align-items: center;
     background: #0000;
     background: var(--theme-color);
     border: none;
     border-radius: var(--border-radius);
     color: var(--white);
     cursor: pointer;
     display: inline-flex;
     font-size: 1.5rem;
     font-weight: 700;
     height: var(--button-height);
     justify-content: center;
     margin-bottom: 1rem;
     margin-right: 1rem;
     min-width: 13rem;
     padding: 0 2.5rem;
     position: relative;
     transition: 0.2s;
     transition: all 0.1s ease-in-out;
     white-space: nowrap;
     z-index: 2;
}
 .btn-primary .fas {
     font-size: 2rem;
}
 .jumbotron-action .btn-primary .fas {
     font-size: 1.8rem;
     margin-right: 1rem;
}
 .noSelect {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
}
 .btn-chevron {
     -webkit-tap-highlight-color: transparent;
     background: #0000;
     border: none;
     color: var(--base-font-color);
     padding: 1rem;
     position: absolute;
     right: 1rem;
     top: 1rem;
     z-index: 1;
}
 .btn-circle {
     border: 1px solid var(--border-color) !important;
     border-radius: 50%;
     height: var(--button-height) !important;
     min-width: 0;
     min-width: auto;
     padding: 0 !important;
     width: var(--button-height) !important;
}
 h1 > button {
     position: relative;
     top: -5px;
}
 .btn-primary:active {
     transform: scale(0.99);
}
 .btn-primary.green {
     background: var(--button-color);
     color: var(--green);
}
 .btn-primary.red {
     background: var(--button-color);
     color: var(--red);
}
 .btn-primary.orange {
     background: var(--button-color);
     color: var(--orange);
}
 .btn-primary.purple {
     background: var(--button-color);
     color: var(--purple);
}
 .btn-primary.blue {
     background: var(--button-color);
     color: var(--blue);
}
 .btn-primary.anti-red {
     background: var(--red);
     color: var(--white);
}
 .btn-primary.anti-orange {
     background: var(--orange);
     color: var(--white);
}
 .btn-primary.anti-purple {
     background: var(--purple);
     color: var(--white);
}
 .btn-primary.anti-blue {
     background: var(--blue);
     color: var(--white);
}
 .btn-primary.anti-green {
     background: var(--green);
     color: var(--white);
}
 .answer-actions > button:not(.collapse-read-btn) {
     align-items: center;
     background: var(--main-background-color);
     border: none;
     color: var(--glass-button-font-color);
     cursor: pointer;
     display: inline-flex;
     font-size: 1.4rem;
     height: 4rem;
     justify-content: center;
}
 .answers-new-container .answer-actions > button:not(.collapse-read-btn) {
     color: var(--theme-color);
     width: 22%;
}
 .btn-small {
     font-size: 1.4rem;
     height: 4rem !important;
     min-width: 10rem;
     padding: 0 2.5rem;
}
 .btn-primary > span:first-child {
     align-items: center;
     color: inherit !important;
     display: flex;
     justify-content: center;
     margin-left: 0;
     margin-right: -0.5rem;
     width: 100%;
}
 .btn-primary > span:last-child {
     margin-right: 0;
}
 .btn-accent {
     background-color: var(--background-color);
     background-image: none;
     color: var(--base-font-color);
     height: var(--button-height);
     margin-bottom: 2rem;
}
 .btn-accent.btn-accent-alt {
     color: var(--main-background-color);
}
 .btn-colored {
     background: var(--theme-color);
     border-color: var(--theme-color);
     color: var(--white);
}
 .btn-accent:active, .btn-accent:focus {
     box-shadow: none !important;
}
 .btn-disabled {
     background-color: var(--btn-disabled) !important;
     color: var(--base-font-color);
     cursor: not-allowed;
     opacity: 0.8;
     pointer-events: none;
}
 .btn-no-hover:hover {
     box-shadow: none;
}
 a {
     color: var(--base-font-color);
}
 .btn-white-font {
     color: var(--white);
}
 .btn-white {
     background: var(--main-background-color);
     color: var(--base-font-color);
}
 .btn-big {
     font-size: 1.4rem;
     height: var(--button-height);
     min-width: 100px !important;
     padding: 3.5rem 3rem !important;
}
 .btn-round {
     border-radius: 55px;
}
 .btn-full-round {
     border-radius: 40px !important;
}
 .btn-mar-right {
     margin-right: 1rem;
}
 .no-mar-right {
     margin-right: 0;
}
 .btn-primary .fa-check-circle {
     font-size: 2rem;
     margin-right: 1rem;
}
 .fileContainer p {
     text-align: center;
     width: 100%;
}
 .fileContainer .uploadIcon {
     height: 50px;
     margin: 2rem auto 0;
     width: 50px;
}
 .btn-icon {
     margin-right: 10px;
}
 button {
     font-family: var(--font-one), sans-serif !important;
}
 button:focus {
     box-shadow: none;
     outline: none;
}
 .btn-very-small {
     border: 1px solid;
     box-shadow: none;
     font-size: 1rem;
     height: 2.8rem;
     margin-left: 1rem !important;
     margin-top: 0 !important;
     padding: 0 1.2rem;
}
 .btn-no-shadow, .btn-no-shadow:focus, .btn-no-shadow:hover {
     box-shadow: none !important;
}
 .btn-danger {
     background-color: var(--card-background);
     background-color: var(--error-font-color);
     border: 1px solid maroon;
     color: maroon;
}
 .btn-alt, .btn-alt:hover {
     background: var(--main-background-color);
     color: var(--theme-color);
}
 .btn-alt-white {
     border: 1px solid var(--white);
     color: var(--white);
}
 .btn-primary {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
}
 button div {
     align-items: center;
     background-color: var(--theme-color) !important;
     border-radius: 50%;
     color: var(--white) !important;
     display: inline-flex;
     font-size: 2rem;
     height: 4rem;
     justify-content: center;
     margin-left: 2rem;
     margin-right: 5px;
     width: 5rem;
}
 .btn-link {
     background: none !important;
     box-shadow: none !important;
     color: var(--base-font-color) !important;
     display: inline-flex !important;
     height: 3rem !important;
     margin-right: 4rem !important;
     min-width: auto !important;
     padding: 0 !important;
     width: auto !important;
}
 .simple-link {
     font-weight: 700;
}
 .btn-link:hover, .simple-link {
     text-decoration: underline !important;
}
 button .lnr {
     font-size: 3rem !important;
}
 .button-active-tab {
     background-color: var(--theme-color);
     border-radius: var(--border-radius);
     bottom: 0;
     height: 3px;
     left: 0;
     position: absolute;
     width: 100%;
}
 @keyframes stroke {
     to {
         stroke-dashoffset: 0;
    }
}
 @keyframes scale {
     0%, to {
         transform: none;
    }
     50% {
         transform: scale3d(1.1, 1.1, 1);
    }
}
 @keyframes fill {
     to {
         box-shadow: inset 0 0 0 30px var(--main-background-color);
    }
}
 .no-full-on-mobile {
     min-width: 9rem !important;
     width: auto !important;
}
 @media only screen and (max-width: 766px) {
     .btn-primary .fas {
         margin-right: 0.5rem;
    }
     .btn-primary.btn-circle .fas {
         margin-right: 0;
    }
     .btn-primary {
         font-size: 1.6rem;
         height: 4rem;
         margin-top: 1rem !important;
         min-width: auto;
         padding: 0 2rem;
    }
     .btn-small {
         height: 4rem;
         width: auto;
    }
     .btn-circle {
         font-size: 2rem;
         margin-top: 0 !important;
    }
     .btn-very-small {
         height: 2.4rem;
    }
     button[class="btn-primary"]:hover {
         box-shadow: none !important;
    }
}
 .container {
     box-sizing: border-box;
     margin-left: auto;
     margin-right: auto;
     padding-left: 8px;
     padding-right: 8px;
}
 .container-fluid {
     padding-left: 16px;
     padding-right: 16px;
}
 @media only screen and (min-width: 576px) {
     .container {
         max-width: 100%;
         width: 560px;
    }
}
 @media only screen and (min-width: 768px) {
     .container {
         max-width: 100%;
         width: 752px;
    }
}
 @media only screen and (min-width: 992px) {
     .container {
         max-width: 100%;
         width: 976px;
    }
}
 @media only screen and (min-width: 1200px) {
     .container {
         max-width: 100%;
         width: 1184px;
    }
}
 .row {
     box-sizing: border-box;
     display: flex;
     flex: 0 1 auto;
     flex-direction: row;
     flex-wrap: wrap;
     margin-left: -8px;
     margin-right: -8px;
}
 .row.reverse {
     flex-direction: row-reverse;
}
 .col.reverse {
     flex-direction: column-reverse;
}
 .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-offset-0, .col-lg-offset-1, .col-lg-offset-10, .col-lg-offset-11, .col-lg-offset-12, .col-lg-offset-2, .col-lg-offset-3, .col-lg-offset-4, .col-lg-offset-5, .col-lg-offset-6, .col-lg-offset-7, .col-lg-offset-8, .col-lg-offset-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-offset-0, .col-md-offset-1, .col-md-offset-10, .col-md-offset-11, .col-md-offset-12, .col-md-offset-2, .col-md-offset-3, .col-md-offset-4, .col-md-offset-5, .col-md-offset-6, .col-md-offset-7, .col-md-offset-8, .col-md-offset-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-offset-0, .col-sm-offset-1, .col-sm-offset-10, .col-sm-offset-11, .col-sm-offset-12, .col-sm-offset-2, .col-sm-offset-3, .col-sm-offset-4, .col-sm-offset-5, .col-sm-offset-6, .col-sm-offset-7, .col-sm-offset-8, .col-sm-offset-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-offset-0, .col-xl-offset-1, .col-xl-offset-10, .col-xl-offset-11, .col-xl-offset-12, .col-xl-offset-2, .col-xl-offset-3, .col-xl-offset-4, .col-xl-offset-5, .col-xl-offset-6, .col-xl-offset-7, .col-xl-offset-8, .col-xl-offset-9, .col-xs, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9 {
     box-sizing: border-box;
     flex: 0 0 auto;
     flex-basis: 100%;
     max-width: 100%;
     padding-left: 8px;
     padding-right: 8px;
}
 .col-xs {
     flex-basis: 0;
     flex-grow: 1;
     max-width: 100%;
}
 .col-xs-1 {
     flex-basis: 8.33333333%;
     max-width: 8.33333333%;
}
 .col-xs-2 {
     flex-basis: 16.66666667%;
     max-width: 16.66666667%;
}
 .col-xs-3 {
     flex-basis: 25%;
     max-width: 25%;
}
 .col-xs-4 {
     flex-basis: 33.33333333%;
     max-width: 33.33333333%;
}
 .col-xs-5 {
     flex-basis: 41.66666667%;
     max-width: 41.66666667%;
}
 .col-xs-6 {
     flex-basis: 50%;
     max-width: 50%;
}
 .col-xs-7 {
     flex-basis: 58.33333333%;
     max-width: 58.33333333%;
}
 .col-xs-8 {
     flex-basis: 66.66666667%;
     max-width: 66.66666667%;
}
 .col-xs-9 {
     flex-basis: 75%;
     max-width: 75%;
}
 .col-xs-10 {
     flex-basis: 83.33333333%;
     max-width: 83.33333333%;
}
 .col-xs-11 {
     flex-basis: 91.66666667%;
     max-width: 91.66666667%;
}
 .col-xs-12 {
     flex-basis: 100%;
     max-width: 100%;
}
 .col-xs-offset-0 {
     margin-left: 0;
}
 .col-xs-offset-1 {
     margin-left: 8.33333333%;
}
 .col-xs-offset-2 {
     margin-left: 16.66666667%;
}
 .col-xs-offset-3 {
     margin-left: 25%;
}
 .col-xs-offset-4 {
     margin-left: 33.33333333%;
}
 .col-xs-offset-5 {
     margin-left: 41.66666667%;
}
 .col-xs-offset-6 {
     margin-left: 50%;
}
 .col-xs-offset-7 {
     margin-left: 58.33333333%;
}
 .col-xs-offset-8 {
     margin-left: 66.66666667%;
}
 .col-xs-offset-9 {
     margin-left: 75%;
}
 .col-xs-offset-10 {
     margin-left: 83.33333333%;
}
 .col-xs-offset-11 {
     margin-left: 91.66666667%;
}
 .start-xs {
     justify-content: flex-start;
     text-align: start;
}
 .center-xs {
     justify-content: center;
     text-align: center;
}
 .end-xs {
     justify-content: flex-end;
     text-align: end;
}
 .top-xs {
     align-items: flex-start;
}
 .middle-xs {
     align-items: center;
}
 .bottom-xs {
     align-items: flex-end;
}
 .around-xs {
     justify-content: space-around;
}
 .between-xs {
     justify-content: space-between;
}
 .first-xs {
     order: -1;
}
 .last-xs {
     order: 1;
}
 .initial-order-xs {
     order: 0;
}
 @media only screen and (min-width: 576px) {
     .col-sm {
         flex-basis: 0;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-sm-1 {
         flex-basis: 8.33333333%;
         max-width: 8.33333333%;
    }
     .col-sm-2 {
         flex-basis: 16.66666667%;
         max-width: 16.66666667%;
    }
     .col-sm-3 {
         flex-basis: 25%;
         max-width: 25%;
    }
     .col-sm-4 {
         flex-basis: 33.33333333%;
         max-width: 33.33333333%;
    }
     .col-sm-5 {
         flex-basis: 41.66666667%;
         max-width: 41.66666667%;
    }
     .col-sm-6 {
         flex-basis: 50%;
         max-width: 50%;
    }
     .col-sm-7 {
         flex-basis: 58.33333333%;
         max-width: 58.33333333%;
    }
     .col-sm-8 {
         flex-basis: 66.66666667%;
         max-width: 66.66666667%;
    }
     .col-sm-9 {
         flex-basis: 75%;
         max-width: 75%;
    }
     .col-sm-10 {
         flex-basis: 83.33333333%;
         max-width: 83.33333333%;
    }
     .col-sm-11 {
         flex-basis: 91.66666667%;
         max-width: 91.66666667%;
    }
     .col-sm-12 {
         flex-basis: 100%;
         max-width: 100%;
    }
     .col-sm-offset-0 {
         margin-left: 0;
    }
     .col-sm-offset-1 {
         margin-left: 8.33333333%;
    }
     .col-sm-offset-2 {
         margin-left: 16.66666667%;
    }
     .col-sm-offset-3 {
         margin-left: 25%;
    }
     .col-sm-offset-4 {
         margin-left: 33.33333333%;
    }
     .col-sm-offset-5 {
         margin-left: 41.66666667%;
    }
     .col-sm-offset-6 {
         margin-left: 50%;
    }
     .col-sm-offset-7 {
         margin-left: 58.33333333%;
    }
     .col-sm-offset-8 {
         margin-left: 66.66666667%;
    }
     .col-sm-offset-9 {
         margin-left: 75%;
    }
     .col-sm-offset-10 {
         margin-left: 83.33333333%;
    }
     .col-sm-offset-11 {
         margin-left: 91.66666667%;
    }
     .start-sm {
         justify-content: flex-start;
         text-align: start;
    }
     .center-sm {
         justify-content: center;
         text-align: center;
    }
     .end-sm {
         justify-content: flex-end;
         text-align: end;
    }
     .top-sm {
         align-items: flex-start;
    }
     .middle-sm {
         align-items: center;
    }
     .bottom-sm {
         align-items: flex-end;
    }
     .around-sm {
         justify-content: space-around;
    }
     .between-sm {
         justify-content: space-between;
    }
     .first-sm {
         order: -1;
    }
     .last-sm {
         order: 1;
    }
     .initial-order-sm {
         order: 0;
    }
}
 @media only screen and (min-width: 768px) {
     .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-offset-0, .col-md-offset-1, .col-md-offset-10, .col-md-offset-11, .col-md-offset-12, .col-md-offset-2, .col-md-offset-3, .col-md-offset-4, .col-md-offset-5, .col-md-offset-6, .col-md-offset-7, .col-md-offset-8, .col-md-offset-9 {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding-left: 8px;
         padding-right: 8px;
    }
     .col-md {
         flex-basis: 0;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-md-1 {
         flex-basis: 8.33333333%;
         max-width: 8.33333333%;
    }
     .col-md-2 {
         flex-basis: 16.66666667%;
         max-width: 16.66666667%;
    }
     .col-md-3 {
         flex-basis: 25%;
         max-width: 25%;
    }
     .col-md-4 {
         flex-basis: 33.33333333%;
         max-width: 33.33333333%;
    }
     .col-md-5 {
         flex-basis: 41.66666667%;
         max-width: 41.66666667%;
    }
     .col-md-6 {
         flex-basis: 50%;
         max-width: 50%;
    }
     .col-md-7 {
         flex-basis: 58.33333333%;
         max-width: 58.33333333%;
    }
     .col-md-8 {
         flex-basis: 66.66666667%;
         max-width: 66.66666667%;
    }
     .col-md-9 {
         flex-basis: 75%;
         max-width: 75%;
    }
     .col-md-10 {
         flex-basis: 83.33333333%;
         max-width: 83.33333333%;
    }
     .col-md-11 {
         flex-basis: 91.66666667%;
         max-width: 91.66666667%;
    }
     .col-md-12 {
         flex-basis: 100%;
         max-width: 100%;
    }
     .col-md-offset-0 {
         margin-left: 0;
    }
     .col-md-offset-1 {
         margin-left: 8.33333333%;
    }
     .col-md-offset-2 {
         margin-left: 16.66666667%;
    }
     .col-md-offset-3 {
         margin-left: 25%;
    }
     .col-md-offset-4 {
         margin-left: 33.33333333%;
    }
     .col-md-offset-5 {
         margin-left: 41.66666667%;
    }
     .col-md-offset-6 {
         margin-left: 50%;
    }
     .col-md-offset-7 {
         margin-left: 58.33333333%;
    }
     .col-md-offset-8 {
         margin-left: 66.66666667%;
    }
     .col-md-offset-9 {
         margin-left: 75%;
    }
     .col-md-offset-10 {
         margin-left: 83.33333333%;
    }
     .col-md-offset-11 {
         margin-left: 91.66666667%;
    }
     .start-md {
         justify-content: flex-start;
         text-align: start;
    }
     .center-md {
         justify-content: center;
         text-align: center;
    }
     .end-md {
         justify-content: flex-end;
         text-align: end;
    }
     .top-md {
         align-items: flex-start;
    }
     .middle-md {
         align-items: center;
    }
     .bottom-md {
         align-items: flex-end;
    }
     .around-md {
         justify-content: space-around;
    }
     .between-md {
         justify-content: space-between;
    }
     .first-md {
         order: -1;
    }
     .last-md {
         order: 1;
    }
     .initial-order-md {
         order: 0;
    }
}
 @media only screen and (min-width: 992px) {
     .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-offset-0, .col-lg-offset-1, .col-lg-offset-10, .col-lg-offset-11, .col-lg-offset-12, .col-lg-offset-2, .col-lg-offset-3, .col-lg-offset-4, .col-lg-offset-5, .col-lg-offset-6, .col-lg-offset-7, .col-lg-offset-8, .col-lg-offset-9 {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding-left: 8px;
         padding-right: 8px;
    }
     .col-lg {
         flex-basis: 0;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-lg-1 {
         flex-basis: 8.33333333%;
         max-width: 8.33333333%;
    }
     .col-lg-2 {
         flex-basis: 16.66666667%;
         max-width: 16.66666667%;
    }
     .col-lg-3 {
         flex-basis: 25%;
         max-width: 25%;
    }
     .col-lg-4 {
         flex-basis: 33.33333333%;
         max-width: 33.33333333%;
    }
     .col-lg-5 {
         flex-basis: 41.66666667%;
         max-width: 41.66666667%;
    }
     .col-lg-6 {
         flex-basis: 50%;
         max-width: 50%;
    }
     .col-lg-7 {
         flex-basis: 58.33333333%;
         max-width: 58.33333333%;
    }
     .col-lg-8 {
         flex-basis: 66.66666667%;
         max-width: 66.66666667%;
    }
     .col-lg-9 {
         flex-basis: 75%;
         max-width: 75%;
    }
     .col-lg-10 {
         flex-basis: 83.33333333%;
         max-width: 83.33333333%;
    }
     .col-lg-11 {
         flex-basis: 91.66666667%;
         max-width: 91.66666667%;
    }
     .col-lg-12 {
         flex-basis: 100%;
         max-width: 100%;
    }
     .col-lg-offset-0 {
         margin-left: 0;
    }
     .col-lg-offset-1 {
         margin-left: 8.33333333%;
    }
     .col-lg-offset-2 {
         margin-left: 16.66666667%;
    }
     .col-lg-offset-3 {
         margin-left: 25%;
    }
     .col-lg-offset-4 {
         margin-left: 33.33333333%;
    }
     .col-lg-offset-5 {
         margin-left: 41.66666667%;
    }
     .col-lg-offset-6 {
         margin-left: 50%;
    }
     .col-lg-offset-7 {
         margin-left: 58.33333333%;
    }
     .col-lg-offset-8 {
         margin-left: 66.66666667%;
    }
     .col-lg-offset-9 {
         margin-left: 75%;
    }
     .col-lg-offset-10 {
         margin-left: 83.33333333%;
    }
     .col-lg-offset-11 {
         margin-left: 91.66666667%;
    }
     .start-lg {
         justify-content: flex-start;
         text-align: start;
    }
     .center-lg {
         justify-content: center;
         text-align: center;
    }
     .end-lg {
         justify-content: flex-end;
         text-align: end;
    }
     .top-lg {
         align-items: flex-start;
    }
     .middle-lg {
         align-items: center;
    }
     .bottom-lg {
         align-items: flex-end;
    }
     .around-lg {
         justify-content: space-around;
    }
     .between-lg {
         justify-content: space-between;
    }
     .first-lg {
         order: -1;
    }
     .last-lg {
         order: 1;
    }
     .initial-order-lg {
         order: 0;
    }
}
 @media only screen and (min-width: 1200px) {
     .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-offset-0, .col-xl-offset-1, .col-xl-offset-10, .col-xl-offset-11, .col-xl-offset-12, .col-xl-offset-2, .col-xl-offset-3, .col-xl-offset-4, .col-xl-offset-5, .col-xl-offset-6, .col-xl-offset-7, .col-xl-offset-8, .col-xl-offset-9 {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding-left: 8px;
         padding-right: 8px;
    }
     .col-xl {
         flex-basis: 0;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-xl-1 {
         flex-basis: 8.33333333%;
         max-width: 8.33333333%;
    }
     .col-xl-2 {
         flex-basis: 16.66666667%;
         max-width: 16.66666667%;
    }
     .col-xl-3 {
         flex-basis: 25%;
         max-width: 25%;
    }
     .col-xl-4 {
         flex-basis: 33.33333333%;
         max-width: 33.33333333%;
    }
     .col-xl-5 {
         flex-basis: 41.66666667%;
         max-width: 41.66666667%;
    }
     .col-xl-6 {
         flex-basis: 50%;
         max-width: 50%;
    }
     .col-xl-7 {
         flex-basis: 58.33333333%;
         max-width: 58.33333333%;
    }
     .col-xl-8 {
         flex-basis: 66.66666667%;
         max-width: 66.66666667%;
    }
     .col-xl-9 {
         flex-basis: 75%;
         max-width: 75%;
    }
     .col-xl-10 {
         flex-basis: 83.33333333%;
         max-width: 83.33333333%;
    }
     .col-xl-11 {
         flex-basis: 91.66666667%;
         max-width: 91.66666667%;
    }
     .col-xl-12 {
         flex-basis: 100%;
         max-width: 100%;
    }
     .col-xl-offset-0 {
         margin-left: 0;
    }
     .col-xl-offset-1 {
         margin-left: 8.33333333%;
    }
     .col-xl-offset-2 {
         margin-left: 16.66666667%;
    }
     .col-xl-offset-3 {
         margin-left: 25%;
    }
     .col-xl-offset-4 {
         margin-left: 33.33333333%;
    }
     .col-xl-offset-5 {
         margin-left: 41.66666667%;
    }
     .col-xl-offset-6 {
         margin-left: 50%;
    }
     .col-xl-offset-7 {
         margin-left: 58.33333333%;
    }
     .col-xl-offset-8 {
         margin-left: 66.66666667%;
    }
     .col-xl-offset-9 {
         margin-left: 75%;
    }
     .col-xl-offset-10 {
         margin-left: 83.33333333%;
    }
     .col-xl-offset-11 {
         margin-left: 91.66666667%;
    }
     .start-xl {
         justify-content: flex-start;
         text-align: start;
    }
     .center-xl {
         justify-content: center;
         text-align: center;
    }
     .end-xl {
         justify-content: flex-end;
         text-align: end;
    }
     .top-xl {
         align-items: flex-start;
    }
     .middle-xl {
         align-items: center;
    }
     .bottom-xl {
         align-items: flex-end;
    }
     .around-xl {
         justify-content: space-around;
    }
     .between-xl {
         justify-content: space-between;
    }
     .first-xl {
         order: -1;
    }
     .last-xl {
         order: 1;
    }
     .initial-order-xl {
         order: 0;
    }
}
 @media only screen and (max-width: 575px) {
     .hidden-xs {
         display: none;
    }
}
 @media only screen and (min-width: 576px) and (max-width: 767px) {
     .hidden-sm {
         display: none;
    }
}
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .hidden-md {
         display: none;
    }
}
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
     .hidden-lg {
         display: none;
    }
}
 @media only screen and (min-width: 1200px) {
     .hidden-xl {
         display: none;
    }
}
 /*.card > div {
     border-radius: var(--border-radius);
     height: 100%;
     overflow: hidden;
     padding: 3rem;
     position: relative;
     width: 100%;
     z-index: 2;
}*/
 .card .tag {
     background: var(--theme-color);
     border-radius: 0 var(--small-radius) 0 var(--small-radius);
     color: var(--white);
     padding: 1rem 2rem;
     position: absolute;
     right: 0;
     text-transform: uppercase;
     top: 0;
}
 .card-actions {
     margin-top: 2rem;
}
 .card.green > div {
     background: var(--card-background-green);
}
 .card.green .card-icon {
     background-color: var(--white);
     color: var(--green);
}
 .card .card-icon.danger {
     animation: danger 2.4s ease-in-out infinite;
}
 @keyframes danger {
     0% {
         color: var(--red);
    }
     50% {
         color: var(--theme-color);
    }
     to {
         color: var(--red);
    }
}
 .card.green .header {
     color: var(--green);
}
 .card.purple > div {
     background: var(--card-background-purple);
}
 .card.purple .card-icon {
     background-color: var(--white);
     color: var(--purple);
}
 .card.purple .header {
     color: var(--purple);
}
 .card.blue > div {
     background: var(--card-background-blue);
}
 .card.blue .card-icon {
     background-color: var(--white);
     color: var(--blue);
}
 .card.blue .header {
     color: var(--blue);
}
 .card.red > div {
     background: var(--card-background-red);
}
 .card-icon-big {
     bottom: 0;
     display: none;
     font-size: 30rem;
     opacity: 0.15;
     position: absolute;
     right: 0;
     transform: rotate(-25deg) translateX(10%);
     z-index: -2;
}
 .card.red .card-icon {
     background-color: var(--white);
     color: var(--red);
}
 .card.red .header {
     color: var(--red);
}
 .card.orange > div {
     background: var(--card-background-orange);
}
 .card.orange .card-icon {
     background-color: var(--white);
     color: var(--orange);
}
 .card.orange .header {
     color: var(--orange);
}
 .card {
     height: 100%;
     position: relative;
}
 .card-circle-one {
     background: var(--btn-gradient);
     border-radius: 50%;
     height: 200px;
     position: absolute;
     right: 0;
     top: 35%;
     transform: translateX(65%) translateY(50%);
     transition: all 1s ease;
     width: 200px;
}
 .card:hover .card-circle-one {
     transform: translateX(65%) translateY(55%);
}
 .card:hover .card-circle-two {
     transform: translateX(86%) translateY(43%);
}
 .card > span {
     border-radius: var(--border-radius);
     display: block;
     height: 10rem;
     overflow: hidden;
     position: absolute;
     right: 0;
     top: 1rem;
     width: 10rem;
     z-index: 1;
}
 .card > span > .card-blob {
     background-color: var(--theme-color);
     border-radius: 50%;
     display: block;
     height: 9rem;
     left: 2rem;
     position: relative;
     top: -3rem;
     z-index: 1;
}
 .card .background {
     background-position: 50%;
     background-repeat: no-repeat;
     background-size: 200%;
     border-radius: var(--border-radius);
     height: 300px;
     margin-bottom: 3rem;
     right: 20px;
     top: 60%;
     width: 100%;
     z-index: auto;
}
 .card .background:after {
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1;
}
 .card .card-icon {
     align-items: center;
     background: var(--border-color);
     border-radius: var(--small-radius);
     color: var(--theme-color);
     display: inline-flex;
     font-size: 2.4rem;
     font-weight: bolder;
     height: 6rem;
     justify-content: center;
     line-height: 1;
     margin: 0 3rem 2rem 0;
     padding: 2rem;
     text-align: center;
     transition: all 0.4s ease;
     vertical-align: top;
     width: 6rem;
}
 .card-link:hover .card-icon {
     background-color: var(--main-background-color);
     box-shadow: -2rem -2rem 10rem 0 var(--base-font-color);
}
 .card-busy > div {
     filter: grayscale(1);
     opacity: 0.2;
}
 .card-children {
     display: inline-block;
     position: relative;
     text-align: left;
     width: 100%;
     z-index: 3;
}
 .card.colored > div:not(.svg-icon) {
     background-color: var(--theme-color);
     background-image: linear-gradient(357deg, #00000022, #0000);
     border: none;
}
 .footer .card.colored {
     border-radius: var(--small-radius);
}
 .card.alt {
     background-image: none;
     box-shadow: none;
}
 .card.alt > div {
     background-color: var(--card-background);
     box-shadow: none;
}
 .card .card > div {
     background: var(--main-background-color);
     padding: 1.2rem 2rem;
}
 .card .card {
     background: var(--background-color);
     border-radius: 18px;
     margin: 0;
     padding-bottom: 0;
     padding-top: 2rem !important;
     text-align: left;
}
 .card .right-component {
     position: absolute;
     right: 6rem;
     top: 0;
     transform: scale(0.4) translateY(-50%);
     transform-origin: right;
}
 .card .svg-icon {
     background: #0000;
     height: auto;
     padding: 0;
     right: 0;
     text-align: end;
     top: 0;
     width: 100%;
     z-index: 11;
}
 .card .svg-icon img {
     height: 15rem;
}
 .card-user-dp {
     border-radius: 50%;
     height: 100px;
     width: 100px;
}
 .card-link .header {
     line-height: 1.3;
     margin-bottom: 0.3rem;
}
 .expandable-header {
     align-items: center;
     display: flex;
     font-size: 2.2rem;
     font-weight: 700;
     justify-content: space-between;
}
 .expandable-header button {
     align-items: center;
     border: none !important;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     flex: none !important;
     font-size: 2rem;
     height: 4rem;
     justify-content: center;
     width: 5rem;
}
 .expandable-header.onExpand button {
     border-radius: var(--border-radius);
     font-weight: 700;
     width: 10rem !important;
}
 .expandable-header .header {
     margin-bottom: 0 !important;
}
 .card-expandable > div {
     padding-left: 0;
     padding-right: 0;
}
 @media only screen and (max-width: 768px) {
     .card .svg-icon {
         height: 113%;
         left: 50%;
         opacity: 0.1;
         position: absolute;
         top: 3rem;
         width: 50%;
         z-index: -1;
    }
     .card .svg-icon > img {
         height: 100% !important;
         width: 100% !important;
    }
     .card-children {
         font-size: 2rem;
         position: relative;
    }
     .card-children .btn-primary {
         margin-right: 0 !important;
         margin-right: 1rem !important;
    }
     .card-actions {
         padding-top: 0;
    }
     .card-actions > div {
         bottom: 0;
         left: 0;
         position: relative;
    }
     .card > div {
         padding: 3rem 2rem;
    }
     .card .card-icon {
         font-size: 3rem;
         height: 8rem;
         margin-bottom: 1rem;
         margin-left: 0;
         width: 8rem;
    }
     .card .right-component {
         position: absolute;
         right: 3rem;
         top: 0;
         transform: scale(0.13) translateY(-312%);
         transform-origin: right;
    }
}
 @media only screen and (max-width: 500px) {
     .card .background {
         height: 200px;
    }
     .normal-pad {
         padding: 0 2rem;
    }
}
 @media only screen and (max-width: 300px) {
     .card .background {
         height: 140px;
    }
     .card > div {
         padding: 4rem;
    }
}
 .message {
     background: #fff;
     border-radius: 2rem;
     padding: 3rem;
}
 .navigation {
     align-items: center;
     background-color: var(--theme-color);
     display: flex;
     justify-content: space-between;
     left: 0;
     padding: 1.3rem 2rem;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 910;
}
 .navigation .leftItem .btn-circle {
     margin-bottom: 0;
}
 .navigation .middleItems {
     align-items: center;
     display: flex;
     justify-content: space-between;
}
 .navigation .middleItems a {
     font-size:1.6rem;
     color: var(--white);
     font-weight: 500;
     padding: 1rem;
     text-decoration:none;
}
 .navigation .logo {
     margin-bottom: -0.2rem;
     margin-left: 1rem;
     width: 10rem;
}
 .navigation .rightItem .btn-primary {
     height: 4rem;
     margin-bottom: 0;
     margin-top: 0 !important;
}
 @media only screen and (max-width: 768px) {
     .navigation {
         padding: 2rem;
    }
     .navigation .rightItem {
         align-items: center;
         display: flex;
         justify-content: center;
    }
     .navigation .rightItem .btn-primary {
         margin-bottom: 0;
         margin-right: 0;
    }
}
 ._toast-dark_1uck5_1 {
     background: #00000acc;
     color: #fff;
}
 ._toast-dark_1uck5_1, ._toast-light_1t8t0_1 {
     border-radius: 40px;
     box-shadow: 1px 2px 5px 1px #0003;
     font-size: 16px;
     line-height: 1.5;
     min-width: 200px;
     overflow: hidden;
     padding: 12px 22px;
     text-align: center;
     vertical-align: top;
     white-space: pre-line;
}
 ._toast-light_1t8t0_1 {
     background-color: #fffffff2;
     color: #000;
}
 .app-drawer {
     background-color: var(--foreground-color);
     border-right: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     left: 0;
     max-height: 100vh;
     max-width: 30rem;
     overflow: auto;
     padding: 0.5rem;
     position: fixed;
     scrollbar-width: none;
     top: 7rem;
     transition: all 0.4s ease;
     width: 100%;
     z-index: 100;
}
 .app-drawer-dashboard {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     height: auto;
     margin: 2rem 0;
     max-height: auto;
     padding: 0;
     position: relative;
     width: 100%;
     z-index: 0;
}
 .app-drawer-overlay {
     background-color: var(--header-font-color);
     height: 100%;
     left: 0;
     opacity: 0.6;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 99;
}
 .app-drawer .logo {
     filter: invert(1);
     margin-bottom: 5rem;
     margin-top: 0.5rem;
     width: 100px;
}
 .app-drawer.drawer-open {
     transform: translateX(0);
}
 .app-drawer.drawer-close {
     border-right: 1px solid var(--border-color);
     padding: 20px 0.5rem 0.5rem;
     transform: translateX(0);
     width: auto;
}
 .app-drawer-link {
     align-items: center;
     border-radius: 8px;
     display: flex;
     font-size: 1.5rem;
     justify-content: flex-start;
     margin-bottom: 10px;
     padding: 2rem;
}
 .app-drawer .app-drawer-link-icon, .app-drawer.drawer-close .app-drawer-link {
     justify-content: center;
}
 .app-drawer-link:hover {
     background-color: var(--secondary-foreground-color);
     text-decoration: none;
}
 .active-drawer-link {
     background-color: var(--secondary-foreground-color) !important;
}
 .active-drawer-link .app-drawer-link-icon, .active-drawer-link .app-drawer-link-label {
     color: var(--theme-color) !important;
}
 .app-drawer-link-label {
     font-size: 1.6rem;
     font-weight: 700;
     padding-left: 2rem;
}
 .app-drawer-link-icon {
     align-items: center;
     color: var(--base-font-color);
     display: inline-flex;
     font-size: 2rem;
     justify-content: flex-start;
     width: 2rem;
}
 .app-drawer-link:hover .app-drawer-link-icon {
     color: var(--theme-color);
}
 .app-drawer-close {
     align-items: center;
     border: 1px solid var(--border-color);
     border-radius: 3rem;
     cursor: pointer;
     display: flex;
     font-size: 2rem;
     height: 4rem;
     justify-content: center;
     position: absolute;
     right: 1rem;
     top: 1rem;
     width: 4rem;
}
 .app-drawer-close:hover {
     color: var(--theme-color);
}
 @media only screen and (max-width: 768px) {
     .app-drawer.drawer-close {
         border-right: 1px solid var(--border-color);
         padding: 1.5rem;
         transform: translateX(-100%);
         width: auto;
    }
     .app-drawer {
         padding: 1.5rem;
    }
}
 .input-field {
     align-items: center;
     background-color: var(--background-color);
     border: none;
     border: 1px solid var(--border-color);
     border-radius: 10px;
     cursor: pointer;
     display: flex;
     justify-content: center;
     margin: 3rem 0;
     position: relative;
     transition: all 0.4s ease;
     width: 100%;
}
 .input-field.noMar {
     margin: 0;
}
 .input-field.small {
     align-items: center;
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
     border-radius: 5px;
     cursor: pointer;
     display: flex;
     font-size: 8px;
     height: 30px;
     justify-content: center;
     margin: 4rem 0 2rem;
     position: relative;
     transition: all 0.4s ease;
     width: 100%;
}
 .input-field.small > input {
     padding: 0 1rem;
}
 .input-field .btn-primary {
     height: 4rem;
     margin: 0 !important;
}
 .input-field + ul {
     margin-bottom: 5rem;
     margin-top: -2rem;
}
 .input-field.select {
     padding: 0 2rem 0 1rem;
}
 .input-field > label {
     border-radius: var(--border-radius);
     color: var(--header-color);
     font-size: 1.5rem;
     font-weight: 700;
     left: 0;
     line-height: 0;
     padding: 0.5rem 1rem 0.5rem 0;
     position: absolute;
     top: -2.5rem;
     transform: translateY(-50%);
     width: auto !important;
}
 .input-field:focus-within > label {
     color: var(--theme-color);
}
 .input-field:focus-within {
     border-color: var(--theme-color);
     box-shadow: 0 0 0 0.4rem var(--theme-color-hover);
}
 .input-field > input {
     background: #0000;
     cursor: pointer;
     font-size: 2rem;
     height: 4rem;
     margin: 0;
     padding: 1rem 1.5rem;
}
 .input-field > input, .input-field > textarea {
     border: none;
     border-radius: 10px;
     color: var(--base-font-color);
     font-weight: 400;
     width: 100%;
}
 .input-field > textarea {
     background-color: initial;
     font-size: 1.6rem;
     margin-top: 0;
     min-height: 15rem;
     padding: 1.5rem;
     text-decoration: none;
}
 .input-field > input:disabled, .input-field > textarea:disabled {
     opacity: 0.4;
}
 .input-field > input:focus {
     outline: none;
}
 .nav-search {
     margin-left: 2rem;
}
 .nav-search > .nav-search-anchor {
     display: flex;
}
 .nav-search-anchor button {
     border: none !important;
     min-width: auto;
     width: auto !important;
}
 .nav-search .input-field {
     flex: 8 1;
     margin-bottom: 0;
}
 .nav-search button {
     border: 1px solid var(--border-color);
     flex: 3 1;
     margin-bottom: 0;
     margin-right: 0;
}
 .nav-search-container {
     background: var(--white);
     box-shadow: 0 1rem 2rem var(--shadow-color);
     left: 0;
     padding: 9rem 5rem 2rem;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 9992;
}
 .nav-search-container > .btn-primary {
     margin-left: 2rem;
}
 .nav-search-container label {
     font-size: 2.6rem;
     margin-bottom: 2rem;
     top: -3.5rem;
}
 .nav-search-container .btn-circle {
     background-color: initial;
     border: 1px solid var(--base-font-color) !important;
     color: var(--base-font-color);
     position: absolute;
     right: 4rem;
     top: 2rem;
}
 .nav-search-results {
     margin-top: 1rem;
     max-height: 77vh;
     overflow-y: auto;
}
 @media only screen and (max-width: 768px) {
     .nav-search-container {
         padding: 9rem 3rem 3rem;
    }
}
 .footer{
     background-color: var(--theme-color-drk);
     color: var(--base-font-color);
     font-weight: 600;
     padding-top: 6.2rem;
     padding-bottom: 3rem;
}
 .footer-link-col {
     padding-bottom: 1rem;
}
 .footer-link-col a {
     color: var(--theme-color);
     display: block;
     font-weight: 600;
     margin: 0.5rem 0;
     padding: 0.5rem 0;
     font-size:1.6rem;
}
 .footer-link-col a:hover {
     text-decoration: underline;
}
 .footer-bar {
     background-color: var(--theme-color);
     padding: 2rem;
     position: relative;
     z-index: 100;
}
 .footer-bar * {
     color: var(--white);
     font-size: 1.4rem;
     margin: 0;
}
 .footer-bar .logo {
     display: block;
     margin-bottom: 1rem;
}
 .footer-bar a {
     display: inline-block;
     padding-right: 1rem;
}
 .footer-bar a:hover {
    color:#fff;
}
 .highlight {
     align-items: center;
     border-radius: var(--border-radius);
     display: flex;
     font-size: 2rem;
     justify-content: flex-start;
     margin: 2rem 0 0;
     padding: 1.5rem 2rem 1.5rem 0;
}
 .highlight a {
     font-weight: 700;
     text-decoration: underline;
}
 .highlight-icon {
     align-items: center;
     display: inline-flex;
     font-size: 3rem;
     height: 30px;
     justify-content: center;
     width: 50px;
}
 .highlight-default {
     background-color: var(--background-blue);
}
 .highlight-default .highlight-icon {
     color: var(--blue);
}
 .highlight-danger {
     background-color: var(--background-red);
}
 .highlight-danger .highlight-icon {
     color: var(--red);
}
 .highlight-success {
     background-color: var(--background-green);
}
 .highlight-success .highlight-icon {
     color: var(--green);
}
 .highlight-warn {
     background-color: var(--background-orange);
}
 .highlight-warn .highlight-icon {
     color: var(--orange);
}
 @media only screen and (max-width: 768px) {
     .highlight {
         font-size: 2.5rem;
    }
}
 .select-field {
     border: none;
     border: 1px solid var(--border-color);
     border-radius: 10px;
}
 .select-field, .select-field.small {
     align-items: center;
     background-color: var(--background-color);
     cursor: pointer;
     display: flex;
     justify-content: center;
     padding: 0 15px 0 0;
     position: relative;
     transition: all 0.4s ease;
     width: 100%;
}
 .select-field.small {
     border: none;
     border: 1px solid var(--border-color);
     border-radius: 5px;
     height: 30px;
     margin: 4rem 0 2rem;
}
 .select-field.small > select {
     background: #0000;
     background-color: var(--background-color);
     border: none;
     border-radius: 10px;
     color: var(--base-font-color);
     cursor: pointer;
     font-size: 1.2rem;
     font-weight: 400;
     height: 2rem;
     margin: 0;
     padding: 0 0.5rem;
     width: 100%;
}
 .select-field + ul {
     margin-bottom: 5rem;
     margin-top: -2rem;
}
 .select-field > label {
     border-radius: 10px;
     color: var(--header-color);
     font-size: 1.5rem;
     font-weight: 700;
     left: 0;
     line-height: 0;
     padding: 0.5rem 1rem 0.5rem 0;
     position: absolute;
     top: -2.5rem;
     transform: translateY(-50%);
     width: auto !important;
}
 .select-field:focus-within > label {
     color: var(--theme-color);
}
 .select-field:focus-within {
     border-color: var(--theme-color);
     box-shadow: 0 0 0 0.4rem var(--theme-color-hover);
}
 .select-field > select {
     background: #0000;
     background-color: var(--background-color);
     border: none;
     border-radius: 10px;
     color: var(--base-font-color);
     cursor: pointer;
     font-size: 1.5rem;
     font-weight: 400;
     height: 4rem;
     margin: 0;
     padding: 0 1.5rem;
     width: 100%;
}
 .select-field > select:disabled {
     opacity: 0.4;
}
 :root {
     --PhoneInput-color--focus: #03b2cb;
     --PhoneInputInternationalIconPhone-opacity: 0.8;
     --PhoneInputInternationalIconGlobe-opacity: 0.65;
     --PhoneInputCountrySelect-marginRight: 0.35em;
     --PhoneInputCountrySelectArrow-width: 0.3em;
     --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
     --PhoneInputCountrySelectArrow-borderWidth: 1px;
     --PhoneInputCountrySelectArrow-opacity: 0.45;
     --PhoneInputCountrySelectArrow-color: currentColor;
     --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
     --PhoneInputCountrySelectArrow-transform: rotate(45deg);
     --PhoneInputCountryFlag-aspectRatio: 1.5;
     --PhoneInputCountryFlag-height: 1em;
     --PhoneInputCountryFlag-borderWidth: 1px;
     --PhoneInputCountryFlag-borderColor: #00000080;
     --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
     --PhoneInputCountryFlag-backgroundColor--loading: #0000001a;
}
 .PhoneInputInput {
     flex: 1 1;
     min-width: 0;
}
 .PhoneInputCountryIcon {
     height: 1em;
     height: var(--PhoneInputCountryFlag-height);
     width: 1.5em;
     width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
}
 .PhoneInputCountryIcon--square {
     width: 1em;
     width: var(--PhoneInputCountryFlag-height);
}
 .PhoneInputCountryIcon--border {
     background-color: #0000001a;
     background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
     box-shadow: 0 0 0 1px #00000080, inset 0 0 0 1px #00000080;
     box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}
 .PhoneInputCountryIconImg {
     display: block;
     height: 100%;
     width: 100%;
}
 .PhoneInputInternationalIconPhone {
     opacity: 0.8;
     opacity: var(--PhoneInputInternationalIconPhone-opacity);
}
 .PhoneInputInternationalIconGlobe {
     opacity: 0.65;
     opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}
 .PhoneInputCountry {
     align-items: center;
     align-self: stretch;
     display: flex;
     margin-right: 0.35em;
     margin-right: var(--PhoneInputCountrySelect-marginRight);
     position: relative;
}
 .PhoneInputCountrySelect[disabled], .PhoneInputCountrySelect[readonly] {
     cursor: default;
}
 .PhoneInputCountrySelectArrow {
     border-bottom-width: 1px;
     border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
     border-color: currentColor;
     border-color: var(--PhoneInputCountrySelectArrow-color);
     border-left-width: 0;
     border-right-width: 1px;
     border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
     border-style: solid;
     border-top-width: 0;
     content: "";
     display: block;
     height: 0.3em;
     height: var(--PhoneInputCountrySelectArrow-width);
     margin-left: 0.35em;
     margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
     opacity: 0.45;
     opacity: var(--PhoneInputCountrySelectArrow-opacity);
     transform: rotate(45deg);
     transform: var(--PhoneInputCountrySelectArrow-transform);
     width: 0.3em;
     width: var(--PhoneInputCountrySelectArrow-width);
}
 .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
     color: #03b2cb;
     color: var(--PhoneInputCountrySelectArrow-color--focus);
     opacity: 1;
}
 .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
     box-shadow: 0 0 0 1px #03b2cb, inset 0 0 0 1px #03b2cb;
     box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}
 .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
     color: #03b2cb;
     color: var(--PhoneInputCountrySelectArrow-color--focus);
     opacity: 1;
}
 .phone-field {
     align-items: center;
     background-color: var(--background-color);
     border: none;
     border: 0 solid var(--border-color);
     border-radius: 10px;
     cursor: pointer;
     display: flex;
     height: 4rem;
     justify-content: center;
     position: relative;
     transition: all 0.4s ease;
     width: 100%;
}
 :focus {
     outline: none;
}
 .MuiChip-deleteIcon {
     font-size: 9px !important;
     margin-right: -2px;
}
 .simple-chip {
     margin-bottom: 1rem !important;
     margin-right: 0.7rem !important;
}
 .simple-chip * {
     font-size: 16px;
}
 .MuiInputBase-formControl {
     border-radius: var(--border-radius) !important;
}
 .autocomplete :not(svg) {
     color: var(--base-font-color);
     font-size: 16px !important;
}
 .MuiAccordion-rounded, .MuiInputLabel-formControl, .MuiSvgIcon-root {
     color: var(--base-font-color) !important;
}
 .phone-field .btn-primary {
     height: 7rem;
     margin: 0 !important;
}
 .phone-field + ul {
     margin-bottom: 5rem;
     margin-top: -2rem;
}
 .phone-field.select {
     padding: 0 2rem 0 1rem;
}
 .phone-field > label {
     border-radius: var(--border-radius);
     color: var(--base-font-color);
     font-size: 1.5rem;
     font-weight: 700;
     left: 0;
     line-height: 0;
     padding: 0.5rem 1rem 0.5rem 0;
     position: absolute;
     top: -2.5rem;
     transform: translateY(-50%);
     width: auto !important;
}
 .phone-field:focus-within > label {
     color: var(--theme-color);
}
 .phone-field:focus-within {
     border-color: var(--theme-color);
     box-shadow: 0 0 0 0.4rem var(--theme-color-hover);
}
 .phone-field > input {
     background: #0000;
     cursor: pointer;
     font-size: 2rem;
     height: 4rem;
     margin: 0;
     padding: 1rem 1.5rem;
}
 .phone-field > input, .phone-field > textarea {
     border: none;
     border-radius: 10px;
     color: var(--base-font-color);
     font-weight: 400;
     width: 100%;
}
 .phone-field > textarea {
     background-color: initial;
     font-size: 2.5rem;
     margin-top: 0;
     min-height: 15rem;
     padding: 1.5rem;
     text-decoration: none;
}
 .phone-field > input:disabled, .phone-field > textarea:disabled {
     opacity: 0.4;
}
 .phone-field > input:focus {
     outline: none;
}
 .error {
     bottom: 0;
     color: var(--color-red);
     font-size: 1.6rem;
     margin-bottom: 1rem;
     padding: 0.1rem 2rem;
     text-align: left;
     transform: translateY(calc(100% + 1.5rem));
     width: 100%;
}
 .error, .error:after {
     left: 0;
     position: absolute;
}
 .error:after {
     animation: glow 2s ease-in-out infinite;
     background: var(--color-red);
     border-radius: 50%;
     content: "";
     height: 1rem;
     top: 50%;
     transform: translateY(-50%);
     width: 1rem;
}
 @keyframes glow {
     0% {
         opacity: 0.5;
    }
     50% {
         opacity: 1;
    }
     to {
         opacity: 0.5;
    }
}
 .PhoneInput {
     align-items: center;
     display: flex;
     height: 7rem;
     margin: 0 3rem;
     width: 100%;
}
 .PhoneInputCountrySelect {
     border: 0;
     cursor: pointer;
     height: 100%;
     left: 0;
     opacity: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1;
}
 .PhoneInputCountryIcon--border {
     background-color: initial !important;
     box-shadow: none !important;
}
 .PhoneInputCountrySelect option {
     font-size: 2rem;
}
 .PhoneInputCountryIcon {
     border: none;
     height: 100%;
}
 .PhoneInputInput {
     background-color: initial;
}
 .PrivateSwitchBase-root * {
     fill: var(--theme-color) !important;
     color: var(--base-font-color) !important;
}
 .PhoneInputInput {
     border: none;
     color: var(--base-font-color);
     font-size: 1.5rem;
     height: 4rem;
     margin-left: 1rem;
}
 .date-time {
     width: 100%;
}
 .date-time input {
     background: #0000;
     border: none;
     color: var(--main-font-color);
     font-size: 2.5rem;
     height: 7rem;
     padding: 1rem 1.5rem;
     width: 100%;
}
 .date-time .rdtPicker {
     background: var(--input-background);
     border-radius: 2rem;
     box-shadow: 0;
     box-shadow: 0 1rem 1rem var(--shadow-color);
     margin-top: 1rem;
     min-width: 100%;
     padding: 1rem;
     position: absolute;
     z-index: 99999 !important;
}
 .date-time .rdtPicker td, .date-time .rdtPicker th {
     border-radius: var(--small-radius);
     font-size: 2.2rem;
     height: 6rem;
}
 .date-time .rdtPicker th.rdtNext, .date-time .rdtPicker th.rdtPrev {
     font-size: 4rem;
     vertical-align: middle;
}
 .date-time .rdtCounters {
     display: inline-block;
     margin-bottom: 2rem;
     margin-top: 2rem;
     scale: 1.4;
}
 .rdtCounter .rdtBtn {
     border-radius: var(--small-radius);
}
 .date-time .rdtPicker td.rdtActive, .date-time .rdtPicker td.rdtActive:hover {
     background-color: var(--theme-color);
     color: var(--main-background-color);
}
 .rdtSwitch {
     cursor: pointer !important;
}
 .date-time .rdtSwitch:active, .date-time .rdtSwitch:hover {
     background-color: var(--main-background-color);
}
 .MuiBox-root, .css-19kzrtu {
     padding: 0;
}
 .tabs {
     font-family: var(--font);
}
 .expander-header {
     align-items: center;
     display: flex;
     justify-content: space-between;
}
 .expander-header h1 {
     font-size: 24px;
     font-weight: 600;
     margin: 2rem 0;
}
 .MuiStep-horizontal:first-child {
     padding-left: 0 !important;
}
 .MuiStepLabel-label {
     font-weight: 700 !important;
}
 .Mui-completed.MuiStepIcon-root, .MuiStepLabel-label {
     color: var(--main-font-color) !important;
}
 .expander-header .exp-btn {
     align-items: center;
     background-color: var(--background-color);
     background-image: none;
     border: 1px solid var(--border-color) !important;
     border-radius: 50%;
     color: var(--theme-color);
     cursor: pointer;
     display: flex;
     font-size: large;
     height: 4rem;
     justify-content: center;
     margin-bottom: 0;
     min-width: 0;
     min-width: auto;
     padding: 0 !important;
     width: 4rem !important;
}
 .expander-header .btn-small.btn-circle {
     height: 5rem !important;
     margin-bottom: 1rem;
     min-width: auto !important;
     width: 5rem !important;
}
 .step-count {
     align-items: center;
     background-color: var(--background-color-light);
     border-radius: 50%;
     color: var(--theme-color);
     display: flex;
     font-size: 24px;
     font-weight: 600;
     height: 50px;
     justify-content: center;
     margin-right: 20px;
     width: 50px;
}
 .expander {
     overflow: hidden;
}
 .expander-content {
     max-height: 0;
     transition: max-height 0.9s ease;
}
 .expander.open .expander-content {
     max-height: 1000px;
}
 .expander-header .exp-btn.rotated {
     transform: rotate(90deg);
     transition: transform 0.5s ease;
}
 .expander-chip {
     border-radius: 20px;
     padding: 5px 20px;
}
 .expander-chip, .expander-chip-circle {
     background-color: var(--theme-color);
     color: var(--foreground-color);
     font-size: 18px;
     font-weight: 500;
     margin-right: 10px;
}
 .expander-chip-circle {
     align-items: center;
     border-radius: 50%;
     display: flex;
     height: 40px;
     justify-content: center;
     width: 40px;
}
 @media only screen and (max-width: 768px) {
     .expander-chip {
         border-radius: 20px;
         font-size: 10px;
         font-weight: 500;
         margin-right: 10px;
         padding: 5px 10px;
    }
}
 .react-pdf__Page__canvas {
     display: block;
     -webkit-user-select: none;
     user-select: none;
}
 .css-v60gti-MuiInputBase-root-MuiOutlinedInput-root {
     background-color: #f5f5f5;
     border-radius: 30px !important;
}
 .css-v60gti-MuiInputBase-root-MuiOutlinedInput-root :hover {
     border-color: none !important;
}
 .css-1pnmrwp-MuiTypography-root {
     color: #108a00 !important;
     font-family: Roboto, Helvetica, Arial, sans-serif;
     font-size: 1.7rem !important;
     font-weight: 400;
     letter-spacing: 0.00938em;
     line-height: 1.5;
     margin: 0;
}
 .MuiPaginationItem-root {
     font-size: 1.6rem !important;
}
 .MuiPagination-ul {
     gap: 4px;
}
 .resizable-textarea::placeholder {
     color: var(--base-font-color);
}
 .resizable-textarea-active::placeholder {
     color: var(--theme-color);
}
 .react-pdf__Document > div {
     border: none;
     border: none !important;
     border-radius: 1rem;
     box-shadow: 0 0 1rem var(--shadow-color);
     overflow: hidden;
}
 .help {
     color: var(--base-font-color);
     font-size: 1.6rem;
}
 .fa-xmark:hover {
     opacity: 1 !important;
}
 .upload-container {
     align-items: center;
     background-color: var(--background-color);
     border-radius: 24px;
     display: flex;
     flex-direction: column;
     height: 334px;
     justify-content: center;
     padding: 2rem 2rem 1rem;
     width: 275px;
}
 .upload-icon {
     color: var(--foreground-color);
     font-size: 10rem;
}
 .upload-info {
     color: #555;
     font-size: 14px;
}
 .preview-container {
     align-items: center;
     border-radius: 1rem;
     display: flex;
     justify-content: center;
     overflow: hidden;
     position: relative;
}
 .pdf-preview, .preview-container {
     height: 100%;
     width: 100%;
}
 .drag-drop-message {
     color: #777;
     text-align: center;
}
 .avatar-container {
     text-align: center;
}
 .avatar {
     border-radius: 50%;
     height: 150px;
     margin-bottom: 10px;
     object-fit: cover;
     width: 150px;
}
 .profile-container.admin .avatar {
     border: 5px solid var(--theme-color);
}
 .profile-container * {
     margin-right: 1rem;
}
 .profile_pic_center{
     display:flex;
     justify-content:center;
     align-items:center;
}
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link, .nav-tabs{
    border:none!important;
    color:#666;
    font-weight:bold;
    font-size:14px;
}
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs{
    border:none;
    color:#108a00;
    background:transparent;
}
 .nav-tabs .nav-link.active{
    border-bottom:2px solid #108a00!important;
}
 .profile-name {
     font-size: 20px;
     text-align: center;
}
 .profile-type {
     color: var(--theme-color);
     font-size: 14px;
     text-align: center;
}
 .fa-icon, .fa-icons-container {
     display: flex;
     justify-content: space-between;
}
 .fa-icon {
     border: 2px solid var(--border-color);
     border-radius: 50%;
     cursor: pointer;
     height: 52spx;
     padding: 16px;
     width: 54px;
     font-size:16px;
}
 .profile-container .fa-icon.active {
     border: 1px solid var(--theme-color);
     position: relative;
}
 .profile-container .fa-icon.active .unread-count {
     background-color: var(--theme-color);
     border-radius: 50%;
     color: #fff;
     display: inline-block;
     font-size: 12px;
     left: 0;
     margin-left: 35px;
     padding: 2px 5px;
     position: absolute;
     top: 0;
}
 .lite-avatar {
     border-radius: 50%;
     height: 74px;
     width: 74px;
}
 .draggable-text-field {
     align-items: center;
     background-color: var(--foreground-color);
     border: 1px solid var(--border-color);
     border-radius: 4px;
     color: var(--base-font-color);
     cursor: grab;
     display: flex;
     font-size: 12px;
     justify-content: space-between;
     margin-bottom: 1rem;
     padding: 10px;
     text-align: center;
}
 .draggable-text-field:active {
     cursor: grabbing;
}
 .field-on-pdf {
     position: relative;
}
 .field-on-pdf-name {
     background-color: var(--theme-color);
     border-radius: 0 0 0.5rem 0.5rem;
     bottom: 0;
     color: var(--foreground-color);
     font-size: 1.5rem;
     font-weight: 500;
     left: 0;
     opacity: 0;
     padding: 0.5rem;
     position: absolute;
     transform: translateY(100%);
}
 .field-on-pdf:hover .field-on-pdf-name {
     opacity: 1;
}
 .field-on-pdf-field-remove-btn {
     align-items: center;
     background-color: var(--color-red);
     color: var(--foreground-color);
     display: flex;
     font-size: 1.2rem;
     font-weight: 500;
     height: 100%;
     justify-content: center;
     line-height: 1;
     opacity: 1;
     position: absolute;
     right: 0;
     top: 0;
     width: 20px;
}
 .dialog {
     align-items: flex-end;
     bottom: 0;
     display: none;
     height: 100vh;
     justify-content: center;
     left: 0;
     position: fixed;
     transition: all 0.5s ease;
     width: 100%;
     z-index: 101;
}
 .dialog .dialog-underlay {
     animation: dialog-animation 0.5s ease forwards;
     background: #2a2a2ab2;
     height: 100%;
     left: -10%;
     position: absolute;
     top: 0;
     width: 120%;
}
 @keyframes dialog-animation {
     0% {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 .dialog.open {
     display: flex;
}
 .dialog-content > button.dialog-close {
     align-items: center;
     background-color: var(--background-color);
     background: #0000;
     border: #0000;
     border: 1px solid var(--border-color);
     border-radius: 50%;
     box-shadow: none;
     color: var(--base-font-color);
     cursor: pointer;
     display: flex;
     font-size: 2rem;
     height: 4rem;
     justify-content: center;
     position: absolute;
     right: 3rem;
     top: 3rem;
     transform: translateX(0) translateY(0);
     transition: var(--small-transition);
     width: 4rem;
     z-index: 12;
}
 .dialog-content > button:hover {
     border: 1px solid var(--base-font-color);
}
 .dialog.open > .dialog-content {
     animation: slide-from-bottom 0.5s ease forwards;
     background-color: var(--background-color);
     border-radius: 10px;
     box-shadow: var(--dialog-shadow);
     height: auto;
     margin-bottom: 10rem;
     margin-top: 0;
     max-height: 80vh;
     max-width: 1024px;
     min-height: 70vh;
     overflow-y: auto;
     padding: 4rem;
     position: relative;
     transform-origin: center;
     transform-style: preserve-3d;
     width: 100%;
     z-index: 4;
}
 .dialog-content .dialog-header {
     background-color: var(--background-color);
     margin-bottom: 2rem;
     padding-bottom: 1rem;
     padding-top: 3rem;
     position: sticky;
     top: 0;
     z-index: 10;
}
 .right .dialog-content .dialog-header {
     padding-top: 1rem;
     top: -4rem;
}
 .dialog-content .dialog-action {
     background-color: var(--background-color);
     border-top: 1px solid var(--border-color);
     bottom: 0;
     min-height: 10rem;
     position: absolute;
     width: 100%;
}
 .dialog.right {
     bottom: auto;
     justify-content: flex-end;
     top: 0;
}
 .dialog.right > .dialog-content {
     animation: slide-from-right 0.5s ease forwards;
     border-radius: var(--radius) 0 0 var(--radius);
     height: 102vh;
     max-height: 100vh;
     overflow-y: auto;
     padding: 4rem;
     width: 50vw;
}
 @keyframes slide-from-bottom {
     0% {
         transform: translateY(60%);
    }
     to {
         transform: translateY(0);
    }
}
 @keyframes slide-from-right {
     0% {
         transform: translateX(100%);
    }
     to {
         transform: translateX(0);
    }
}
 .dialog.big.open > .dialog-content {
     animation: slide-from-bottom 0.2s ease-out forwards;
     background-color: var(--background-color);
     border-radius: 10px;
     box-shadow: 0;
     margin-bottom: 5rem;
     margin-top: 0;
     max-height: 90vh;
     max-width: 1400px;
     min-height: 70vh;
     overflow-y: auto;
     padding: 3rem;
     position: relative;
     width: 100%;
     z-index: 4;
}
 .right .dialog-content > button {
     background: var(--card-background);
     border-radius: 50%;
     color: var(--main-font-color);
     cursor: pointer;
     font-size: 2.5rem;
     height: 6rem;
     opacity: 1;
     position: absolute;
     right: 2rem;
     top: 3rem;
     width: 6rem;
}
 @media only screen and (max-width: 768px) {
     .dialog {
         left: 2.5% !important;
         width: 95% !important;
    }
     .dialog.big.open > .dialog-content {
         max-height: 94vh;
         min-height: 94vh;
         padding: 10% 3rem 0;
    }
     .dialog.open > .dialog-content {
         bottom: 0;
         margin-top: 0;
         padding: 3rem 3rem 5rem;
         width: 80%;
    }
     .dialog-content > button {
         background: #0000;
         box-shadow: none;
         font-size: 3rem !important;
         position: absolute !important;
         right: 3rem !important;
         top: 2rem !important;
         transform: translateX(0) translateY(0);
    }
}
 @media only screen and (max-width: 400px) {
     .dialog.big.open > .dialog-content, .dialog.open > .dialog-content {
         border-radius: var(--radius);
         bottom: 0;
         margin-top: 0;
         max-height: 100%;
         overflow-y: auto;
         padding: 5rem 3rem 3rem;
         width: 100%;
    }
     .dialog.big.open .dialog-content > button {
         font-size: 3rem;
         right: 2rem;
         top: 1rem;
    }
     .dialog.big.open > .dialog-content {
         padding: 10% 2rem 0;
         width: 100%;
    }
}
 .portal {
     height: 100vh;
     position: relative;
     width: 40vw;
     z-index: 5;
}
 .portal-container {
     align-items: center;
     display: flex;
     height: 100vh;
     justify-content: center;
     left: 0;
     overflow: hidden;
     position: fixed;
     top: -1px;
     width: 100vw;
     z-index: 5;
}
 @media only screen and (min-width: 1920px) {
     .portal {
         width: 30vw;
    }
}
 @media only screen and (max-width: 1024px) {
     .portal {
         width: 50vw;
    }
}
 @media only screen and (max-width: 768px) {
     .portal {
         width: 80vw;
    }
}
 @media only screen and (max-width: 600px) {
     .portal {
         width: 100vw;
    }
}
 .file-data-container {
     padding-left: 2rem;
     position: relative;
}
 .file-data-container .chip {
     position: absolute;
     right: 0;
     top: 0;
}
 .doc-image-container {
     align-items: top;
     display: flex;
     flex-direction: row;
}
 .doc-image, .doc-image-container {
     object-fit: contain;
     overflow: hidden;
}
 .doc-image {
     border: 1px;
     border-radius: 16px;
     height: 150px;
     width: 100%;
}
 .doc-image .react-pdf__Page__canvas {
     object-fit: cover;
     width: 100% !important;
}
 .doc-image > img {
     height: 100%;
     object-fit: cover;
     width: 100%;
}
 .file-name {
     color: var(--header-font-color);
     font-size: 20px;
}
 .doc-price {
     color: var(--theme-color);
     font-size: 26px;
     font-weight: 600;
     margin: 10px 0 0;
}
 .file-subtitle {
     font-size: 14px;
     line-height: 1.5;
}
 .doc-info {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-top: -3rem;
}
 .doc-size, .last-updated {
     font-size: 14px;
     font-weight: 500;
}
 .doc-footer {
     flex-direction: row;
     justify-content: space-between;
}
 .doc-footer, .footer-left {
     align-items: baseline;
     display: flex;
}
 @media only screen and (max-width: 768px) {
     .file-data-container {
         padding-left: 0;
    }
}
 .chip {
     align-items: center;
     background-color: var(--secondary-foreground-color);
     border-radius: 16px;
     display: inline-flex;
     font-size: 10px;
     margin: 0.25em 0.25em 1rem;
}
 .chip-icon {
     padding: 0.5em 1em;
}
 .chip-icon, .chip-label {
     color: var(--theme-color);
     font-size: 1.2rem;
}
 .chip-label {
     font-weight: 600;
     padding: 0.5em 1em 0.5em 0;
}
 .icon-button-container {
     align-items: center;
     display: flex;
     font-size: 10px;
}
 .icon-button-circle > p {
     color: var(--theme-color);
     font-size: 3rem;
     font-weight: 700;
}
 .icon-button-circle {
     align-items: center;
     background-color: var(--background-color);
     border-radius: 50%;
     color: var(--theme-color);
     cursor: pointer;
     display: flex;
     height: 42px;
     justify-content: center;
     padding: 10px;
     width: 42px;
}
 .icon-button-circle.small {
     height: 25px;
     width: 25px;
}
 .icon-button-circle.accent {
     background-color: var(--card-background);
     color: var(--header-color);
     font-size: 1.5em;
}
 .icon-button-circle .larger {
     font-size: 2rem;
}
 .jumbotron {
     background: var(--foreground-color);
     border-radius: 29px;
     margin-bottom: 3rem;
     padding: 3rem 0 3rem 3rem;
}
 .jumbotron-image img {
     max-height: 14rem;
}
 .quick-links-scroll-container {
     overflow-x: auto;
}
 .quick-links-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
}
 .quick-link {
     align-items: center;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     margin-right: 20px;
}
 .quick-link i:hover {
     background-color: var(--secondary-foreground-color);
     text-decoration: none;
}
 .quick-link i {
     background-color: var(--background-color);
     border-radius: 10px;
     color: var(--theme-color);
     font-size: 20px;
     height: 54px;
     margin-bottom: 10px;
     padding: 15px;
     width: 54px;
}
 .quick-link i, .quick-link span {
     text-align: center;
}
 .quick-link-text {
     color: var(--base-font-color);
     font-size: 14px;
}
 .appointments-container {
     margin-top: 20px;
}
 .open-card {
     background-color: var(--theme-color);
     border-radius: 50%;
     color: var(--background-color);
     font-size: 12px;
     height: 22px;
     padding: 5px;
     text-align: center;
     width: 22px;
}
 .datetime-container {
     background-color: var(--theme-color-hover);
     border-radius: 23px;
     color: var(--theme-color);
     padding: 15px;
     text-align: center;
}
 .appointment-date {
     font-size: 20px;
     font-weight: 700;
}
 .appointment-time {
     font-size: 12px;
}
 .person-name {
     color: var(--theme-color);
     font-weight: 500;
}
 .appointment-details p {
     font-size: 18px;
     margin-bottom: 5px;
}
 .appointment-details b {
     font-weight: 500;
}
 .appointment-agenda {
     color: var(--base-font-color);
}
 .table-container {
     display: flex;
     flex-direction: column;
     max-height: 550px;
}
 .table-header {
     color: var(--theme-color);
     font-weight: 700;
}
 .table-container table thead tr th{
    line-height:26px;
}
 .table-container table thead tr th, .table-container table tbody tr td{
    vertical-align: middle;
}
 .table-header, .table-row {
     display: flex;
     padding: 10px;
}
 .table-row {
     color: var(--base-font-color);
}
 .table-cell {
     flex: 1 1;
     padding: 8px;
}
 .vertical-ellipsis {
     cursor: pointer;
     display: flex;
     justify-content: flex-end;
}
 .world-upload-container {
     background-color: #f8f9fa;
     border: 2px dashed #108a00;
     border-radius: 4px;
     cursor: pointer;
     padding: 20px;
     position: relative;
     text-align: center;
}
 .world-upload-container:hover {
     border-color: #108a00;
}
 .file-input {
     display: none;
}
 .drag-drop-text {
     color: #6c757d;
     font-size: 16px;
}
 .submit-button {
     border: none;
     border-radius: 4px;
     color: #fff;
     cursor: pointer;
     margin-top: 1.2rem;
     padding: 10px 20px;
}
 .submit-button, .submit-button:hover {
     background-color: #108a00;
}
 .file-details {
     margin-top: 20px;
}
 .file-name {
     font-weight: 600;
}
 .file-size {
     color: #6c757d;
}
 .table-container {
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 0 10px #0000001a;
     margin: auto;
     padding: 20px;
}
 table {
     border-collapse: collapse;
     width: 100%;
}
 thead {
     background-color: #f4f4f4;
}
 td, th {
     border-bottom: 1px solid #ddd;
     padding: 6px;
     text-align: left;
}
 th {
     background-color: #f2f2f2;
     color: #333;
}
 h1 {
     color: #333;
     margin-bottom: 20px;
}
 .edit-button, h1 {
     text-align: center;
}
 .edit-button {
     border: none;
     border-radius: 4px;
     color: #fff;
     cursor: pointer;
     font-size: 14px;
     padding: 6px 12px;
}
 .edit-button, .edit-button:hover {
     background-color: #108a00;
}
 .highlight {
     border: 1px solid red;
}
 .category-list {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     margin-top: 10px;
}
 .category-box {
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     border-radius: 8px;
     box-shadow: 0 2px 4px #0000001a;
     padding: 16px;
     text-align: center;
     transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
     width: 150px;
}
 .category-box:hover {
     background-color: #e0e0e0;
     border: 1px solid #999;
     box-shadow: 0 4px 8px #0003;
     transform: scale(1.05);
}
 .category-box h6 {
     margin: 0;
}
 .subcategorylist {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     justify-content: center;
     margin-top: 10px;
}
 .scrollstyling::-webkit-scrollbar {
     height: 3px;
     padding-top: 20px;
}
 .boxmodaldiv {
     background-color: #ccc;
     border: "2px solid #ccc";
     left: 50%;
     padding: 20px;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 50%;
}
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .grid {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
}
 .grid-item {
     box-sizing: border-box;
     width: calc(33.33333% - 16px);
}
 .card {
     align-items: center;
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 8px #f1ebeb1a;
     display: flex;
     flex-direction: column;
     padding: 5px;
}
 .icon-wrapper {
     background-color: #e8f5e9;
     border-radius: 50%;
     margin-bottom: 10px;
     padding: 10px !important;
     text-align: center;
}
 .icon {
     color: #1976d2;
     font-size: 24px;
}
 .card-content {
     padding: 10px !important;
     text-align: center;
}
 .title {
     font-weight: 700;
     margin-bottom: 8px;
     text-align: center;
}
 @media (max-width: 768px) {
     .grid-item {
         width: calc(50% - 16px);
    }
}
 @media (max-width: 480px) {
     .grid-item {
         width: 100%;
    }
}
 .grid-container {
     background-color: #f9f9f9;
     border-radius: 8px;
     box-shadow: 0 2px 10px #0000001a;
     padding: 20px;
}
 .input_common{
     line-height: 30px;
     border-radius: 8px;
     transition: border-color 0.3s;
}
 .input_common:focus {
     border-color: #0e7a00;
     outline: none;
}
 .header {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 20px;
}
 .category-dropdown {
     border: 1px solid #ccc;
     border-radius: 5px;
     cursor: pointer;
     margin-right: 10px;
     outline: none;
     padding: 10px;
}
 .search-button {
     border: none;
     border-radius: 5px;
     color: #fff;
     cursor: pointer;
     padding: 10px 15px;
     transition: background-color 0.3s ease;
}
 .search-button, .search-button:hover {
     background-color: #108a00;
}
 .category-display-container {
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 10px;
     transition: background-color 0.3s ease, transform 0.2s;
}
 .category-display-container:hover {
     background-color: #e0f7fa;
     transform: scale(1.05);
}
 .category-name {
     font-size: 16px;
     margin-left: 10px;
}
 .pagination {
     display: flex;
     justify-content: center;
     margin-top: 20px;
}
 .pagination-button {
     background-color: #108a00;
     border: none;
     border-radius: 5px;
     color: #fff;
     cursor: pointer;
     margin: 0 5px;
     padding: 5px 10px;
     transition: background-color 0.3s ease;
}
 .pagination-button:hover:not(:disabled) {
     background-color: gray;
}
 .pagination-button:disabled {
     background-color: #d3d3d3;
     cursor: not-allowed;
}
 .file-name {
     font-weight: 700;
}
 .file-path {
     color: #666;
     font-size: 0.9em;
}
 .document-preview-container {
     max-height: 600px;
     overflow-y: auto;
     padding: 16px;
}
 .Value-highlight {
     background-color: #ff0;
}
 .chart-container {
     width: 100%;
}
 .chart-container .recharts-cartesian-axis-tick-value {
     fill: #666;
     font-size: 12px;
     font-weight: 500;
}
 .chart-container .recharts-tooltip {
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-shadow: 0 2px 4px #0000001a;
     font-size: 14px;
     font-weight: 700;
}
 .chart-container .recharts-tooltip-label {
     color: #333;
}
 .chart-container .recharts-tooltip-item {
     color: var(--theme-color);
}
 .chart-container .recharts-legend {
     font-size: 14px;
}
 .chart-container .recharts-legend-item {
     cursor: pointer;
     font-weight: 700;
}
 .chart-container .recharts-legend-item:hover {
     opacity: 0.8;
}
 .rounded-select {
     background-color: var(--background-color-light);
     border-radius: 50%;
}
 .green-card-header {
     color: var(--foreground-color);
     font-size: 16px;
     font-weight: 600;
}
 .white-card-header {
     color: var(--base-font-color);
     font-size: 16px;
     font-weight: 600;
}
 .green-card-count {
     color: var(--foreground-color);
}
 .white-card-count {
     color: var(--theme-color);
}
 .custom-calendar {
     width: 100%;
}
 .custom-calendar .Mui-selected, .custom-calendar .Mui-selected:hover {
     background-color: var(--theme-color);
     color: var(--white);
     font-size: 1.5rem;
}
 .custom-calendar .MuiButtonBase-root.MuiPickersDay-root {
     font-size: 1.5rem;
}
 .custom-calendar .MuiDayCalendar-weekDayLabel {
     color: var(--theme-color);
     font-size: 1.2rem;
}
 .custom-calendar .MuiPickersCalendarHeader-label {
     color: var(--theme-color);
     font-size: 1.5rem;
}
 .custom-calendar .MuiSvgIcon-root {
     color: var(--theme-color);
     font-size: 1.8rem;
}
 .custom-calendar .MuiPickersYear-yearButton.Mui-selected {
     align-items: center;
     background-color: var(--theme-color);
     display: flex;
     font-size: 1.2rem;
     justify-content: center;
}
 .custom-calendar .MuiPickersYear-yearButton {
     align-items: center;
     display: flex;
     font-size: 1rem;
     justify-content: center;
}
 .custom-calendar .css-1wy8uaa-MuiButtonBase-root-MuiPickersDay-root.mui-selected, .custom-calendar .css-23p0if-MuiButtonBase-root-MuiPickersDay-root.Mui-selected, .custom-calendar .css-23p0if-MuiButtonBase-root-MuiPickersDay-root.Mui-selected:hover, .custom-calendar .css-23p0if-MuiButtonBase-root-MuiPickersDay-root:focus.Mui-selected {
     background-color: var(--theme-color);
     color: var(--white);
}
 .custom-calendar .css-1wy8uaa-MuiButtonBase-root-MuiPickersDay-root.Mui-selected:hover, .custom-calendar .css-1wy8uaa-MuiButtonBase-root-MuiPickersDay-root:focus.Mui-selected {
     background-color: var(--theme-color);
     color: var(--white);
     will-change: background-color;
}
 .custom-calendar .MuiButtonBase-root.MuiPickersDay-root.MuiPickersDay-dayWithMargin.MuiPickersDay-dayOutsideMonth.css-n5yb6p-MuiButtonBase-root-MuiPickersDay-root {
     font-size: 1rem;
}
 .MuiDateCalendar-root.custom-calendar.css-1rtg91x-MuiDateCalendar-root {
     align-items: flex-start;
     display: flex;
     justify-content: center;
}
 .custom-calendar .css-innj4t-MuiPickersYear-yearButton.Mui-selected {
     align-items: center;
     background-color: var(--theme-color);
     display: flex;
     font-size: 1.2rem;
     justify-content: center;
}
 .custom-calendar .css-innj4t-MuiPickersYear-yearButton.Mui-selected:hover {
     background-color: var(--theme-color);
}
 .MuiButtonBase-root.MuiPickersDay-root.Mui-selected.MuiPickersDay-dayWithMargin.css-1wy8uaa-MuiButtonBase-root-MuiPickersDay-root {
     background-color: var(--theme-color);
     color: var(--white);
}
 .css-o9cot7.Mui-selected {
     background-color: var(--theme-color);
}
 .todo-item {
     align-items: center;
     display: flex;
     margin-bottom: 15px;
}
 .todo-text {
     color: var(--base-font-color);
     font-size: 15px;
     font-weight: 400;
}
 .todo-icon {
     background-color: var(--foreground-color);
     border-radius: 10px;
     box-shadow: 0 0 5px #0003;
     color: var(--theme-color);
     height: 40px;
     margin-right: 20px;
     padding: 10px;
     text-align: center;
     width: 40px;
     font-size:14px;
}
 .count-label {
     background-color: var(--theme-color);
     border-radius: 50%;
     color: var(--foreground-color);
     display: inline-block;
     height: 23px;
     margin-left: 10px;
     text-align: center;
     width: 23px;
}
 .lawyer-image-container {
     align-items: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding-right: 1rem;
     text-align: center;
}
 .lawyer-image-container * {
     text-align: center;
}
 .lawyer-image {
     border-radius: 50%;
     height: 100px;
     overflow: hidden;
     width: 100px;
}
 .lawyer-image img {
     height: 100%;
     object-fit: cover;
     width: 100%;
}
 .success-ratio-percentage {
     color: var(--theme-color);
     font-size: 22px;
     font-weight: 500;
     text-align: center;
}
 .lawyer-name {
     color: var(--header-font-color);
     font-size: 24px;
     font-weight: 600;
}
 .category-display-container {
     align-items: center;
     background-color: var(--foreground-color);
     border: 3px solid #0000;
     border-radius: 22px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-bottom: 15px;
     padding: 20px;
     width: 100%;
}
 .category-display-container:hover, .category-header:hover {
     cursor: pointer;
}
 .category-header {
     font-size: 15px;
     font-weight: 500;
     margin-top: 20px;
}
 .category-display-container.selected {
     border: 3px solid var(--theme-color);
}
 .login-image {
     height: 80vh;
     object-fit: cover;
     width: 100%;
}
 @media only screen and (max-width: 768px) {
     .login-image {
         height: 30vh;
    }
}
 .category-form-container {
     align-items: flex-start;
     display: flex;
}
 .form-section, .icon-section {
     display: flex;
     flex-direction: column;
}
 .icon-section {
     align-items: center;
     margin-left: 20px;
     margin-top: -10px;
}
 .input-field-style {
     color: var(--base-font-color);
}
 .button-container {
     display: flex;
     gap: 10px;
}
 .icon-picker-container {
     background-color: var(--background-color);
     border-radius: 50%;
     height: 40px;
     margin-left: 10px;
     width: 40px;
}
 .icon-picker-container svg {
     height: 20px;
     width: 20px;
}
 .reactIconsPickerContainer > * {
     border: none !important;
     padding: 8px !important;
}
 .icon-display-container {
     align-items: center;
     background-color: var(--background-color);
     border-radius: 22px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin: 0 auto;
     max-width: 180px;
     padding: 10px 20px;
     width: 100%;
}
 .header-style {
     font-size: 15px;
     font-weight: 500;
     line-height: 1.5 !important;
     margin-top: 20px;
     text-align: center !important;
}
 .signup-image {
     height: 100vh;
     object-fit: cover;
     width: 100%;
}
 .btn_green{
     background: var(--theme-color);
     border: 2px solid transparent;
     color: var(--white);
     cursor: pointer;
     display: block;
     font-size: 12px;
     font-weight: 500;
     justify-content: center;
     text-align:center;
     min-width: 10rem;
     padding: 7px 12px;
     position: relative;
     transition: 0.2s;
     transition: all 0.1s ease-in-out;
     white-space: nowrap;
     z-index: 2;
}
 .btn_green:hover{
     border:2px solid var(--theme-color);
     color: var(--theme-color);
     background:transparent;
}
 p,li {
     color: #6f6f77;
     color: var(--base-font-color);
     cursor: default;
     font-size: 1.5rem;
     font-weight: 400;
     line-height: 1.5;
     margin: .5rem 0 1rem;
}
 .radius_4{
    border-radius:4px;
}
 .display_none{
    display:none;
}
 .subcategory-col a, .category-col a{
    text-decoration:none;
    color:#000;
}
 .emoji_box {
     border-radius: 6px;
     background: #fff;
     padding: 12px;
     width: 80px;
}
 .font_20{
    font-size:20px;
}
 .scroll_height_400{
    max-height:400px;
    overflow-y:auto;
}
 .color_green{
    color:#108a00
}
 .cursor_pointer{
    cursor: pointer;
}
 .has-search .form-control {
     padding-left: 2.375rem;
}
 .has-search .form-control-feedback {
     position: absolute;
     top:18px;
     z-index: 2;
     display: block;
     width: 2.375rem;
     height: 2.375rem;
     line-height: 2.375rem;
     text-align: center;
     pointer-events: none;
     color: #aaa;
}
 .has-search .form-control{
    width:400px;
}
 .scroll_full{
    height:calc(100vh - 25vh);
    overflow-y:auto;
}
 .bg_lower1{
    position:relative;
}
 .bg_lower1:after{
     content: "";
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 330;
     background-image: url(/static/assets/images/lower1.png);
     width: 180px !important;
     height: 180px !important;
     margin-bottom: 1.9em;
     background-repeat: no-repeat;
     background-position: right;
     background-size: contain;
     filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7488%) hue-rotate(149deg) brightness(92%) contrast(114%)
}
 .border_right{
    border-right:1px solid #d8d8d8;
}
 .category_images_box{
     margin: auto;
     width: 100%;
     display: flex;
     justify-content: center;
     max-height: 425px;
}
 @media only screen and (max-width: 768px) {
     .signup-image {
         height: 30vh;
    }
}