@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box h6 {
    position: relative;
    color: black;
}

.box h6 i {
    position: absolute;
    right: 0;
}

.box p {
    color: hsl(229, 6%, 66%);
    font-size: 14px;
    color: black;
}

.box {
    border-radius: 5px;
    /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
    box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
    padding: 10px;
    margin: 20px;
    width: 160px;
    background-color: #8080800d;
}

.ad_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 30px 0;
    padding: 10px 0;
}

.ad_btn a {
    width: 20vw;
    text-align: center;
    /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
    box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
    padding: 10px;
    border-radius: 5px;
    background-color: var(--first-color);
    color: white;
    font-weight: bold;
    text-decoration: none;
}

@media screen and (max-width: 769px) {
    .box {
        border-radius: 5px;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        margin: 20px;
        width: min(220px, 42vw);
    }

    .ad_btn a {
        width: min(300px, 80vw);
        text-align: center;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        border-radius: 5px;
        background-color: var(--first-color);
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
}

@media screen and (max-width: 426px) {
    .box {
        border-radius: 5px;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        margin: 20px;
        width: min(300px, 85vw);
    }

    .ad_btn a {
        width: min(300px, 85vw);
        text-align: center;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        border-radius: 5px;
        background-color: var(--first-color);
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
}

img {
    display: inline;
    margin: auto 0 auto auto;
}

.c_c_1 {
    border-top: 3px solid hsl(0, 78%, 62%);
}

.c_c_2 {
    border-top: 3px solid hsl(180, 62%, 55%);
}

.c_c_3 {
    border-top: 3px solid hsl(34, 97%, 64%);
}

.c_c_4 {
    border-top: 3px solid hsl(212, 86%, 64%);
}

.c_c_5 {
    border-top: 3px solid #C2862D;
}

.c_c_6 {
    border-top: 3px solid #21184D;
}

.c_c_7 {
    border-top: 3px solid #BD62A8;
}

.c_c_8 {
    border-top: 3px solid #54AE93;
}

.c_i_1 {
    color: hsl(0, 78%, 62%);
}

.c_i_2 {
    color: hsl(180, 62%, 55%);
}

.c_i_3 {
    color: hsl(34, 97%, 64%);
}

.c_i_4 {
    color: hsl(212, 86%, 64%);
}

.c_i_5 {
    color: #C2862D;
}

.c_i_6 {
    color: #21184D;
}

.c_i_7 {
    color: #BD62A8;
}

.c_i_8 {
    color: #54AE93;
}

/*========== GOOGLE FONTS ==========*/

/*========== VARIABLES CSS ==========*/
:root {
    --header-height: 3.5rem;
    --nav-width: 13rem;

    /*========== Colors ==========*/
    --first-color: #6923D0;
    --first-color-light: #F4F0FA;
    --title-color: #19181B;
    /*--text-color: #58555E;*/
    --text-color: black;
    --text-color-light: #A5A1AA;
    --body-color: #F9F6FD;
    --container-color: #FFFFFF;

    /*========== Font and typography ==========*/
    --body-font: Calibri;
    --normal-font-size: .900rem;
    --small-font-size: 1.1rem;
    --smaller-font-size: .95rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== z index ==========*/
    --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --small-font-size: 1.1rem;
        --smaller-font-size: .95rem;
    }
}

/*========== BASE ==========*/
*,
::before,
::after {
    box-sizing: border-box;
}

body {
    margin: var(--header-height) 0 0 0;
    padding: 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h3 {
    margin: 0;
    color: #6923D0;
}

button {
    background-color: #6923D0;

}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/*========== HEADER ==========*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--container-color);
    box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
    padding: 0 1rem;
    z-index: var(--z-fixed);
}

.header__container {
    display: flex;
    align-items: center;
    height: var(--header-height);
    justify-content: space-between;
}

.user__name {
    display: flex;
    align-items: center;
}

.user__name span {
    padding-right: 10px;
    font-weight: bold;
    color: black;
    text-transform: capitalize;
}

.header__img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.header__logo {
    color: var(--title-color);
    font-weight: var(--font-medium);
    display: none;
}

.header__search {
    display: flex;
    padding: .40rem .75rem;
    background-color: var(--first-color-light);
    border-radius: .25rem;
}

.header__input {
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--first-color-light);
}

.header__input::placeholder {
    font-family: var(--body-font);
    color: var(--text-color);
}

.header__icon,
.header__toggle {
    font-size: 1.2rem;
}

.header__toggle {
    color: var(--title-color);
    cursor: pointer;
}

/*========== NAV ==========*/
.nav {
    position: fixed;
    top: 0;
    left: 10;
    height: 100vh;
    padding: 1rem 1rem 0;
    background-color: var(--container-color);
    box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
    z-index: var(--z-fixed);
    transition: .4s;
}

.nav a {
    text-decoration: none;
}

.nav__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 3rem;
    overflow: auto;
    scrollbar-width: none;
    /* For mozilla */
}

/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
    display: none;
}

