/* GLOBAL VARIABLES */
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
:root {
    --dark-blue: #1B354D;
    --light-grey: #F1F1F1;
    --light-green: #E5F9F1;
    --light-purple: #E2E8FF;
    --light-blue: #DEF7FE;
    --green: #20CD8D;
    --red: #FF5E54;
    --purple: #6D62E4;
    --blue: #4CBAF7;
    --yellow: #FBC73D;
    --font-family: 'Nunito';
}


/* ----------------------------------------------------------------------------- */
/* GENERAL */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-size: small;
}

h1 {
    margin-left: 1rem;
}


h2 {
    padding-bottom: 0.5rem;
}

a {
    cursor: pointer;
}

.container-fluid {
    padding: 0 !important;
}

.container {
    max-width: 100%!important;
}

/* ----------------------------------------------------------------------------- */
/* UTILITIES */

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

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

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


/* ----------------------------------------------------------------------------- */
/* LANDING PAGE */
.flow__container {
    max-width: 900px;
}

.flow__hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark-blue);
    margin-bottom: 20vh;
    font-family: var(--font-family);
}

.flow__navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 3rem;
}

.flow__navbar .flow__img {
    flex: 1;
}

.flow__navbar img {
    width: 100px;
}

.flow__navbar__links {
    display: flex;
    gap: 1rem;
}

.flow__navbar__links a {
    color: #FFF;
    text-align: center;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    padding: 0.25rem;
}

.flow__navbar__links a.active {
    border-bottom: 2px solid var(--green);
}

.flow__navbar__links a:hover {
    color: var(--green);
    border-bottom: 2px solid var(--green);
}

.flow__navbar__menu {
    display: none;
}

.flow__navbar__icon img {
    width: 50px;
    height: 50px;
}

.flow__navbar__menu__container {
    position: absolute;
    margin-top: 60px;
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
    width: max-content;
    box-shadow: 0 0 10px 10px var(--dark-blue);
}

.flow__navbar__menu p {
    margin: 1rem 0rem;
}

.flow__navbar__menu a {
    color: var(--green);
    text-align: center;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    padding: 0.5rem;
}

.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }


.flow__navbar .flow__btns {
    flex: 1;
    justify-content: flex-end;
}

.flow__hero .flow__title {
    margin-top: 4rem;
}

.flow__title p {
    color: #02C37E;
    text-align: center;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.flow__title h1 {
    margin: 2rem 0;
    color: #FFF;
    text-align: center;
    font-family: var(--font-family);
    font-size: 52px;
    font-weight: 700;
    text-transform: capitalize;
}

.flow__title h2 {
    margin: 1rem 0;
    color: #FFF;
    text-align: center;
    font-family: var(--font-family);
    font-size: 32px;
    font-weight: 700;
    text-transform: capitalize;
}

.flow__title--blue h1,
.flow__title--blue h2 {
    color: var(--dark-blue);
}

.flow__title--left h2,
.flow__title--left p {
    text-align: left;
}

.flow__btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.flow__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    min-width: 150px;
    padding: 1rem;
    border-radius: 28px;
    color: white;
    font-size: 16px;
    font-family: var(--font-family);
    text-align: center;
    text-decoration: none;
}

.flow__btn:hover {
    background-color: white;
    border-width: 1.5px;
    border-style: solid;
    transition: 0.2s;
}

.flow__btn--green {
    background-color: var(--green);
}

.flow__btn--green:hover {
    color: var(--green);
    border-color: var(--green);
}

.flow__btn--purple {
    background-color: var(--purple);
}

.flow__btn--purple:hover {
    color: var(--purple);
    border-color: var(--purple);
}

.flow__btn--blue {
    background-color: var(--blue);
}

.flow__btn--blue:hover {
    color: var(--blue);
    border-color: var(--blue);
}

.flow__hero__video {
    margin-top: 4rem;
    margin-bottom: -20vh;
}

