/* Responsives -------------------------------------------*/

/* Height -------------------------------------------*/

@media all and (max-height: 1150px){
	.soft-phone:not(.show) {
		height: 0;
		overflow: hidden;
	}


	.phone-wrapper .expand-soft-phone {
		display: block;
		width: 25%;
		margin-right: 5%;
	}

	#sideMenu .btn-end-call {
		width: 70%;
	}

	#sideMenu .btn-open-pad:not(.disabled) {
		display: block;
		max-height: 43.98px;
	}
	
	#sideMenu .btn-open-pad i {
		font-weight: 400;
	}
}

@media all and (max-height: 900px){
	.phone-wrapper .soft-phone {
		margin-top: 0;
	}

	#sideMenu .phone-wrapper .call-details {
		margin-bottom: 5px;
	}
	
	#sideMenu .contract-details {
		display: flex;
		flex-flow: column;
	}

	.contract-details .task-content {
		overflow: scroll;
	}
}

@media all and (max-height: 800px){
	.combined-notes {
		grid-template-rows: calc(100vh - 230px) 50px;
	}
}

@media all and (max-height: 500px){
	.dashboard-wrapper .dash-wrapper {
		height: fit-content;
		max-height: 100% !important;
	}

	.dash-wrapper .tab-content,
	.admin-full .dash-wrapper .scroll,
	.repo_manager .dash-wrapper .scroll{
		height: fit-content;
		max-height: 100%;
	}

	.workspace.empty.admin-full,
	.workspace.empty.repo_manager{
		grid-template-rows: calc(100vh - 115px) 0;
	}

	section.workspace .primary-content {
		overflow: visible !important;
	}
}

/* Width -------------------------------------------*/


/* Edit menu open max */
@media all and (max-width: 1530px){
	.primary-content.show-edit-menu .tab-wrapper.edit-menu {
		height: 100%;
		left: calc(50% - 0.5em);
		position: absolute;
	}

	.primary-content.show-edit-menu .tab-wrapper {
		width: calc(50% - 1.5em);
	}
}

@media all and (max-width: 1200px){

	.submit-note .quick-note-wrapper:not(.hide) {
		border-radius: 6px;
		height: 100%;
		flex-flow: row wrap;
		left: 0;
		overflow: inherit;
		padding-bottom: 2px;
		top: -6px;
		width: 100%;
	}

	.submit-note .quick-note-wrapper button {
		border-radius: 4px;
		margin: 2px;
	}
}