.nav__logo {
    font-weight: var(--font-semi-bold);
    margin-bottom: 2.5rem;
}

.nav__list,
.nav__items {
    display: grid;
}

.nav__list {
    row-gap: 2.5rem;
}

.nav__items {
    row-gap: 1.5rem;
}

.nav__subtitle {
    font-size: var(--normal-font-size);
    text-transform: uppercase;
    letter-spacing: .1rem;
    /*color: var(--text-color-light);*/
}

.nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-color);
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    padding: .55rem .25rem;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.nav__link:hover {
    color: var(--first-color);
}

.nav__icon {
    font-size: 1.2rem;
    margin-right: .5rem;
}

.nav__name {
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    white-space: nowrap;
    padding-left: 10px;
}

.nav__logout {
    margin-top: 5rem;
}

/* Dropdown */
.nav__dropdown {
    overflow: hidden;
    max-height: 21px;
    transition: .25s ease-in-out;
}

.nav__dropdown-collapse {
    background-color: var(--first-color-light);
    border-radius: .25rem;
    margin-top: 1rem;
}

.nav__dropdown-content {
    display: grid;
    /* row-gap: 0.5px; */
    padding: .25rem 1.5rem .25rem 0.8rem;
}

.nav__dropdown-item {
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
}

.nav__dropdown-item:hover {
    color: var(--first-color);
}

.nav__dropdown-icon {
    margin-left: auto;
    transition: .4s;
}

/* Show dropdown collapse */
.nav__dropdown.open {
    max-height: 100rem;
}

/* Rotate icon arrow */
.nav__dropdown.open .nav__dropdown-icon {
    transform: rotate(180deg);
}

/*===== Show menu =====*/
.show-menu {
    left: 0;
}

.logo {
    width: 50px;
}

/*===== Active link =====*/
.active {
    color: var(--first-color);
}

.nav__sub__name {
    padding-left: 10px;
}

.app-content {
    padding: 0 1rem 1.5rem;
    min-height: calc(10vh - var(--header-height));
}

.app-content>.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px) {
    .header__search {
        width: 70%;
    }
}

@media screen and (min-width: 768px) {
    body {
        padding: 0;
    }

    .header {
        padding: 0 3rem 0 calc(var(--nav-width) + 4rem);
    }

    .header__container {
        height: calc(var(--header-height) + .5rem);
    }

    .header__search {
        width: 300px;
        padding: .55rem .75rem;
    }

    .header__toggle {
        display: none;
    }

    .header__logo {
        display: block;
        text-decoration: none;
    }

    .logo {
        width: 50px;
    }

    .header__img {
        width: 40px;
        height: 40px;
        order: 1;
    }

    .nav {
        left: 0;
        padding: 1.2rem .9rem 0;
        width: var(--nav-width);
    }

    .nav__items {
        row-gap: 1.7rem;
    }

    .nav__icon {
        font-size: 1.3rem;
        margin-right: .75rem;
    }

    .nav__logo-name,
    .nav__name,
    .nav__subtitle,
    .nav__dropdown-icon {
        opacity: 1;
    }

    .nav__sub__name {
        padding-left: 10px;
    }

    .nav__link {
        justify-content: flex-start;
    }

    .nav__dropdown {
        overflow: visible;
        max-height: none;
    }

    .nav__dropdown-collapse {
        display: none;
        margin-top: .75rem;
    }

    /* Direct child only - a descendant selector here would also reveal the
     panels of nested sub-dropdowns that are still closed. */
    .nav__dropdown.open>.nav__dropdown-collapse {
        display: block;
    }

    .nav__dropdown.open {
        max-height: none;
    }

    .nav__dropdown-icon {
        margin-left: auto;
    }

    .app-content {
        margin-left: var(--nav-width);
        width: calc(100% - var(--nav-width));
        padding: 0 2rem 1.5rem 2rem;
    }
}

/*admin home style*/
.role_name {
    text-align: center;
    color: #000;
    font-weight: bold;
}

.role_name span {
    color: var(--first-color);
}

.section_1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 20px;
    margin-top: 20px;
}

