﻿/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    table td[class*="col-"] {
        display: block;
        vertical-align: top;
    }
}

@media (min-width: 769px) {
    .dashboard-asking-price-sec{
        /*margin-bottom:50px;*/
    }

    .sidebar-xs .sidebar-main .navigation > li:hover:not(.active) a {
        color: #36474f;
        background-color: #dad8d9;
    }

    .sidebar-xs .sidebar-main .navigation > li:hover:not(.active) a > span {
        padding: 13px 20px;
        color: #36474f;
        background-color: #dad8d9;
        border: none;
    }

    .sidebar-xs .sidebar-main .navigation > li:hover:not(.active) a:not(.has-ul) > span {
        background: none;
    }

    .sidebar-xs .sidebar-main .navigation > li:hover:not(.active) a:not(.has-ul) {
        color: #fff;
        background-color: #26A69A;
    }

    .sidebar-xs .sidebar-main .navigation > li > ul {
        top: 44px;
        background-color: #26A69A;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar-xs .sidebar-main .navigation > li > ul li a {
        color: #fff;
        padding: 13px 20px;
        min-height: 45px;
    }
    .modal-dialog.manage-photos-slider{
        width: auto;
        display: inline-block;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

    table td[class*="col-"] {
        display: table-cell;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #ulTabs .nav > li {
        display: inline-block;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
 
}

@media only screen and (min-width : 1024px) {
    .pr-15-md{
        padding-right:15px;
    }
}

@media only screen and (max-width : 1024px) {
    .mb-15-md{
        margin-bottom:15px;
    }
    .input-group.th-searchbox {
        width: 100%;
    }

    .chart-container .gauge-1, .chart-container .gauge-2 {
        margin-top: 0 !important;
        ;
    }

    body .btn-xs-sm {
        display: inline !important;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    body.pace-done .navbar.header-highlight .navbar-header a.navbar-brand img {
        margin-left: 54px;
    }

    body.sidebar-xs-indicator .content-wrapper {
        /*padding-left: 40px;*/
    }

    .sidebar-xs-indicator .sidebar-main {
        /*display:block;*/
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .sidebar-xs-indicator:not(.sidebar-mobile-main) .sidebar-main {
        max-width: 56px;
    }

    .sidebar-xs-indicator.sidebar-mobile-main .sidebar-main {
        max-width: 275px;
    }

    .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li > a span, .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li > a:after {
        display: none;
    }

    .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > a span, .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > a:after {
        display: block;
    }

    .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > a, .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > ul {
        width: 275px;
    }

    .sidebar-xs-indicator .navigation {
        padding-bottom: 0;
    }

    .navbar-header .navbar-brand {
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 10px !important;
    }

    .navbar-header .nav.navbar-nav {
        position: absolute;
        right: auto;
        left: 4px;
        top: 2px;
    }

    .chart-container .gauge-2 {
        margin-top: 0 !important;
        ;
    }

        .chart-container .gauge-1 > div, .chart-container .gauge-2 > div {
            margin: 0 auto !important;
        }

    .custome-date-sec {
        text-align: left;
        float: none;
    }

    .gauge-lbl {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .chart-container.annual-booking .gauge-lbl {
        left: 1%;
    }
    .chart-container.annual-booking .gauge-lbl {
        width: 231px;
    }
    .modal-add-contact .form-control{
        width:100%!important;
    }
    .modal-add-contact .btn-search-icn{
        float:right;
        margin-top:0!important;
    }
}

@media only screen and (max-width : 991px) {
    .chart-container.annual-booking .gauge-lbl {
        top: 79%;
        left: 18%;
        font-size: 12px;
        text-align: center;
    }

    .mb-15-xs{
        margin-bottom:15px;
    }
}

@media only screen and (max-width : 767px) {
    body .page-ttl-resp td {
        width: 100% !important;
        display: block !important;
        text-align: center;
    }

        body .page-ttl-resp td .btn {
            display: block;
            width: 100% !important;
            margin-bottom: 5px;
        }

        body .page-ttl-resp td.ttl-td {
            padding: 15px !important;
        }

            body .page-ttl-resp td.ttl-td .SectionHeader_Big {
                font-size: 18px;
            }

    .page-header-content .heading-elements-toggle {
        display: none !important;
    }

    .customer-box-table-align .col {
        text-align: center !important;
    }

        .customer-box-table-align .col .italic {
            font-style: italic;
            margin-bottom: 15px;
            display: block;
        }

    .contact-cont.tab-content {
        padding: 0 15px;
    }

    .contact-cont.tab-content .tab_content {
        padding: 10px 0;
    }
    .chart-container.annual-booking .gauge-lbl {
        top: 79%;
        left: 16%;
        font-size: 12px;
        text-align: center;
    }

}

@media only screen and (max-width : 480px){
    .chart-container.annual-booking .gauge-lbl {
        top: 79%;
        left: -11%;
        font-size: 11px;
    }
}


@media only screen and (min-width : 769px) and (max-width : 1024px) {

    body .page-ttl-resp td {
        width: 50% !important;
    }

        body .page-ttl-resp td.ttl-td {
        }

            body .page-ttl-resp td.ttl-td .SectionHeader_Big {
                font-size: 18px;
            }
}

@media only screen and (min-width : 1025px) and (max-width : 1024px){
    .col-pro-6 {
        width: 50%;
    }
    .col-pro-12 {
        width: 100%;
    }
}


/*-Responsive Table-*/
.responsive-table, .responsive-table table {
    margin: 1em 0;
    /*min-width: 300px;*/
}

.responsive-table.tbl-m0, .responsive-table.tbl-m0 table {
    margin: 0;
}

.responsive-table > tbody > tr > td, .responsive-table table > tbody > tr > td {
    font-weight: 500;
}

.responsive-table > tbody > tr > tr, .responsive-table table > tbody > tr > tr {
    border-bottom: 1px solid #999;
}

.responsive-table > tbody > tr > th, .responsive-table table > tbody > tr > th {
    position: relative;
}

    /*
.responsive-table th {
 display: none;
 border: none !important;
}
*/
.responsive-table > tbody > tr > td, .responsive-table table > tbody > tr > td {
    display: block;
    border: none !important;
}

.responsive-table > tbody > tr > td > a:not(.btn-a, .btn) {
    display: inline !important;
}

.responsive-table > tbody > tr > td:first-child, .responsive-table table > tbody > tr > td:first-child {
    padding-top: .5em;
}

.responsive-table > tbody > tr > td:last-child, .responsive-table table > tbody > tr > td:last-child {
    padding-bottom: .5em;
}

.responsive-table > tbody > tr > td:before, .responsive-table table > tbody > tr > td:before {
    content: attr(data-th) " ";
    font-weight: bold;
    width: 6.5em;
    display: inline-block;
    margin-right: 15px;
}

.responsive-table > tbody > tr > th, .responsive-table > tbody > tr > td, .responsive-table table > tbody > tr > th, .responsive-table table > tbody > tr > td {
    text-align: left;
}

.responsive-table > tbody > tr > th.text-center, .responsive-table > tbody > tr > td.text-center,
.responsive-table table > tbody > tr > th.text-center, .responsive-table table > tbody > tr > td.text-center {
    text-align: center;
}


@media (min-width: 1025px) {
    .responsive-table > tbody > tr > td:before, .responsive-table table > tbody > tr > td:before {
        display: none;
    }

    .responsive-table > tbody > tr > th, .responsive-table > tbody > tr > td,
    .responsive-table table > tbody > tr > th, .responsive-table table > tbody > tr > td {
        display: table-cell;
        padding: .25em .5em;
        border-top: 1px solid #ddd;
    }

        .responsive-table > tbody > tr > th:first-child, .responsive-table > tbody > tr > td:first-child,
        .responsive-table table > tbody > tr > th:first-child, .responsive-table table > tbody > tr > td:first-child {
            padding-left: 0;
        }

        .responsive-table > tbody > tr > th:last-child, .responsive-table > tbody > tr > td:last-child,
        .responsive-table table > tbody > tr > th:last-child, .responsive-table table > tbody > tr > td:last-child {
            padding-right: 0;
        }
    .responsive-table > tbody > tr > th, .responsive-table > tbody > tr > td,
    .responsive-table table > tbody > tr > th, .responsive-table table > tbody > tr > td {
        padding: 1em !important;
    }
}


.responsive-table, .responsive-table table {
    overflow: hidden;
}

.responsive-table > tbody > tr > th, .responsive-table > tbody > tr > td:before,
.responsive-table table > tbody > tr > th, .responsive-table table > tbody > tr > td:before {
    /*font-weight: 700;*/
    font-weight: 400;
}

@media (max-width: 1024px){
    .responsive-table > tbody > tr > th, .responsive-table > tbody > tr > td,
    .responsive-table table > tbody > tr > th, .responsive-table table > tbody > tr > td {
        display: block;
        padding: 5px 20px;
    }

    .responsive-table.no-th > tbody > tr > th,
    .responsive-table.no-th table > tbody > tr > th {
        display: none !important;
    }

    .responsive-table.no-th > tbody > tr > th, .responsive-table.no-th > thead, .responsive-table.no-th table > thead, .responsive-table.no-th table > tbody > tr > th {
        display: none;
    }

    .responsive-table.row-click > tbody > tr > td,
    .responsive-table.row-click table > tbody > tr > td {
        padding: 0 !important;
        position: relative;
        min-height: 38px;
    }

    .responsive-table.row-click > tbody > tr {
        display: block;
        padding: 10px 0 10px 0;
    }
    .responsive-table.row-click > tbody > tr:first-child {
        padding: 0;
    }

    .responsive-table.row-click > tbody > tr > td > a,
    .responsive-table.row-click table > tbody > tr > td > a {
        display: block;
        padding-left: 10em;
        position: absolute;
        z-index: 1;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 16px;
        width: 100%;
    }

    .responsive-table.row-click > tbody > tr > td:before,
    .responsive-table.row-click table > tbody > tr > td:before {
        position: absolute;
        left: 18px;
        top: 1px;
        z-index: 0;
        min-height: 38px;
        width: 8em;
    }
    .add-new-contact-tbl .btn-choose-contact{
        width: calc(100% - 30px);
        margin: 0 15px;
    }
    .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn, .form-inline .input-group .form-control {
        width: 1%;
    }

    .responsive-table.row-click > tbody > tr.grid-pagination table tr td {
        display: table-cell;
    }
    .responsive-table.row-click > tbody > tr.grid-pagination table tr td::before{
        display:none;
    }
    .responsive-table.row-click > tbody > tr.grid-pagination table{
        margin: 7px auto 0 auto;
    }
    .responsive-table.row-click > tbody > tr.grid-pagination table tr td a, .responsive-table.row-click > tbody > tr.grid-pagination table tr td span{
        position:relative;
        padding:8px;
    }

}

@media (max-width: 1024px) {
    
    .visible-pro-block{
        display:block!important;
        margin-left:0!important;
    }
    .sidebar {
        display: none;
    }
    .sidebar-mobile-main .sidebar-main, .sidebar-mobile-secondary .sidebar-secondary, .sidebar-mobile-opposite .sidebar-opposite, .sidebar-mobile-detached .sidebar-detached > .sidebar {
        display: block;
    }
}


/*-End Responsive Table -*/

@media only screen and (max-width : 767px) {
    .btn-group {
        display: block !important;
    }

        .btn-group input#ctl00_mainContent_btnOpportunity {
            width: 48%;
            margin-bottom: 10px;
            float: right;
        }

        .btn-group input#ctl00_mainContent_btnCreateQuote {
            width: 49%;
            margin-bottom: 10px;
            float: left;
        }

        .btn-group input#ctl00_mainContent_btnSave {
            width: 100%;
            margin-bottom: 10px;
            border-radius: 0px;
        }

    #ulTabs .panel-group .panel {
        display: none !important;
    }

        #ulTabs .panel-group .panel:nth-child(5) {
            display: block !important;
        }

        #ulTabs .panel-group .panel:nth-child(1) {
            display: block !important;
        }

        #ulTabs .panel-group .panel:nth-child(2) {
            display: block !important;
        }

    .card#ulTabs {
        box-shadow: none;
        background: none;
    }

    #ulTabs .panel-group .panel-heading {
        padding: 0;
    }

        #ulTabs .panel-group .panel-heading h4 a {
            display: block;
            padding: 10px;
            position: relative;
        }

            #ulTabs .panel-group .panel-heading h4 a i.more-less {
                position: absolute !important;
                right: 10px !important;
                top: 10px !important;
                display: block !important;
            }

    #ulTabs .panel-group .panel-heading {
        background-color: #696A6D;
        color: #fff;
        border-radius: 0px;
    }

    .mb0 {
        margin-bottom: 0 !important;
    }

    .mr0 {
        margin-right: 0 !important;
    }

    .mt0 {
        margin-top: 0 !important;
    }
}