.flow__hero__video  video {
    width: 100%;
}

.flow__hero__arrows {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    left: 5vw;
    top: 25vh;
}

.flow__hero__arrows img:first-child {
    margin-left: 4rem;
    margin-bottom: -5rem;
    width: 75px;
}

.flow__hero__arrows img:last-child {
    width: 200px;
}



/* PRICING SECTION */
.flow__pricing {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 4rem;
    font-family: var(--font-family);
}

.flow__pricing__img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
}

.flow__plans {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 3rem;
    z-index: 1;
}

.flow__plans__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 2rem 1rem 3rem 1rem;
    flex: 1;
    min-height: 400px;
    border-radius: 20px;
    box-shadow: 0px 0px 41px 1px rgba(0, 0, 0, 0.03);
    border-top: 10px solid black;
}

.flow__plans__card--active {
    min-height: 440px;
}

.flow__plans__card--blue {
    border-color: var(--blue);
}

.flow__plans__card--green {
    border-color: var(--green);
}

.flow__plans__card--purple {
    border-color: var(--purple);
}

.flow__plans__card__title {
    text-align: center;
}

.flow__plans__card__title p {
    text-align: center;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px; /* 277.778% */
    letter-spacing: 4.5px;
    text-transform: uppercase;
}

.flow__plans__card__title h1 {
    margin: 0;
    color: #1B354D;
    text-align: center;
    font-family: var(--font-family);
    font-size: 40px;
    font-weight: 700;
    line-height: 50px; /* 92.593% */
    letter-spacing: 1.62px;
}

.flow__plans__card__li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.flow__plans__card__li img {
    width: 14px;
}

.flow__plans__card__li p {
    margin: 0;
}

.flow__pricing__spacer {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 360px;
    width: 100%;
    background-color: var(--light-green);
    margin-top: -250px;
    padding-bottom: 4rem;
    z-index: 0;
}

.flow__pricing__spacer img {
    display: none;
}

.flow__pricing__arrows {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
}

.flow__pricing__arrows img {
    margin-bottom: -15vh;
    margin-right: -4rem;
    height: 150px;
}



/* WHY FLOW SECTION */
.flow__why {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    font-family: var(--font-family);
}

.flow__why__body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap-reverse;
}

.flow__why__img {
    flex: 1;
}

.flow__why__img img {
    width: 400px;
    max-width: 90vw;
}

.flow__why__card {
    flex: 1;
}

.flow__why__li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.flow__why__li img {
    width: 14px;
}

.flow__why__li p {
    margin: 0;
}




/* TESTIMONIALS SECTION */
.flow__test {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark-blue);
    padding-top: 6rem;
    padding-bottom: 2rem;
    font-family: var(--font-family);
}

.flow__test__body {
    width: 100%;
    padding-left: calc((100vw - 900px) / 2);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.flow__test__body .flow__title {
    min-width: 300px;
}

.flow__test__arrow {
    width: 150px;
    margin-top: 2rem;
    margin-left: 3rem;
}

.flow__test__carousel {
    overflow: hidden;
}

.flow__carousel__slider {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-right: 15px;
    overflow-x: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.flow__carousel__slider::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.flow__carousel__slider {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.flow__carousel__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    padding-right: 10vw;
}

.img_nav {
    width: 120px;
}

.flow__carousel__arrows img {
    width: 30px;
    margin-left: 0.75rem;
    cursor: pointer;
}

.flow__test__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 0 0 auto;
    width: 300px;
    height: 320px;
    background-color: white;
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
}

.flow__test__card img {
    width: 60px;
    border-radius: 50%;
}

.flow__test__card p {
    font-size: 12px;
}

.flow__test__card h6 {
    font-weight: 700;
    border-left: 3px solid black;
    padding: 0.25rem 1rem;
}

.flow__test__card--green {
    background-color: var(--light-green);
}

.flow__test__card--green h6 {
    color: var(--green);
    border-left-color: var(--green);
}

.flow__test__card--blue {
    background-color: var(--light-blue);
}

.flow__test__card--blue h6 {
    color: var(--blue);
    border-left-color: var(--blue);
}

.flow__test__card--purple {
    background-color: var(--light-purple);
}

.flow__test__card--purple h6 {
    color: var(--purple);
    border-left-color: var(--purple);
}


/* HOW IT WORKS SECTION */
.flow__how_it_works {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 6rem;
    padding-bottom: 4rem;
    font-family: var(--font-family);
}

.flow__how__body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap-reverse;
}