.s1 {
    /*width: 40vw;*/
    /*height: 40vh;*/
    background-color: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: 2px solid var(--first-color);
    border-right: 2px solid var(--first-color);
    border-left: 2px solid var(--first-color);
    /*border: 2px solid var(--first-color);*/
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.s {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.s1-h {
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #6923d038;
    color: var(--first-color);
    margin: 0;
    padding: 5px 5px;
    font-weight: bold;
    border: 2px solid var(--first-color);
}

.table {
    margin-top: 15px;
}

thead {
    background-color: var(--first-color);
    /*height:10%;*/
}

th {
    color: white;
    font-size: 14px;
}

td {
    font-size: 14px;
}

/*Form style*/
.f {
    padding: 1rem;
}

.f-l {
    display: block;
    margin-bottom: 0.5rem;
}

.input select,
.input input {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.input {
    margin-bottom: 1rem;
}

.f-button {
    background-color: var(--first-color);
    display: none;
    color: white;
    padding: 7px 14px;
    display: block;
    margin: auto;
    border: 3px solid var(--first-color);
    border-radius: 5px;
    font-weight: bold;
}

.f-s-button {
    background-color: var(--first-color);
    color: white;
    padding: 2px 11px;
    display: block;
    margin: auto;
    border: 3px solid var(--first-color);
    border-radius: 4px;
    font-weight: bold;
}

.f-button:hover {
    background-color: white;
    color: var(--first-color);
    border: 3px solid var(--first-color);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.f-padding {
    margin: 2vh 7.5vw;
}

.f-h {
    width: 50%;
    display: inline;
}

.f-h-div {
    display: flex;
    gap: 20px;
}

.r-o {
    background-color: #e9ecef;
    opacity: 1;
}


label {
    font-weight: bold;
}

.form-control {
    height: 30px;
    font-size: 12px;
}

@keyframes bake-pie {
    from {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

.pieID {
    display: inline-block;
    vertical-align: top;
}

.pie {
    height: 200px;
    width: 200px;
    position: relative;
    margin: 0 30px 30px 0;
}

.pie::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background: #EEE;
    border-radius: 50%;
    top: 50px;
    left: 50px;
}

.pie::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
    margin: 220px auto;

}

.slice {
    position: absolute;
    width: 200px;
    height: 200px;
    clip: rect(0px, 200px, 200px, 100px);
    animation: bake-pie 1s;
}

.slice span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
}

.legend {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #FFF;
    padding: 15px;
    font-size: 13px;
    box-shadow: 1px 1px 0 #DDD,
        2px 2px 0 #BBB;
}

.legend li {
    width: 110px;
    height: 1.25em;
    margin-bottom: 0.7em;
    padding-left: 0.5em;
    border-left: 1.25em solid black;
}

.legend em {
    font-style: normal;
}

.legend span {
    float: right;
}

.timeline {
    position: relative;
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none;
}

.timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background-color: #6923D0;
    /*background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);*/
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));*/
    /*background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);*/
    /*background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);*/
    /*background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);*/
    /*background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);*/

    z-index: 5;
}

.timeline li {
    padding: 1em 0;
}

.timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.direction-l {
    position: relative;
    width: 300px;
    float: left;
    text-align: right;
}

.direction-r {
    position: relative;
    width: 300px;
    float: right;
}

.flag-wrapper {
    position: relative;
    display: inline-block;

    text-align: center;
}

.flag {
    position: relative;
    display: inline;
    background: rgb(248, 248, 248);
    padding: 6px 10px;
    border-radius: 5px;

    font-weight: 600;
    text-align: left;
}

.direction-l .flag {
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}

.direction-r .flag {
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -35px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255, 80, 80);
    z-index: 10;
}

.direction-r .flag:before {
    left: -40px;
}

main {
    margin-top: 0;
}

.direction-l .flag:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgb(248, 248, 248);
    border-width: 8px;
    pointer-events: none;
}

.direction-r .flag:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgb(248, 248, 248);
    border-width: 8px;
    pointer-events: none;
}

.time-wrapper {
    display: inline;

    line-height: 1em;
    font-size: 15px;
    color: rgb(250, 80, 80);
    vertical-align: middle;
}

.direction-l .time-wrapper {
    float: left;
}

.direction-r .time-wrapper {
    float: right;
}

.time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248, 248, 248);
}

.desc {
    margin: 1em 0.75em 0 0;

    font-size: 0.77777em;
    font-style: italic;
    line-height: 1.5em;
}

.direction-r .desc {
    margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

    .timeline {
        width: 100%;
        padding: 4em 0 1em 0;
    }

    .timeline li {
        padding: 2em 0;
    }

    .direction-l,
    .direction-r {
        float: none;
        width: 100%;

        text-align: center;
    }

    .flag-wrapper {
        text-align: center;
    }

    .flag {
        background: rgb(255, 255, 255);
        z-index: 15;
    }

    .direction-l .flag:before,
    .direction-r .flag:before {
        position: absolute;
        top: -30px;
        left: 40%;
        content: ' ';
        display: block;
        width: 12px;
        height: 12px;
        margin-left: -9px;
        background: #fff;
        border-radius: 10px;
        border: 4px solid rgb(255, 80, 80);
        z-index: 10;
    }

    .direction-l .flag:after,
    .direction-r .flag:after {
        content: "";
        position: absolute;
        left: 40%;
        top: -8px;
        height: 0;
        width: 0;
        margin-left: -8px;
        border: solid transparent;
        border-bottom-color: rgb(255, 255, 255);
        border-width: 8px;
        pointer-events: none;
    }

    .time-wrapper {
        display: block;
        position: relative;
        margin: 4px 0 0 0;
        z-index: 14;
    }

    .direction-l .time-wrapper {
        float: none;
    }

    .direction-r .time-wrapper {
        float: none;
    }

    .desc {
        position: relative;
        margin: 1em 0 0 0;
        padding: 1em;
        background: rgb(245, 245, 245);
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.20);
        -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.20);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.20);

        z-index: 15;
    }

    .direction-l .desc,
    .direction-r .desc {
        position: relative;
        margin: 1em 1em 0 1em;
        padding: 1em;

        z-index: 15;
    }

}

