.loadingdiv {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fafafa;
    opacity: .8;
    filter: alpha(opacity=70);
}

#pageloaddiv, #FFloaddiv, #modalloaddiv {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fafafa;
    opacity: .8;
    filter: alpha(opacity=70);
}

.brand-icon {
    width: 50px;
    height: 60px;
    float: left;
    padding-top: 5px;
    padding-left: 15px;
    padding-bottom: 5px;
    margin-right: 5px;
}

h4, .h4 {
    font-size: 14px;
}

hr {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 0;
    border-top: 1px solid rgba(115, 31, 155, .2);
}

.pace-progress {
    height: 10px;
}

.pace .pace-progress {
    background-color: #ff6e40;
}

.nano > .nano-pane > .nano-slider {
    background-color: #005B8F;
}

.required::after {
    content: "*";
    display: inline-block;
    color: red;
    border-top: none;
    text-align: left;
    margin-left: 0.25em;
}

.error {
    color: red;
}

.form-control.error {
    border-color: red;
}

.error-class {
    color: red;
    border: 1.5px inset red;
    /*border-color: red;*/
}

.valid-class {
    color: #8bc34a;
    /*border: 1px inset green;*/
}

.tr_verified_quote {
    background-color: #c8e2a9 !important;
    font-weight: bold;
}

/*********************
  Media Query Classes
**********************/
@media only screen and (max-width: 600px) {
    .hide-on-small-only, .hide-on-small-and-down {
        display: none !important;
    }
}

@media only screen and (max-width: 992px) {
    .hide-on-med-and-down {
        display: none !important;
    }
}