/*ipad-pro*/
@media only screen and (orientation : landscape) {
    body.ipad-pro .mb-15-md{
        margin-bottom:15px;
    }
    body.ipad-pro .input-group.th-searchbox {
        width: 100%;
    }

    body.ipad-pro .chart-container .gauge-1, body.ipad-pro .chart-container .gauge-2 {
        margin-top: 0 !important;
    }

    body.ipad-pro .btn-xs-sm {
        display: inline !important;
    }

    body.ipad-pro .navbar-collapse.collapse {
        display: none !important;
    }

    body.ipad-pro.pace-done .navbar.header-highlight .navbar-header a.navbar-brand img {
        margin-left: 54px;
    }

    body.ipad-pro.sidebar-xs-indicator .content-wrapper {
        /*padding-left: 40px;*/
    }

    body.ipad-pro .sidebar-xs-indicator .sidebar-main {
        /*display:block;*/
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .sidebar-main {
        max-width: 56px;
    }

    body.ipad-pro .sidebar-xs-indicator.sidebar-mobile-main .sidebar-main {
        max-width: 275px;
    }

    body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li > a span, body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li > a:after {
        display: none;
    }

    body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > a span, body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > a:after {
        display: block;
    }

    body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > a, body.ipad-pro .sidebar-xs-indicator:not(.sidebar-mobile-main) .navigation > li.active > ul {
        width: 275px;
    }

    body.ipad-pro .sidebar-xs-indicator .navigation > li:not(.mobileFriendly), body.ipad-pro .sidebar-xs-indicator .navigation > li ul li:not(.mobileFriendly) {
        display: none !important;
    }

    body.ipad-pro .sidebar-xs-indicator .navigation {
        padding-bottom: 0;
    }

    body.ipad-pro .sidebar-xs-indicator .navigation > li.menu-webcat .icn-webcat {
        background: url(../Images/icn-webcat.png) no-repeat left top;
        height: 25px;
        width: 25px;
        background-size: 100%;
        margin-left: -4px;
        margin-top: 0px;
    }

    body.ipad-pro .navbar-header .navbar-brand {
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 10px !important;
    }

    body.ipad-pro .navbar-header .nav.navbar-nav {
        position: absolute;
        right: auto;
        left: 4px;
        top: 2px;
    }

    body.ipad-pro .chart-container .gauge-2 {
        margin-top: 0 !important;
    }

    body.ipad-pro .chart-container .gauge-1 > div, body.ipad-pro .chart-container .gauge-2 > div {
        margin: 0 auto !important;
    }

    body.ipad-pro .custome-date-sec {
        text-align: left;
        float: none;
    }

    body.ipad-pro .gauge-lbl {
        max-width: 100%;
        margin-bottom: 30px;
    }

    body.ipad-pro .chart-container.annual-booking .gauge-lbl {
        left: 1%;
    }
    body.ipad-pro .chart-container.annual-booking .gauge-lbl {
        width: 231px;
    }
    body.ipad-pro .modal-add-contact .form-control{
        width:100%!important;
    }
    body.ipad-pro .modal-add-contact .btn-search-icn{
        float:right;
        margin-top:0!important;
    }
}

@media only screen and (orientation : landscape) {

    body.ipad-pro .page-ttl-resp td {
        width: 50% !important;
    }

    body.ipad-pro .page-ttl-resp td.ttl-td {
    }

    body.ipad-pro  .page-ttl-resp td.ttl-td .SectionHeader_Big {
        font-size: 18px;
    }
}

@media only screen and (orientation : landscape) {
    body.ipad-pro .col-pro-6 {
        width: 50%;
    }
    body.ipad-pro .col-pro-12 {
        width: 100%;
    }
}

@media only screen and (orientation : landscape) {
    
    body.ipad-pro .visible-pro-block{
        display:block!important;
        margin-left:0!important;
    }
    body.ipad-pro .sidebar {
        display: none;
    }
    body.ipad-pro.sidebar-mobile-main .sidebar-main, 
    body.ipad-pro.sidebar-mobile-secondary .sidebar-secondary, 
    body.ipad-pro.sidebar-mobile-opposite .sidebar-opposite, 
    body.ipad-pro.sidebar-mobile-detached .sidebar-detached > .sidebar {
        display: block;
        height:100vh;
    }
}

/*ipad and iphone*/
body.ipad-pro .navigation > li:not(.mobileFriendly), body.ipad-pro .navigation > li ul li:not(.mobileFriendly),
body.iphone .navigation > li:not(.mobileFriendly), body.iphone .navigation > li ul li:not(.mobileFriendly) {
    display: none !important;
}

body.ipad-pro .mobile-view, body.ipad-pro .visible-xs.visible-sm,
body.iphone .mobile-view, body.iphone .visible-xs.visible-sm{
    display:block!important;
}
body.ipad-pro .hidden-sm.hidden-xs,
body.iphone .hidden-sm.hidden-xs{
    display:none!important;
}
.navigation > li.menu-webcat .icn-webcat {
    background: url(../Images/icn-webcat.png) no-repeat left top;
    height: 25px;
    width: 25px;
    background-size: 100%;
    margin-left: -4px;
    margin-top: 0px;
}

/* 5 column grid*/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    @include padding-right(15px);
    @include padding-left(15px);
 float: left;
}
.col-xs-15 {
    width: 20%;
    max-width: 20%;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
     max-width: 20%;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
     max-width: 20%;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
     max-width: 20%;
    }
}