@media all and (max-width: 1150px){
	section.workspace .primary-content {
		flex-flow: column;
		justify-content: flex-start;
		overflow: auto;
	}

	section.workspace.hide-tabs .tab-wrapper {
		display: none;
	}

	section.workspace .tab-wrapper,
	.primary-content.show-edit-menu .tab-wrapper {
		width: calc(100% - 2em);
		margin: 0 1em;
	}

	.primary-content.show-edit-menu .tab-wrapper:last-child{
		order:1;
	}
	.primary-content.show-edit-menu .tab-wrapper:nth-child(4){
		order:2;
	}
	.primary-content.show-edit-menu .tab-wrapper:nth-child(5){
		order:3;
	}

	.primary-content.show-edit-menu .tab-wrapper.edit-menu {
		left: 0;
		position: relative;
	}
	
	.light-theme section.workspace .tab-wrapper {
		min-height: calc(100vh - 142px);
	}

	.dark-theme section.workspace .tab-wrapper {
		min-height: calc(100vh - 131px);
	}

	section.workspace .tab-wrapper:not(:nth-child(4)),
	.primary-content.show-edit-menu .tab-wrapper:nth-child(4) {
		margin-top: 1em;
	}

	section.workspace .dashboard-wrapper {
		margin-left: 1em;
	}

	.primary-content.show-edit-menu .tab-wrapper.edit-menu {
		margin-top: 0;
	}
	
	nav .toggle-view {
		display: none;
	}
	
	nav .brand-logo {
		margin: 0 10px;
	}

	nav .nav-links:nth-child(2) {
		max-width: 100%;
	}

	nav .nav-links:last-child {
		margin: 0;
	}
	
	nav .right-nav-container {
		text-align: end;
	}

	.quick-search-wrapper > button {
		right: 4px;
	}
	
	#stickyNote {
		padding-right: 0;
	}

	.show-sticky .sticky-note-wrapper {
		width: calc(100% - 20px);
	}

	.right-nav-wrapper.popup {
		border-bottom-right-radius: 0;
	}

	.right-nav-wrapper.popup > p {
		text-align: right;
	}

	.open-popup .right-nav-wrapper {
		right: -5px;
		width: 200px;
	}

	.task-overlay {
		margin-left: 1em;
		width: calc(100% - 2em);
	}

	section.workspace .user-dash-wrapper {
		margin: 0 1em;
		overflow-x: scroll;
	}

	.task-summary.expandable-wrapper .task div:first-child {
		display: none;
	}

	.task-summary.expandable-wrapper .task.expanded > div:nth-child(2){
		order: 1;
	}
	.task-summary.expandable-wrapper .task.expanded > div:nth-child(3){
		order: 2;
	}
	.task-summary.expandable-wrapper .task.expanded > div:nth-child(4){
		margin-top: 1em;
		order: 4;
		width: 90%;
	}
	.task-summary.expandable-wrapper .task.expanded > div:nth-child(5){
		order: 3;
	}
	.task-summary.expandable-wrapper .task.expanded > div:nth-child(6){
		order: 5;
	}
	.task-summary.expandable-wrapper .task.expanded > div:last-child {
		order: 6;
	}
	
	
	.customer-call-history-header,
	.dealer-details .call-history-header {
		display: none;
	}
	
	.customer-call-history-wrapper {
		height: calc(100% - 28px);
	}
	
	.dealer-details .call-history-row,
	.customer-call-history-wrapper .call-history-row {
		flex-flow: column;
	}
	
	.dealer-details .call-history-row span,
	.customer-call-history-wrapper .call-history-row span {
		display: inline;
		margin-right: 5px;
		opacity: .5;
	}
	
	.dealer-details .call-history-row > *,
	.customer-call-history-wrapper .call-history-row > * {
		width: 100%;
	}
	
	.customer-call-history-wrapper .call-history-row .text-center {
		text-align: left !important
	}

	section.admin-full .dashboard-wrapper,
	section.repo_manager .dashboard-wrapper{
		display: flex;
		flex-flow: column;
		width: calc(100% - 2em);
	}
}

@media all and (max-width: 1000px){
	.dealer-details-title {
		flex-flow: column;
		margin-top: 1em;
	}

	.task-summary.expandable-wrapper .task:not(.expanded) div:nth-child(4) {
		display: none;
	}

	.task-summary .row {
		flex-flow: column;
		text-align: center;
	}

	.task-summary .row div:last-child {
		width: 80px;
	}
}

@media all and (max-width: 1000px) and (min-width: 769px){

	nav .show-search .quick-search {
		position: absolute;
		width: 100%;
	}
	
	nav .show-search .quick-search-wrapper {
		left: -8vw;
		right: -14vw;
	}
}

@media all and (max-width: 900px) {
	.recordings-wrapper .table-wrapper .row {
		display: flex;
		flex-flow: column;
		padding-bottom: 10px;
	}
	
	.recordings-wrapper .table-wrapper .row:first-child {
		border-top: var(--border);
	}
	
	.recordings-wrapper .table-wrapper .mobile-only {
		display: block;
	}

	.recordings-wrapper .table-header,
	.recordings-wrapper .table-wrapper [data-id=recording] .mobile-only {
		display: none;
	}

	.recordings-wrapper .table-wrapper [data-id=number] button {
		padding-right: 0;
	}
	
	.recordings-wrapper .table-wrapper .row > div {
		align-items: center;
		display: inline-flex;
		justify-content: space-between;
		padding: 2px 10px;
		width: 100%;
	}
}

