/* -----------------------------------------------------
	CCPSOL
	www.url.com
----------------------------------------------------- */
@media screen and (max-width:1599px){
    /* ===== HOME ====== */
    .home-block .grid-block .grid-column:nth-child(1),
    .home-block .grid-block .grid-column:nth-child(3) {flex: 0 0 calc( 25% - 20px);}
    .home-block .grid-block .grid-column:nth-child(2) {flex: 0 0 calc( 50% - 20px);}
    .home-block .grid-block .grid-column .form-control {max-width: 400px;}
    .home-block .grid-block .grid-column:nth-child(2) form .form-group label {display: block; margin:0 0 8px; }

    /* ===== TIME SHEET VERIFICATION ====== */
    .time-sheet-verification.listing-table .table-block {overflow: auto; white-space: nowrap; max-height:inherit; }    
    .time-sheet-verification.listing-table .table-block table tbody td {padding:12px 5px;}
}

@media screen and (max-width:1499px){
    /* ===== SPEC SHEET ====== */
    .spec-sheet {margin-top: 20px;}
    .spec-sheet .row {margin: 0 -15px;}
    .spec-sheet .each-item {padding: 0 15px;}
    .spec-sheet .form-group {flex-wrap: wrap;}
    .spec-sheet .form-group label {flex: 0 0 100%;}

    /* ===== SUB HEADER ====== */
    .sub-header ul {flex-wrap: wrap; justify-content:center; }

    /* ===== Client Details ====== */
    .client-details-block .left-block {margin-right: 0;}
    .client-details-block .right-block {margin-left: 0;}

    /* ===== SUB TASKS ====== */
    .sub-tasks-block .add-task-form .form-group label {margin-right: 20px;}

    
    
    /* ===== PROJECT TIMELINE ====== */
    #content .table-block {overflow: auto; white-space: nowrap;}

    /* ===== HOME ====== */
    .grid-block .grid-column {padding: 0 15px 20px;}
    .home-block .grid-block .grid-column:nth-child(1), .home-block .grid-block .grid-column:nth-child(3) {flex: 0 0 calc( 28% - 20px);}
    .home-block .grid-block .grid-column:nth-child(2) {flex: 0 0 calc( 44% - 20px);}
    .home-block .grid-block .grid-column .btn {margin: 0;}
    .grid-block .grid-column h2{ margin:0 -15px 30px; }
    .home-block .grid-block .grid-column #line_item_default select.form-control { max-width:inherit; width:100%; }

    /* ===== TIME SHEET VERIFICATION ====== */
    .monthly-time-sheet .grid-block .grid-column {flex: 0 0 calc(33.33% - 30px); margin:0 15px 30px;}

    /* ===== TIMESHEET SUMMARY ====== */
    .timesheet-summary #contract_stage_wrapper table td,
    .timesheet-summary #contract_stage_wrapper table.total-projects th {padding: 10px 20px;}
    .timesheet-summary .questionairre .content-block {padding: 20px 20px;}

    /* ===== INVOICE PAYMENT ====== */
    .invoice-payment .invoice-payment-block {gap: 20px;}


}

