﻿

/* Ultra large devices (very large desktops, 1400px and up) */
@media only screen and (max-width: 1420px) {
    /*.proposal-field-table th{
        width:150px;
    }
    .proposal-field-table th:first-child{
        width:40px;
    }*/
    
}


@media only screen  and (max-width: 1800px){
    .proposal-field-table .w-160px {
        min-width: 160px;
    }

    .proposal-field-table .w-85px {
        width: 110px
    }
    .proposal-field-table .w-90px {
        width: 100px;
    }

    .w-70px {
        width: 70px;
    }

    .w-124px {
        width: 124px;
    }
}

@media only screen and (max-width: 1300px) {

    .sidebar {
        display: none !important;
    }

    .sidebar.collapsed {
        display: flex !important;
        /*position: absolute;*/
        top: 55px;
        left: 0px;
        /*width: 300px !important;
        min-width:300px !important;*/
        z-index: 99;
        width:unset !important;
        min-width:unset !important
    }

    .sidebar.collapsed .sidebar-menu {
        display: block;
        height:calc(100% - 55px) !important;
        width:220px !important;
        min-width:220px !important;
        position:absolute;
    }
    .content, .collapsed-menu-main .content {
        margin-left: 0 !important;
    }
    
    .sidebar.collapsed .sidebar-menu--name, .sidebar.collapsed .collapsible-icon {
        display: inline-block;
    }
    /*.main-nav-header {
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
        z-index: 99999;
    }
    .main-content{
        margin-top:55px !important;
    }*/
}


/* Large devices (laptops/desktops, 1024px and up) */

@media (max-width: 1024px) {
    .modal-dialog {
        width: 95% !important
    }

        .modal-dialog .nav-tabs li {
            width: 100%
        }

        .modal-dialog .nav-tabs button {
            width: 100%;
            margin-bottom: .5rem;
        }

    .table-rounded-div {
        overflow: auto;
    }

    .content {
        height: auto !important;
        overflow: hidden;
    }
    
    .proposal-field-table th:first-child{
        width:40px !important;
    }
    .main-Footer{
        padding-left:16px !important;
        padding-right:16px !important
    }
}


@media only screen and (min-width: 992px){
    .responsive-right-border {
        border-right: 1px solid var(--border-color);
    }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 991px) {
    .main-nav-header .navbar-collapse {
        background: white;
        padding: 10px;
        box-shadow: rgb(204, 204, 204) 0px 3px 4px -2px;
    }
    .responsive-right-border {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 16px;
    }
}



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    .content {
        padding: 10px;
    }

    .responsive label {
        margin-bottom: .5rem;
    }

    .responsive button {
        width: 100%;
    }

    .d-flex.reponsive {
        display: block !important;
        width: 100%;
        flex-direction: column;
    }

    .flex-row.reponsive {
        flex-direction: row;
    }

    .home-count {
        flex-wrap: wrap;
    }

    h1 {
        font-size: 18px;
    }

    .home-tabs .nav-tabs .nav-item .nav-link {
        margin-top: 10px;
    }

    .content .download-btns-top a {
        font-size: 12px;
    }

    .i-btn {
        font-size: 10px;
    }

    .absolute-top-right {
        top: 32px;
        font-size: 11px;
    }
    .tabs-slider-btns{
        display:flex;
        margin-left:0 !important;
    }
    .value-container div {
        font-size: 10px;
    }

    .custom-radio {
        font-size: 12px;
    }

    .recommnedend-section {
        padding: 10px;
    }

    .download-outline-btn .btn {
        font-size: 13px;
    }
    .cont-box-main{
        padding:10px !important
    }
    .d-col-sm{
        flex-direction:column !important
    }
    .footer-nav-main-btn .ftr-nav-btn, .footer-nav-main-btn input[type="submit"]{
        margin:6px 0px;
    }
    .primaryLinks span.px-4{
        display:none;
    }
    .primaryLinks.justify-content-center{
        align-items:center !important;
        gap:12px;
    }
    .mt-sm-4 {
        margin-top: 2rem !important;
    }
    .otherDetails{
        margin-top:16px !important;
    }
    .qc-popup-wrap .px-5{
        padding:7px !important;
    }
    .qc-popup-wrap .nav-tabs{
        flex-direction:column !important;
    }
    .qc-popup-wrap .nav-tabs .nav-item , .qc-popup-wrap .nav-tabs .nav-item .nav-link{
        width:100%;
        display:block !important;
        margin:4px 0px ;
    }
    .qc-popup-wrap #RdCusomDependentContribution, .qc-popup-wrap #RdCusomDependentContribution tr, .qc-popup-wrap #RdCusomDependentContribution td {
        display: block !important;
    }
    .page-inner-topbar {
        height: auto;
        background: var(--new-grey-bg);
        width: calc(100% + 43px);
        position: relative;
        left: -28px;
        top: -2px;
        margin-bottom: -20px;
        padding: 10px 12px;

    }
    .inner-content{
        padding-left:10px !important;
    }
    .page-inner-topbar .justify-content-between {
        flex-wrap: wrap;
    }
    .page-inner-topbar .topbar-action-btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 20px;

    }
}

