/* !Don't remove this!
 * duDialog plugin styles
 * 
 * Author: Dionlee Uy
 * Email: dionleeuy@gmail.com
 */

 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500');

.du-dialog {
	font-family: Roboto, sans-serif;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
    -moz-transition: background-color .2s linear, opacity .2s ease;
    transition: background-color .2s linear, opacity .2s ease;
    will-change: background-color, visibility, opacity;
    overflow: hidden;
	z-index: 999999;
}

	.du-dialog.dlg--open {
		background-color: rgba(0,0,0,0.35);
		visibility: visible;
		opacity: 1;
	}

	.du-dialog.dlg--closing {
		opacity: 0;
		background-color: transparent;
	}

	.du-dialog.dlg--pulse {
		-webkit-animation: dlgPulse 200ms;
		animation: dlgPulse 200ms;
	}

	.du-dialog .dlg-wrapper {
	    min-width: 280px;
	    max-width: 90%;
	    max-height: 90%;
	    display: -webkit-box;
		display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-around;
	    background-color: #ffffff;
	    outline: none;
	    -moz-border-radius: 4px;
	    border-radius: 4px;
		-moz-transform: scale(.8);
		transform: scale(.8);
	    -moz-transition: -moz-transform .18s cubic-bezier(.4,0,.2,1);
	    transition: transform .18s cubic-bezier(.4,0,.2,1);
		-moz-box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
		box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
		overflow: hidden;
	}
		.du-dialog.dlg--open .dlg-wrapper {
		    -moz-transform: scale(1);
		    transform: scale(1);
		}

	.du-dialog .dlg-header {
		padding: 16px 24px 8px;
		font-size: 20px;
	    font-weight: 500;
	    letter-spacing: 0.02em;
	    line-height: 32px;
	}

		.du-dialog .dlg-header .dlg-search {
			display: block;
			font-family: inherit;
			font-size: 16px;
			font-weight: normal;
			line-height: 36px;
			height: 36px;
			margin-top: 8px;
			width: 100%;
			border: none;
			outline: none;
		}

	.du-dialog .dlg-content {
		padding: 0 24px 20px 24px;
		color: #757575;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.03em;
		border-top: 1px solid transparent;
		overflow-x: hidden;
		overflow-y: auto;
	}
		.du-dialog.dlg--no-title .dlg-content { margin-top: 20px; }
		.du-dialog .dlg-content.content--scrolled { border-top: 1px solid #e0e0e0; }

		.du-dialog .dlg-select-item {
			position: relative;
			margin: 0 -24px;
			padding: 0 24px;
			cursor: pointer;
			-moz-transition: background-color .2s linear;
			transition: background-color .2s linear;
		}
			.du-dialog .dlg-select-item:hover { background-color: #f5f5f5; }
			.du-dialog .dlg-select-item:active { background-color: #e0e0e0; }
			.du-dialog .dlg-select-item.item--nomatch { display: none; }

		.du-dialog .dlg-select-item .dlg-select-radio,
		.du-dialog .dlg-select-item .dlg-select-checkbox {
			position: absolute;
	        top: 12px;
	        height: 18px;
	        width: 18px;
	        opacity: 0;
		}

		.du-dialog .dlg-select-item .dlg-select-lbl {
			position: relative;
			display: inline-block;
			padding-left: 40px;
			margin: 0;
			cursor: pointer;
		}

			.du-dialog .dlg-select-item .dlg-select-lbl .select-item {
				display: block;
				line-height: 48px;
			}

			.du-dialog .dlg-select-item  .dlg-select-checkbox + .dlg-select-lbl:before {
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				top: 50%;
				left: 6px;
				cursor: pointer;
				border: 2px solid #757575;
				-moz-transform: translateY(-50%);
				transform: translateY(-50%);
				-moz-border-radius: 2px;
				border-radius: 2px;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
				-moz-transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
				transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
	            will-change: border-color;
			}

				.du-dialog .dlg-select-item  .dlg-select-checkbox:checked + .dlg-select-lbl:before {
					background-color: #1e88e5; 
					border-color: #1e88e5;
				}

			.du-dialog .dlg-select-item  .dlg-select-checkbox + .dlg-select-lbl:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 9px;
				width: 12px;
				height: 6px;
				margin-top: -6px;
				cursor: pointer;
				border-left: 2px solid #FFF;
				border-bottom: 2px solid #FFF;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
				-moz-transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
				transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
				-moz-transform: rotate(-45deg) scale(0);
				transform: rotate(-45deg) scale(0);
	            will-change: transform;
			}

				.du-dialog .dlg-select-item  .dlg-select-checkbox:checked + .dlg-select-lbl:after {
					-moz-transform: rotate(-45deg) scale(1);
					transform: rotate(-45deg) scale(1);
				}

			.du-dialog .dlg-select-item  .dlg-select-radio + .dlg-select-lbl:before {
				content: "";
				display: block;
				position: absolute;
				height: 16px;
	            width: 16px;
				top: 50%;
				left: 6px;
				cursor: pointer;
				border: 2px solid #757575;
				-moz-transform: translateY(-50%);
				transform: translateY(-50%);
				-moz-border-radius: 50%;
				border-radius: 50%;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
				-moz-transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
				transition: all .2s cubic-bezier(0.0, 0.0, 0.2, 1);
	            will-change: border-color;
			}

				.du-dialog .dlg-select-item  .dlg-select-radio:checked + .dlg-select-lbl:before { border-color: #1e88e5; }

			.du-dialog .dlg-select-item  .dlg-select-radio + .dlg-select-lbl:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 11px;
				width: 10px;
				height: 10px;
				margin-top: -5px;
				cursor: pointer;
				background-color: #1e88e5;
				-moz-border-radius: 50%;
				border-radius: 50%;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
				-moz-transform: scale(0);
				transform: scale(0);
				-moz-transform-origin: center;
				transform-origin: center;
				-moz-transition: -moz-transform .28s cubic-bezier(.4,0,.2,1);
				transition: transform .28s cubic-bezier(.4,0,.2,1);
	            will-change: transform, background-color;
			}

				.du-dialog .dlg-select-item .dlg-select-radio:checked + .dlg-select-lbl:after {
					-moz-transform: scale(1);
					transform: scale(1);
				}

	.du-dialog .dlg-actions {
		padding: 8px;
		text-align: right;
	}

	.du-dialog .dlg-action {
		font-family: inherit;
		font-size: 14px;
		border: none;
		cursor: pointer;
		padding: 0 12px;
		min-width: 72px;
		line-height: 36px;
		letter-spacing: 0.07em;
		font-weight: 500;
		color: #3f51b5;
		text-transform: uppercase;
		background-color: transparent;
		border-radius: 4px;
		outline: none;
		-moz-transition: background-color .28s linear;
	    transition: background-color .28s linear;
	    will-change: background-color;
	}
		.du-dialog .dlg-action:focus, .du-dialog .dlg-action:hover { background-color: #f5f5f5; }
		.du-dialog .dlg-action:active { background-color: #e0e0e0; }
		.du-dialog .dlg-action + .dlg-action { margin-left: 8px; }

@media (min-width: 600px) {
	.du-dialog .dlg-wrapper { max-width: 560px; }	
}

@-webkit-keyframes dlgPulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes dlgPulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}