@media screen and (max-width:1199px){
	header .header-block .navbar-nav li,
	header .header-block .navbar-nav li:last-child {margin:0 17.5px;}

    /* ===== SUB TASKS ====== */
    .sub-tasks-block .add-task-form .btn-group {margin-top: 0;}
    .sub-tasks-block .add-task-form .form-group {display: block;}
    .sub-tasks-block .add-task-form .form-group .styled-select,
    .sub-tasks-block .add-task-form .form-group .form-control {max-width: inherit; flex-grow:1; }
    .sub-tasks-block .sub-tasks-list h6 strong {display: block; margin-bottom:10px; }

    /* ===== STATEMENT OF ACCOUNT ====== */
    .statement-of-account .statement-block .note {padding: 12px 20px;}
    
    /* ===== TIME SHEET VERIFICATION ====== */
    .time-sheet-verification h4 {font-size: 20px;}
    .monthly-time-sheet .grid-block .grid-column {flex: 0 0 calc(50% - 40px); margin:0 20px 40px;}     

    /* ===== PROJECT SUPPLMENTS ====== */
    #invoice_supplments table#supplement_option_table td .form-group {gap: 15px;}

    /* ===== TIMESHEET SUMMARY ====== */
    .timesheet-summary #contract_stage_wrapper {overflow: auto;}
    .timesheet-summary #contract_stage_wrapper table td,
    .timesheet-summary #contract_stage_wrapper table.total-projects th {padding: 10px 15px;}
    .timesheet-summary .questionairre .content-block {padding: 20px 15px;}
    
    /* ===== INVOICE PAYMENT ====== */
    .invoice-payment .invoice-payment-block {flex-wrap: wrap; gap: 30px; justify-content: center;}
    .invoice-payment .invoice-payment-block #list {flex: 0 0 100%;}

}
@media screen and (min-width:992px){
    header .dropdown-menu a:hover { background-color: #71241e; color: #fff !important; transition: all ease 0.3s;}
    header .dropdown-menu a:hover:after {opacity: 1;  transition: all ease 0.3s;}
    header .dropdown .dropdown-menu {display: block;}
    .dropdown-menu { overflow: hidden; visibility: hidden; opacity: 0; transition: all ease 0.5s ;}
    .dropdown:hover .dropdown-menu,
    .dropdown:focus .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {opacity: 1; visibility: visible; transition: all ease 0.5s ;}

    /* ===== SUB HEADER ====== */
    .sub-header .sub-menu-btn {display: none;}
}
@media screen and (max-width:991px){
    h1 {font-size: 22px; padding: 20px 0;}
    h2 {font-size: 22px;}    
	/* ===== LOGIN ====== */
    .login .login-block h1 {font-size: 50px;}
	.login .login-block h2 {font-size: 40px;}
    header {padding:7px 0;}
	header nav#nav {flex-direction: column; align-items: flex-start; }
    header .navbar-nav>li {padding: 5px 0; opacity: 0; margin-top:10px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
    header nav#nav .navbar-nav>li {margin: 0; opacity:1; float: none; border-bottom: 1px solid #b6a268;  } 
    header .header-block .navbar-nav li>a {font-size:18px; color:#fff; padding: 12px 15px;}
    header .header-block .navbar-nav .dropdown {display: block;}
    header .header-block .navbar-nav .dropdown-btn {float: right; border-left: 1px solid #b6a268;  }
    header .header-block .navbar-nav .dropdown-menu {position: relative; float:none; background-color:transparent; box-shadow:none; }
    header .header-block .navbar-nav .dropdown-menu a { padding:5px 15px 5px 25px; }
    header .header-block .navbar-nav li>a:hover { color:#fff; }
    header .navbar-nav>li>a:hover,
    header .navbar-nav>li>a.active { color:#fff; }
    header nav#nav .navbar-nav { float: none; width: 100%; height: 100%; margin:0; padding: 80px 15px; overflow:auto; }
    header nav#nav{position:fixed;top:0;right:0; z-index:990; height: 100%; width:100%; transform: translateX(100%); max-width: 400px; background-color:#00573d; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
    header nav#nav.is-active{transform: translateX(0);}
    .mobile-toggle{ position:relative; right:0; z-index:999;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.25s;transition-timing-function:linear;background-color:transparent;border:0; overflow:visible; padding:0; width:34px; height:28px;}
    .mobile-toggle:hover{opacity:.7}
    .mobile-toggle:focus{outline:0}
    .mobile-toggle-box{width:28px;height:28px;display:inline-block;position:relative;}
    .mobile-toggle-inner{display:block;top:50%;margin-top:-2px}
    .mobile-toggle-inner,
    .mobile-toggle-inner::before,
    .mobile-toggle-inner::after{width:28px;height:3px;background-color:#b6a268;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease;}
    .is-active .mobile-toggle-inner,
    .is-active .mobile-toggle-inner::before,
    .is-active .mobile-toggle-inner::after{background-color:#b6a268; }
    .mobile-toggle-inner::before,.mobile-toggle-inner::after{content:"";display:block}
    .mobile-toggle-inner::before{top:-10px}
    .mobile-toggle-inner::after{bottom:-10px}
    .mobile-toggle--squeeze .mobile-toggle-inner{ -webkit-transition-duration:.075s;-ms-transition-duration:.075s;transition-duration:.075s;-webkit-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-ms-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}
    .mobile-toggle--squeeze .mobile-toggle-inner::before{-webkit-transition:top .075s .12s ease,opacity .075s ease;-ms-transition:top .075s .12s ease,opacity .075s ease;transition:top .075s .12s ease,opacity .075s ease}
    .mobile-toggle--squeeze .mobile-toggle-inner::after{-webkit-transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19);-ms-transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19);transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19)}
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:.12s;-ms-transition-delay:.12s;transition-delay:.12s;-webkit-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);-ms-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)}
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner::before{top:0;opacity:0;transition:top .075s ease,opacity .075s .12s ease}
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner::after{bottom:0;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);-ms-transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1)}
    .listing-table .table-header h4 {font-size: 22px;}
    .listing-table .table-header h4 strong {font-size: 16px;}
    .listing-table .table-block {overflow: auto; white-space: nowrap;}


    /* ===== SPEC SHEET ====== */
    .spec-sheet {margin-top: 0px;}

    /* ===== SUB HEADER ====== */
    .sub-header {position: relative;}
    .sub-header.active {overflow: visible;}
    .sub-header .sub-menu-btn { user-select: none; color: #00573d; font-weight:600; font-size:16px; border:1px solid #00573d; padding:6px 20px; display:block; margin:10px auto 10px 0; width:fit-content; }
    .sub-header .sub-menu-btn i { margin-left: 5px; transform: rotateY(0deg); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
    .sub-header.active .sub-menu-btn i {transform: rotate(90deg); }
    .sub-header ul { display:block; transform: translateX(-110%); transform-origin: top right; margin-left: auto; position: absolute; background: #fff; z-index: 1; left: 15px; box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1); max-width: 300px; width: 100%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
    .sub-header ul.open {transform: translateX(0);}
    .sub-header ul>li>a {display: block}

    /* ===== Client Details ====== */
    .client-details-block .left-block {margin-bottom: 40px;}

    .sub-tasks-block .sub-tasks-list {padding-top: 40px;}
    .sub-tasks-block .sub-tasks-list ul li {flex: 1 0 50%;}
	
    /* ===== STATEMENT OF ACCOUNT ====== */
    .statement-of-account .statement-block>h5 {text-align: center; margin-top:40px; }
    .statement-of-account .statement-block>h5>strong {display: block; max-width: inherit; margin: 0;}

    /* ===== SUB TASKS ====== */
    .sub-tasks-block .task_insert h4 {font-size:22px; }

    /* ===== PROJECT SUPPLMENTS ====== */
    #invoice_supplments table#supplement_option_table tr {width: 100%;}

    /* ===== TIME SHEET VERIFICATION ====== */
    .time-sheet-verification h4 {font-size: 18px;}
    .monthly-time-sheet .grid-block .grid-column {flex: 0 0 calc(50% - 30px); margin:0 15px 30px;}

    /* ===== HOME ====== */
    .grid-block {gap: 30px;}
    .home-block .grid-block .grid-column:nth-child(1), .home-block .grid-block .grid-column:nth-child(3),
    .home-block .grid-block .grid-column:nth-child(2) {flex: 0 0 100%;}
    .home-block .grid-block .grid-column:nth-child(2) form .form-group label {display: inline-block;  margin-right:8px;}

    .time-sheet-verification.listing-table .project_identifier_full strong {font-size: 22px;}

    /* ===== TIMESHEET EXPENSES ====== */
    .timesheet-expenses #expense_one_line form {display: block;}
    .timesheet-expenses #expense_one_line form select.form-control {margin-right: 0; margin-bottom: 20px; max-width: 480px; width: 100%;}

    /* ===== BUDGET BUILDER IN PROGRESS ====== */ 
    .budget-builder-in-progress .budgets_in_progress caption {font-size: 22px;}
}

@media screen and (max-width:767px){
    h1 {font-size: 20px; padding: 15px 0;}
    h2 {font-size: 20px;}
	/* ===== LOGIN ====== */
	.login .login-block h1 {font-size: 46px;}
	.login .login-block h2 {font-size: 36px;}
	.login .login-block form input.form-control {height: 50px;}

	.listing-table .table-header {flex-wrap: wrap; padding:20px 0; gap:20px; }
    .listing-table .table-header h4 {font-size: 20px;}
    .listing-table .table-header h4 {flex: 0 0 100%;}
    .listing-table .table-header .search-block {max-width: inherit;}

    /* ===== SPEC SHEET ====== */
    .spec-sheet .form-group {flex-wrap: nowrap;}
    .spec-sheet .form-group label {flex: 0 0 250px;}
    .spec-sheet .btn {margin: 40px auto 0;}

    /* ===== TIME SHEET VERIFICATION ====== */
    .time-sheet-verification  h4 {font-size: 18px;}
    .monthly-time-sheet .grid-block .grid-column {flex: 0 0 100%; max-width: 580px; margin:0 auto 30px;}    
    .monthly-time-sheet .grid-block .grid-column h2{font-size: 18px;}

    /* ===== PROJECT CONTACTS ====== */
    .project_contacts .list-table td{display: inline-block;}
    .project_contacts .list-table td:nth-child(3) {width: 100%;}
    .project_contacts .container-fluid>form {flex-wrap: wrap;}

    /* ===== SUB TASKS ====== */
    .sub-tasks-block .list-table td {display: block; padding:2.5px 10px; }
    .sub-tasks-block .list-table tr {display: block; margin-bottom: 15px;}
    .sub-tasks-block .task_insert h4 {font-size:20px;}

    /* ===== HOME ====== */
    h1 p {font-size: 16px;}
    h1 strong {font-size: 16px;}
    .home-block .grid-block .grid-column:nth-child(2) form .form-group label {display: block; margin-right:0; }

    .time-sheet-verification.listing-table .project_identifier_full strong {font-size: 20px;}

    /* ===== TIMESHEET SUMMARY ====== */
    .timesheet-summary .questionairre .content-block {display: block; text-align:center; }
    .timesheet-summary .questionairre .content-block .btn {margin-top:20px; }
    .timesheet-summary .admin h2 {font-size: 18px;}
    .timesheet-summary .admin form {display: block; max-width:400px; margin:0 auto 20px; }
    .timesheet-summary .admin .form-group label {display: block;}
    .timesheet-summary .admin .form-control {width: 100%; margin:8px 0 20px; }

    /* ===== TIMESHEET EXPENSES ====== */
    .timesheet-expenses #expense_one_line {padding: 30px 0;}

    /* ===== client_contacts ====== */
    .client-contacts .location-form-group {display: block;}
    .client-contacts .location-form-group label {margin-bottom: 5px;}
    .client-contacts .view-project-contacts select.form-control {margin: 20px 0;}

    /* ===== BUDGET BUILDER IN PROGRESS ====== */ 
    .budget-builder-in-progress .budgets_in_progress caption {font-size: 20px;}
}

@media screen and (max-width:599px){
	/* ===== LOGIN ====== */
	.login {padding: 40px 15px;}
	.login .login-block {padding: 50px 30px}
    .month-block a {font-size: 14px;}
    .month-block strong {font-size: 16px; margin:0 20px; }

    /* ===== SPEC SHEET ====== */
    .spec-sheet .form-group label {flex: 0 0 150px;}

    /* ===== Client Details ====== */
    .client-details-block form .btn {margin-top: 10px;}
    
    /* ===== PROJECT SUPPLMENTS ====== */
    #invoice_supplments table#supplement_option_table tr {flex-wrap: wrap;}
    #invoice_supplments table#supplement_option_table td {flex: 0 0 100%;}
    #invoice_supplments table#supplement_option_table td .form-group {margin-bottom: 10px;}
    

}

@media screen and (max-width:479px){
	/* ===== LOGIN ====== */
	.login .login-block h1 {font-size: 42px;}
	.login .login-block {padding: 30px 20px}
	.login .login-block button {margin-top: 0;}
	.login .login-block form .form-group label {font-size: 16px; top: -13px; line-height: 26px;}

    .listing-table .table-header h4 {font-size: 18px;}
    .listing-table .table-header .search-block {height: 45px;}
    .listing-table .table-header .search-block a {line-height: 45px;}

    /* ===== SPEC SHEET ====== */
    .spec-sheet .form-group {flex-wrap: wrap;}
    .spec-sheet .form-group label {flex: 0 0 100%;}
    
    .statement-of-account .statement-block .note {padding: 12px 15px;}

    /* ===== HOME ====== */
    .home-block .grid-block .grid-column .form-control {max-width: inherit;}
    .home-block .grid-block .grid-column:nth-child(2) form .form-group:nth-child(2) {flex: 0 0 100%;}
    .home-block .grid-block .grid-column:nth-child(2) form .form-group:nth-child(2) select.form-control {width: 100%;}
    .home-block .grid-block .grid-column:nth-child(2) form .form-group {flex:1 0 40%;}

    .time-sheet-verification.listing-table .project_identifier_full strong {font-size: 18px;}

    /* ===== TIME LOCK MONTHLY ====== */
    .time-lock-monthly .table-header #options {flex-wrap: wrap; justify-content:center; text-align:center; }
    .time-lock-monthly .table-header #options form {justify-content: center;}
    .time-lock-monthly .table-header #options h5 {flex: 0 0 100%;}

    .timesheet-summary #contract_stage_wrapper table tr {display: block; width:100%; margin-bottom: 20px;}
    .timesheet-summary #contract_stage_wrapper table tr:last-child {margin: 0;}
    .timesheet-summary #contract_stage_wrapper table td,
    .timesheet-summary #contract_stage_wrapper table td:first-child {display: block; width:100%; padding:5px 15px; }
    .timesheet-summary #contract_stage_wrapper table td:last-child {text-align: left;}
    .timesheet-summary #contract_stage_wrapper table.total-projects tr {display: table-row;}
    .timesheet-summary #contract_stage_wrapper table.total-projects td {display: table-cell; width: auto;}
    .timesheet-summary #contract_stage_wrapper table.total-projects td:first-child {width: 100px;}
    .timesheet-summary #contract_stage_wrapper table.total-projects td:last-child {width: 200px; text-align: right;}

    /* ===== STATEMENT OF ACCOUNT ====== */
    .statement-of-account .statement-block table#invoice_return_address td {display: block; width:100%; padding:5px 10px; }

    /* ===== INVOICE PAYMENT ====== */
    .invoice-payment fieldset {padding: 25px 10px;}
}

@media screen and (max-width:375px){
	/* ===== LOGIN ====== */
	.login .login-block h1 {font-size: 40px;}

	header .header-block .logo a {font-size: 24px;}
	header .header-block .profile-block .profile-name {font-size: 0;}
	header .header-block .profile-block .profile-name i{font-size: 14px;}

    .month-block a {font-size: 12px;}    
    .month-block strong {font-size: 14px; margin:0 10px; }
}