.star {
    color: red;
    font-weight: bold;
}


.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box h6 {
    position: relative;
    color: black;
}

.box h6 i {
    position: absolute;
    right: 0;
}

.box p {
    color: hsl(229, 6%, 66%);
    font-size: 14px;
    color: black;
}

.box {
    border-radius: 5px;
    /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
    box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
    padding: 10px;
    margin: 20px;
    width: 160px;
    background-color: #8080800d;
}

.ad_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 30px 0;
    padding: 10px 0;
}

.ad_btn a {
    width: 20vw;
    text-align: center;
    /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
    box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
    padding: 10px;
    border-radius: 5px;
    background-color: var(--first-color);
    color: white;
    font-weight: bold;
    text-decoration: none;
}

@media screen and (max-width: 769px) {
    .box {
        border-radius: 5px;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        margin: 20px;
        width: 20vw;
    }

    .ad_btn a {
        width: 40vw;
        text-align: center;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        border-radius: 5px;
        background-color: var(--first-color);
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
}

@media screen and (max-width: 426px) {
    .box {
        border-radius: 5px;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        margin: 20px;
        width: 50vw;
    }

    .ad_btn a {
        width: 50vw;
        text-align: center;
        /*box-shadow: 0px 30px 40px -20px hsl(229, 6%, 66%);*/
        box-shadow: 1px 1px 0px 0px hsl(229, 6%, 66%);
        padding: 10px;
        border-radius: 5px;
        background-color: var(--first-color);
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
}

img {
    /*display: block;*/
    margin: auto 0 auto auto;
}

.c_c_1 {
    border-top: 3px solid hsl(0, 78%, 62%);
}

.c_c_2 {
    border-top: 3px solid hsl(180, 62%, 55%);
}

.c_c_3 {
    border-top: 3px solid hsl(34, 97%, 64%);
}

.c_c_4 {
    border-top: 3px solid hsl(212, 86%, 64%);
}

.c_c_5 {
    border-top: 3px solid #C2862D;
}

.c_c_6 {
    border-top: 3px solid #21184D;
}

.c_c_7 {
    border-top: 3px solid #BD62A8;
}

.c_c_8 {
    border-top: 3px solid #54AE93;
}

.c_i_1 {
    color: hsl(0, 78%, 62%);
}

.c_i_2 {
    color: hsl(180, 62%, 55%);
}

.c_i_3 {
    color: hsl(34, 97%, 64%);
}

.c_i_4 {
    color: hsl(212, 86%, 64%);
}

.c_i_5 {
    color: #C2862D;
}

.c_i_6 {
    color: #21184D;
}

.c_i_7 {
    color: #BD62A8;
}

.c_i_8 {
    color: #54AE93;
}

.details-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgb(0 0 0 / 40%);
}

.details {
    display: none;
    position: fixed;
    top: 2.5%;
    left: 2.5%;
    z-index: 1001;
    width: 95%;
    height: 95%;
    background-color: white;
    border-radius: 5px;
    background-color: var(--body-color);
}

.details-bg1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgb(0 0 0 / 40%);
}

.details1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    background-color: white;
    border-radius: 5px;
    background-color: var(--body-color);
}

.card-content {
    padding: 15px;
}

.card-body {
    background-color: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 0 0;
    margin-top: 15px;
    border: 2px solid #6923d0;
}

.card-heading {
    margin: 0;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    color: #6923d0;
    background-color: #6923d038;
    padding: 5px;
    border-bottom: 2px solid #6923d0;
}

/* ===== UI FIXES ===== */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 767px) {
    .header {
        padding: 0 1rem;
    }

    .header__container {
        gap: 10px;
    }

    .header__search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header__input {
        min-width: 0;
    }

    .app-content {
        margin-left: 0;
        padding: 0 1rem 1.5rem;
    }

    .f-padding {
        margin: 2vh 0;
    }

    .f-h-div {
        flex-wrap: wrap;
    }

    .f-h {
        width: 100%;
    }

    .details,
    .details1 {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        top: 10px;
        left: 10px;
        margin: 0;
        overflow: auto;
    }
}