/* Nav collapse */
@media all and (max-width: 768px){
	
	body.dark-theme #statusBar {
		background: transparent;
		border-color: transparent;		
	}

	.dark-theme nav {
		padding-top: 0;
	}
	
	.mobile-only {
		display: block;
	}
	
	.non-mobile-only {
		display: none;
	}
	
	nav .brand-logo {
		margin-left: 10px;
	}
	
	nav .brand-logo img {
		width: 60px;
	}

	.right-nav-links.open {
		position: absolute;
		right: 0;
		width: calc(100% - 46px);
	}

	.right-nav-links.open > .nav-collapse {
		margin-right: auto;
		padding-left: 1em;
		z-index: 200;
	}

	.nav-links.open-popup button.active-agents.show-counter {
		background: #fff !important;
		border-radius: 20px;
		color: var(--popup-bg);
	}

	.nav-links.open-popup.agent-list button.active-agents.show-counter {
		background: var(--popup-bg) !important;
		color: var(--popup-bg);
	}

	.show-sticky .sticky-note-wrapper {
		left: 0;
		margin: 0;
		position: fixed;
		right: 0;
		width: 100%;
	}
	
	.quick-search-wrapper > button {
		right: 0.5em;
		top: 17px;
	}
	
	#mainContent,
	.workspace {
		display: flex;
		flex-flow: column;
	}
	
	#sideMenu {
		margin: 0 1em;
		min-height: 400px;
		order: 1;
		width: calc(100% - 2em);
	}
	
	#sideMenu .phone-wrapper {
		display: none;
	}

	#sideMenu .overlay-menu {
		height: 100%;
	}

	#sideMenu .touches-wrapper {
		margin-bottom: 0;
	}
	
	section.workspace {
		margin-bottom: 0.5em;
		order: 2;
	}

	section.workspace .primary-content {
		order: 2;
	}

	#sideMenu .contract-details-wrapper {
		margin-bottom: 0;
	}

	#statusBar {
		display: flex;
		flex-flow: row wrap;
		padding: .5em 0;
	}
	
	#statusBar .flagged-wrapper > .btn {
		background: var(--primary);
	}

	body.light-theme #mainContent {
		margin-top: 0;
	}

	#statusBar .environment-label,  
	#statusBar .tasks-wrapper {    
		margin-bottom: 0.5em;
	}

	#statusBar .flagged-wrapper-container {
		order: 1;
		width: 100%;
	}

	#statusBar .tasks-wrapper .task-container {    
		border-radius: 4px;
		height: calc(100vh - 86px);
		padding-top: 60px;
		top: 0;
		width: 100%;
		max-width: 100%;
	}
	
	.environment-label {
		border: none;
	}

	.tab-wrapper .tabs {
		border-top: 8px solid var(--accent);
		border-radius: 2px;
	}
	
	.btn.nav-collapse {
		display: block;
		margin-left: 0.5em;
	}

	.open > .btn.nav-collapse .fa-bars {
		display: none;
	}

	.open > .btn.nav-collapse .fa-xmark {
		display: block;
	}
	
	nav {
		padding: 0;
	}

	nav .nav-links:nth-child(2) {
		padding: 0 .5em;
	}

	nav .nav-links.show-search:nth-child(2) {
		position: absolute;
		padding: 0 0 0 1em;
	}

	nav .show-search .quick-search-wrapper {
		position: absolute;
		left: 0;
		top: -15px;
		width: 100%;
	}

	.right-nav-links {
		padding: 13px 0;
	}
	
	.right-nav-links:not(.open) > .btn:not(.nav-collapse),
	.right-nav-links:not(.open) > a {
		display: none;
	}
	
	.right-nav-links.open {
		background: var(--primary);
		color: #fff;
		margin-left: 10px;
	}

	.open-popup .right-nav-wrapper {
		background: var(--primary);
		right: 0;
		width: 100%;
	}
	
	.scroll:not(form) {
		max-height: calc(100vh - 185px);
	}
	
	.contract-details .scroll {
		max-height: 100%;
	}
	
	#sideMenu {
		margin-bottom: 1em;
	}

	#sideMenu .contract-details {
		justify-content: center;
	}

	.task-overlay {
		margin-left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 500;
	}

	.manager-request.popup,
	.sms-queue.popup {
		border-radius: 20px;
		padding: 50px 7px 28px;
		width: 100%;
	}
	
	body.light-theme .manager-request.popup,
	body.light-theme .sms-queue.popup {
		height: calc(100vh - 85px);
		top: 10px;
	}

	body.dark-theme .manager-request.popup,
	body.dark-theme .sms-queue.popup {
		height: calc(100vh - 74px);
		top: 0;
	}
	
	.combined-notes {
		grid-template-rows: calc(100vh - 41vh) 30vh;
	}

	.workspace.empty.admin-full,
	.workspace.empty.repo_manager{
		display: flex;
		flex-flow: column;
	}

	section.workspace.empty {
		order: 1;
	}

	section.workspace .user-dash-wrapper {
		max-height: 100%;
	}
	
	.user-dash-wrapper .summary-details {
		order: 2;
	}
	
	.customer-call-history-wrapper.scroll {
		max-height: 100%;
	}
	
	.dashboard-wrapper {
		padding: 1em;
	}

	section.admin-full .dashboard-wrapper,
	section.repo_manager .dashboard-wrapper{
		margin: 0;
		width: 100%;
	}

	.dashboard-wrapper .dash-wrapper {
		max-height: calc(100vh - 200px);
		min-height: calc(100vh - 200px);
	}
}

