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

@media screen {
	.page-hire-bag .header_wrap{
		background: none !important;
	}
	
	.page-hire-bag #page-header p.subtext{
		color: #fff;
	}
	
	.page-hire-bag .content{
		background: #fff;
    padding: 20px;
    border-radius: 10px;
	}

	#hire_bag_message_container {
		position:fixed;
		right:16px;
		bottom:16px;
		z-index:100000;
	}

	#hire_bag_message_container .hire_bag_message {
		display:block;
		padding:16px;
		background-color:#cced14;
		color:#000000;
		opacity:1;
		visibility:visible;
		margin-top:8px;
		animation-name:bounce-in;
		animation-duration:0.3s;
		animation-iteration-count:1;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #000;
    background-color: #cced14;
    background: linear-gradient(45deg, #a6c10e, #cced14);
	}
	
	#hire_bag_message_container .hire_bag_message:before {
		display:inline-block;
		content:'';
		width:12px;
		height:12px;
		background-image:url('/images/icons/uc-icon-bag-black.svg');
		background-size:contain;
		background-position:center center;
		background-repeat:no-repeat;
		margin-right:8px;
	}

	#hire_bag_message_container .hire_bag_message.success {
		background-color:#e7eebf;
	}

	#hire_bag_message_container .hire_bag_message.error {
		background-color:#c83729;
		color:#fff;
	}
	
	#hire_bag_message_container .hire_bag_message:not(:last-child) {
		display:none;
	}
	
	#hire_bag_message_container .hire_bag_message.hide {
		opacity:0;
		visibility:hidden;
		transition:opacity 0.5s, visibility 0s 0.5s;
	}

	/* ---------------- */
	#hire-header .more-info a {
		margin: 0 0 30px;
	}

	#hire-header .add-to-bag-full {
		position:relative;
		margin:32px 0 0 0;
	}
	
	#hire-header .add-to-bag-full.loading:after {
		position:absolute;
		display:block;
		content:'';
		top:0;
		right:0;
		bottom:0;
		left:0;
		background-color:#fff;
		opacity:0.75;
		animation:loading-cycle;
		animation-duration:1s;
		animation-iteration-count:infinite;
	}

	#hire-header .add-to-bag-feedback {
		display:block;
		margin:16px 0 0 0;
		color:#666;
		opacity:0;
		transition:opacity 0.1s;
	}

	#hire-header .add-to-bag-feedback a {
		color:#819704;
	}

	#hire-header .add-to-bag-feedback.show {
		opacity:1;
		transition:opacity 0s;
	}

	#hire-header .add-to-bag-feedback .number {
		font-weight:700;
	}

	.add-to-bag-full {
		display:flex;
	}

	.add-to-bag-full input[name='qty'] {
		box-sizing:border-box;
		border:1px solid #ccc;
		padding:0 12px;
		width:64px;
		height:48px;
		-moz-appearance:textfield;
		margin:0 8px 0 0;
	}

	.add-to-bag-full input[name='qty']:focus {
		border-color:#222;
	}

	.add-to-bag-full input[name='qty']::-webkit-inner-spin-button, 
	.add-to-bag-full input[name='qty']::-webkit-outer-spin-button { 
	  -webkit-appearance: none; 
	  margin: 0;
	}

	.add-to-bag-full input[type='submit'] {
		box-sizing:border-box;
		background-color:#cced13;
		color:#222;
		font-weight:700;
		border:none;
		height:48px;
		padding:8px 16px;
		cursor:pointer;
	}
	
	/* ---------------- */
	
	.checkout-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: white;
	}
	
	#hire-bag-empty-message {
		display:none;
	}
	
	#hire-bag-empty-message.show {
		display:flex;
		margin: 0;
	}
	
	#hire-bag-empty-message .icon {
    width: 24px;
    height: 24px;
    margin: 0 20px 0 0;
    background: #cced13;
    padding: 20px;
    border-radius: 50%;
	}
	
	#hire-bag-empty-message .icon img {
		width:24px;
		height:24px;
	}

	#hire-bag-table {
		position:relative;
		width:100%;
		border-collapse:collapse;
		margin:24px 0 0 0;
	}

	#hire-bag-table.loading:after {
		position:absolute;
		display:block;
		content:'';
		top:0;
		right:0;
		bottom:0;
		left:0;
		background-color:#fff;
		opacity:0.75;
		animation:loading-cycle;
		animation-duration:1s;
		animation-iteration-count:infinite;
	}
	

	
	#hire-bag-table tr.item {
		background: #fff;
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		padding:8px;

	}

	#hire-bag-table td {
		
		
	}

	#hire-bag-table .thumbnail img {
		width:auto;
		height:auto;
		max-width:32px;
		max-height:32px;
	}

	#hire-bag-table .title {
		width:100%;
	}

	#hire-bag-table .title a {
		color:#222;
		text-decoration:none;
	}

	#hire-bag-table .item-qty {
		display:flex;
		align-items:center;
	}

	#hire-bag-table .item-qty input[name='qty'] {
		/*-moz-appearance:textfield;*/
		width:48px;
		padding:8px;
		border: none;
		background: #f7f7f7;
	}
	
	/*
	#hire-bag-table .item-qty input[name='qty']::-webkit-inner-spin-button,
	#hire-bag-table .item-qty input[name='qty']::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin:0;
	}
	*/

	#hire-bag-table .item-qty input[name='qty']:focus {
		border-color:#222;
	}

	#hire-bag-table .item-qty .action-refresh,
	#hire-bag-table .item-qty .action-remove {
		margin:0 0 0 8px;
	}

	#hire-bag-table .item-qty .action-refresh img,
	#hire-bag-table .item-qty .action-remove img {
		width:16px;
		height:16px;
		vertical-align:middle;
	}

	#hire-bag-table .item-qty .action-remove {
		padding:4px;
	}

	#hire-bag-table .item-qty .action-remove img {
		width:8px;
		height:8px;
	}

	#hire-bag-table .price {
		min-width:96px;
		padding-left:24px;
		text-align:right;
		color: #acc910;
		/*font-family:monospace;*/
	}
	
	#hire-bag-table tr.total {
		height:auto;
	}
	
	#hire-bag-table tr.total td {
		padding:8px;
		border: none;
	}
	
	#hire-bag-table tr.total td.label {
    font-weight: 600;
    font-size: 16px;
    text-align: right;
    color: #acc910;
	}
	
	#hire-bag-table tr.total td.value {
		font-weight:700;
		text-align:right;
		/*font-family:monospace;*/
		color: #acc910;
	}
	
	#hire-bag-table tr.total td.value span.total-number{
		border-bottom: 2px solid;
		padding: 0 0 3px 15px;
	}
	
	#hire-bag-table tr.total.insurance,
	#hire-bag-table tr.total.gst{
		padding: 0;	
		height: auto;
	}
	
	#hire-bag-table tr.total.insurance td.label,
	#hire-bag-table tr.total.gst td.label{
		color: #b5b1b1;
		font-weight: 500;
	}
	
	#hire-bag-table tr.total.insurance td.value,
	#hire-bag-table tr.total.gst td.value{
		color: #b5b1b1;
		font-weight: 500;
	}

	#hire-bag-form {
		display:block;
	}
	
	#hire-bag-form.hide {
		display:none;
	}

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

	.checkout-form {
		
	}

	.checkout-form h3.step {
		color: #acc910;
		margin-top: 30px;
		font-size: 22px;
	}
	
	.checkout-form h3.step.top{
		margin-top: 0;
	}
		
	.checkout-form .freeform-row {
		flex-direction:column;
	}
	
	.checkout-form .freeform-row.hide {
		display:none;
	}

	.checkout-form .freeform-row .freeform-column .freeform-label {
		margin:0 0 4px 0;
		font-weight:500;
	}

	.checkout-form .freeform-row .freeform-column .freeform-input {
		height:40px;
		background: #f7f7f7;
		border: none;
		outline: none !important;
	}
	
	.checkout-form .freeform-row .freeform-column .freeform-input[type='text'],
  .checkout-form .freeform-row .freeform-column .freeform-input[type='tel'],
	.checkout-form .freeform-row .freeform-column .freeform-input[type='number'],
	.checkout-form .freeform-row .freeform-column .freeform-input[type='email'],
	.checkout-form .freeform-row .freeform-column .freeform-input[type='password'],
	.checkout-form .freeform-row .freeform-column .freeform-input[type='url'] {
		padding:0 12px;
	}
	
	.checkout-form .freeform-row .freeform-column textarea.freeform-input {
		height:auto;
		min-height:128px;
		padding:12px;
		resize:vertical;
	}
	
	.freeform-row .freeform-column .freeform-input[type=checkbox],
	.freeform-row .freeform-column .freeform-input[type=radio]{
		height: auto !important;
    margin: 10px 5px 10px 0 !important;
    color: #757575;
	}
	
	.freeform-row .freeform-column .unselectable{
		opacity: .3;
		pointer-events: none !important;
	}
	
	.freeform-row .freeform-column .freeform-input[name=returnDay]{
		pointer-events: none !important;
		color: #e01111;
		background: none;
    border: 3px solid #f7f7f7;
	}
	
		
	.freeform-row .freeform-column .freeform-input[name=returnDay]::placeholder{
		font-size: 13px;
	}
	
	.freeform-row .freeform-column .freeform-instructions{
		color: #e01111 !important;
	}
	
	.freeform-row .freeform-column p.pickupTimeNote{
    display: block;
    font-size: 13px;
    color: #e01111;
    margin: -15px 0 0;
	}
	
	.freeform-row .freeform-column p.pickupTimeNote.hide{
		display: none;
	}

	.freeform-row .freeform-column .errors.freeform-errors li{
    background: #e01111;
    color: #fff;
    font-size: 13px;
    padding: 3px 10px;
    width: max-content;
	}
	
	.freeform-row .freeform-column .input-group-one-line label{
		padding-right: 15px;
	}
	
	.checkout-form .bottomInstructions{
		margin: 0 0 -20px;
	}
	
	.checkout-form .bottomInstructions p{
    margin: 5px 0;
    font-size: 15px;
    color: #e01111 !important;
	}
	
	.checkout-form .agreeTC{
		flex-wrap: wrap;
    color: #e01111;
    font-size: 15px;
	}
	
	.checkout-form .agreeTC a{
		display: inline-block;
    margin: 3px 0 0 5px;
    text-decoration: underline;
		font-size: 15px;
		color: #6d6d6d;
		transition-duration: .2s;
	}
	
	.checkout-form .agreeTC a:hover{
		color: #e01111;
	}

	
	.checkout-form .submit-button {
    color: #fff;
    background: #acc910;
    border: none;
    text-shadow: 2px 2px 10px #00000021;
    padding: 20px 30px;
    font-weight: 600;
    border-radius: 3px;
		font-size: 16px;
    outline: none !important;
    transition-duration: .2s;
	}	
	
	.checkout-form .submit-button:hover {
		background-color:#bbda12;
	}
	
	.add-to-bag-full input[type='submit']:hover {
		background-color:#bbda12;
	}

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

	#nav.nav-desktop li.hire-bag a.animate {
		/*animation-name:bounce-in;
		animation-duration:0.2s;
		animation-iteration-count:1;*/
	}
	
	/* ---------------- */
	
	.product-boxes .product-wrapper .item .loading {
		position:absolute;
		display:block;
		top:0;
		right:0;
		bottom:0;
		left:0;
		background-color:#222;
		opacity:0.5;
		animation:loading-cycle;
		animation-duration:1s;
		animation-iteration-count:infinite;
	}
	
	/* ---------------- */

}

/* ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- */
/* ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- */
/* ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- */
	
@media only screen and (min-width: 768px) {
	.page-hire-bag .content{
    padding: 50px;
	}

	#hire_bag_message_container .hire_bag_message {
		padding:24px;
	}
	
	#hire-bag-table .thumbnail img {
		max-width:64px;
		max-height:64px;
	}
	
	#hire-bag-table tr.item {
		display:table-row;
		padding:0;
		border:none;
	}
	
	#hire-bag-table td {
		border-top:1px solid #ddd;
		border-bottom:1px solid #ddd;
		padding:8px;
	}
	
	#hire-header .more-info a {
		margin: 0;
	}
	
	.checkout-form .freeform-row {
		flex-direction:row;
	}
	
	.checkout-form .freeform-row .freeform-column .freeform-input {
		height:48px;
	}
	
}

/* ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- */
/* ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- */
/* ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- */
	
@media only screen and (min-width: 1280px) {
	

}

@keyframes bounce-in {
	
	0% {
		transform:scale(0.8);
	}
	
	20% {
		transform:scale(1.1);
	}
	
	40% {
		transform:scale(0.9);
	}
	
	60% {
		transform:scale(1);
	}
	
}

@keyframes loading-cycle {
	
	0% {
		opacity:50%;
	}
	
	50% {
		opacity:75%;
	}
	
	100% {
		opacity:50%;
	}
	
}