/*
Theme Name: Booking
Author: Chris Collins
*/

/* #Base 1140 Grid
================================================== */

    .container        							{position: relative;width: 96%;margin: 0 auto;padding: 0;}
    .column, .columns                           {float: left;display: inline;}
    #headerbar 									{height:100px;margin-bottom:40px;}

	/* Front */
	.front .region-content .block 	{width: 50%;}

	/* Booking Form */
	.field-name-field-choose-extras .display-rows .form-type-checkbox		{width: 99%;margin:0 0.5%;}
	.page-entityform-edit .field-name-field-choose-extras .form-type-checkbox,
    .page-entityform-edit .field-name-field-choose-extras .display-rows .form-type-checkbox,
	.page-entityform-edit .field-name-field-choose-a-service .form-type-checkboxes .form-item,
	.page-entityform-edit .field-name-field-choose-a-package.package-columns-3 .form-type-checkboxes .form-item,
	.page-entityform-edit .field-name-field-choose-a-package.package-columns-4 .form-type-checkboxes .form-item,
	.page-entityform-edit .field-name-field-choose-a-package.package-columns-5 .form-type-checkboxes .form-item {margin:0 0.5%;}

	.page-entityform-edit #booking-form-entityform-edit-form .main-columns-3 > fieldset {width:32.66666%;margin:20px 0;}
	.page-entityform-edit #booking-form-entityform-edit-form .main-columns-3 > fieldset.first {margin-right:2%}
	.page-entityform-edit #booking-form-entityform-edit-form .main-columns-3 > fieldset.last {margin-left:2%}
	.page-entityform-edit #booking-form-entityform-edit-form fieldset.group-venue {margin:20px 2%;}
	.page-entityform-edit #booking-form-entityform-edit-form .group-account-details .form-wrapper {width:33.33%;float:left;}

	@media (min-width:769px) {
		.page-entityform-edit .main-booking-fieldsets {
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: flex;
		  overflow: hidden;
		  width:100%;
	    }
	}

    .page-bookings tr .views-field-field-event-date {
		padding:50px 10px 10px 10px!important;
	}
	.page-bookings.page-bookings-payments tr .views-field-field-event-date {
		padding:5px 0px 5px 0px!important;
		width:  initial;
	}
	.page-bookings.page-bookings-payments th.views-field-field-event-date {
		padding: 10px 0px 5px 0px!important;
	}
	.page-bookings-payments td.views-field-field-venue-postcode {
		width: initial;
	}

	.view-bookings .row-style-toggle {
        	display:none;
        }


	/* Admin and Dashboard */
	#block-block-14,
	#block-views-bookings-block-3,
	#block-user-online {width: 32%;margin-left: 2%;min-height:355px;}
	.cal-month {margin: 0px;width: 32%;margin-left: 2%;}
	.add-availability-form {max-width:565px;}
	.add-availability-form .form-submit {}
	.add-availability-form input[type=text] {width: 100px}

	/* Upcoming Bookings List */
	
	.view-bookings .booking-no {font-weight: 700;font-size: 22px;line-height: 26px;}
	.view-bookings .event-type {background:#9a9a9a;color:#fff;padding:2px 10px;display:inline-block;border-radius:4px;margin:5px 0;}

	.manual-payment-form.show .form-container {height:23px;}
	.manual-payment-form select.form-method {width:94px;padding:5px 5px 4px 5px;-webkit-appearance:none;}
	.manual-payment-form input.form-amount {width:50px;}
	.manual-payment-form input.form-title {width:200px;width:calc(100% - 300px)}

	.page-bookings tbody tr .views-field-field-event-date:before {font-size:20px;line-height:24px;top:13px;}
	.page-bookings .views-align-right a {display:inline-block;padding:5px 0!important;}

	/* try and sort table layouts to stop payments shrinking */
	td.views-field-field-event-date 	{width:15%;}
	td.views-field-field-venue-postcode {width:15%;}
	td.views-field-field-telephone		{width:15%;}
	td.views-field-view					{width:60%;}

	/* leads */
	.group-lead-customer-details, .field-group-accordion {float:left;width:48%;}
	.node-lead-form .form-actions #edit-submit, .node-lead-form .form-actions #edit-delete {width:150px;}
	.node-lead-form .field-name-field-event-date, 
	.node-lead-form .field-name-field-event-time {width:40%;float:left;margin:0px;box-sizing:border-box;}

	.node-lead-form .field-name-field-event-time {width:60%}
	.node-lead-form .field-name-field-event-date input {width:100%;}
	.node-lead-form .field-name-field-event-date fieldset,
	.node-lead-form .field-name-field-event-time fieldset {min-height:75px;border:none;}
	.node-lead-form .field-name-field-event-time .form-type-textfield {width:45%;margin-top:0px;}

	ul.actions-list {
		margin-left:-130px;
	}
	td.views-field-nothing-2			{width:5%;}

    /* Base Grid */
    .container .sixteen.columns 	{width: 100%;}


/* #Medium Desktop
================================================== */

    /* Note: Design for a width of 960px */

    @media only screen and (min-width: 960px) and (max-width: 1300px) {

	/* Booking Form */
	.page-entityform-edit .field-name-field-choose-a-package .form-type-checkboxes .form-item {width:32.3333%;margin:0 0.5%;}

	/* Admin and Dashboard */
	#block-block-14,
	#block-views-bookings-block-3,
	#block-user-online {min-height: 355px;}
	
}    

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

		.manual-payment-form.show .form-container {height:auto;}
		.manual-payment-form input.form-title,
		.manual-payment-form select.form-method {width:100%;}
		.manual-payment-form input.form-amount {width:100px;width:calc(100% - 131px);margin-bottom:2px;}
		.manual-payment-form input.form-title,
		.manual-payment-form select.form-method {margin:0px 0px 3px 0px!important;box-sizing:border-box;}
		.manual-payment-form .form-submit {margin-left:2px!important;}

		.view-bookings .pm-payments table td.pm-title   {display:none;}

}	    

    

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (max-width: 959px) {

		 .container			{width: 98%;padding: 0 1%;}
		 .page-box-style-manage #content-contain.container {padding: 0px 10px!important;}

		.view-bookings span.date-display-single {font-size: 14px!important;}
		.view-bookings table td {font-size: 11px; line-height: 13px!important;padding:2px!important}
		.view-bookings .remaining {margin-top:30px;font-size: 12px!important;}

		.page-bookings tbody tr .views-field-field-event-date:before {font-size: 14px;line-height: 16px;top:6px;}
		.view-bookings .editablefield-item select {max-width:100px}

		/* Make tables fit */
		.view-templates .view-content,
		.view-packages .view-content,
		.view-export-data .view-content,
		.view-manage .view-content {overflow-x:auto;padding-top:20px;position:relative;}
		.view-templates table.views-table,
		.view-packages table.views-table,
		.view-manage table.views-table {min-width:900px;}
		.view-export-data table.views-table {min-width:2000px;}
		.view-templates .view-content:before,
		.view-packages .view-content:before,
		.view-export-data .view-content:before,
		.view-manage .view-content:before {
			content:"<< scroll table to view content >>";
			text-align:center;
			display:block;
			color:#5194d8;
			position:absolute;
			top:0px;
			width:100%;
		}
		.view-templates.view-display-id-block_1 .view-content:before {display: none;}
        table.views-table thead th {font-size:10px;}
        table.views-table td, 
        table.views-table table th {padding:5px!important;box-sizing:border-box}

        .view-packages .views-exposed-form select,
        .view-manage .views-exposed-form select,
        .view-packages .views-exposed-form input,
        .view-manage .views-exposed-form input {
			width:100%;
        }

		/* Admin and Dashboard */
		.add-availability-form {float:left;}
		#block-block-14,
		#block-views-bookings-block-3,
		#block-user-online {min-height:400px;}

		/* leads */
	    .group-lead-customer-details, .field-group-accordion {float:left;width:98%;}

		/* quickstart */
		.right-info, .left-info {float:none!important;width:100%!important}
		.info-inner {font-size:24px!important;line-height:30px!important;margin-bottom:40px;}

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 768px) {
        .container			{width: 98%;padding: 0 1%;}
        .customer-facing .container			{width: 98%;padding: 0 1%;}


        .ckeditor_links {opacity:0;pointer-events:none;}

		/* Front */
		.front .region-content .block 							{width: 100%;}
		
		.front .region-content .block .content 					{border:none!important;}
		.front .region-content .block .ui-datepicker 			{width: auto !important;}
		.front .ui-datepicker td a,
		.front .ui-datepicker td span	{line-height:26px!important;text-align:center;}		

		/* Edit Booking Form */
		.page-entityform-edit #booking-form-entityform-edit-form .main-columns-3 > fieldset {width:100%;margin:20px 0 0 0!important;min-height:0px;}
        .page-entityform-edit #booking-form-entityform-edit-form fieldset.group-your-details {margin-bottom: 20px!important;}
	    .page-entityform-edit #booking-form-entityform-edit-form .group-account-details .form-wrapper {width:100%;}

		.paid .views-field-field-event-date,
		.unpaid .views-field-field-event-date {border-left:none!important;}

		.uc-store-address-field .form-item label {text-align:left;}

		/* Admin and Dashboard */
		#block-block-14,
		#block-views-bookings-block-3,
		#block-user-online {width: 100%;margin-left: 0;min-height:auto;}
		.add-availability-form {float:left;text-align:center;}
		.add-availability-form select {width: 100%;}
		.add-availability-form .form-submit {width:100%;margin: 10px 0px!important;}
		.add-availability-form input[type=text] {width:100%;width: calc(100% - 10px);}

		.manual-payment-form.show .form-container {height:auto;}
		.manual-payment-form input.form-title,
		.manual-payment-form input.form-amount {width:200px;width:calc(60% - 37px);margin-bottom:2px;}
		.manual-payment-form .currency-sign {width:30px;display:block;float:left;}
		.manual-payment-form select.form-method {width:200px;width:calc(100% - 19px);margin-bottom:2px;}
		.manual-payment-form input.form-title {width:100%;}

		.reveal-payment-form-button {max-width:120px;font-size:11px!important;line-height:14px!important}

		.page-node-add-contract #content {padding:20px!important;}

		/* Bookings List Table - Mobile styles and block displays */
		.requested:nth-of-type(2):before {border-top: 0px!important;margin-top: 0px!important;}		
		.view-bookings table, 
		.view-bookings thead, 
		.view-bookings tbody, 
		.view-bookings th, 
		.view-bookings td, 
		.view-bookings tr {display: block;/* width:100%!important; */}
		.view-bookings .view-booking-pricing-table table.views-table tr,
		.view-bookings .view-booking-pricing-table table.views-table td {padding: 0!important;}
		.view-bookings .field-name-field-artwork .form-item {width: 100px!important;}

        .view-bookings .pm-payments tr {text-align:right}
        .view-bookings .pm-payments td {display:inline-block;width:auto!important}

		.view-bookings > .view-content > .views-form > form > div > table > tbody > tr {padding:0!important;margin-bottom:10px;}
		.view-bookings > .view-content > .views-form > form > div > table > tbody > tr > td {width:100%!important;box-sizing:border-box;}
		.view-bookings.view-display-id-page_1 thead tr  {position: absolute;left:-9999px;} /* Hide header */

        #confirm-bookings .booking-row > div > form,
		#confirm-bookings .booking-row > div {width:48%!important;padding:1%;}
		#confirm-bookings .booking-row > div:last-child {width:100%!important;padding:0%;}
		#confirm-bookings .booking-row > div > form .form-submit{width:100%!important;}

		.page-user .cal-month {margin: 0px;width: 100%;margin-left: 0;}

        /* minifed row styles */
        .view-bookings .row-style-toggle {
        	display:block;
        }
        .page-bookings tr .views-field-field-event-date {
			padding: 5px!important;
		}
		.page-bookings-follow-up table th {
			display: none;
		}
		.view-bookings .views-field-field-venue-postcode,
		.view-bookings .views-field-field-telephone,
		.view-bookings .views-field-view,
		.view-bookings .views-field-entityform-id-3,
		.view-bookings .staff,
		.view-bookings tr .requested,
		.view-bookings tr .request-link {
			display:none!important;
		}
		.view-bookings form > div > table > tbody > tr.odd,
		.view-bookings form > div > table > tbody >  tr.even {
			height:90px;
			background:#fff;
			height: auto;
		}
		.view-bookings tr.expanded-row .views-field-field-venue-postcode,
		.view-bookings tr.expanded-row .views-field-field-telephone,
		.view-bookings tr.expanded-row .views-field-view,
		.view-bookings tr.expanded-row .views-field-entityform-id-3,
		.view-bookings tr.expanded-row .staff,
		.view-bookings tr.expanded-row .requested,
		.view-bookings tr.expanded-row .request-link {
			display:block!important;
		}
        .role-admin .view-bookings tr.expanded-row .requested.no-staff,
        .role-admin .view-bookings tr.expanded-row .request-link {
            display:none!important;
        }

		.view-bookings tr.expanded-row .staff .field-item {
			display: inline-block;
			margin: 0 5px;
		}
		.view-bookings .views-field-field-event-date .form-submit {
			margin-bottom: 0px;
		}

		.view-bookings .status-field,
		.view-bookings .unit-assignment
		/*.view-bookings .vehicle,
		.view-bookings .artwork*/ {
			width: 50%;
			display: inline-block;
			vertical-align: top;
		}

		.view-bookings tr.expanded-row.odd,
		.view-bookings tr.expanded-row.even {
			height:auto;
			background:#fff;
		}

		span.booking-no {font-size:20px!important;margin-top:-15px!important;margin-bottom:0px;display:block;}
		.page-bookings tbody tr .views-field-field-event-date:before {font-size:17px;left:auto!important;right:10px!important;}

		.view-bookings.view-display-id-page_1 select, .view-bookings.view-display-id-page_1 .form-text {width: 100%;box-sizing:border-box;}

		.views-field-view .view td.views-field-title {
			width:75%!important;
		}
		
		.views-field-view .view td.views-field-field-payment-amount,
		.views-field-view .view td.views-field-total-price {
			width:25%!important;
			text-align:right!important;
		}

		.views-field-view .view td.views-field-field-payment-amount {
			width:calc(25% - 18px)!important;
		}

		.views-field-view .view td.views-field-delete-node {
			width:18px!important;
			text-align:right!important;
		}
		.views-field-view .view td.views-field-delete-node a {
			font-size:10px!important
		}
		
		.display-backdrops .large-slides {
			max-width:320px;
			max-height:230px;
		}

		.display-backdrops .large-slides .slick-slide,
		.display-backdrops .large-slides .slick-slide:before  {
            max-width:300px!important;
            height:210px!important;
		}

		.display-backdrops .large-slides .slick-slide:before {
	        background-size:cover!important;
	        background-position:center bottom -30px!important;
		}

		.extras-group-extras .slick-arrow.slide-left,
		.extras-group-extras .slick-arrow.slide-right {
			background:none!important;
		}

		.views-field-view .view td.views-field-created,
		.views-field-view .view td.views-field-order-status,
		.views-field-view .view td.views-field-order-id,
		.views-field-view .views-field-field-payment-type,
		.views-field-view .views-field-nothing,
		.view-bookings .views-field-view span.travel,
		.view-bookings .actions-button.delete,
		.view-bookings a.invoice-link	 {display: none;}

		/* try and sort table layouts to stop payments shrinking */
		td.views-field-field-event-date,
		td.views-field-field-venue-postcode {width: 25%;}
		td.views-field-field-telephone,
		td.views-field-view,
		td.views-field-nothing-2,
		.page-bookings tbody tr.unpaid .views-field-field-event-date:before,
		.page-bookings tbody tr.paid .views-field-field-event-date:before	{width:auto;}

		/* leads */
	    .group-lead-customer-details, .group-lead-info, .group-proposal-settings {float:left;width:98%;}
	    .node-lead-form .form-actions #edit-submit, .node-lead-form .form-actions #edit-delete {width:40%;}
	    .lead-stage {width:100%!important}
	    .lead-stage a {height:auto!important;padding:5px!important;margin:0 0 2px 0!important}
	    .lead-stage-count, .lead-stage-title {display:inline-block!important;width:auto!important;margin:0px!important;font-size:15px!important;margin-right:10px!important;}


		.node-lead-form .field-name-field-event-date, .node-lead-form .field-name-field-event-time {width:100%;float:none;margin:0px;}
		.node-lead-form .field-name-field-event-time,
		.node-lead-form .field-name-field-event-date input {width:100%;}
		.node-lead-form .field-name-field-event-date fieldset,
		.node-lead-form .field-name-field-event-time fieldset {min-height:5px;}

		/* Settings */
		.view-admin-views-user .email-address,
		.view-admin-views-user .views-field-created,
		.view-admin-views-user .views-field-access,
		.view-packages.view-display-id-page_2 .views-field-body,
		.view-packages.view-display-id-page_2 .views-field-field-special-offer,
		.field-name-field-image fieldset .description,
		.view-manage fieldset .description {display:none;}
		.field-type-number-integer .form-text {max-width:90px;}
		
	    table .field-name-field-disable-notifications span {padding:0 0 0 20px!important}
	    table caption span {font-size:20px!important;}
	    table caption {width:100%;display:block;margin:40px 0;}

	    .page-eform-submit #booking-form-entityform-edit-form .field-name-field-choose-extras .display-rows .views-field-field-image {
			margin-right:10px!important;
			height:140px!important;
			width:140px!important;
		}
		.page-eform-submit #booking-form-entityform-edit-form .field-name-field-choose-extras .display-rows .views-field-field-price {
			position: absolute;
			bottom: 5px;
			left:10px!important;
		}

		.simple-list strong > .date-display-single {margin-top:0px!important}

		/* Footer */
		#block-block-11 .content .phone {font-size: 20px !important; line-height: 24px !important;}
		#block-block-4 .content a {display: block;}
		#bottom			{text-align: center;}
		#bottom ul.menu {text-align: center;}
		#bottom	.block {margin-bottom: 0px;}
		#block-block-10 {margin-top: 10px;}

		.region-footer-first,					
    	.region-footer-second, 
    	.region-footer-third {width: 100%; padding: 0px !important; margin: 0px;}

    	.credit {text-align:center!important;}


        .container .sixteen.columns  		{ width: 100%; }

        .view-bookings > .view-content > .views-form > form > div > table > tbody > tr > td.views-field-entityform-id-3 {
        	width:100%!important;box-sizing:border-box;padding:5px!important;display:block;}
		.expand-settings {margin:5px}
		.view-bookings tr.paid, .view-bookings tr.unpaid {border:1px solid #c1d1e1!important;border-radius:0px;}


		ul.actions-list {margin-left:0px;bottom:55px;}
		
		.view-manage table tr ul.actions-list {margin-left:0px;bottom:auto;top:100%;}


		.view-leads ul.actions-list {margin-left:-120px;bottom:auto;border:5px solid #6b6666;}
		ul.actions-list li a {padding:10px!important;}

		.task-list {right:5px!important;top:auto!important;bottom:0px;width:240px!important}
		.score-tally, .task-list li {padding:10px!important}
		.view-stats {right:60px!important}
		.stats-list {bottom:50px!important;right:5px!important}

		/* quickstart */
		.right-info, .left-info {float:none!important;width:100%!important}
		.info-inner {font-size:24px!important;line-height:30px!important;margin-bottom:40px;}
		.right-info .form-item {width:100%!important;margin:10px 0px!important}

		.page-bookings-activity .views-row .views-field-message {padding:0 0 5px 0!important}
		.page-bookings-activity .views-row .views-field-created {position:relative!important;border:none!important;font-size:10px;}

		body div.error.test-mode {padding:5px!important;line-height:15px;font-size:11px;}

		.earlybird-link {display:none;}
		
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

		
     	/* Admin and Dashboard */	
     	.add-availability-form select {width:auto;}
     	.add-availability-form input[type=text] {width:87px!important;}
     	.add-availability-form {float:left;}
     	.add-availability-form .form-submit {width:auto;margin:5px 0 5px 5px!important;}

}

/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 480px) {

		.view-packages .views-exposed-form .views-exposed-widget,
        .view-manage .views-exposed-form .views-exposed-widget {
        	width:50%;
        }

        .vbo-body .form-item-canned {
        	left:0!important;
        	right:auto!important;
        	width:calc(100% - 168px)!important;
        }

        .vbo-body .form-item-canned .form-select {
        	width:100%!important;
        }

        .form-submit {
        	/*width:100%;*/
        	text-align:center;
        	/*margin:10px 0!important;*/
        }

        .message-form .form-submit {
        	width:50%;
        	margin-right:10px!important;
        }
	
}

@media only screen and (max-width: 404px) {
        .display-backdrops .extras-group-extras .form-item,
		.display-slideshow .extras-group-extras .form-item {
			width:250px!important;
		}

		.display-backdrops .extras-group-extras .form-item label,
		.display-slideshow .extras-group-extras .form-item label {
			min-height:190px;
		}
	
}