.flow__how__img {
    display: flex;
    justify-content: start;
    flex: 1;
}

.flow__how__img img {
    width: 300px;
    max-width: 90vw;
}

.flow__how__card {
    flex: 1;
}

.flow__how__btns {
    width: 160px;
    margin-top: 2rem;
}



/* FAQ SECTION */
.flow__faq {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--light-green);
    padding-top: 4rem;
    padding-bottom: 4rem;
    font-family: var(--font-family);
}

.flow__faq__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.flow__faq__item {
    width: 100%;
}

.flow__faq__item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--dark-blue);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.flow__faq__item__header[aria-expanded="true"] {
    background-color: var(--green);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.flow__faq__item__header img {
    width: 24px;
}

.flow__faq__item__header .btn__collapse {
    display: none;
}

.flow__faq__item__header[aria-expanded="true"] .btn__expand {
    display: none;
}

.flow__faq__item__header[aria-expanded="true"] .btn__collapse {
    display: block;
}


.flow__faq__item__body {
    background-color: white;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 1rem;
}



/* CTA SECTION */
.flow__cta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    font-family: var(--font-family);
}

.flow__cta__arrows {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-top: 5rem;
    margin-bottom: -10rem;
}

.flow__cta__arrows img:first-child {
    margin-left: 13vw;
    margin-bottom: -5rem;
    width: 75px;
}

.flow__cta__arrows img:last-child {
    margin-left: 5vw;
    width: 200px;
}

.flow__cta__img {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 2rem;
    margin-top: -3rem;
    margin-bottom: -7rem;
    z-index: -1;
}

.flow__cta__img img {
    width: 400px;
}



/* FOOTER SECTION */
.flow__footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark-blue);
    padding-top: 4rem;
    padding-bottom: 4rem;
    font-family: var(--font-family);
    color: white;
}

.flow__footer__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.flow__footer__body hr {
    width: 100%;
}

.flow__footer__img {
    flex: 1;
}

.flow__footer__img img {
    width: 120px;
    max-width: 50vw;
}

.flow__footer__links {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.flow__footer__links--mob {
    display: none;
}

.flow__footer__social img {
    width: 30px;
    margin-right: 0.25rem;
}

.flow__footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flow__footer__col h6 {
    font-weight: 700;
    border-left: solid 2px var(--green);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.flow__footer__col a {
    color: white;
    text-decoration: none;
}

.flow__footer__btns {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}



/* ----------------------------------------------------------------------------- */
/* APP */
#cont_main {
    margin-top: 0;
    padding-top: 3rem;
    padding-bottom: 2rem;
    transition: margin-left .5s;
    min-height: 100vh;
}

.cont_main-collapsed {
    margin-left: calc(250px + 1rem);
}

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

#cont_main h1 {
    color: white;
    font-weight: 600;
    padding-left: 0.5rem;
}

.card {
    padding: 2rem;
    border: none;
    border-radius: 20px;
}

.card h6 {
    font-weight: 600;
    padding-left: 0.5rem;
    border-left: 3px solid var(--green);
}

.card-value {
    font-size: x-large;
    font-weight: bold;
}

.dash-card i {
    font-size: xxx-large;
    color: rgb(221, 223, 235);
}

