/* Auth->signin */

.input-group-addon {
    cursor: pointer;
    border: none;
    background-color: transparent;
    position: relative;
    /* Ensure relative positioning */
}

.input-group-addon i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}


/* project->vender */

.symbol-c-new>div {
    display: flex;
    justify-content: center;
    border-radius: 50%;
    width: 35px;
    align-items: center;
    height: 35px;
}

.no_data_list {
    display: none !important;
}


/* search and select on user page */


/* .content_search_select .options_search_select{
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
}
.options_search_select::-webkit-scrollbar{
  width: 0;
}
.options_search_select div{
  height: 40px;
}
.options_search_select div{
  display: flex;
  cursor: pointer;
  align-items: center; 

}
.options_search_select div:hover{
  background: rgb(244,246,250);
  color: rgb(79,201,218);
} */


/* for role-view table */


/* .scroll_container{
  max-height: 550px !important;
  overflow-y: scroll !important;
  padding-bottom: 0 !important;
} */

.scroll_container::-webkit-scrollbar {
    width: 0;
}

.scroll_container table {
    width: 100%;
    border-collapse: collapse;
}

.scroll_container th,
td {
    padding: 10px;
    margin-top: 0 !important;
}

.scroll_container thead tr {
    position: sticky;
    top: 0;
    background-color: inherit;
    z-index: 1;
}

.scroll_container tbody {
    overflow-y: auto;
    height: calc(100% - 30px);
}


/* listView and tileView in role-list page */

.listViewclass {
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 4px !important;
}

.listViewclass>#listView {
    font-size: 20px !important;
}

.tileViewclass {
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 4px !important;
}

.tileViewclass>svg {
    width: 20px !important;
    font-size: 20px !important;
}

#listView,
#tileview {
    -webkit-text-stroke: 0.01px !important;
}

.active_now {
    background-color: #4FC9DA;
    color: #fff !important;
}

.active_now>i {
    color: #fff !important;
}

.unactive_now>i {
    color: #4FC9DA !important;
    ;
}

.unactive_now {
    color: #4FC9DA;
    background-color: #DDF8FC;
}

.custom-dropdown-reporting-to .select2-results__options {
    max-height: 175px;
}


/* global- modal form will not close when click on outside */

.modal.fade.show {
    pointer-events: none;
}

.modal-content {
    pointer-events: auto;
}


/* operational-parameter->create op modal */

.left_border_radius>.select2-container--bootstrap5>.selection>.form-select {
    border-radius: 0 0.95rem 0.95rem 0 !important;
}

.btnforsidebar {
    position: absolute;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: rgba(9, 30, 66, 0.08) 0px 0px 0px 1px, rgba(9, 30, 66, 0.08) 0px 2px 4px 1px;
    right: -11px;
    width: 20px;
    height: 20px;
    top: 35px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.btnforsidebar:hover {
    background-color: #4FC9DA;
}

.app-sidebar {
    border-right: 1px dashed rgb(218, 215, 207) !important;
}

.removeSpace {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
}

.sticky_header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #fff !important;
}

.kml_model {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.kml_model>.modal-dialog {
    margin-right: 0px !important;
    margin-left: 0px !important;
    width: 60% !important;
    max-width: 100% !important;
    transition: all 0.3s ease;
}

.full-screen>.modal-content {
    height: 100% !important;
}

.kml_model>.modal-dialog.full-screen {
    width: 100% !important;
    height: 100% !important;
    padding: 10px 0px 10px 0px !important;
}

.btnfor_only_mob {
    display: none;
}

.card_forlabtop {
    display: flex !important;
}

.cardcarousel {
    display: none !important;
}

.max-width-map {
    position: absolute;
    bottom: 10px;
    right: 46px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(167, 168, 171);
    border-radius: 4px;
    padding: 5px;
    width: 30px;
    height: 30px;
    text-align: center;
    z-index: 10;
}
.compare_action {
    position: absolute;
    top: 77px;
    left: 0px;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    margin-left: 10px;
    width: 34px;
    height: 35px;
    text-align: center;
    z-index: 2;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
#documentData{
    border-radius: 10px 0 0 10px; 
    overflow: hidden; 
    background-color: #fff;
}
#rounded-frame {
    border-radius: 10px 0 0 10px; 
    overflow: hidden; 
}
.show-document{
    width:50% !important;
    display:  block !important;
}
.hide-document{
    display:  none;
}
.addFlex{
    flex-direction: row !important;
}
.compare_action{
    display: none;
  }
