/* Responsive Tables */
@media only screen and (max-width: 640px) {
    #unseen table td:nth-child(4),
    #unseen table th:nth-child(4),
    #unseen table td:nth-child(7),
    #unseen table th:nth-child(7),
    #unseen table td:nth-child(8),
    #unseen table th:nth-child(8){display: none;}
}

/*flip-scroll*/

@media only screen and (max-width: 800px) {
    #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    #flip-scroll * html .cf { zoom: 1; }
    #flip-scroll *:first-child+html .cf { zoom: 1; }
    #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

    #flip-scroll th,
    #flip-scroll td { margin: 0; vertical-align: top; }
    #flip-scroll th { text-align: left; }
    #flip-scroll table { display: block; position: relative; width: 100%; }
    #flip-scroll thead { display: block; float: left; }
    #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
    #flip-scroll thead tr { display: block; }
    #flip-scroll th { display: block; text-align: right; }
    #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
    #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }


    /* sort out borders */

    #flip-scroll th { border-bottom: 0; border-left: 0; }
    #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
    #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
    #flip-scroll th:last-child,
    #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}

/*no more table*/

@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr { border: 1px solid #ccc; }

    #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align:left;
    }

    #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}
/* End Responsive Tables */

@media (max-width: 768px) {
    a.logo {
        margin-top: 20px;
        font-size: 16px;
    }
    .header {
        position: fixed;
        top: 0;
    }

    .___Sidebar_Event {
        height: auto;
        /* overflow: hidden; */
        position: static;
        text-align: center;
        top: 0 !important;
        bottom: auto;
        width: 100%;
        z-index: 1001;
        background-color: #767676; /* #f37a76; */
    }

    .___Sidebar_Event #sidebar {
        width: 100%;
        height: auto;
        position: relative;
        overflow-y: visible;
    }

    #sidebar ul.sidebar-menu {
        margin: 0 43px 0 43px;
        position: relative;
        z-index: 10;
    }

    /* body container */
    #main-content {
        margin: 0px!important;
        position: none !important;
    }

    #sidebar > ul > li > a > span {
        line-height: 35px;
    }

    #sidebar > ul > li {
        margin: 0 10px 5px 10px;
    }
    #sidebar > ul > li > a {
        height:35px;
        line-height:35px;
        padding: 0 10px;
        text-align: left;
    }
    #sidebar > ul > li > a i{
        /*display: none !important;*/
    }

    #sidebar ul > li > a .arrow, #sidebar > ul > li > a .arrow.open {
        margin-right: 10px;
        margin-top: 15px;
    }

    #sidebar ul > li.active > a .arrow, #sidebar ul > li > a:hover .arrow, #sidebar ul > li > a:focus .arrow,
    #sidebar > ul > li.active > a .arrow.open, #sidebar > ul > li > a:hover .arrow.open, #sidebar > ul > li > a:focus .arrow.open{
        margin-top: 15px;
    }

    #sidebar > ul > li > a, #sidebar > ul > li > ul.sub > li {
        width: 100%;
    }
    #sidebar > ul > li > ul.sub > li > a {
        background: transparent !important ;
    }
    #sidebar > ul > li > ul.sub > li > a:hover {

    }


    /* sidebar */
    #sidebar {
        margin: 0px !important;
    }

    /* sidebar collabler */
    #sidebar .btn-navbar.collapsed .arrow {
        display: none;
    }

    #sidebar .btn-navbar .arrow {
        position: absolute;
        right: 35px;
        width: 0;
        height: 0;
        top:48px;
        border-bottom: 15px solid #282e36;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
    }

    /* pipelines */
    .pipeline-section {
        max-width: 100%;
        margin: 0 auto 40px;
    }

    .pipeline-section .pipeline-block.all-events {
        width: 25%;
    }

    .pipeline-section .pipeline-part {
        width: 75%;
    }

    .pipeline-section .pipeline-part-lost {
        width: 25%;
    }

    .calendar-view-link {
        margin-right: 15px;
    }

    /*---------*/

    .modal-footer .btn {
        margin-bottom: 0px !important;
    }

    .btn {
        margin-bottom: 5px;
    }


    /* full calendar fix */
    .fc-header-right {
        left:25px;
        position: absolute;
    }

    .fc-header-left .fc-button {
        margin: 0px !important;
        top: -10px !important;
    }

    .fc-header-right .fc-button {
        margin: 0px !important;
        top: -50px !important;
    }

    .fc-state-active, .fc-state-active .fc-button-inner, .fc-state-hover, .fc-state-hover .fc-button-inner {
        background: none !important;
        color: #FFFFFF !important;
    }

    .fc-state-default, .fc-state-default .fc-button-inner {
        background: none !important;
    }

    .fc-button {
        border: none !important;
        margin-right: 2px;
    }

    .fc-view {
        top: 0px !important;
    }

    .fc-button .fc-button-inner {
        margin: 0px !important;
        padding: 2px !important;
        border: none !important;
        margin-right: 2px !important;
        background-color: #fafafa !important;
        background-image: -moz-linear-gradient(top, #fafafa, #efefef) !important;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#efefef)) !important;
        background-image: -webkit-linear-gradient(top, #fafafa, #efefef) !important;
        background-image: -o-linear-gradient(top, #fafafa, #efefef) !important;
        background-image: linear-gradient(to bottom, #fafafa, #efefef) !important;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef', GradientType=0) !important;
        -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
        -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
        box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
        -webkit-border-radius: 3px !important;
        -moz-border-radius: 3px !important;
        border-radius: 3px !important;
        color: #646464 !important;
        border: 1px solid #ddd !important;
        text-shadow: 0 1px 0px rgba(255, 255, 255, .6) !important;
        text-align: center;
    }

    .fc-button.fc-state-disabled .fc-button-inner {
        color: #bcbbbb !important;
    }

    .fc-button.fc-state-active .fc-button-inner {
        background-color: #e5e4e4 !important;
        background-image: -moz-linear-gradient(top, #e5e4e4, #dddcdc) !important;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e4e4), to(#dddcdc)) !important;
        background-image: -webkit-linear-gradient(top, #e5e4e4, #dddcdc) !important;
        background-image: -o-linear-gradient(top, #e5e4e4, #dddcdc) !important;
        background-image: linear-gradient(to bottom, #e5e4e4, #dddcdc) !important;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e5e4e4', endColorstr='#dddcdc', GradientType=0) !important;
    }

    .fc-content {
        margin-top: 50px;
    }

    .fc-header-title h2 {
        line-height: 40px !important;
        font-size: 12px !important;
    }

    .fc-header {
        margin-bottom:0px !important;
    }

    /*--*/

    /* ========== PROPOSAL STYLES */
    /* ATF workroom view */
    .proposal-theme-default .atf-module .atf-module__image-buttons {
        width: 100%;
        top: 10px;
        left: 10px;
    }

    .proposal-theme-default .atf-module .atf-module__image-buttons button {
        display: inline-block;
        float: left;
        margin-right: 10px;
        font-size: 0;
    }

    .proposal-theme-default .atf-module .atf-module__image-buttons button i {
        font-size: 18px;
    }

    .proposal-theme-default .atf-module .atf-module__image-buttons br {
        display: none;
    }

    .proposal-theme-default .atf-module .atf-module__row > div {
        padding-left: 5px;
        padding-right: 5px;
    }


    /* proposal head */
    .finalize-wrap .finalize-event .finalize-label {
        font-size: 11px;
    }

    .new-proposal-container .proposal-toolbar .edit-toggle {
        width: 82px;
        font-size: 11px;
    }

    .new-proposal-container .proposal-state-edit .proposal-toolbar .edit-toggle .edit {
        left: -12px;
        text-align: center;
    }

    .new-proposal-container .proposal-state-edit .proposal-toolbar .edit-toggle .save {
        left: 89px;
    }

    .finalize-event .unpublished-draft-warning {
        font-size: 11px;
        bottom: -13px !important;
    }

    /* event details */
    .proposal-theme-default .proposal-container .view-normal .event-details-section .right.responsive-visible {
        width: 100%;
        line-height: 30px;
    }

    .proposal-theme-default .proposal-container .view-normal .event-details-section .right.responsive-visible > input {
        padding-left: 10px;
        margin-bottom: 20px;
    }

    /* line items */
    .proposal-theme-default .proposal-section .arrangement-item-wrapper td .mobile-friendly-span {
        display: inline-block;
        float: left;
        margin-right: 10px;
    }

    .proposal-theme-default .proposal-section .arrangement-item-wrapper td input,
    .proposal-theme-default .proposal-container .proposal-section .override-cost-wrap {
        display: inline-block !important;
        float: left;
        width: auto !important;
    }

    /* timeline */
    .proposal-theme-default .gameplan-module.edit .task-delete, .gameplan-module.edit .task-viewable {
        margin-right: 5px;
    }

    .proposal-theme-default .gameplan-module.edit .event-task div:first-child {
        width: 100%;
    }

    /* Recipe Modal */

    .proposal-theme-default .edit-recipe-modal .categories-group .unlinked-wrap {
        padding: 18px;
    }

    .proposal-theme-default .edit-recipe-modal .categories-group .prices-pane > div {
        border-bottom: none;
    }

    .proposal-theme-default .edit-recipe-modal .categories-group .prices-pane .itemCostDiv::before {
        left: 4px;
        top: 9px;
    }

    /* ============= END PROPOSAL STYLES */

    /* ============= LIBRARY STYLES */

    #listItems_wrapper .dataTables_filter .filter-type {
        width: 100%;
        max-width: 200px;
    }

    /* ============= END LIBRARY STYLES */

    /* ============= PRODUCTS STYLES */

    #standalone-recipes-wrap[style] {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-height: 100%;
        overflow: scroll;
    }

    /* ============= END PRODUCTS STYLES */

    /*.chart-position {*/
        /*margin-top: 0px;*/
    /*}*/

    .stepy-titles li {
        margin: 10px 3px;
    }

    /*menu icon plus minus*/
    .dcjq-icon {
        top: 10px;
    }
    ul.sidebar-menu li ul.sub li a {
        padding: 0;
    }

    /*---*/

    .img-responsive {
        width: 100%;
    }

}


@media (max-width: 480px) {

    /* ===================== PROPOSAL STYLES */

    /* shopping list */
    .page-template-template-shopping .proposal-container .proposal-wrapper .container {
        margin-top: 25px;
    }

    .page-template-template-shopping .proposal-container .shopping-list-container .table {
        font-size: 10px;
    }

    /* rentals list */
    .page-template-template-rentals-list .proposal-container .proposal-wrapper {
        margin-top: 60px;
    }

    .page-template-template-rentals-list .proposal-container .proposal-wrapper .rentals-list-wrap .content-panel {
        font-size: 10px;
    }

    /* recipe sheet */
    .page-template-template-recipe-sheet .proposal-container .proposal-wrapper {
        padding-top: 60px;
    }

    .page-template-template-recipe-sheet .proposal-container .proposal-wrapper .recipe-sheet-arrangements {
        width: 100%;
    }

    /* event breakdown */
    .page-template-template-event-breakdown .proposal-container .proposal-wrapper .event-breakdown-container {
        margin-top: 30px;
    }

    .page-template-template-event-breakdown .proposal-container .event-breakdown-container table {
        font-size: 10px;
    }

    /* event properties sidebar */
    .proposal-theme-default .proposal-container .event-properties-sidebar {
        max-width: 100%;
    }

    /* payments section */
    .proposal-theme-default .proposal-payments .payments-module table {
        width: 100%;
        display: block;
    }

    /*.proposal-theme-default .proposal-payments .payments-module table thead {*/
    /*display: none;*/
    /*}*/

    .proposal-theme-default .proposal-payments .payments-module table tbody {
        display: block;
        position: relative;
        width: 100%;
    }

    .proposal-theme-default .proposal-payments .payments-module .single-payment {
        display: block !important;
        height: auto !important;
        width: 100% !important;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td {
        text-align: right;
        display: block;
        width: 100%;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-percentage::before {
        content: "Percentage: ";
        display: inline-block;
        margin-left: 10px;
        float: left;
        max-width: 50%;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-percentage > div,
    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-amount > div,
    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-status .edit-paymentt {
        display: inline-block;
        width: 50%;
        text-align: center;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-amount::before {
        content: "Amount: ";
        display: inline-block;
        margin-left: 10px;
        float: left;
        max-width: 50%;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-status::before {
        content: "Status: ";
        display: inline-block;
        margin-left: 10px;
        float: left;
        max-width: 50px;
        color: #000;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment.complete .scheduled-status .status-img {
        display: inline-block !important;
        float: left;
    }

    .proposal-theme-default .proposal-container .proposal-payments .payments-module .single-payment > td.scheduled-links {
        font-size: 20px;
        text-align: left;
        margin-left: 10px;
        margin-bottom: 7px;
    }

    /* ===================== END PROPOSAL STYLES */

    /* ===================== CUSTOMERS STYLES */

    .page-template-template-customers .slide-out-sidebar.visible {
        width: 100%;
    }

    .page-template-template-customers .customer-properties-sidebar.slide-out-sidebar.visible .close-btn {
        right: 5px;
        padding: 3px 20px;
    }

    .page-template-template-customers .customer-properties-sidebar.visible #edit-customer-form .form-header {
        width: 100%;
        left: 0;
        padding-left: 10px;
    }

    /* ===================== END CUSTOMERS STYLES */

    /* ===================== ORDERS */

    .page-template-template-bid .add-bid-modal .modal-title {
        font-size: 1em;
    }

    /* single order */
    .page-template-template-bid .bid-data-shopping-list .table-bordered thead {
        display: none;
    }

    .page-template-template-bid .bid-data-shopping-list .table-bordered tbody tr {
        display: block;
        border-bottom: 20px solid gainsboro;
    }

    .page-template-template-bid .bid-data-shopping-list .table-bordered tbody tr td {
        display: block;
        width: 100%;
    }

    /* ===================== END ORDERS */
    /* ===================== SETTINGS */

    .page-template-template-profile .pane-row .pane.address-format .select2-container {
        width: 100% !important;
    }

    .page-template-template-profile .color-picker-container .color-label {
        width: 25px !important;
    }

    .page-template-template-profile .color-picker-container .color-input {
        width: 60px !important;
    }

    .page-template-template-profile .company-users-wrap table {
        background-color: #fff;
    }

    /* ===================== END SETTINGS */
    /* ===================== FORMS */

    .page-template-template-forms .form-panel .ifc-container > .row {
        display: block;
    }

    .page-template-template-forms .form-panel .ifc-container > .row > div {
        width: 100% !important;
        display: block;
    }

    .page-template-template-forms .form-panel .ifc-container > .row > div:first-child {
        padding-left: 35px;
    }

    .page-template-template-forms .form-panel .ifc-container > .row #sliding-panel .panel-toggler {
        width: 100% !important;
        height: 25px;
        margin-bottom: 10px;
    }

    .page-template-template-forms .form-panel .ifc-container > .row #sliding-panel .panel-toggler .vertical-text {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        margin: 2px;
    }

    .page-template-template-forms .form-panel .ifc-container > .row #sliding-panel .panel-toggler .arrow {
        display: none;
    }

    .page-template-template-forms .form-panel .ifc-container > .row #sliding-panel .builder-property {
        padding-top: 25px !important;
    }

    .page-template-template-forms .form-panel .form-submissions-table {
        font-size: 14px !important;
    }

    /* ===================== END FORMS */
    /* ===================== REPORTS */
    /* Leaving the big table overflowing, because if we squish it it's going to become pretty useless on mobile */
    .page-template-template-reports .report-heading input.report-date {
        max-width: 25%;
    }


    /* ===================== END REPORTS */

    .search, .dont-show , .inbox-head .sr-input, .inbox-head .sr-btn {
        display: none;
    }

    .hidden-phone {
        display: none !important;
    }

    .chart-position {
       margin-top: 0px;
     }

    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
        background-color: #ccc;
        border-color:#ccc ;
    }

}

@media (max-width:320px) {
    .search, .dont-show, .inbox-head .sr-input, .inbox-head .sr-btn {
        display: none;
    }

    .hidden-phone {
        display: none !important;
    }

    .chart-position {
        margin-top: 0px;
    }

    .lock-wrapper {
        margin: 10% auto;
        max-width: 310px;
    }
    .lock-input {
        width: 82%;
    }

    .cmt-form {
        display: inline-block;
        width: 75%;
    }

}