@media only screen and (min-width: 601px) {
    .hide-on-med-and-up {
        display: none !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
    .hide-on-med-only {
        display: none !important;
    }
}

@media only screen and (min-width: 993px) {
    .hide-on-large-only {
        display: none !important;
    }
}

@media only screen and (min-width: 1201px) {
    .hide-on-extra-large-only {
        display: none !important;
    }
}

@media only screen and (min-width: 1201px) {
    .show-on-extra-large {
        display: block !important;
    }
}

@media only screen and (min-width: 993px) {
    .show-on-large {
        display: block !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
    .show-on-medium {
        display: block !important;
    }
}

@media only screen and (max-width: 600px) {
    .show-on-small {
        display: block !important;
    }
}

@media only screen and (min-width: 601px) {
    .show-on-medium-and-up {
        display: block !important;
    }
}

@media only screen and (max-width: 992px) {
    .show-on-medium-and-down {
        display: block !important;
    }
}

@media only screen and (max-width: 600px) {
    .center-on-small-only {
        text-align: center;
    }
}

/* 2dp elevation modified*/
.z-depth-1 {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
}

/* 6dp elevation modified*/
.z-depth-2 {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .3);
}

/* 12dp elevation modified*/
.z-depth-3 {
    -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}

/* 16dp elevation */
.z-depth-4 {
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
}

/***** used in Login and other account Pages ******/
.login-bg {
    background-image: url(../../Content/Images/GI/login_bg.jpg);
    background-repeat: repeat;
}

.border-radius-6 {
    border-radius: 6px !important;
}

.lock-wrapper h4 {
    color: #005B8F;
}

/***** colors ********/

.text-success {
    color: #34a853 !important;
}

.text-danger {
    color: #f0300b !important;
}

.blue-icon, .blue-text {
    color: #005B8F !important;
}

.light-green-icon, .light-green-text {
    color: #8bc34a !important;
}

.orange-icon, .orange-text {
    /*color: #ff6e40 !important;*/
    color: #ff815a !important;
}

.mint-icon, .mint-text {
    color: #6bd0b5 !important;
}
/****** START - ALERTS ******/
.alert {
    margin-bottom: 10px;
}

.alert-message, .alert-title {
    font-size: inherit;
}

.media-body, .media-left, .media-right {
    vertical-align: middle;
}
/****** START - BUTTONS ******/

.btn-table {
    margin-right: 5px;
    padding: 5px;
    font-size: 12px;
    line-height: 0.8;
}


.btn-primary, .btn-small {
    background: linear-gradient(35deg, #005B8F, #482E50) !important;
    color: #fff;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-small:hover,
    .btn-small:focus {
        background-image: linear-gradient(35deg, #8e24aa, #ff6e40) !important;
        color: #fff;
    }

.btn-small,
.btn-default-small {
    font-size: 12px;
}

.btn-default-small {
    background-color: #fff;
    color: #005B8F;
    height: 32.4px;
    border: solid 1px #005B8F;
}

    .btn-default-small:hover,
    .btn-default-small:focus {
        background-image: linear-gradient(35deg, #482E50, #005B8F) !important;
        color: #fff;
    }

.btn-flat-table {
    font-size: 12px;
    display: inline-block;
    height: 15px;
    padding: 0 0.2rem;
    vertical-align: middle;
    border: none;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    text-decoration: none;
    padding: 5px;
}

    .btn-flat-table.fa {
        font-size: 16px;
    }

    .btn-flat-table:hover,
    .btn-flat-table:focus {
        box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
        transform: translateY(-0.25em);
    }

.btn-labeled:not(.btn-block):not(.form-icon) {
    line-height: 1.2;
}

.btn-circle-sm { /* used in approve agency  */
    padding: 2px;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    font-size: 10px;
}

.panel-heading > .panel-control > .btn-primary, .btn-small {
    background: linear-gradient(35deg, #ECD9A2, #C0954F) !important;
    color: #fff;
}

    .panel-heading > .panel-control > .btn-primary:hover,
    .panel-heading > .panel-control > .btn-primary:focus,
    .panel-heading > .panel-control > .btn-small:hover,
    .panel-heading > .panel-control > .btn-small:focus {
        background: linear-gradient(35deg, #005B8F, #482E50) !important;
        color: #fff;
    }


/****** END - BUTTONS ******/

/*================= input elements=============== */
input[type=search] {
    -webkit-appearance: auto;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #C0954F;
    outline: 0;
}
/*date-picker*/
.ui-widget-header {
    color: #fff;
    background-color: #482E50;
}

    .ui-widget-header .ui-icon {
        background-image: url(images/ui-icons_ffffff_256x240.png);
    }

.ui-datepicker .ui-datepicker-title select {
    color: #482E50;
}
/*============ panel customization =============*/
.panel {
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid #C0954F;
}

.panel-heading {
    height: 40px;
}

    .panel-heading > h3 {
        font-weight: 500;
        color: #C0954F;
    }

    .panel-heading .panel-control .btn {
        border-radius: 4px;
    }

        .panel-heading .panel-control .btn .btn-small {
            font-size: 10px;
        }

        .panel-heading .panel-control .btn .fa {
            color: #C0954F;
        }

.panel-title {
    font-weight: 400;
    padding: 0 20px 0 20px;
    font-size: 15px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-body {
    padding: 10px;
    position: relative;
}

.panel-footer {
    padding: 5px 10px;
}

/*============ tab customization =============*/
/*.tab-base .nav-tabs {
    border: 1px solid #005B8F;
}*/
.nav-tabs li a {
    line-height: 15px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: #fff;
    cursor: default;
    background-color: #005B8F;
    border: 1px solid #005B8F;
    border-bottom-color: transparent;
    box-shadow: 0 -2px 5px 3px rgba(0, 0, 0, .14), 10px 0 16px -3px rgba(0, 0, 0, .14), -5px 0 5px -5px rgba(0, 0, 0, .14);
}

.tab-base .tab-content {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    padding: 15px;
    border: 1px solid #005B8F;
}


/*----- Tabs Outline CSS ----*/

/*.tab-outline {
}*/

.tab-outline .nav.nav-tabs {
    border-bottom: transparent;
}

    .tab-outline .nav.nav-tabs .nav-item .nav-link {
        display: block;
        padding: 17px 49px;
        color: #71748d;
        background-color: #e9e9f2;
        border-color: #c4c4cf #c4c4cf #c4c4cf;
        margin-right: 3px;
    }

/*.tab-outline .nav.nav-tabs .nav-item {
        }*/

.tab-outline .nav-tabs .nav-link.active {
    color: #5969ff !important;
    background-color: transparent !important;
    border-color: #c4c4cf #c4c4cf #efeff6 !important;
}

.tab-outline .nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: #5969ff !important;
}

.tab-outline .tab-content {
    padding: 30px;
    border: 1px solid #c4c4cf;
    border-radius: 4px;
    border-top-left-radius: 0px;
}


/*=========== START - Data Table customization ================*/
table.dataTable thead th, table.dataTable tfoot th {
    font-weight: 400;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #dbdbdb;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.2em 0.5em;
    border-radius: 2px;
    color: #005B8F !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #005B8F !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: #482E50 !important;
        border: 1px solid #482E50;
        background-color: #ffffff;
        /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #111));
        background: -webkit-linear-gradient(top, #fff 0%, #111 100%);
        background: -moz-linear-gradient(top, #fff 0%, #111 100%);
        background: -ms-linear-gradient(top, #fff 0%, #111 100%);
        background: -o-linear-gradient(top, #fff 0%, #111 100%);
        background: linear-gradient(to bottom, #fff 0%, #111 100%);*/
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        color: #fff !important;
        border: 1px solid #482E50;
        background-color: #482E50;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #482E50), color-stop(100%, #482E50));
        background: -webkit-linear-gradient(top, #482E50 0%, #482E50 100%);
        background: -moz-linear-gradient(top, #482E50 0%, #482E50 100%);
        background: -ms-linear-gradient(top, #482E50 0%, #482E50 100%);
        background: -o-linear-gradient(top, #482E50 0%, #482E50 100%);
        background: linear-gradient(to bottom, #482E50 0%, #482E50 100%);
    }

table.dataTable thead th, table.dataTable thead td {
    padding: 5px 15px;
    border-bottom: 1px solid #111;
}

.selected_row {
    background-color: #005B8F;
    color: #fff;
}

    .selected_row td {
        background-color: #C0954F;
    }

.table > thead > tr > th {
    vertical-align: middle;
    font-weight: 400;
}

table a:not(.btn) {
    text-decoration: underline;
}
/*=========== END - Data Table  customization ================*/


/*.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-top: 1px solid #005B8F;
}*/
.gradient {
    background: rgba(35,148,209,1); /* Old Browsers */
    background: -moz-linear-gradient(left, rgba(35,148,209,1) 0%, rgba(35,148,209,1) 16%, rgba(84,64,125,1) 51%, rgba(84,64,125,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(35,148,209,1)), color-stop(16%, rgba(35,148,209,1)), color-stop(51%, rgba(84,64,125,1)), color-stop(100%, rgba(84,64,125,1))); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(left, rgba(35,148,209,1) 0%, rgba(35,148,209,1) 16%, rgba(84,64,125,1) 51%, rgba(84,64,125,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(35,148,209,1) 0%, rgba(35,148,209,1) 16%, rgba(84,64,125,1) 51%, rgba(84,64,125,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(35,148,209,1) 0%, rgba(35,148,209,1) 16%, rgba(84,64,125,1) 51%, rgba(84,64,125,1) 100%); /* IE 10+ */
    background: linear-gradient(to right, rgba(35,148,209,1) 0%, rgba(35,148,209,1) 16%, rgba(84,64,125,1) 51%, rgba(84,64,125,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2394d1', endColorstr='#54407d', GradientType=1 ); /* IE6-9 */
}

/**** START - CSS from Vishal Devrukhkar ******/

.listing_tbl {
    font-size: 12px;
    margin-bottom: 15px;
    border-left: #dbdbdb solid 1px;
    border-right: #dbdbdb solid 1px;
}

    .listing_tbl tr {
        border-bottom: #dbdbdb solid 1px;
        height: 30px;
    }

        .listing_tbl tr td {
            padding-right: 10px;
            padding-left: 10px;
        }

.tbl_heading {
    background-color: #482E50;
    color: #fff;
}

/*.listing_tbl_edt_dlt a {
    text-decoration: underline;
}*/

.listing_tbl_edt_dlt a:first-child {
    color: #482E50;
}

.listing_tbl_edt_dlt a:last-child {
    color: #f04d4d;
}

.listing_tbl_txt_area {
    padding: 0 0 15px 0;
}

    .listing_tbl_txt_area p {
        margin: 0 0 5px 0;
    }

    .listing_tbl_txt_area textarea {
        width: 100%;
        height: 100px;
        padding: 10px;
    }

ol.listing_tbl_dslmar {
    padding: 0 0 15px 0;
}

    ol.listing_tbl_dslmar h5 {
        color: #9fc243;
    }

    ol.listing_tbl_dslmar li {
        list-style-position: inside;
    }


/* ========= DASHBOARD ========== */
.popover-title .close {
    position: relative;
    bottom: 3px;
}

.TaskAttachments-attachmentList {
    flex: 1 1 auto;
    margin-right: 5px;
    min-width: 1px
}

.TaskAttachments-attachment {
    align-items: center;
    display: flex;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 5px
}

.TaskAttachments-icon {
    align-self: flex-start;
    fill: #b7bfc6;
    flex-shrink: 0;
    margin-right: 5px
}

.TaskAttachments-fileName {
    flex: 0 1 auto;
    margin-bottom: -1px;
    min-width: 1px;
    word-wrap: break-word
}

.Icon {
    height: 16px;
    width: 16px
}

.quote-details {
    margin-top: 68px;
    height: 500px;
    overflow: scroll;
}

    .quote-details .panel {
        margin-bottom: 5px;
    }

    .quote-details .panel-bordered, .panel-bordered-dark {
        border-color: #dbdbdb;
    }

    .quote-details .panel-heading {
        height: 34px;
        background-color: #482E50;
    }

        .quote-details .panel-heading .panel-control {
            padding: 0px 5px;
        }

            .quote-details .panel-heading .panel-control .btn {
                background-color: #482E50;
                padding: 5px 5px;
                font-weight: 300;
            }

                .quote-details .panel-heading .panel-control .btn .fa {
                    font-weight: 300;
                }

                .quote-details .panel-heading .panel-control .btn:hover, .quote-details .panel-heading .panel-control .btn:active {
                    color: #fff;
                }

        .quote-details .panel-heading > h3 {
            font-weight: 300;
            padding: 0 11px 0 10px;
            font-size: 14px;
            line-height: 34px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
        }

    .quote-details .panel-body {
        font-family: Roboto, 'Open Sans', Arial, sans-serif;
        font-size: 12px;
    }

/*********** For Right Side scroll Spy **********/

nav > ul.nav.nav-pills nav-stacked {
    list-style: square outside disc;
}

.rs-navbar > .nav {
    position: sticky;
    padding-bottom: 300px;
}

    .rs-navbar > .nav > li > a, .rs-navbar > .nav > li > ul > li > a {
        font-weight: 300;
        line-height: 1rem;
        display: inline-block;
        height: 1.5rem;
        letter-spacing: 0.4;
        padding: 5px 5px;
    }

        .rs-navbar > .nav > li > a:focus,
        .rs-navbar > .nav > li > a:hover {
            padding-left: 15px;
            color: #005B8F;
            border-left: 1px solid #005B8F;
            background-color: transparent;
        }

    .rs-navbar > .nav > li.active > a {
        color: #005B8F;
        font-weight: 500;
        padding-left: 14px;
        border-left: 2px solid #005B8F;
        background-color: transparent;
    }


/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
    .sidebar-nav-fixed {
        width: 100%;
        height: auto;
        position: relative;
    }

        .sidebar-nav-fixed a {
            float: left;
        }
}

/*********** bootstrap grid ************/
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    padding-right: 5px;
    padding-left: 5px;
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 400px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

.modal_brand_lr {
    margin-top: -4%;
    margin-left: -4%;
    float: left;
    max-height: 42px;
    width: 35px;
    padding: 5px;
}

.modal_brand {
    margin-top: -2%;
    margin-left: -2%;
    float: left;
    max-height: 45px;
    width: 38px;
    padding: 5px;
}

.modal_brand_fullscreen {
    margin-top: -1%;
    margin-left: -1%;
    float: left;
    max-height: 50px;
    width: 40px;
    padding: 5px;
}
/*jQuery slide Left and Right Toggle Effect*/
.slider-box {
    margin-top: 68px;
    float: right;
    overflow: hidden;
    background: #f0e68c;
}

    .slider-box .slider-box-header {
        width: 98%;
        max-height: 10%;
        padding: 10px;
        background: #a29415;
    }

/* Add padding and border to inner content
    for better animation effect */
.slider-box-inner {
    width: 98%;
    padding: 10px;
    border: 1px solid #a29415;
}

/* Added by : Girish Rajadhyaksha
    Date : 18 dec 2020
*/
/* Timeline Horizontal */
.timeline-icon-success {
    height: 10px;
    width: 10px;
    margin-top: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #e7ebee;
    background-color: #8bc34a;
}

.hori-timeline .events {
    border-top: 3px solid #e9ecef;
    margin-top: -11px;
}

    .hori-timeline .events .event-list {
        display: block;
        position: relative;
        text-align: center;
        padding-top: 170px;
        margin-right: 0;
    }

        .hori-timeline .events .event-list:before {
            content: "";
            position: absolute;
            height: 36px;
            border-right: 2px dashed #dee2e6;
            top: 0;
        }

        .hori-timeline .events .event-list .event-date {
            position: absolute;
            top: 38px;
            left: 0;
            right: 0;
            width: 15px;
            margin: 0 auto;
            border-radius: 4px;
            padding: 2px 4px;
        }

@media (min-width: 1140px) {
    .hori-timeline .events .event-list {
        display: inline-block;
        width: 32%;
        padding-top: 45px;
    }

        .hori-timeline .events .event-list .event-date {
            top: -12px;
        }
}
.card-wrapper {
    width: 100%;
    max-width: 200px; /* Set max width to prevent overly large cards */
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Shadow around the card */
    transition: box-shadow 0.3s ease-in-out;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px; /* Reduce padding */
    background-color: white;
    border-radius: 8px;
}

.card-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.card-title {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
}

.btn-configure {
    width: 100%;
}

.btn-secondary.disabled {
    cursor: not-allowed;
    opacity: 0.6; /* Greyed-out effect for disabled buttons */
}