.full-screen-dev {
    position: fixed;
    top: 0;
    padding: 12px;
    left: 0;
    width: 100% !important;
    height: 100%;
    z-index: 999;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.full-screen-dev-h {
    height: 100% !important;
}

.addnewstep {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.for-m-dv {
    display: flex !important;
    margin: 0 auto!important;
    justify-content: center!important;
    align-items: center!important;
    flex-wrap: wrap!important;
}

.mob_view_device {
    display: none;
}

.pt-pb-mob {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

#addAfterSearch>input {
    display: none !important;
}
.filter-options-mob{
    width: 300px;
}

@media (max-width:995px) {
    #kt_app_sidebar1 {
        display: none !important;
    }
    .filter-btn-mob{
        margin: auto 0;
        height: max-content;
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 999;
        border-radius: 0!important;
        left: 0;
        font-size: 15px !important;
    }
    .filter-options-mob{
        width: 100% !important;
    }
    .modal-dialog-full-screen-mob {
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
    }
    .modal-content-full-screen-mob {
        border-radius: unset !important;
        height: 100% !important;
    }
    #addAfterSearch>input {
        display: block !important;
    }
    .form-check-custom.form-check-sm .form-check-mob {
        height: 22px;
        width: 23px;
        border: 1px solid #eae5de !important;
    }
    .search_tag_mob {
        width: 100%;
        justify-content: space-between;
    }
    .pt-pb-mob {
        padding-top: 0rem !important;
        padding-bottom: 4.5rem !important;
    }
    .mob-model {
        margin: 0 !important;
        padding: 0 !important;
        --bs-modal-padding: 0 !important;
    }
    .h-mob-modal {
        height: 100vh;
    }
    .progress-radial {
        justify-content: center;
        float: left;
        position: relative;
        width: 60px;
        align-items: center;
        display: flex;
        height: 61px;
        border-radius: 50%;
        border: 0px solid #5b4f4f;
        background-color: #f06445;
    }
    .progress-radial .overlay {
        position: absolute;
        width: 45px;
        height: 45px;
        background-color: #fffde8;
        border-radius: 50%;
        text-align: center;
        line-height: 46px;
        font-size: 11px;
    }
    .progress-25 {
        background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    .progress-50 {
        background-image: linear-gradient(-90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    .progress-75 {
        background-image: linear-gradient(0deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    .progress-100 {
        background-image: linear-gradient(90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    .w-h-progressbar {
        width: 60px;
        height: 60px;
    }
    .mob_view_device {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        background: #ffffff;
        padding: 17px;
        z-index: 99;
        width: 100%;
        border-bottom: 1px #f5f2f2 solid;
    }
    .btn-mob {
        border-top: 1px #f5f2f2 solid;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #ffffff;
        padding: 17px;
        z-index: 99;
        width: 100%;
    }
    .stepper-nav>.completed {
        display: none !important;
    }
    .stepper-nav>.current {
        display: block !important;
    }
    .stepper-nav>.pending {
        display: none !important;
    }
    .for-m-dv {
        display: flex !important;
        margin: 0 auto!important;
        justify-content: center!important;
        align-items: center!important;
        flex-wrap: unset !important;
        width: 100%;
    }
    .addColum {
        width: 100%;
    }
    .addnewstep {
        display: none;
    }
    .progressStatus {
        display: none;
    }
    .hiddfrommob {
        display: none !important
    }
    .no_data_list {
        display: flex !important;
    }
    .card_forlabtop {
        display: none !important;
    }
    .cardcarousel {
        display: flex !important;
        overflow-x: hidden;
        position: relative;
    }
    .next_prvbtn {
        position: absolute;
        right: 24px;
        gap: 5px;
        top: 22px;
    }
    .cardForMob {
        display: none;
        background: #fdfcfb;
        border: 1px dashed #E8E5DD;
        --bs-card-spacer-y: 1rem;
        border-radius: 0.95rem;
        --bs-card-spacer-x: 1rem;
        --bs-card-title-spacer-y: 0.5rem;
        --bs-card-border-width: 1px;
        --bs-card-border-color: #E8E5DD;
        --bs-card-border-radius: 0.95rem;
        --bs-card-box-shadow: none;
        --bs-card-inner-border-radius: calc(0.95rem - 1px);
        --bs-card-cap-padding-y: 0.5rem;
        --bs-card-cap-padding-x: 1rem;
        --bs-card-cap-bg: transparent;
        --bs-card-cap-color: ;
        --bs-card-height: ;
        --bs-card-color: ;
        --bs-card-bg: rgba(248, 246, 242, 0.3);
        --bs-card-img-overlay-padding: 1rem;
        --bs-card-group-margin: 0.75rem;
        position: relative;
    }
    .cardForMob.active {
        display: block;
    }
    .cardForMob .card-body {
        padding: 2rem 2.25rem;
        /* Adjust as needed */
    }
    button {
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    button:hover {
        background-color: #0056b3;
    }
    .nav-item-mob {
        justify-content: center !important;
    }
    .nav-mobile>.nav-item-mob {
        font-size: 13px !important;
    }
    .nav-mobile {
        display: grid !important;
        grid-template-columns: auto auto !important;
    }
    .btnforsidebar {
        display: none;
    }
    #kt_app_wrapper {
        margin-left: 0 !important;
    }
    #kt_app_header {
        margin-left: 0 !important;
    }
    .removePaddingAppContainer>.app-container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .removeSpace {
        padding-right: 2.5rem !important;
        padding-left: 2.5rem !important;
    }
    .custom_nav {
        display: none !important;
    }
    .sticky_header {
        position: sticky;
        top: 0;
        z-index: 99;
        background-color: #fff !important;
        box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px !important;
    }
    .user_icon {
        width: 30px !important;
        height: 30px !important;
    }
    .kml_model>.modal-dialog {
        margin-right: 0px !important;
        margin-left: 0px !important;
        width: 100% !important;
    }
    .btnfor_only_mob {
        display: flex !important;
        flex-direction: row;
        align-items: center;
    }
}

.listofmobileview {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-direction: column;
}
#contents_card{
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
}

@media (min-width:828px) {
    .listofmobileview {
        display: none !important;
    }
}

@media (max-width:828px) {
    .listForMov {
        display: none !important;
    }
    .card .card-header {
        margin-top: 0 !important;
    }
    .mobileViewCard {
        border-radius: 10px !important;
        width: 100% !important;
        padding: 24px 11px 24px 11px !important;
        display: flex;
        flex-direction: column;
    }
    .cardHeading {
        font-weight: 500;
        font-size: 15px;
        color: #211F1C;
        text-transform: capitalize;
    }
    .cardHeadingValue {
        font-weight: 400;
        color: #968e7e;
        font-size: 13px;
        letter-spacing: 0.2px;
    }
    .handleSomeValue {
        display: flex;
        flex-direction: row;
        font-weight: 500;
        font-size: 13px;
        color: #968e7e;
        position: absolute;
        top: -12px;
        right: 10px;
        gap: 11px;
        margin: 0;
        padding: 0;
    }
    .highLightPart {
        background: #e7fcff;
        border: #4fc9da 1px solid;
        border-radius: 6px;
        padding: 2px 7px;
    }
    .highLightSecondPart {
        background: antiquewhite;
        border: #ffc06d 1px solid;
        border-radius: 6px;
        padding: 2px 7px;
    }
    .highLightPart1 {
        border: #a3a3a3 1px solid;
        border-radius: 6px !important;
        padding: 3px 7px !important;
    }
    .highLightSecondPart1 {
        border: #a3a3a3 1px solid;
        border-radius: 6px !important;
        padding: 3px 7px !important;
    }
    .actionbtn_mobile {
        border: 1px solid #dfddd8 !important;
        border-radius: 8px !important;
    }
    .actionbtn {
        display: flex;
        flex-direction: row;
        justify-content: start;
        position: relative;
        top: 15px;
    }
    .forMobileCard {
        padding: 11px !important
    }
    .forMobileCard1 {
        padding: 11px !important;
        display: flex;
        flex-direction: column-reverse;
    }
    .forMobileCard1>div {
        width: 100% !important;
    }
}


/* Media query for screens with a maximum width of 600px (typical for mobile devices) */

@media (max-width: 600px) {
    /* page title->global */
    .removeSpace {
        padding-right: 0 !important;
        /* padding-left: 0 !important; */
    }
    #kt_app_sidebar1 {
        display: none !important;
    }
    .card-auto {
        width: 100% !important;
    }
    /* user management->list-users */
    .card {
        width: fit-content;
    }
    /* FlightLog->FlightLog View */
    .flight_view_navbar {
        margin-left: -7%;
        width: 138%;
        font-size: 8px !important;
    }
    .flight_navbar_width {
        width: 129% !important;
        margin-left: -13% !important;
    }
    /* Client -> Client list view */
    .vendor_upper_content {
        justify-content: center;
    }
    .vendor_upper_content>.flex-grow-1>.d-flex {
        justify-content: center !important;
    }
    .vendor_upper_content>.flex-grow-1>.flex-wrap>.mb-4 {
        display: none !important;
    }
    .custom-mobile-width-100 {
        width: 100% !important;
    }
    /* project -> Project edit view */
    .deliverables_check {
        justify-content: flex-end;
    }
    .hide-for-mob {
        display: none !important
    }
}


/* Media query for screens with a maximum width of 1024px (typical for tablets) */

@media (min-width: 601px) and (max-width: 1024px) {
    /* user management->user->list-users */
    /* .card{
  width: fit-content;
 } */
    /* user management->role->view-roles */
    /* Project management->Client->client-list */
    /* FlightLog->FlightLog View */
}


/* @media(max-width:400px){
  .flex_mobview{
    width: 100% !important;
    flex-direction: column !important;

  }
  
} */


/* laptop view -> stepper */

.current>.addnewstep>.backgroundStep {
    width: 30px;
    height: 29px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    border: 2px solid var(--bs-link-color);
}

.current>.addnewstep>.backgroundStep>span {
    width: 21px;
    height: 20px;
    border-radius: 100%;
    background-color: var(--bs-link-color);
}

.completed>.addnewstep>.backgroundStep>.newCurr::before {
    content: "\f00c";
    font-family: "FontAwesome";
    color: whitesmoke;
}

.completed>.addnewstep>.backgroundStep {
    width: 30px;
    height: 29px;
    border-radius: 100%;
    background-color: var(--bs-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending>.addnewstep>.backgroundStep {
    width: 30px;
    height: 29px;
    border-radius: 100%;
    background-color: #b6f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.backgroundStep {
    width: 30px;
    height: 29px;
    border-radius: 100%;
    background-color: #b6f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.completed>.addnewstep>.backgroundStep>i {
    color: #FFF;
}

.current>.addnewstep>progress::-webkit-progress-value {
    background-color: rgb(99, 211, 226);
}

.completed>.addnewstep>progress::-webkit-progress-value {
    background-color: rgb(8, 124, 8);
}


/* HTML: <div class="loader"></div> */



.loader {
    width: 30px;
    height: 20px;
    aspect-ratio: 1;
    --c: linear-gradient(#bdbdbd 0 0);
    --r1: radial-gradient(farthest-side at bottom, #bdbdbd 93%, #bdbdbd);
    --r2: radial-gradient(farthest-side at top, #bdbdbd 93%, #bdbdbd);
    background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
    background-repeat: no-repeat;
    animation: l1 1s infinite alternate;
}


@keyframes l1 {
    0%,
    10% {
        background-size: 8px 0, 8px 4px, 8px 4px;
        background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
    }
    90%,
    100% {
        background-size: 8px 100%, 8px 4px, 8px 4px;
        background-position: 0 50%, 0 -2px, 0 calc(100% + 2px), 50% 50%, 50% -2px, 50% calc(100% + 2px), 100% 50%, 100% -2px, 100% calc(100% + 2px);
    }
}


/* HTML: <div class="loader"></div> */

.loader-all {
    --d: 28px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    z-index: 9999;
    color: #3ec8cf;
    box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0, calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1px, calc(0*var(--d)) calc(1*var(--d)) 0 2px, calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px, calc(-1*var(--d)) calc(0*var(--d)) 0 4px, calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px, calc(0*var(--d)) calc(-1*var(--d)) 0 6px;
    animation: l27 1s infinite steps(8);
}

@keyframes l27 {
    100% {
        transform: rotate(1turn)
    }
}


div#loader_container {
    width:500px;
    margin:15% auto;
    text-align:center;
    padding-top:50px;
  }
  div#bar_container {
    height:12px;
    background:#dcdbd7;
    border-radius:20px;
    margin-bottom:20px;
    position:relative;
  }
  div#progress_bar {
    background-color:#dcf1c6;
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #71e4f5), color-stop(100%, #555bb4));
    background-image: -webkit-linear-gradient(top, #71e4f5 0%, #555bb4 100%);
    background-image: -moz-linear-gradient(top, #71e4f5 0%, #555bb4 100%);
    background-image: -ms-linear-gradient(top, #71e4f5 0%, #555bb4 100%);
    background-image: -o-linear-gradient(top, #71e4f5 0%, #555bb4 100%);
    background-image: linear-gradient(to bottom, #71e4f5 0%, #555bb4 100%);
    height:100%;
    position:absolute;
    top:0;
    left:0px;
    border-radius:20px;
    width:8%;
    transition:width 0.1s ease-in-out;
  }
  div#progress_percentage {
    position:absolute;
    top:-40px;
    right:-10px;
    width:30px;
    height:30px;
    background:#edeef2;
    background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #edeef2), color-stop(100%, #c9c9d3));
    background-image: -webkit-linear-gradient(top, #edeef2 0%, #c9c9d3 100%);
    background-image: -moz-linear-gradient(top, #edeef2 0%, #c9c9d3 100%);
    background-image: -ms-linear-gradient(top, #edeef2 0%, #c9c9d3 100%);
    background-image: -o-linear-gradient(top, #edeef2 0%, #c9c9d3 100%);
    background-image: linear-gradient(to bottom, #edeef2 0%, #c9c9d3 100%);
    border-radius:25px;
    padding-top: 9px;
    font-size:10px;
    color:#737371;
    text-shadow:0 0 2px #bebfc3;
    box-shadow:0 2px 5px #c1c1bf;
  }
  div#progress_percentage::before { /* used for the border of the arrow */
    content:"";
    position:absolute;
    left:11px;
    bottom:-11px;
    border-top:5px solid #999;
    border-right:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid transparent;
  }
  div#progress_percentage::after { /* the actual little arrow in the baloon */
    content:"";
    position:absolute;
    left:11px;
    bottom:-10px;
    border-top:5px solid #c9c9d3;
    border-right:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid transparent;
  }
  div#text_container {
    font-weight:bold; 
    font-size:22px;
    text-shadow:-1px 1px 1px #d1d0cc;
  }
  div#text_container span {
    display:block;
    font-weight:normal;
    font-size:11px;
    margin-top:6px;
  }



  #new_loader{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000069;
}

.deli{
    border-right:1px dashed #DAD3C3; /* Adjust as needed */
 }

/* Remove border for all columns when col-sm-12 layout is active (small screens) */
@media (max-width: 575.98px) {
	.deli{
        border-right: none; 
    }
}

@media (max-width: 768px) { /* For mobile screens */
    .ribbon.ribbon-start .ribbon-label {
        top: 35% !important;  /* Moves it closer to the top */
        transform: translateX(-5px) translateY(0); /* Remove vertical centering */
    }
    
    /* Ensure the content inside card-header is spaced correctly */
    .card-ribbon {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        justify-content: space-between; /* Pushes ribbon to the top and content to bottom */
        height: 100%; /* Ensure full height */
        padding-bottom: 1rem; /* Adjust bottom padding for spacing */
        min-height: 87px !important;
    }
    #total_area_sqkm {
        justify-content: flex-start !important; /* Align at bottom */
        align-items: flex-end; /* Push content down */
        display: flex;
        padding-left: 0px !important;
        margin-left: 0px !important;
        margin-top: 0.5rem !important;
    }
    #total_duration {
        justify-content: flex-start !important; /* Align at bottom */
        align-items: flex-end; /* Push content down */
        display: flex;
        padding-left: 0px !important;
        margin-left: 0px !important;
        margin-top: 0.5rem !important;
    }
}