@media screen and (max-width: 426px) {
    .cards {
        justify-content: center;
    }

    .box {
        width: min(300px, 85vw);
        margin: 10px;
    }

    .ad_btn {
        gap: 10px;
    }

    .ad_btn a {
        width: min(300px, 85vw);
    }

    .timeline {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   APP SHELL — FIXED SIDEBAR, SIDEBAR-DRIVEN CONTENT
   --------------------------------------------------------------------------
   --nav-width and --header-height are the single source of truth: the sidebar
   is sized from them, and the header + content area are offset by them.
   Change --nav-width and the whole layout follows.

   NOTE: main.php closes .app-content before each page prints its own markup,
   so page content ends up as a direct child of <body>. The content offset
   therefore lives on <body> — that is what keeps every page clear of the
   fixed sidebar, whether or not it is wrapped in .app-content.
   ========================================================================== */

:root {
    --nav-width: 15rem;
    --header-height: 3.5rem;
    --content-gap: 1rem;

    --z-nav: 120;
    --z-header: 110;
    --z-nav-backdrop: 105;
}

@media screen and (min-width: 768px) {
    :root {
        --header-height: 4rem;
        --content-gap: 1.5rem;
    }
}

html {
    scroll-padding-top: var(--header-height);
}

/* Content sits below the fixed header; on desktop it also clears the sidebar. */
body {
    margin: 0;
    padding: calc(var(--header-height) + var(--content-gap)) var(--content-gap) 2rem;
    min-height: 100vh;
}

/* ---------- Fixed header ---------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: var(--header-height);
    padding: 0 var(--content-gap);
    background-color: var(--container-color);
    box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
    z-index: var(--z-header);
}

.header__container {
    height: var(--header-height);
    gap: 1rem;
}

/* ---------- Fixed sidebar ---------- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--nav-width);
    height: 100vh;
    /* height: 100dvh; */
    padding: 1rem .9rem 0;
    background-color: var(--container-color);
    box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
    overflow: hidden;
    /* Off-canvas by default; slides in on mobile, pinned open on desktop. */
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: var(--z-nav);
}

/* Only the menu scrolls — the panel itself never moves with the page. */
.nav__container {
    height: 100%;
    padding-bottom: 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav.show-menu {
    transform: translateX(0);
}

/* Backdrop behind the mobile drawer (injected by main.js) */
.nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(22, 8, 43, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: var(--z-nav-backdrop);
}

.nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Stop the page scrolling behind the open drawer */
body.nav-open {
    overflow: hidden;
}

/* .app-content is now an inert pass-through: <body> owns the offset, so this
   must not add a second one for the pages that do render inside it. */
.app-content {
    margin-left: 0;
    width: auto;
    max-width: 100%;
    min-height: 0;
    padding: 0;
}

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

    /* The one line that ties the body to the sidebar width. */
    body {
        padding-left: calc(var(--nav-width) + var(--content-gap));
    }

    .nav {
        transform: none;
    }

    .header {
        left: var(--nav-width);
        padding: 0 var(--content-gap);
    }

    .header__toggle {
        display: none;
    }

    .nav-backdrop {
        display: none;
    }

    body.nav-open {
        overflow: visible;
    }
}


/* ==========================================================================
   RESPONSIVE LAYER
   --------------------------------------------------------------------------
   Page-level <style> blocks are emitted AFTER this file, so anything that has
   to beat them is written as `body .thing` (specificity 0,0,2 vs 0,0,1)
   instead of reaching for !important.
   ========================================================================== */

/* ---------- Overflow guards ----------
   Nothing in the content column may exceed the column. Without this, one wide
   element makes the whole page scroll sideways and get clipped. */
/* NB: .container is deliberately absent. Bootstrap caps it (540/720/960/1140px
   per breakpoint) and this stylesheet loads after Bootstrap at equal
   specificity, so listing it here would override that cap and let every
   .container page stretch to the full viewport. It cannot overflow anyway. */
main,
.app-content,
.container-fluid,
.card-body,
.s,
.s1,
.box {
    max-width: 100%;
}

img,
canvas,
svg,
iframe,
video,
embed,
object {
    max-width: 100%;
}

canvas {
    height: auto;
}

/* Long unbroken strings (IDs, URLs, emails) must not widen their container */
td,
th,
.box,
.nav__name,
.card-heading {
    overflow-wrap: break-word;
}

/* ---------- Data tables ----------
   main.js wraps every bare <table> in .table-responsive; this makes the
   wrapper actually scroll and keeps it inside the content column. */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

/* DataTables' own chrome (search box, pager) also overflows on phones */
.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* ---------- Overlays / modals ----------
   These are declared per page with desktop-sized fixed dimensions. Cap them to
   the viewport so they stay reachable and scrollable on small screens. */
body .pop-up,
body .pop-up2,
body .noti,
body .details,
body .details1 {
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
}

/* ---------- Forms ---------- */
.input select,
.input input,
.form-control,
select,
textarea {
    max-width: 100%;
}

/* NB: .f-h-div is deliberately NOT wrapped here. Its children are width:50%,
   so a global wrap breaks three-field rows onto two lines on desktop. The
   wrap is applied in the <=767px block below, where it is wanted. */

/* ---------- Tablet and below ---------- */
@media screen and (max-width: 991px) {
    .f-padding {
        margin: 2vh 0vw;
    }

    .ad_btn a {
        width: min(300px, 45vw);
    }
}

/* ---------- Phones ---------- */
@media screen and (max-width: 767px) {

    /* Shrink rather than hide — there is still room at tablet/large-phone. */
    .header__container .role_name {
        font-size: 1rem !important;
    }

    .user__name span {
        max-width: 30vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .f-padding {
        margin: 2vh 0;
    }

    .f-h {
        width: 100%;
    }

    .section_1 {
        row-gap: 12px;
    }

    /* Bootstrap button groups and toolbars run off the edge otherwise */
    .btn-group,
    .btn-toolbar,
    .d-flex {
        flex-wrap: wrap;
    }

    /* Tighter table text so more columns fit before scrolling */
    .table th,
    .table td {
        font-size: 12px;
        padding: .4rem .5rem;
        white-space: nowrap;
    }

    body .pop-up,
    body .pop-up2 {
        width: calc(100vw - 1.5rem);
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ---------- Small phones ---------- */
@media screen and (max-width: 480px) {

    /* Below this the title, user name, avatar and burger no longer coexist.
       !important is required: the anchor carries Bootstrap's .d-flex utility,
       which is itself declared !important. */
    .header__container .role_name {
        display: none !important;
    }

    .header__logo {
        display: none;
    }

    .cards {
        justify-content: center;
    }

    .card-content {
        padding: 10px;
    }

    h3 {
        font-size: 1.15rem;
    }
}


/* ==========================================================================
   BUDGET MASTER (budget_master.php)
   --------------------------------------------------------------------------
   Moved out of the two inline <style> blocks that page used to carry.

   Everything is scoped under .budget-master because the original rules used
   bare element selectors (form, label, input, button, table, th, td) and also
   redefined Bootstrap's .card and .row. Unscoped in a shared stylesheet those
   would restyle every page in the app.

   Kept at the end of the file on purpose: the inline blocks were emitted after
   this stylesheet, so they won any tie. Same order here keeps that behaviour.
   ========================================================================== */

.budget-master .wrapper {
    width: 90%;
    margin: 30px auto;
}

.budget-master .top-row {
    display: block;
}

.budget-master .card {
    flex: 1;
    border: 2px solid #7a3cff;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.budget-master .card h3 {
    margin: 0;
    padding: 12px;
    text-align: center;
    font-size: 15px;
    color: #5c2dd5;
    background: #cfc4e8;
    border-bottom: 2px solid #7a3cff;
}

.budget-master form {
    padding: 20px 30px;
}

.budget-master label {
    font-weight: 600;
    margin-top: 10px;
    display: block;
}

.budget-master input,
.budget-master select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f7f7fb;
}

.budget-master .table-box {
    padding: 15px;
}

.budget-master table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.budget-master th {
    background: linear-gradient(45deg, #7a3cff, #5c2dd5);
    color: white;
    padding: 8px;
}

.budget-master td {
    padding: 6px;
    border: 1px solid #eee;
}

.budget-master tr:nth-child(even) {
    background: #f5f5f5;
}

.budget-master .delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #dc2626;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.2s;
}

.budget-master .delete-btn:hover {
    color: #ffffff;
    background: #dc2626;
}

.budget-master .delete-btn i {
    font-size: 14px;
}

.budget-master .item-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* Spacing between the cards */
.budget-master .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

/* ---------- Excel upload / preview panel ---------- */

.budget-master .card-box {
    border: 2px solid #6d28d9;
    border-radius: 7px;
    background: #ffffff;
    max-width: 1000px;
    margin: auto;
}

.budget-master .section-title {
    text-align: center;
    font-weight: 600;
    color: #6d28d9;
    background-color: #6923d038;
    border-bottom: 2px solid #6d28d9;
    padding: 8px;
    font-size: 16px;
}

.budget-master .upload-box {
    padding: 25px;
    text-align: center;
}

/* The page declared `button` twice; the second block won. Order preserved. */
.budget-master button {
    margin-top: 40px;
    padding: 9px 16px;
    border: none;
    background: #6d28d9;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.budget-master button:hover {
    background: #5b21b6;
}

.budget-master .table-wrapper {
    overflow-x: auto;
    padding: 25px;
}

.budget-master .preview-table {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
    min-width: 1200px;
}

.budget-master .preview-table th {
    background: linear-gradient(90deg, #6923d0, #7c3aed);
    color: white;
    padding: 4px 6px;
    border: 1px solid #e5e7eb;
    text-align: center;
    font-weight: 600;
}

.budget-master .preview-table td {
    padding: 4px 6px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    text-align: right;
}

.budget-master .category-header {
    background: linear-gradient(90deg, #6923d0, #7c3aed);
    color: white;
    text-align: left !important;
    font-weight: 600;
}

.budget-master .section-row {
    background: #eef2ff !important;
    font-weight: 600;
    text-align: left !important;
}

.budget-master .category-cell {
    text-align: left !important;
    background: #f9fafb;
}

.budget-master .sub-category {
    padding-left: 18px !important;
}

.budget-master .preview-table tr:hover td {
    background: #eef2ff;
}

.budget-master .qtotal {
    background: #c7d7ea !important;
}

.budget-master .total {
    background: #d4edda !important;
    font-weight: 700;
}

.budget-master .total-row td {
    background: #d4edda !important;
    font-weight: 700;
}

@media screen and (max-width: 767px) {
    .budget-master .wrapper {
        width: 100%;
        margin: 15px auto;
    }

    .budget-master form {
        padding: 15px;
    }

    .budget-master .table-wrapper,
    .budget-master .upload-box {
        padding: 12px;
    }

    .budget-master .row {
        gap: 12px;
    }
}


/* ==========================================================================
   OTP LOGIN (otp_login.php)
   Scoped under .otp-page so nothing here reaches the rest of the app.
   ========================================================================== */

.otp-page .otp-step {
    display: none;
}

.otp-page .otp-step.is-active {
    display: block;
}

.otp-page .otp-title {
    font-weight: 600;
    color: var(--first-color);
    margin-bottom: .25rem;
}

.otp-page .otp-hint {
    color: #6c757d;
    font-size: .875rem;
    margin-bottom: 1.5rem;
}

/* ---- Mobile number field ---- */
.otp-page .otp-prefix {
    background-color: var(--first-color-light);
    border: 1px solid #ced4da;
    border-right: 0;
    border-radius: .25rem 0 0 .25rem;
    padding: .275rem .65rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--first-color);
    white-space: nowrap;
}

.otp-page .otp-mobile-wrap {
    display: flex;
}

.otp-page .otp-mobile {
    border-radius: 0 .25rem .25rem 0;
    letter-spacing: .08em;
}

/* ---- OTP digit boxes ---- */
.otp-page .otp-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 1.25rem;
}

.otp-page .otp-box {
    width: 48px;
    height: 56px;
    flex: 0 1 48px;
    min-width: 0;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--title-color);
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.otp-page .otp-box:focus {
    outline: none;
    border-color: var(--first-color);
    box-shadow: 0 0 0 3px rgba(105, 35, 208, .15);
}

.otp-page .otp-box.is-filled {
    border-color: var(--first-color);
    background-color: var(--first-color-light);
}

/* Hide the number-input spinners */
.otp-page .otp-box::-webkit-outer-spin-button,
.otp-page .otp-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-page .otp-sent-to {
    font-weight: 600;
    color: var(--title-color);
}

.otp-page .otp-resend {
    font-size: .875rem;
}

.otp-page .otp-resend button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--first-color);
    font-weight: 600;
    cursor: pointer;
}

.otp-page .otp-resend button[disabled] {
    color: var(--text-color-light);
    cursor: default;
}

.otp-page .otp-error {
    color: #dc3545;
    font-size: .875rem;
    min-height: 1.25rem;
    margin-bottom: .5rem;
}

.otp-page .otp-alt-link {
    font-size: .875rem;
}

/* ---- Account picker (shown when a number has several logins) ---- */
.otp-page .otp-account-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1rem;
}

