/* =========================================================
   HOSTVISION RESPONSIVE
   responsive.css
========================================================= */


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(max-width:1600px){

    .hv-content{

        padding:38px;

    }

    .hv-hero-v2 h1{

        font-size:42px;

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media(max-width:1400px){

    .hv-stats-layout{

        grid-template-columns:
        repeat(2,1fr);

    }

    .hv-actions-grid{

        grid-template-columns:
        repeat(3,1fr);

    }

    .hv-insights-grid{

        grid-template-columns:
        1fr 1fr;

    }

}


/* =========================================================
   TABLET LANDSCAPE
========================================================= */

@media(max-width:1200px){

    .hv-content{

        padding:32px;

    }

    .hv-analytics-grid,
    .hv-services-grid,
    .hv-invoices-grid,
    .hv-infra-grid{

        grid-template-columns:1fr;

    }

    .cart-layout{

        grid-template-columns:1fr;

    }

    .order-summary{

        position:relative;

        top:auto;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    /* SIDEBAR */

    .hv-sidebar{

        transform:translateX(-100%);

        transition:.3s ease;

    }

    .hv-sidebar.active{

        transform:translateX(0);

    }

    .hv-main{

        margin-left:0;

    }

    /* MOBILE TOGGLE */

    .hv-mobile-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:44px;
        height:44px;

        border-radius:14px;

        background:#fff;

        box-shadow:
        0 10px 30px rgba(15,23,42,.06);

    }

    /* TOPBAR */

    .hv-topbar{

        padding:0 24px;

    }

    .hv-topbar-title h1{

        font-size:24px;

    }

    /* HERO */

    .hv-hero-v2{

        padding:34px;

    }

    .hv-hero-v2 h1{

        font-size:38px;

    }

    /* GRIDS */

    .hv-stats-layout,
    .hv-actions-grid,
    .hv-insights-grid{

        grid-template-columns:1fr;

    }

    /* QUICK ACTIONS */

    .hv-quick-actions{

        flex-direction:column;

    }

    .hv-quick-action{

        width:100%;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    /* CONTENT */

    .hv-content{

        padding:22px;

    }

    /* TOPBAR */

    .hv-topbar{

        height:74px;

        padding:0 18px;

    }

    .hv-topbar-title h1{

        font-size:22px;

    }

    /* HERO */

    .hv-hero-v2{

        padding:28px;

        border-radius:26px;

    }

    .hv-hero-v2 h1{

        font-size:32px;

        letter-spacing:-1px;

    }

    .hv-hero-v2-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .hv-hero-v2-actions .btn{

        width:100%;

    }

    /* SECTION TITLES */

    .hv-section-title{

        font-size:24px;

    }

    /* CARDS */

    .hv-service-card,
    .hv-domain-card,
    .hv-ticket-card,
    .hv-invoice-card,
    .hv-insight-card,
    .hv-security-card,
    .hv-action-card{

        padding:24px;

    }

    /* METRICS */

    .hv-metric-value{

        font-size:34px;

    }

    /* DOMAIN SEARCH */

    .domain-search-box{

        flex-direction:column;

        align-items:stretch;

    }

    .domain-search-box .btn{

        width:100%;

    }

    /* DOMAIN SUGGESTIONS */

    #domainSuggestions .actions{

        position:relative!important;

        right:auto!important;

        top:auto!important;

        transform:none!important;

        margin-top:22px!important;

        justify-content:flex-start!important;

    }

    /* DOMAIN RESULTS */

    .domain-result{

        flex-direction:column;

        align-items:flex-start;

    }

    /* CART */

    .cart-item-top{

        flex-direction:column;

        align-items:flex-start;

    }

    /* ADDONS */

    .addon-card{

        flex-direction:column;

        align-items:flex-start;

    }

    /* CHECKOUT */

    .checkout-section{

        padding:24px;

    }

    /* TABLES */

    .table-responsive{

        overflow-x:auto;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:576px){

    /* CONTENT */

    .hv-content{

        padding:18px;

    }

    /* HERO */

    .hv-hero-v2{

        padding:22px;

    }

    .hv-hero-v2 h1{

        font-size:28px;

    }

    /* TOPBAR */

    .hv-topbar{

        padding:0 14px;

    }

    /* BUTTONS */

    .btn{

        width:100%;

    }

    /* ACTIONS */

    .hv-service-actions,
    .hv-domain-actions,
    .hv-invoice-actions,
    .hv-ticket-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .hv-service-actions .btn,
    .hv-domain-actions .btn,
    .hv-invoice-actions .btn,
    .hv-ticket-actions .btn{

        width:100%;

    }

    /* METRICS */

    .hv-metric-value{

        font-size:28px;

    }

    /* DOMAIN SEARCH */

    .domain-search-hero{

        padding:24px;

    }

    .domain-search-hero h1{

        font-size:30px;

    }

    /* DOMAIN RESULTS */

    .domain-result{

        padding:24px;

    }

    /* ORDER SUMMARY */

    .order-summary{

        padding:24px;

    }

    /* CHECKOUT */

    .checkout-section-title{

        font-size:22px;

    }

}


/* =========================================================
   ULTRA SMALL
========================================================= */

@media(max-width:420px){

    .hv-topbar-title h1{

        font-size:19px;

    }

    .hv-hero-v2 h1{

        font-size:26px;

    }

    .hv-section-title{

        font-size:22px;

    }

    .hv-domain-name{

        font-size:20px;

    }

    .hv-service-name{

        font-size:20px;

    }

}