﻿/** Override Bootstrap responsiveness settings **/
@media (max-width: 1199px)
{
    #formPreview {width: 100% !important;}

    .col-md-offset-1{margin-left: 8.33333%;}
    .col-md-10{width: 83.33333%;}
    .container {max-width: 980px;}

    .calendarRight{margin-left:25px !important;}

    .dateCheck {margin-top: 15px !important;}

    .depositDiv{margin-right: 10px;}

    .dropdown-toggle {padding-right: 0 !important; white-space: nowrap;}
    .dropdown-menu {right: 0 !important;}


    .grid-reginfo tr {display: inline;}
    .grid-reginfo td
    {
        display: inline-block;
        min-width: 185px;
        padding: 5px !important;
        padding-right: 10px !important;
    }

    .legalCol
    {
        max-width: 540px;
        float: right;
    }

    .oversizedForm textarea{clear: both;}
    .oversizedForm .col-md-4
    {
        text-align: left;
        width: 100%;
    }

    .responsivePreview {width: 100% !important;}

    .rolecheck>div {margin: auto;}

    .tabBtnDiv {text-align: right;}
    .tabBtnDiv div {float: right;}
    .tabBtnDiv label.col-lg-5
    {
        display: block;
        float: left;
        text-align: right;
        width: auto;
    }
    .tabBtnDiv select {min-width: 150px;}

    .valuationDiv {padding: 0 0 10px;}
    .valuationDiv div, .valuationDiv label {padding: 0;}

    .weightBox {max-width: 45px !important;}

    .control-label {text-align:left !important;}

    .btnIncrement,
    .btnDecrement {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    .emailTemplateElements {float:none !important;}
}

@media (min-width: 992px) and (max-width: 1199px)
{
    .dateCheck {margin-top: 35px !important;}
    .nolabelMidPad {padding-top: 29px;}
    .responsivePreview {width: 50%;}
    .tabBtnDiv label.col-lg-5 {width: 41.6667%;}
    /*.vidThumbnail {height: 113px;}*/
}

@media (max-width: 991px)
{
    .formButtonPad
    {
        padding-bottom: 0 !important;
        padding-top: 9px !important;
    }
}


@media (min-width: 768px) and (max-width: 991px)
{
    #Estimate .col-md-4, .regNumInput {float: left; width: 33.3333%}

    .billnotes label{width: 100% !important; text-align:left !important;}

    .depositDiv {margin-right: 0;}

    .footerTemplates {
        float: left;
        width:50%;
    }

    .grid-reginfo td
    {
        min-width: 200px;
        padding-right: 30px !important;
    }

    .legalCol {max-width: 480px;}

    .medPanel.tab-pane.active {background-color: #ffffff; border: 1px solid #DDDDDD; margin: -1px}

    .navbar-nav>li>a, .navbar-nav>li>a:hover
    {
        padding-top: 10px;
        padding-bottom: 0;
    }

    .nav-tabs {clear: both;}

    .oversizedForm {margin-left: 0 !important;}

    .regNumInput {min-width: 100px;}

    .screen-left {float: left;}

    .tabBtnDiv {margin:10px 4px 0px 0px;}

    .vidThumbnail {height: 188px;}
}

@media (min-width: 768px) and (max-width: 1200px) {
    .payModalDialog .form-horizontal .control-label {
        text-align: left;
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .footerLogo {display:none;}
    #emailModal .modal-dialog,
    #infoModal .modal-dialog {
        width: auto !important;
        margin: 10px;
    }
}
@media (min-width: 768px) {
    .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
        margin-right: -15px;
        margin-left:-15px;
    }
}

/** Visuals for medium screens **/
@media (min-width: 665px) and (max-width: 767px)
{
    .modal-dialog {width: auto !important;}

    #Estimate .col-md-4 {float: left; width: 33.3333%}

    .adminBtn {width: 49% !important;}

    .billnotes label{width: 100% !important; text-align:left !important; float: none !important;}

    .btnMinus, .btnPlus{
        width: 100%;
    }

    .col-md-6 {float: left; width: 50%;}

    .dateCheck{margin-top: 0 !important;}

    .depositDiv{margin-right: 0;}

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: #446e9b;
    }

    .dropdown-menu li a {padding: 12px 20px !important;}

    #Estimate .col-md-4 {float: left; width: 33.3333%}

    .footerLogo {display:none;}

    .form-signin {
        width: 100%;
        height: 100%;
    }

    .grid-surcharges input[type="text"] {width: 75px !important;}
    .grid-surcharges .form-group
    {
        display: inline-block !important;
        margin: 0;
        vertical-align: middle;
    }
    .grid-surcharges .rate {min-width: 180px;}

    .legalCol {max-width: 480px; font-size: .9em;}

    .medPanel.tab-pane.active {background-color: #ffffff; border: 1px solid #DDDDDD; margin: -1px}

    .navbar-nav .open .dropdown-menu
    {
        background-clip: padding-box;
        background-color: #fbfbfb;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        min-width: 10px;
        top: 100%;
    }

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: #446e9b;
    }

    .navbar-ex1-collapse
    {
        border: none;
        display: block;
        padding: 5px 15px;
        width: auto;
    }
    .navbar-ex1-collapse>ul {margin: 0; float: left;}
    .navbar-ex1-collapse>ul>li
    {
        background-color: #fbfbfb;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        float: left;
        margin: 0 5px 5px 0;
    }
    .navbar-ex1-collapse>ul>li>a, .navbar-ex1-collapse>ul>li>a:hover
    {
        padding: 0 10px !important;
        line-height: 30px;
    }

    .nav-tabs {clear: both;}

    .regNumInput {min-width: 100px;}

    .longToHeader {display: none !important;}
    .shortToHeader {display: block !important;}

    .screen-left {float: left;}

    .tabBtnDiv
    {
        margin:10px 4px 0px 0px;
    }
    .tabBtnDiv select {max-width: 160px;}

    .vidThumbnail {height: 159px;}
}

