/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .modal-dialog {
        margin: 10vh auto 0px auto
    }

    #modal-client-details .modal-dialog {
        margin: 20vh auto 0px auto
    }

    #modal-edit-user .modal-body {
        min-height: 40vh;
    }

    .pane-container .right-pane a[data-toggle="collapse"] {
        display: flex;
    }

}


@media only screen and (max-width: 1224px) {
    #header .navbar-nav .nav-item a {
        font-size: 73%;
    }

    .alpha-search {
        font-size: 73%;
    }
}

@media only screen and (max-width: 1600px) {
    .modal-lg {
        max-width: 650px;
    }
}

@media only screen and (max-width: 1550px) {
    #header .navbar-nav .nav-item a {
        font-size: 75%;
    }

    .alpha-search {
        font-size: 73%;
    }


}

@media only screen and (max-width: 450px) {

    html, body {
        font-size: 17px;
    }

    #header .navbar {
        padding: .5rem 0rem;
    }

    #header .navbar .navbar-toggler {
        padding: .25rem .25rem;
    }

    h1 {
        font-size: 100%;
    }

    .upgrade-section {
        margin-top: 20vh !important;
    }

    #header .hero-section {
        padding-top: 20%;
    }

    .modal {
        font-size: 14px;
    }

    body a {
        font-size: 12px;
    }

    .price-card {
        min-height: 275px;
    }

    h2, h3 {
        margin: 15px 5px;
    }

    .panel.panel-primary .panel-heading, .panel.panel-primary .panel-body {
        padding: 0px 10px 0px 16px;
    }

    .pane-container .right-pane .alpha-search a {
        padding: 0.1em;
    }

    .modal-body [class^="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

    .modal-header {
        padding: 0.5rem;
    }

    .modal-title {
        font-size: 0.9rem;
    }

    .modal-body {
        padding: 0.5rem;
    }

    .modal-body .row {
        margin: 0px;
    }

    .modal-body .container {
        margin-left: 5px;
        margin-right: 5px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .form-group {
        margin-bottom: 0.5rem;
    }

    .form-control, .input-group-text {
        height: 30px !important;
        font-size: 0.8rem;
        padding: 3px 5px;
    }

    .btn {

        font-size: 0.5rem;
    }

    .btn-full, .btn-ghost {
        padding: 6px 16px;
    }


    .nav-link {
        padding: .4rem 0.4rem;
    }
}