.otp-page .otp-account {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: .75rem 1rem;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.otp-page .otp-account:hover:not([disabled]) {
    border-color: var(--first-color);
    background-color: var(--first-color-light);
}

.otp-page .otp-account[disabled] {
    opacity: .55;
    cursor: default;
}

.otp-page .otp-account.is-busy {
    border-color: var(--first-color);
    background-color: var(--first-color-light);
    opacity: 1;
}

.otp-page .otp-account-name {
    font-weight: 600;
    color: var(--title-color);
    word-break: break-all;
}

.otp-page .otp-account-role {
    font-size: .8125rem;
    color: var(--first-color);
    font-weight: 600;
}

@media screen and (max-width: 575px) {
    .otp-page .otp-inputs {
        gap: 6px;
    }

    .otp-page .otp-box {
        width: 100%;
        flex: 1 1 0;
        height: 48px;
        font-size: 1.1rem;
    }
}

.edit-btn{
    background-color:#ffc107;
}

/* ==========================================================================
   SCREEN GUIDE STRIP
   --------------------------------------------------------------------------
   Rendered by main.php at the top of every page: what this screen is for,
   where it sits on the six-stage pipeline, and what to do next. Collapsed
   state is remembered per screen in localStorage.

   Colours come from the same tokens as the rest of the shell so the strip
   reads as part of the app, not as something bolted on.
   ========================================================================== */

.scrguide {
    background: var(--container-color);
    border: 1px solid #E4DCF5;
    border-left: 4px solid var(--first-color);
    border-radius: 6px;
    margin: 0 0 1rem;
    font-size: .9rem;
    color: #3B3745;
    overflow: hidden;
}

.scrguide[hidden] {
    display: none;
}

/* ---------- toggle ---------- */

.scrguide__toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .9rem;
    background: var(--first-color-light);
    border: 0;
    border-bottom: 1px solid #E4DCF5;
    color: var(--first-color);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}