/** Mobile/Small-Screen CSS **/
@media screen and (max-width:664px)
{
    h2 {font-size: 1.6em;}
    p {padding: 0 10px;}

    #accordion .panel-body{padding: 0 0 0 5px;}
    #accordion .table-responsive{border: none;}

    .btn-full
    {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
    .btn-half
    {
        width:49% !important;
        margin:0 0 10px 0 !important;
    }

    .grid-gvgoods {margin: 0;}

    #ctl00_Content_btnCancelTop {float: right;}

    #ctl00_Content_Grid_grid td, #ctl00_Content_Grid_grid th, .grid-deposits td, .grid-deposits th {display: none;}

    #ctl00_Content_Grid_grid td:first-child, #ctl00_Content_Grid_grid th:first-child,
    #ctl00_Content_Grid_grid td:nth-child(2), #ctl00_Content_Grid_grid th:nth-child(2),
    #ctl00_Content_Grid_grid .Client, .grid-deposits .depDate, .grid-deposits .depAmt,
    #ctl00_Content_Grid_grid td:last-child, #ctl00_Content_Grid_grid th:last-child {display: table-cell;}

    /** Making Google Maps usable on mobile site **/
    #mapdivfrom, #mapdivto {width: 100% !important;}
    #svpdivfrom, #svpdivto {display: none;}

    #streetViewModal .modal-body, #streetViewModal .modal-footer{padding: 8px;}
    #streetViewModal .modal-footer .btn{padding: 6px 8px;}

    #streetViewModal .modal-header{padding: 4px 15px;}
    #streetViewModal .modal-header .close{margin-top: 2px;}

    .carriageText
    {
        padding: 10px !important;
        width: 100% !important;
    }
    .carriageText * {padding-right: 0;}
    .carriageText h1 {font-size: 1.4em !important;}
    .carriageText ol {padding-left: 30px;}
    .carriageText ol ol {padding-left: 15px;}

    .company-img
    {
        max-height: 150px;
        max-width: 340px;
        width:100%;
        text-align:center;
    }
    .company-img img
    {
        max-width: 100%;
        margin: 5px 0 10px;
    }

    .container {min-width: 200px !important;}

    .depositDiv
    {
        width: 100%;
        margin: 20px 0 -20px 0;
    }

    .dropdown-menu li a {padding: 12px 20px !important;}

    .estEditButtons, .regEditButtons{min-width: 0 !important;}

    .footerLogo {display:none;}

    .form-signin {
        width: 100%;
        height: 100%;
    }

    .glyphicon-search {
        margin-right: 24px;
        margin-top: 2px;
    }

    .initAddRoomBtn {
        margin-left: 0px;
    }

    .roomsTACon > .glyphicon-search {
        margin-right: 24px;
        margin-top: 12px;
    }

    .grid-surcharges .form-group
    {
        display: inline-block !important;
        margin: 0;
        vertical-align: middle;
    }

    .grid-surcharges .form-group, .grid-gvgoods .cubicFeet, .grid-gvgoods .quantity{width: 45%;}
    .grid-surcharges input[type="text"], .grid-gvgoods input[type="text"]{width: 100% !important;}
    .grid-surcharges input[type="checkbox"], .grid-gvgoods input[type="checkbox"]{width: 15px;}
    .grid-surcharges td, .grid-gvgoods td{display: inline-block;}
    .grid-surcharges td:first-child, .grid-gvgoods td:first-child{width: 15%;}
    .grid-surcharges td:nth-child(2), .grid-gvgoods td:nth-child(2){width: 85%;}
    .grid-surcharges td:nth-child(3) {width: 100%;}
    .subTotalRow td, .grandTotalRow td {width: 49% !important;}
    .grid-surcharges td:last-child, .grid-gvgoods td:last-child{width: 100%; text-align: right;}
    .grid-surcharges th, .grid-gvgoods th{display: none;}
    .grid-surcharges th:nth-child(2), .grid-gvgoods th:nth-child(2){display: table-cell;}
    .grid-surcharges tr, .grid-gvgoods tr{border-bottom: 2px solid #AAA;}
    .grid-surcharges .rate{min-width: 0;}
    .subTotalRow {border-bottom: 2px solid #666 !important;}

    .grid-gvgoods {margin: 0;}

    .grid-reginfo td {width: 100%;}

    .groupHeaderRow td {text-align: left !important;}
    .groupHeaderStyle span {float:right !important;}

    .hLogo {width:100%;}

    .lblMob {
        display: inline-block !important;
    }

    .legalGrid td
    {
        display: block;
        width: 100%;
    }
    .legalLine {max-width: 100% !important;}

    .longToHeader {display: none !important;}
    .shortToHeader {display: block !important;}

    .modal-dialog,
    #emailModal div.modal-dialog,
    #infoModal div.modal-dialog {
        width: auto;
    }

    /*.nav-tabs > .active {width: 60%;}*/
    /*.nav-tabs.nav-tabs-4 > .active {width: 40%;}*/
    .nav-tabs > li {width: 20%;}
    .nav-tabs > li > a
    {
        padding: 10px 5px 5px 4px;
        margin: 5px 2px 0 0;
        font-size: 75%;
        font-weight: bolder;
        white-space: nowrap;
        border: 1px solid #ccc;
        border-bottom: none;
        padding-right: 5px;
        overflow: hidden;
    }
    .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {border: 1px solid #ccc;}

    .navbar-nav .open .dropdown-menu
    {
        background-clip: padding-box;
        background-color: #fbfbfb;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        min-width: 10px;
        top: 100%;
    }

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: #446e9b;
    }

    .navbar img
    {
        max-width: 321px;
    }

    .pager {margin: 0;}
    .pager>span
    {
        display: block;
        clear: both;
        padding-top: 10px;
    }

    .phonepanel {padding: 0;}

    .print-buttons .pull-right, .print .pull-right, .pull-right, .pull-left, .screen-left {float:none !important;}

    .emailTemplateElements {text-align:left !important;}

    .btn-print, .pu-bill, .bl-bill {display:none !important;}

    .print-footer {margin:0px !important;}

    .spacer {display: none;}

    .smallGoods {
        display: table-row;
        width: 80%;
        white-space: nowrap;
    }

    .smallGoodsForm{
        margin-left: 2vw;
        margin-right: 3vw;
    }

    .smallAmt {
        width: 1px;
    }

    .tabbable{margin-top: 0px !important;}

    .tabBtnDiv {margin:0px;}
    .tabBtnDiv div {float: inherit;}
    .tabBtnDiv label.col-lg-5
    {
        float: inherit;
        width: auto;
        text-align: left !important;
    }

    .view-estimate-buttons {margin-bottom: 0 !important;}

    .vidThumbnail {height: 120px;}
}
/** End Mobile **/

@media (min-width:665px) and (max-width:991px) {
    #ctl00_Content_Grid_grid td, #ctl00_Content_Grid_grid th, .grid-deposits td, .grid-deposits th {
        display: none;
    }

    #ctl00_Content_Grid_grid td:first-child,
    #ctl00_Content_Grid_grid th:first-child,
    #ctl00_Content_Grid_grid td:nth-child(2),
    #ctl00_Content_Grid_grid th:nth-child(2),
    #ctl00_Content_Grid_grid td:nth-child(3),
    #ctl00_Content_Grid_grid th:nth-child(3),
    #ctl00_Content_Grid_grid td:nth-child(4),
    #ctl00_Content_Grid_grid th:nth-child(4),
    #ctl00_Content_Grid_grid td:nth-child(5),
    #ctl00_Content_Grid_grid th:nth-child(5),
    #ctl00_Content_Grid_grid td:nth-child(6),
    #ctl00_Content_Grid_grid th:nth-child(6),
    #ctl00_Content_Grid_grid .Client,
    .grid-deposits .depDate,
    .grid-deposits .depAmt,
    #ctl00_Content_Grid_grid td:last-child,
    #ctl00_Content_Grid_grid th:last-child {
        display: table-cell;
    }
}

@media (min-width: 1200px) {
    #ctl00_Content_payCardExpiryMonth {
        padding: 8px !important;
    }

    #ctl00_Content_lblPayReceiptEmail {
        padding-right: 5px !important;
    }

    .vidThumbnail { height: 142px; }
}

@media (min-width: 475px) and (max-width: 525px) {
    .vidThumbnail {height: 105px;}
}


@media (min-width: 400px) and (max-width: 474px) {
    .vidThumbnail {
        height: 90px;
        padding-top: 0;
    }
}

@media (min-width: 381px) and (max-width: 416px) {
    .vidThumbnail {
        height: 80px;
        padding-top: 0;
    }
}

@media (min-width: 346px) and (max-width: 380px) {
    .vidThumbnail {
        height: 70px;
        padding-top: 0;
    }
}

@media (min-width: 311px) and (max-width: 345px) {
    .vidThumbnail {
        height: 60px;
        padding-top: 0;
    }
}

@media only screen and (min-width: 992px) {
    .emailBodySection { 
        padding-left: 50px !important;
    }
}