.btn-add {
    background: none;
    color: var(--green);
    border-radius: 100px;
    border: none;
    font-size: x-large;
}

.cont-add .btn-add {
    margin-right: 0.5rem;
}

.cont-add > span {
    text-decoration: underline;
    font-weight: 600;
    vertical-align: super;
}

.chart {
    max-height: 400px;
    width: 100%;
}


/* The sidebar menu */
.sidebar {
    position: fixed;
    z-index: 1;
    top: 2rem;
    left: 1rem;
    min-height: 90vh;
    max-height: calc(100vh - 4rem);
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    border-radius: 20px;
    overflow-x: hidden;
    padding: 1rem;
    padding-top: 2rem;
    transition: 0.5s;
}

.sidebar-collapsed {
    margin-left: calc(-250px - 1rem);
}

#btn_sidebar {
    color: var(--green);
    padding: 0;
    margin-left: -0.5rem;
    margin-right: 0.5rem;
    font-size: 2.5rem;
}

#btn_sidebarClose {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0;
    font-size: xx-large;
}

#btn_expenses_template {
    width: 100%;
    background-color: var(--green);
    color: white;
    margin-bottom: 1rem;
    border-radius: 20px;
    padding: 0.5rem;
}

/* The sidebar links */
.sidebar a {
    width: 90%;
    margin: auto;
    padding: 0.5rem 0;
    color: var(--dark-blue);
    text-decoration: none;
    display: block;
    transition: padding 0.3s;
    margin-bottom: 0.5rem;
}

.sidebar a:hover {
    text-decoration: underline;
}

.sidebar-selected {
    padding-left: 0.5rem!important;
    font-weight: bold;
    text-decoration: underline!important;
    border-left: 2px solid;
}

hr {
    width: 80%;
    margin: auto;
    border-color: rgb(220, 220, 220);
}


/* COLLAPSE */
.collapse-item {
    margin: 1rem 0;
}

.collapse-header {
    height: 50px;
    display: flex!important;
    justify-content: space-between!important;
    align-items: center;
    gap: 0;
    color: white;
    font-weight: 600;
    border-top-left-radius: 20px!important;
    border-top-right-radius: 20px!important;
    padding: 0.5rem 1rem;
}

.collapse-header.collapsed {
    border-top-left-radius: 25px!important;
    border-top-right-radius: 25px!important;
    border-bottom-left-radius: 25px!important;
    border-bottom-right-radius: 25px!important;
    transition-delay: 0.3s;
}

.collapse-header > div {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    flex: 1;
}

.bank-table .collapse-header > div:last-child {
    flex: 0.25;
}

.collapse-body {
    max-height: 0;
    background-color: white;
    overflow: hidden;
    border-bottom-left-radius: 20px!important;
    border-bottom-right-radius: 20px!important;
    transition: 0.3s linear;
}

.collapse-header.sharp-bottom {
    border-top-left-radius: 20px!important;
    border-top-right-radius: 20px!important;
}

.collapse-body.sharp-bottom, .collapse-header.sharp-bottom.collapsed {
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.collapse-body.collapsed {
    max-height: 0;
    transition: 0.3s linear;
}

.collapse-content {
    padding: 1rem;
}

.tbl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 0;
}

.tbl-row > div {
    padding-left: 0.5rem;
    padding-right:0.5rem;
    flex: 1;
}

.bank-table .tbl-row:not(.tbl-footer) > div:last-child {
    flex: 0.25;
}

.tbl-row a {
    text-decoration: none;
}

.alt-table .tbl-row:nth-child(even) {
    background-color: white;
}

.tbl-footer {
    background-color: white;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.tbl-total {
    color: white;
    font-weight: 600;
}

.btn-round {
    background: none;
    color: white;
    border-radius: 100px;
    border: none;
    font-size: larger;
}

.btn-round > i {
    color: var(--dark-blue);
}

.img-inline {
    max-height: 1.5rem;
    max-width: 1.75rem;
    margin-right: 0.5rem;
}

#collapse_user .collapse-header {
    background-color: var(--green);
    color: var(--dark-blue);
    padding: 8px;
}