/* System Notes collapsed on mobile */
@media all and (max-height: 800px) and (max-width: 750px){
	.combined-notes {
		grid-template-rows: calc(100vh - 122px) 32px;
	}
}

@media all and (max-width: 600px) {
	nav .touches-wrapper {
		display: none;
	}

	.dealer-details > .col {
		width: 100%;
	}
	
	.btn.nav-collapse {
		margin: 0;
		padding-left: 1em;
	}
}

@media all and (max-width: 500px){
	#mainContent {
		display: flex;
		flex-flow: column;
	}
	
	nav #stickyNote {
		display: none;
	}

	.light-theme section.workspace .tab-wrapper,
	.dark-theme section.workspace .tab-wrapper {
		min-height: calc(100vh - 15px);
	}

	.payment-history .scroll {
		max-height: calc(100vh - 205px);
	}

	section.workspace .tab-wrapper,
	.primary-content.show-edit-menu .tab-wrapper {
		width: calc(100% - 1em);
		margin: 0 .5em;
	}

	section.workspace .tab-wrapper:not(:last-child) {
		margin-bottom: .5em;
	}

	#sideMenu .contract-details-wrapper {
		margin: .5em 0;
	}

	section.workspace .tab-wrapper,
	#sideMenu {
		margin: 0 .5em;
		width: calc(100% - 1em);
	}

	#statusBar {
		margin: 0 .5em;
	}

	.btn.nav-collapse {
		margin: 0;
		padding-left: 0;
	}

	nav .nav-links:nth-child(2):not(.show-search) {
		justify-content: end;
	}

	nav .nav-links:not(.show-search) #stickyNote {
		padding-left: 0;
	}
	
	nav .nav-links:not(.show-search) .mobile-quick-search {
		display: block;
	}

	nav .nav-links:not(.show-search) .quick-search {
		display: none;
	}
	
	nav .nav-links.show-search {
		position: static;
	}

	.show-search .quick-search {
		margin-right: 56px;
	}

	nav .show-search .quick-search-wrapper {
		left: 5px;
		right: 5px;
		top: -19px;
	}

	.quick-search-wrapper .results-title {
		flex-flow: column-reverse;
	}

	.show-search.advanced .quick-search-wrapper {
		border-radius: 0;
		left: 0;
		max-height: calc(100vh + 10px);
		right: 0;
	}
	
	#advancedSearchForm .form-row:nth-child(2) {
		flex-flow: column;
	}

	#advancedSearchForm .form-row:nth-child(2) .radio-toggle {
		justify-content: end;
	}

	#advancedSearchForm .form-row:nth-child(2) .radio-toggle:nth-child(5) {
		margin-bottom: 0;
	}

	section.workspace .user-dash-wrapper {
		overflow-x: hidden;
	}

	.user-dash-wrapper .summary-details {
		padding: 1em;
	}

	section.workspace .dashboard-wrapper {
		margin: 0.5em 0.5em 0;
		padding: 0.5em;
		width: calc(100% - 1em);
	}

	section.admin-full .dashboard-wrapper,
	section.repo_manager .dashboard-wrapper{
		margin: 0;
		width: 100%;
	}

	.summary-details .summary-table,
	.summary-details .task-summary {
		min-width: 100%;
		padding-right: 0;
	}
	
	.summary-details .task-summary.expandable-wrapper .task:not(.expanded) > div:nth-child(3){
		display: none;
	}

	section.workspace .tab-wrapper:not(:nth-child(5)),
	.primary-content.show-edit-menu .tab-wrapper:nth-child(5) {
		margin-top: .5em;
	}

	.dash-wrapper [data-tab=contracts] .row.header {
		display: none;
	}

	.summary-details .row,
	.dash-wrapper [data-tab=contracts] .pagination-wrapper .row {
		flex-flow: column;
	}

	.dash-wrapper [data-tab=contracts] .pagination-wrapper .row:first-child {
		border-top: var(--border);
	}

	.summary-details .row > div,
	.dash-wrapper [data-tab=contracts] .pagination-wrapper .row > div {
		display: flex;
		flex-flow: row;
		white-space: nowrap;
	}


	.dash-wrapper [data-tab=contracts] .row.total {
		justify-content: space-between;
	}
	
	.dash-wrapper [data-tab=contracts] .row.total > div:first-child {
		display: none;
	}

	.dash-wrapper [data-tab=contracts] .row.total > div:last-child {
		margin-right: 20px;
	}

	.summary-details .row .mobile-only,
	.dash-wrapper .table-section .mobile-only {
		display: initial;
		margin-right: 5px;
		opacity: .8;
	}
	
	.dash-wrapper .pagination-wrapper .row,
	.dealer-details .tab-content {
		 flex-flow: column;
	 }

	.dash-wrapper .table-section .header {
		display: none;
	}

	.dash-wrapper .pagination-wrapper .row > div {
		text-align: left !important;
		width: 100%;
	}

	.dash-wrapper .pagination-wrapper .center {
		margin: 0
	}
	
	.dealer-details .tab-content > .col{
		width: 100%;
	}
}

