/* card_1 */

.card_1_base {
    background-color: white;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.12);
    border-radius: 0.25em;
    padding: var(--sp-m) var(--sp-x);
    position: relative;
    height: max-content;
}

.h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

.top_gap_card_1 {
    margin-top: 2em;
}

.card_1_size {
    min-width: 37.5rem;
    padding-bottom: var(--sp-x);
    padding-top:var(--sp-x);
}

.card_size_2 {
    width: 31.25rem;
}

.test_h_w {
    width: 300px;
    height: 400px;
}

.multiple_input_row_div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.multiple_row_div {
    width:100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
}

.between_card_line{
    position: relative; /* Parent needs to be positioned */
    width: 100%; /* Adjust width as needed */
    height: 15px; /* Adjust height as needed */
}

.between_card_line::before {
    content: ""; /* Necessary for the pseudo-element to display */
    position: absolute; /* Position relative to the container */
    left: 7%; /* 20% from the left of the container */
    top: 0; /* Start from the top edge */
    bottom: 0; /* Stretch to the bottom edge */
    width: 1px; /* Width of the line */
    background-color: #d6d6d6; /* Color of the line */
  }


.input_div_1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.input_label_1 {
    font-size: var(--text-size-95);
    color: grey;
}

.input_field_1 {
    background-color: white;
    border: 1px solid #d6d6d6;
    padding: var(--sp-xs) var(--sp-s);
    border-radius: 0.25em;
    font-size: var(--text-size-100);
}

.input_short {
    width: 50%;
}


.input_field_1:focus {
    outline: none !important;
    border: 1px solid #4279BC;
}


.progress_card {
    display: flex;
    border: 1px solid #d6d6d6;
    border-radius: 1em;
    align-items: center;
    background-color: white;
    z-index: 2;
    padding-top: 5px;
    padding-bottom: 5px;
    max-width: 400px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.pro_finished{
    width: 20px;
    height: 20px;
    fill: white;
}

.ring_finished{
    background-color: #4279BC;
}

.pro_inactive{
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}


.progress_icon {
    border-right: 1px solid #d6d6d6;
    padding: 0.4em;
    margin-right: 10px;
}

.icon_ring {
    border: 2px solid #4279BC;
    padding: 0.4em;
    border-radius: 50%;
}

.h5_card {
    font-size: var(--text-size-100);
    font-weight: bold;
}

.p_progress_card {
    font-size: var(--text-size-90);
    color: grey;
}

.p_header_h3 {
    font-size: var(--text-size-200);
    color: grey;
}

.p_header_h4 {
    font-size: var(--text-size-100);
    color: grey;
}

.check_pill {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f0f2f5;
    border: 1px solid #cccfd3;
    border-radius: 2em;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.8em;
    font-size:14px;
    color:#54656f;
}




.text-divider2 {
    display: flex;
    text-align: center;
    align-items: center;
}

.text-divider2 span {
    font-size: 0.9375rem;
    white-space: nowrap;
    padding: 0 1rem;
}

.text-divider2::before,
.text-divider2::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 20px;
    flex-grow: 1;
    background: hsl(240, 4%, 90%);
    vertical-align: middle;
}

.divider_top {
    margin-top: 20px;
}

.progress_divider {
    margin-top: 30px;
    margin-bottom: 30px;
}

.progress_svg {
    width: 20px;
    height: 20px;
    fill: #4279BC;
}



/* Progress bar */

.progress_bar_container {
    display: flex;
    width: 100%;
}

.required_div {
    display: flex;
    flex-direction: column;
    width:50%
}

.required_over_bar {
    display: flex;
    height: 16px;
    gap: 2px;
    align-items: center;
}

.required_over_bar_optional {
    display: flex;
    height: 16px;
    gap: 2px;
    align-items: center;
    border-left:2px dotted grey;
    padding-left:5px;
}

.optional_div {
    display: flex;
    flex-direction: column;
    width:50%;
    margin-left:5px;
}

.progress_txt {
    font-size: var(--text-size-80);
    color: grey;
}


.bar{
    height: 60%;
    background-color: lightgrey;
}

.bar_start {
    border-top-left-radius: 0.35em;
    border-bottom-left-radius: 0.35em;

}

.bar_end {
    border-top-right-radius: 0.35em;
    border-bottom-right-radius: 0.35em;
}

.bar_10{
    width: 20%;
}

.bar_30{
    width: 30%;
}

.bar_20{
    width: 20%;
}

.bar_40{
    width: 40%;
}

.bar_50{
    width: 80%;
}

.bar_80{
    width: 80%;
}

.bar_complete{
    background-color: #4279BC;;
}

.place_progress_txt {
    display: flex;
    justify-content: center;
}

.progress_main_container{
    margin-top:var(--sp-mm);
    width: 95%;
    display: flex;
    flex-direction: column;
}

.progress_progress_txt{
    font-size: var(--text-size-90);
    color: grey;
    padding:var(--sp-ss);
    margin-bottom:5px;
}

.mid_item_card{
    max-width: 300px;
}

.last_item_card{
    margin-left: auto;
    margin-right:10px;
}

.finished_pill{
    background-color: #4279bc36;
    color: #4279BC;
    border:none;
}




#extra_info_char_count{
    font-size: var(--text-size-80);
    color: grey;
    text-align: right;
}

.ad_header{
    margin-bottom: var(--sp-m);
}

.ad_btn_mg{
    margin-top: var(--sp-m);
}