/*!
 * ALPS OnlineSTP - App CSS v0.1
 * Copyright-2019 JARUS TECHNOLOGIES, INC.
 */
@media (max-width: 767.98px) {
    .dashboard-cards .col, .dashboard-cards .col-4 {
        flex: 0 0 auto;
        width: 100%;
    }

    .multi-nav .nav-item, .multi-nav > .nav-link {
        flex: 1 1 auto;
        text-align: center;
    }

        .multi-nav.nav-item .nav-link {
            width: 100%;
        }

    .firm-container .multi-nav .nav-link {
        font-size: 0.925rem;
        padding-left: min(5px, 2rem) !important;
        padding-right: min(5px, 2rem) !important;
    }

    .policy-tab {
        font-family: 'Roboto' !important;
        font-weight: 600;
        font-size: 14px;
    }

    #tblClaimSupplement .saveclaim-btn {
        float: left !important;
    }

    .current-policy .date-label {
        width: 66.66%;
        display: inline-block;
        padding-right: 5px;
    }

    .current-policy .date-container {
        width: 32.33%;
        display: inline-block;
        padding-left: 5px;
    }

    .navbar-toggler {
        filter: brightness(0) saturate(100%) invert(48%) sepia(55%) saturate(518%) hue-rotate(137deg) brightness(97%) contrast(97%);
        border: 0;
    }

        .navbar-toggler:focus {
            text-decoration: none;
            outline: 0;
            box-shadow: none;
        }

    .InsideDivClass .navbar-toggler {
        filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(31%) hue-rotate(329deg) brightness(104%) contrast(100%);
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table, .responsive-table tbody {
        display: block;
        width: 100%;
    }

        .responsive-table tr {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
        }

        .responsive-table th, .responsive-table td.lable-xs {
            text-align: right;
            flex: 0 0 auto;
            width: calc(100% - 130px) !important;
            border-width: 0 0 var(--bs-border-width) var(--bs-border-width);
        }

            .responsive-table th.position-th {
                text-align: right;
                width: calc(100% - 130px) !important;
                border-width: 0 0 var(--bs-border-width) var(--bs-border-width);
            }

            .responsive-table td, .responsive-table th.position-number {
                padding: 0.25rem 0.5rem;
                flex: 0 0 auto;
                width: 130px !important;
                border-width: 0 var(--bs-border-width) var(--bs-border-width) var(--bs-border-width);
            }

                .responsive-table td.col-form-label {
                    padding: 0.75rem 0.5rem;
                    text-align: right;
                    width: 100% !important;
                }

    .modal {
        margin-top: 60px;
    }
}

@media (min-width: 768px) {
    /*----- Form Columns -----*/
    .form-onehalf .date-label,
    .form-onehalf .col-form-label {
        width: 50%;
        float: left;
    }

    .form-onehalf .input-group,
    .form-onehalf .datepicker,
    .form-onehalf .form-control {
        width: 50%;
        float: right;
    }

    .form-onethird .date-label,
    .form-onethird .col-form-label {
        width: 25%;
        float: left;
    }

    .form-onethird .datepicker,
    .form-onethird .form-control {
        width: 75%;
        float: right;
    }

    .form-twothird .date-label,
    .form-twothird .col-form-label {
        width: 66.66%;
        float: left;
    }

    .form-twothird .datepicker,
    .form-twothird .form-control {
        width: 33.33%;
        float: right;
    }

    .form-onethird-col .datepicker,
    .form-onethird-col input[type="text"],
    .form-onethird-col input[type="number"] {
        width: 33.33%;
    }
}

@media only screen and (min-width: 240px) and (max-width: 991px) {
    .supplement-inputs .datepicker,
    .supplement-inputs input[type="text"] {
        width: 50%;
    }

    .table-yscroll {
        width: 100%;
        overflow-y: hidden;
        overflow-x: scroll;
    }

        .table-yscroll #tblMultiAttorney {
            width: 800px;
        }
}

@media only screen and (min-width: 240px) and (max-width:767px) {
    .tab-section {
        flex-wrap: nowrap;
    }

    .main-content-wrap {
        margin-top: 0;
    }
}

@media only screen and (min-width: 991px) and (max-width: 1199px) {
    .last-elm label {
        height: 56px;
    }

    .last-elm .text-danger {
        height: 15px;
    }
}

@media (min-width: 992px) {
    .btn {
        padding-right: 2.5rem !important;
        padding-left: 2.5rem !important;
    }

    .radio-wraper {
        margin-left: 2rem;
    }
}

