/* Container for input + dropdown */
    #collegeAutoContainer {
        position: relative;
        /* anchor for dropdown */

        margin: 0 auto;
        /* keeps form centered */
    }

    /* Dropdown itself */
    #collegeDropdown {
        position: absolute;
        top: 100%;
        /* sit right below the input */
        left: 0;
        z-index: 9999;
        /* make sure it appears above other elements */
        width: 100%;
        /* match input width */
        max-height: 200px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        display: none;
        /* hidden until JS shows it */
    }

    #collegeDropdown .autocomplete-item {
        padding: 10px;
        cursor: pointer;
        font-size: 14px;
    }

    #collegeDropdown .autocomplete-item:hover {
        background-color: #f0f0f0;
    }

    .drop-area__drop-zoon {
        position: relative;
        /* height: 10.25rem; */
        height: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 2px dashed var(--clr-light-blue);
        border-radius: 15px;
        margin-top: -0.812rem;
        cursor: pointer;
        transition: border-color 300ms ease-in-out;
        margin-bottom: 0px;
    }

    .drop-area__drop-zoon .drop-zoon__icon {
        margin-top: 20px;
        margin-bottom: 10px;
    }

.img-fluid{
    width:100%;
    height:auto;
}
    @media screen and (min-device-width: 320px) and (max-device-width: 340px) {

        .exvent-hero-section-03 {
            height: 242px !important;
        }

        .event .btn-primary {
            color: #000;
            background-color: #fbcd02;
            border-color: #7d2032;
            width: 13%;
            font-size: 10px !important;
        }

    }

    @media screen and (min-device-width: 340px) and (max-device-width: 354px) {

        .exvent-hero-section-03 {
            height: 256px !important;
        }

    }


    @media screen and (min-device-width: 354px) and (max-device-width: 380px) {

        .exvent-hero-section-03 {
            height: 274px !important;
        }

    }

    @media screen and (min-device-width: 380px) and (max-device-width: 410px) {

        .exvent-hero-section-03 {
            height: 300px !important;
        }

    }



    @media screen and (min-device-width: 410px) and (max-device-width: 480px) {

        .exvent-hero-section-03 {
            height: 340px !important;
        }

    }

    @media screen and (min-device-width: 320px) and (max-device-width: 480px) {
        .resbanner {
            background: url(../common/img/sdgwalk/mobsdg.jpg) no-repeat !important;
            background-size: auto;
            background-size: cover !important;
        }
    }

    @media screen and (min-width: 460px) and (max-width: 1000px) {
        .exvent-hero-section-03 {
            height: 390px !important;
        }

        .resbanner {
            background: url(../common/img/sdgwalk/mobsdg.jpg) no-repeat !important;
            height: 200px;
            background-size: cover !important;
        }
    }

    button.chap-loader {
        border: navajowhite;
        background: none;
        font-size: 24px;
    }


    .step-icon {
        width: 60px;
        height: 60px;
        background: #e7ecf3;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px auto;
        font-size: 24px;
        color: #007bff;
    }

    .step-box {
        padding: 20px;
        transition: all 0.3s ease-in-out;
        height: 100%;
    }

    .step-box:hover {
        background: #f8f9fa;
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    }


    .svg-success {
        display: inline-block;
        vertical-align: top;
        height: 55px;
        opacity: 1;
        overflow: visible;
        justify-content: center;
        display: flex;
        margin: auto;
        padding-top: 1px;
        margin-top: 7px;
    }

    @-webkit-keyframes success-tick {
        0% {
            stroke-dashoffset: 16px;
            opacity: 1;
        }

        100% {
            stroke-dashoffset: 31px;
            opacity: 1;
        }
    }

    @keyframes success-tick {
        0% {
            stroke-dashoffset: 16px;
            opacity: 1;
        }

        100% {
            stroke-dashoffset: 31px;
            opacity: 1;
        }
    }

    @-webkit-keyframes success-circle-outline {
        0% {
            stroke-dashoffset: 72px;
            opacity: 1;
        }

        100% {
            stroke-dashoffset: 0px;
            opacity: 1;
        }
    }

    @keyframes success-circle-outline {
        0% {
            stroke-dashoffset: 72px;
            opacity: 1;
        }

        100% {
            stroke-dashoffset: 0px;
            opacity: 1;
        }
    }

    @-webkit-keyframes success-circle-fill {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes success-circle-fill {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .svg-success .success-tick {
        fill: none;
        stroke-width: 1px;
        stroke: #ffffff;
        stroke-dasharray: 15px, 15px;
        stroke-dashoffset: -14px;
        -webkit-animation: success-tick 450ms ease 1400ms forwards;
        animation: success-tick 450ms ease 1400ms forwards;
        opacity: 0;
    }

    .svg-success .success-circle-outline {
        fill: none;
        stroke-width: 1px;
        stroke: #81c038;
        stroke-dasharray: 72px, 72px;
        stroke-dashoffset: 72px;
        -webkit-animation: success-circle-outline 300ms ease-in-out 800ms forwards;
        animation: success-circle-outline 300ms ease-in-out 800ms forwards;
        opacity: 0;
    }

    .svg-success .success-circle-fill {
        fill: #81c038;
        stroke: none;
        opacity: 0;
        -webkit-animation: success-circle-fill 300ms ease-out 1100ms forwards;
        animation: success-circle-fill 300ms ease-out 1100ms forwards;
    }

    @media screen and (-ms-high-contrast: active),
    screen and (-ms-high-contrast: none) {
        .svg-success .success-tick {
            stroke-dasharray: 0;
            stroke-dashoffset: 0;
            -webkit-animation: none;
            animation: none;
            opacity: 1;
        }

        .svg-success .success-circle-outline {
            stroke-dasharray: 0;
            stroke-dashoffset: 0;
            -webkit-animation: none;
            animation: none;
            opacity: 1;
        }

        .svg-success .success-circle-fill {
            -webkit-animation: none;
            animation: none;
            opacity: 1;
        }
    }

    .svg-success .success-tick {
        fill: none;
        stroke-width: 1px;
        stroke: #ffffff;
        stroke-dasharray: 15px, 15px;
        stroke-dashoffset: -14px;
        -webkit-animation: success-tick 450ms ease 1400ms forwards;
        animation: success-tick 450ms ease 1400ms forwards;
        opacity: 0;
    }

    .svg-success .success-circle-outline {
        fill: none;
        stroke-width: 1px;
        stroke: #81c038;
        stroke-dasharray: 72px, 72px;
        stroke-dashoffset: 72px;
        -webkit-animation: success-circle-outline 300ms ease-in-out 800ms forwards;
        animation: success-circle-outline 300ms ease-in-out 800ms forwards;
        opacity: 0;
    }

    .svg-success .success-circle-fill {
        fill: #81c038;
        stroke: none;
        opacity: 0;
        -webkit-animation: success-circle-fill 300ms ease-out 1100ms forwards;
        animation: success-circle-fill 300ms ease-out 1100ms forwards;
    }

    @media screen and (-ms-high-contrast: active),
    screen and (-ms-high-contrast: none) {
        .svg-success .success-tick {
            stroke-dasharray: 0;
            stroke-dashoffset: 0;
            -webkit-animation: none;
            animation: none;
            opacity: 1;
        }

        .svg-success .success-circle-outline {
            stroke-dasharray: 0;
            stroke-dashoffset: 0;
            -webkit-animation: none;
            animation: none;
            opacity: 1;
        }

        .svg-success .success-circle-fill {
            -webkit-animation: none;
            animation: none;
            opacity: 1;
        }
    }


    .step-box {
        background: #f8f9fa;
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    }

    .regid {
        background-color: #ffd300;
        padding: 7px;
        border-radius: 10px;
        font-weight: 600;
    }

    /* pass css */
    .clearbtn {
        background: #d06464 !important;
        border-color: transparent;
        color: #fff;
        border: 2px solid #f1f3ff;
        display: flex;
        justify-content: center;
        border-radius: 10px !important;
        align-items: center;
    }

    .eventbtn .btn {
        height: 40px !important;
        padding: 0px 10px !important;
        width: 100% !important;
    }

    .regbutton {
        margin: 0px !important;
    }

    .up-bg-c {
        text-align: center;
        padding: 20px 15px;
        border-radius: 12px;
        margin-bottom: 35px;
        box-shadow: 0px 0px 8px 1px rgb(127 137 161 / 7%);
        background: #fff;
    }

    @media screen and (min-device-width: 1120px) and (max-device-width: 1920px) {
        .semi-sec .pass-hero-section-03 {
            position: relative;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
            height: 290px !important;
            z-index: 1;
        }
    }

    .stu-pass-head {
        margin-bottom: 30px;
        color: #af4554;
        border-bottom: 1px solid #af4554;
        padding-bottom: 10px;

    }

    /* passes styling */

    .label {
        font-weight: 500;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

    .photo-box,
    .scanner-box {
        /* width: 120px;
      height: 120px; */
        width: 100%;
        height: 100%;
        /* background-color: #000; */
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .pass-section {
        /* padding: 20px 15px; */
        border-radius: 12px;
        margin-bottom: 35px;
        box-shadow: 0px 0px 8px 1px rgb(127 137 161 / 7%);
        background: #fff;
    }
    .bookmark-strip {
        background-color: #ffd300; /* yellow */
        color: #000;
        font-weight: bold;
        padding: 8px 16px;
        width: max-content; /* adjust to content */
        position: relative;
        margin-bottom: 4px;
        float: right; /* place on right side */
        border-radius: 4px 0 0 4px; /* optional rounded left corners */
    }

    /* Create triangle "bookmark" effect on the right side */
    .bookmark-strip::after {
        content: "";
        position: absolute;
        right: -10px; /* adjust size */
        top: 0;
        width: 0;
        height: 0;
        border-top: 20px solid transparent;   /* height of triangle */
        border-bottom: 20px solid transparent; 
        border-left: 10px solid #ffd300;     /* color matches strip */
    }
    .bookmark-cut {
    background-color: #ffd300; /* yellow */
    color: #000;
    font-weight: bold;
    padding: 4px 46px 8px 10px;
    width: max-content;
    float: right; /* right side placement */
    margin-bottom: 4px;
    border-radius: 11px;
    margin-top: 10px;
    margin-left: 5px;
    /* clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%); */
    /* 85% here is how much is "cut off" diagonally */
}


.getpasscss{    background-color: #fffceb;
    box-shadow: 2px 0px 0px 2px #eee9e9;
    border-radius: 10px 0px 0px 10px;}

    .getpasswe{background-color: #fffceb;
    margin-left: 0;
    box-shadow: 2px 0px 0px 2px #eee9e9;
    border-radius: 0px 10px 10px 0px;}


#ncc_signature p{font-size: 12px;}

.getpasscss div {
    font-size: 14px;
    padding-bottom: 4px;
   
}

.getpasscssdiv {
    text-transform: capitalize;
}