#bank_accounts .collapse-body .tbl-row {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#bank_accounts div > i {
    margin-right: 0.5rem;
}

.filtered:not(.freq-selected) {
    display: none;
}

.freq-table {
    transition: 0.3s;
}

.freq-table.collapsed {
    width: 60%!important;
    transition: 0.3s;
}

[data-role="freq-label"] {
    text-transform: capitalize;
}

[data-role="btn-freq"] {
    transform: rotate(180deg);
    transition: 0.3s;
}

.collapsed[data-role="btn-freq"] {
    transform: rotate(0deg);
}

.w-80 {
    width: 80%!important;
}

.w-20 {
    width: 20%!important;
}

.custom-tooltip {
    --bs-tooltip-bg: white;
    --bs-tooltip-color: var(--dark-blue);
}

/* SUMMARY */
#btn_summary {
    height: 50px;
    border-radius: 25px;
    background-color: var(--green);
    border: none;
    font-weight: 600;
}

.dropdown-summary:hover {
    background-color: var(--green)!important;
    color: black!important;
}

.dropdown-summary:active {
    background-color: var(--green)!important;
    color: black!important;
}

/* Form */
.modal-content {
    border-radius: 20px!important;
}

.modal label {
    min-width: 30%;
}

.cont-radio {
    padding-left: 1rem;
    margin: 1rem;
    color: white;
}

.cont-radio div {
    margin-right: 1rem;
}

.form-group,
.input-group {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.form-group .btn {
    margin-right: 1rem;
}

.cont-btn .btn {
    margin-right: 1rem;
}

.alert-success {
    display: none;
    height: 3.5rem;
    margin-top: 1rem;
    overflow: hidden;
    animation-name: alertMsg;
    animation-duration: 2s;
    animation-play-state: paused;
    animation-fill-mode: forwards;
}

.form-tab {
    display: none;
}

input[type=radio] {
    accent-color: var(--green);
}

input[type=color] {
    height: auto;
    display: none;
}

/* Hide arrows/spinners for number inputs*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

@keyframes alertMsg {
    0% {
        opacity: 1;
        height: 3.5rem;
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    50% {
        opacity: 0;
        height: 3.5rem;
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    100% {
        opacity: 0;
        height: 0;
        padding: 0;
        margin-top: 0rem;
        margin-bottom: 0rem;
    }
}


/* LOGIN / REGISTER */
.cont_login {
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: var(--dark-blue);
    justify-content: center;
    align-items: center;
}

.cont_login .card {
    padding: 4rem;
    text-align: center;
}

.cont_login input {
    height: 50px;
    background-color: var(--light-grey);
    border: none;
    border-radius: 25px;
    min-width: 25vw !important;
    padding-left: 1rem;
}

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

.btn-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: var(--green);
    color: white;
    border: none;
    border-radius: 25px;
    min-width: 10vw;
}

.btn-flow:hover {
    background-color: white;
    border: 1px solid var(--green) !important;
    color: var(--green) !important;
}

.cont_login a {
    color: var(--dark-blue);
    text-decoration: none;
}

.cont_login .alert {
    border-radius: 40px;
}


/* TABLES */
#tbl-body {
    height: 70vh;
    overflow-y: scroll;
}

table {
    position: relative;
    border: gray 1px solid;
    border-collapse: collapse;
}

thead {
    background: #f3f3f3;
    position: sticky;
    top: -1px;
    border: gray 1px solid;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}




/* Tablet */