.scrguide__toggle:hover {
    background: #EBE3FA;
}

.scrguide__toggle:focus-visible {
    outline: 2px solid var(--first-color);
    outline-offset: -2px;
}

.scrguide__chev {
    margin-left: auto;
    transition: transform .18s ease;
    font-size: .8rem;
}

.scrguide.is-collapsed .scrguide__chev {
    transform: rotate(180deg);
}

.scrguide.is-collapsed .scrguide__body,
.scrguide.is-collapsed .scrguide__warn {
    display: none;
}

.scrguide.is-collapsed .scrguide__toggle {
    border-bottom: 0;
}

/* ---------- body ---------- */

.scrguide__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
    padding: .85rem .95rem;
}

.scrguide__col {
    min-width: 0;
}

.scrguide__col--why {
    flex: 3 1 320px;
}

.scrguide__col--flow {
    flex: 1 1 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
}

.scrguide__col--stage {
    flex: 1 1 240px;
}

.scrguide__k {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #8B84A0;
    margin-bottom: .18rem;
}

.scrguide__col--flow .scrguide__k:not(:first-child) {
    margin-top: .5rem;
}

.scrguide__why {
    margin: 0;
    line-height: 1.5;
    max-width: 68ch;
}

.scrguide__tip {
    margin: .4rem 0 0;
    padding-top: .4rem;
    border-top: 1px dashed #E4DCF5;
    color: #6E6683;
    font-size: .84rem;
    line-height: 1.45;
    max-width: 68ch;
}