@media (max-width: 991.98px) {
    .btn {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .content-wrap {
        padding: 2rem 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
    .btn-xs-block {
        width: 100%;
        display: block;
        margin-bottom: 1rem;
    }

    .tagline div {
        font-size: 1.2rem !important;
    }

    .AOPCheckboxes .check-input {
        width: 99% !important;
    }

    .policy-tab {
        font-size: 12px;
        padding: 20px 0.25rem;
    }
}

@media (min-width: 576px) {
    .date-wrapper, .input-width input, .inputgroup-width .input-group {
        width: 210px;
    }
}

@media (max-width: 400px) {
    .firm-container .multi-nav .nav-link {
        font-size: clamp(0.825rem, 2.25vw, 1rem);
    }
}

@media (max-width: 375.98px) {
    .policy-tab {
        font-size: 11px !important;
    }
}

@media (max-width: 340px) {
    .policy-tab {
        font-size: 10px !important;
    }
}

@media (max-width: 900px) {
    .policy-table table,
    .policy-table thead,
    .policy-table tbody,
    .policy-table th,
    .policy-table td,
    .policy-table tr {
        display: block;
        width: 100%;
    }

    div.policyRateTable {
        display: block !important;
    }

    td.unhighlight-td {
        color: #000;
        background-color: #f5f5f5;
    }

    .policy-table thead {
        display: none; /* hide the header */
    }

    .policy-table tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        background: #fff;
    }

    .policy-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        border-bottom: 1px solid #dee2e6;
        padding: 10px 8px;
        gap: 10px;
    }

    .policy-table tr td:first-child {
        border-radius: 0.5rem 0.5rem 0rem 0rem;
    }

    .policy-table tr td:last-child {
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .policy-table td::before {
        content: attr(data-label);
        font-weight: 600;
        flex: 1;
        text-align: left;
        line-height: 1.4;
    }

    .policy-table td span {
        flex-shrink: 0;
        text-align: right;
        min-width: 70px;
    }

    .policy-table td:last-child {
        border-bottom: none;
    }

    .responsive-stack thead {
        display: none;
    }

    .responsive-stack {
        border: 0;
    }

        .responsive-stack, .responsive-stack tbody, .responsive-stack tr, .responsive-stack td {
            display: block;
            width: 100%;
        }

            .responsive-stack tr {
                margin-bottom: 1rem;
                border: 1px solid #dee2e6;
                border-radius: 0.5rem;
                background: #fff;
            }

                .responsive-stack tr td:first-child {
                    border-radius: 0.5rem 0.5rem 0rem 0rem;
                }

                .responsive-stack tr td:last-child {
                    border-radius: 0 0 0.5rem 0.5rem;
                }

            .responsive-stack td {
                display: flex;
                justify-content: space-between;
                border: none;
                border-bottom: 1px solid #eee;
                padding: 8px;
            }

    #tblClaimSupplement.responsive-stack td {
        flex-wrap: wrap;
    }

        #tblClaimSupplement.responsive-stack td::before {
            white-space: nowrap;
            min-width: 300px;
        }

    .responsive-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
    }

    .responsive-stack td:last-child {
        border-bottom: none;
    }

    .responsive-stack.wrap-flex td {
        flex-wrap: wrap !important;
    }

        .responsive-stack.wrap-flex td::before {
            margin-bottom: 0.25rem;
        }

    .responsive-stack td:last-child {
        border-bottom: none;
    }

    .responsive-stack .tblMultiAttorney-tfoot {
        display: block !important;
    }
}

@media (max-width: 767.98px) {
    .responsive-xs-stack thead {
        display: none;
    }

    .responsive-xs-stack {
        border: 0;
    }

        .responsive-xs-stack, .responsive-xs-stack tbody, .responsive-xs-stack tr, .responsive-xs-stack td {
            display: block;
            width: 100%;
        }

            .responsive-xs-stack tr {
                margin-bottom: 1rem;
                border: 1px solid #dee2e6;
                border-radius: 0.5rem;
                background: #fff;
            }

                .responsive-xs-stack tr td.bg-xs-grey {
                    background-color: #f5f5f5 !important;
                }

            .responsive-xs-stack tfoot tr {
                border: 0 !important;
            }

            .responsive-xs-stack tr td:first-child {
                border-radius: 0.5rem 0.5rem 0rem 0rem;
            }

            .responsive-xs-stack tr td:last-child {
                border-radius: 0 0 0.5rem 0.5rem;
            }

            .responsive-xs-stack td {
                display: flex;
                justify-content: space-between;
                border: none;
                border-bottom: 1px solid #eee;
                padding: 8px;
            }

            .responsive-xs-stack.wrap-flex td {
                flex-wrap: wrap !important;
            }

    #tblClaimSupplement.responsive-xs-stack td {
        flex-wrap: wrap;
    }

    .responsive-xs-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
    }

    .responsive-xs-stack.wrap-flex td::before {
        margin-bottom: 0.25rem;
    }

    .responsive-xs-stack td:last-child {
        border-bottom: none;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .dashboard-cards .col, .dashboard-cards .col-4 {
        flex: 0 0 auto;
        width: 50%;
    }
}