@media all and (max-height: 1000px) and (max-width: 430px){
	.dashboard-wrapper .dash-wrapper {
		height: fit-content;
		max-height: 100%;
	}

	.dash-wrapper .tab-content,
	.admin-full .dash-wrapper .scroll,
	.repo_manager .dash-wrapper .scroll{
		height: fit-content;
		max-height: 100%;
	}

	.workspace.empty.admin-full,
	.workspace.empty.repo_manager{
		grid-template-rows: calc(100vh - 115px) 0;
	}

	section.workspace .primary-content {
		overflow: visible;
	}
	
	.task-overlay .loading {
		position: fixed;
	}
	
	
}

@media all and (max-width: 430px){
	#sideMenu .contract-details {
		text-align: center;
	}
	
	#sideMenu .contract-details .ellipsis-container {
		justify-content: center;
	}

	.sms-row {
		display: flex;
		flex-flow: column;
	}

	.sms-row:not(.Incoming) {
		flex-flow: column-reverse;
	}

	.sms-row .sms-details {
		justify-content: flex-end;
		margin-right: 2em;
		text-align: right;
		width: 100%;
	}

	.sms-row:not(.Incoming) .sms-details .agent {
		border-color: transparent;
	}
	
	.sms-row .sms-divider {
		display: none;
	}

	.sms-content {
		width: 100%;
	}
}


/* Height and Width ---------------------------------*/

@media all and (max-height: 900px) and (max-width: 430px){
	nav .show-search .quick-search-wrapper {
		height: calc(100vh + 10px);
		border-radius: 0;
		position: fixed;
	}

	nav .show-search .quick-search-wrapper .scroll{
		max-height: 100%;
	}

	nav .nav-links.show-search:nth-child(2) {
		position: fixed;
	}
}

@media all and (max-height: 832px) and (min-width: 750px){
	.make-payment form.extend {
		height: initial;
	}
}