@media screen and (max-width: 950px) {
    * {
        font-size: small;
    }

    /* LANDING PAGE */
    .flow__container {
        max-width: 90%;
    }
    .flow__navbar__links {
        display: none;
    }

    .flow__navbar__menu {
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .flow__hero {
        margin-bottom: 10vh;
    }

    .flow__hero__video {
        margin-bottom: -10vh;
    }

    .flow__hero__arrows {
        display: none;
    }

    .flow__pricing__arrows img {
        margin-bottom: -15vh;
        margin-right: 0;
        height: 100px;
    }

    .flow__why__img {
        justify-content: center;
    }

    .flow__how__img {
        justify-content: center;
    }

}



/* Mobile */

@media screen and (max-width: 450px) {
    * {
        font-size: xx-small;
    }

    /* LANDING PAGE */
    .flow__navbar__links,
    .flow__navbar .flow__btns {
        display: none;
    }

    .flow__btns {
        flex-direction: column;
        gap: 2rem;
    }

    .flow__navbar__menu {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .flow__container p,
    .flow__container span {
        font-size: medium;
    }

    .flow__title h1 {
        padding: 0 1rem;
        font-size: 40px;
    }


    .flow__plans {
        width: 100vw!important;
        max-width: 100vw!important;
        padding-left: 5vw;
        padding-right: 5vw;
        overflow-x: scroll;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .flow__plans::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    .flow__plans {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    } 
    
    .flow__plans__card {
        width: 80vw;
        flex: 0 0 auto;
    }

    .flow__plans__card--active {
        min-height: 400px;
    }

    .flow__plans__card p {
        font-size: medium;
    }

    .flow__plans__card__li {
        gap: 1rem;
    }

    .flow__pricing__spacer img {
        display: block;
    }

    .flow__test__body {
        width: 90vw;
        flex-wrap: wrap;
    }

    .flow__test__arrow {
        display: none;
    }

    .flow__test__card {
        padding: 3rem;
    }

    .flow__test__card h6 {
        font-size: 16px;
    }

    .flow__carousel__nav {
        justify-content: space-around;
        margin: 2rem 0;
    }

    .flow__carousel__arrows {
        display: none;
    }


    .flow__how__btns {
        margin: 3rem 0;
    }

    .flow__faq__item__header img {
        width: 16px;
    }

    .flow__cta__img {
        display: none;
    }

    .flow__cta__arrows {
        display: none;
    }

    .flow__footer__links {
        display: none;
    }

    .flow__footer__links--mob {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 3rem;
    }

    .flow__footer__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .flow__footer__header img {
        width: 16px;
    }

    .flow__footer__header a {
        transition: all ease 0.3s;
    }

    .flow__footer__header a[aria-expanded="true"] {
        transform: rotate(90deg);
    }

    .flow__footer__collapse {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .flow__footer__btns {
        max-width: 160px;
        gap: 2rem;
    }

    .flow__footer__links--mob p,
    .flow__footer__links--mob a,
    .flow__footer__links--mob h6 {
        font-size: small;
    }



    /* APP */
    .navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-item {
        font-size: small;
    }

    .sidebar {
        left: 0.75rem;
    }

    #cont_main {
        padding-top: 1rem;
    }

    .cont_main-collapsed {
        margin-left: 0;
    }

    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        --bs-gutter-x: 0.5rem;
    }

    .w-20 {
        width: 33%!important;
    }

    .w-80 {
        width: 67%!important;
    }

    #btn_sidebar > i, #btn_sidebarClose > i {
        font-size: x-large;
    }


    .freq-item:not(.freq-selected) {
        display: none;
    }

    .collapse-header {
        padding: 0.25rem 1rem;
    }

    .collapse-header > div {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .tbl-row > div {
        padding-left: 0.25rem;
        padding-right:0.25rem;
    }

    .btn-round > i {
        font-size: small;
    }

    .btn-add > i {
        font-size: medium;
    }


    /* LOGIN */
    .cont_login .card {
        width: 80%;
    }
    .btn-flow {
        min-width: 25vw;
    }
}