@media only screen and (max-width:540px){
    .PopUpBg {
        width: calc(100% - 40px) !important;
        left: 20px !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {

    .btm-btns {
        display: flex;
        flex-direction: column;
    }

        .btm-btns .d-inline-block {
            display: block !important;
        }

    .bottom-action-btn .btn {
        font-size: 12px;
        margin-top: 10px;
    }

    .btn-width-250 {
        min-width: 170px;
    }

    .header-custom .btn {
        font-size: 10px;
    }

    .home-tabs .nav-tabs .nav-item .nav-link, .tabs-underline .nav-link {
        width: 100% !important;
        margin: 0 !important;
    }

    .tabs-underline .nav-item {
        display: block;
        width: 100%;
        margin: 2px 0px !important;
    }

    .home-count {
        flex-direction: column !important;
    }

    footer .d-flex {
        flex-direction: column !important;
        gap: 10px;
    }

    .slider-tabs .absolute-top-right {
        position: relative;
        top: 0 !important;
    }
    .cont-box-main table, .cont-box-main tr, .cont-box-main td, #rdDependentContribution, #rdDependentContribution tr, #rdDependentContribution td{
        display: block !important
    }
    .page-inner-topbar > .d-flex {
        display: block !important;
    }

    .page-inner-topbar .ps-4, .page-inner-topbar .me-3 {
        margin: 0 !IMPORTANT;
        padding: 0 !IMPORTANT;
        padding: 2px 15px !important;
    }
}

@media screen and (max-width: 1366px), screen and (max-height: 625px) {
    .login-container {
        padding-top: 0 !important;
    }

    .login-img-main img {
        width: 40% !important;
    }
}
@media only screen and (max-width: 992px) and (min-width: 710px){
    .qc-popup-wrap {
        width: 700px !important;
        left: 10px !important;
        right: unset !important;
        margin: 0 !important;
        top: 50px !important;
        overflow-y: auto !important
    }
}
@media only screen and (max-width: 709px) and (min-width: 510px) {
    .qc-popup-wrap {
        width: 500px !important;
        left: 10px !important;
        right: unset !important;
        margin: 0 !important;
        top: 50px !important;
        overflow-y: auto !important
    }
}
@media only screen and (max-width: 509px) and (min-width: 310px) {
    .qc-popup-wrap {
        width: 300px !important;
        left: 10px !important;
        right: unset !important;
        margin: 0 !important;
        top: 50px !important;
        overflow-y: auto !important
    }
}
@media only screen and (max-width: 575px){
    .main-Footer ul li{
        padding-left: 0 !important;
        border:0 !important;
    }
}
@media only screen and (max-width: 1345px) and (min-width: 1300px){
    .main-Footer{
        height:198px
    }
    .sidebar.collapsed:hover .sidebar-menu {
        height: calc(100% - 254px) !important
    }
}
@media screen and (min-width: 767px) {
    .emplmnt-type {
        border-left: 2px solid var(--primary-color);
        border-right: 2px solid var(--primary-color);
    }
}