/* ---------- prev / next links ---------- */

.scrguide__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
}

.scrguide__link--next {
    color: var(--first-color);
}

.scrguide__link--back {
    color: #6E6683;
    font-weight: 500;
}

.scrguide__link:hover {
    text-decoration: underline;
}

.scrguide__count {
    display: inline-block;
    margin-top: .3rem;
    font-size: .78rem;
    border-radius: 65px;
    padding: 1px 9px;
    line-height: 1.5;
}

.scrguide__count.is-live {
    background: #FBF0DC;
    color: #7A4E08;
}

.scrguide__count.is-zero {
    background: #ECEAF1;
    color: #6E6683;
}

.scrguide__count b {
    font-weight: 700;
}

/* ---------- pipeline ribbon ---------- */

.scrguide__ribbon {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: .1rem 0 0;
    padding: 0;
}

.scrguide__ribbon li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .22rem;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    text-align: center;
}

/* the connecting rail, drawn behind the dots */
.scrguide__ribbon li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #E4DCF5;
    z-index: 0;
}

.scrguide__ribbon li:first-child::before {
    display: none;
}

.scrguide__ribbon li.is-done::before,
.scrguide__ribbon li.is-here::before {
    background: var(--first-color);
}

.scrguide__dot {
    position: relative;
    z-index: 1;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .66rem;
    font-weight: 700;
    background: var(--container-color);
    border: 2px solid #D9D2E8;
    color: #8B84A0;
    line-height: 1;
}

.scrguide__ribbon li.is-done .scrguide__dot {
    background: var(--first-color);
    border-color: var(--first-color);
    color: #fff;
}

.scrguide__ribbon li.is-here .scrguide__dot {
    background: var(--first-color);
    border-color: var(--first-color);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(105, 35, 208, .18);
}

.scrguide__stage-name {
    font-size: .66rem;
    color: #8B84A0;
    letter-spacing: .02em;
    line-height: 1.2;
}

.scrguide__ribbon li.is-here .scrguide__stage-name {
    color: var(--first-color);
    font-weight: 700;
}

/* ---------- caution ---------- */

.scrguide__warn {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: .6rem .95rem .7rem;
    border-top: 1px solid #F2E4C8;
    background: #FDF7EA;
    color: #7A4E08;
    font-size: .845rem;
    line-height: 1.5;
}

.scrguide__warn i {
    margin-top: .18rem;
    flex: 0 0 auto;
}

/* ---------- flowchart panel empty state ---------- */

.flow-empty {
    margin: 0;
    padding: 1rem 0;
    color: #6E6683;
    font-size: .92rem;
}

/* ---------- narrow screens ---------- */

@media screen and (max-width: 767px) {
    .scrguide__body {
        gap: .85rem;
        padding: .75rem .8rem;
    }

    .scrguide__col--why,
    .scrguide__col--flow,
    .scrguide__col--stage {
        flex: 1 1 100%;
    }

    .scrguide__stage-name {
        display: none;
    }

    .scrguide__ribbon li::before {
        top: 9px;
    }
}

@media print {
    .scrguide {
        display: none;
    }
}