import styled from 'styled-components'

export default styled.div`
	$success_green: #429946;
	$completed_grey: #999999;
	$fail_red: #ce3434;
	$on_blue: #417ef4;
	$on_yellow: #ffcc00;
	$white: #FFF;
	$app-header: #292e34;
	$background-gray: #efefef;
	$divider-color: #e9e9e9;
	$border-color: #e7e7e7;
	$gray-f4: #f4f4f4;
	$gray-f5: #f5f5f5;
	$gray-fa: #fafafa;
	$gray-c0: #c0c0c0;
	$gray-fa: #fafafa;
	$gray-ee: #eeeeee;
	$gray-c7: #c7c7c7;
	$gray-d7: #d7d7d7;
	$gray-e0: #e0e0e0;
	$gray-f9: #f9f9f9;
	$orange: #dd712f;
	$green: #429946;
	$red: #ce3434;
	$red-d0: #d0021b;
	$sky-blue: #4990e2;
	$rest-blue: #4a90e2;
	$black: rgb(0, 0, 0);
	$black-10: rgba(0, 0, 0, 0.1);
	$black-20: rgba(0, 0, 0, 0.2);
	$black-25: rgba(0, 0, 0, 0.25);
	$black-40: rgba(0, 0, 0, 0.4);
	$black-50: rgba(0, 0, 0, 0.5);
	$black-60: rgba(0, 0, 0, 0.6);
	$black-70: rgba(0, 0, 0, 0.7);
	$black-80: rgba(0, 0, 0, 0.8);
	$black-90: rgba(0, 0, 0, 0.9);
	$white: rgb(255,255,255);
	$white-10: rgba(255,255,255, 0.1);
	$white-40: rgba(255,255,255, 0.4);
	$white-50: rgba(255,255,255, 0.5);
	$white-70: rgba(255,255,255, 0.7);
	$white-90: rgba(255,255,255, 0.9);
	$color_boston_blue_approx: #428bca;
	$color_mountain_mist_approx: #999999;
	$light-green: #57bf57;
	$light-red: #e43737; 
	$green-light:#23aa37;

	$brandon-font-medium: 'Brandon Text Medium';
	$brandon-font-regular: 'Brandon Text Regular';
	$brandon-font-bold: 'Brandon Text Bold';
	.typeOfSendingNotification{
		text-align: center;
		.whenToSend,.TriggeredNotification{
			width: 100%;
			border: solid 1px #e0e0e0;
			border-left:0;
			border-right:0;
			box-sizing: border-box;
	    	margin: 5% 0%;
	    	label{
				text-align:left;
			}
		}
		.WhenWrap{
			display: inline-block;
			width: 80%;
			vertical-align: top;
			box-sizing: border-box;
			margin: 2% 5%;
		}
		.whenSummary{
			padding: 1% 5% !important;
			display: flex;
			margin-bottom:20px;
			flex-direction: row;
			align-items: flex-start;
			border-top:0 !important;
			.heading,.summary{
				display:inline-block;
				vertical-align:top;
			}
			.heading{
				margin-right:5px;
				margin-bottom:0px;
				display:none;
			}
			i{
				margin-right:10px;
			}
			.NotificationSummary{
				padding: 0;
				justify-items: center;
				align-items: center;
				min-height: 24px;
				display: flex;
			}
		}
		.now,.scheduled,.reoccuring{
			padding: 5% 3%;
			background: #fafafa;
			font-size: 12px;
			color: rgba(0,0,0,0.7);
			position:relative;
			border: solid 1px #e0e0e0;
			border-bottom:0;
			svg{
				fill: rgba(0,0,0,0.4) !important;
			}
			svg:last-child{
				fill: #dd712f !important;
			}
			.dateDetails{
				position: absolute;
				right: 10%;
				bottom: 0;
				top: 0;
				margin: auto;
				height: 15px;
				color: rgba(0,0,0,0.4);
			}
		}
		.now,.scheduled{
			border-bottom: solid 1px #e0e0e0;
		}
		.ScheduleNotificationWidget{
			margin-top:10px;
			.DatePicker{
				width: 45%;
				display: inline-block;
				margin-right: 2.5%;
				margin-left: 2.5%;
			}
		}
	}
	.DatePickerInput{
	    padding: 10px 10px;
	    box-sizing: border-box;
	    height: 40px !important;
	    width: 100%;
	    border: 1px solid #e0e0e0;
	    padding-right: 25px;
	    border-radius: 4px;
	}
	.HandoverSumitModalBody{
		overflow-y: scroll;
	    height: 500px !important;
	}
	.customCheckboxWrap{
		width:100%;
		.checkbox{
			display:inline-block;
			width:50%;
			vertical-align:top;
		}
		.timeInput{
			display:inline-block;
			width:50%;
			vertical-align:top;
			margin-top: -5px;
			input{
				border: 1px solid #e0e0e0;
				padding: 6px 6px;
				border-radius: 2px;
			}
		}
	}
	.ScheduleNotificationModalContent{
		width:50% !important;
	}
	.ReactModal__Content{
		position:relative;
	}
	.ScheduleNotificationModal{
	    height: 440px;
	    overflow-y: scroll;
		.DatePicker{
			margin: 0% 4% 0% 4%;
			width: 92%;
		}
		.Select-menu-outer,.Select-control{
			width: 100%;
		}
		min-height:375px;
		.form-field{
			padding-left: 4%;
			.input-group{
				width:100%;
				input,div,label{
					color:rgba(0,0,0,0.4) !important;
					border-color:rgba(0,0,0,0.4) !important;
					font-size: 12px;
				}
				svg{
					fill: rgba(0,0,0,0.4) !important;
					color: rgba(0,0,0,0.4) !important;
				}
			}
		}
		.StartsOnDate{
			padding: 1% 7.5% 3% 7.5%;
		}
		.RepeatOnWeekDayTime,.NotificationEndsWidget,.RepeatByDayOfMonthOrWeek,.StartsOnDate{
			.field-label{
				margin: 10px 0 5px 0;
				color: black;
				font-size: 14px;
				font-weight: bold;
			}
			svg:last-child{
				fill: #dd712f !important;
			}
			.rdtPicker{
				width:40% !important;
			}
			.input-group{
				.Select{
					padding-left : 0px;
				}
			}
		}
		.RepeatByDayOfMonthOrWeek{
			.DatePicker{
				margin: 0% 0% 0% 0%;
	    		width: 96.5%;
				display: inline-block;
				box-sizing: border-box;
			}
		}
		.stickyFooter{
			padding: 1% 2%;
			box-sizing:border-box;
			width:100%;
			bottom:0;
			left:0;
			text-align:center;
			border-top: solid 2px #eeeeee;
			background:#fafafa;
			z-index:1;
			height:65px;
			display:flex;
			align-items:center;
			justify-content:space-evenly;
			.secondaryBtn,.primaryBtn{
				display:inline-flex;
			}
		}
	}
	.ReactModal__Content{
		.ScheduleNotificationModal{
			.scheduleModalDd{
				margin: 0px 20px 10px 20px !important;
			}
		}
	}
	.OccurrencesInput,.EndsOnDateTimeWidget{
		position:relative;
		display:inline-block;
		vertical-align:top;
		width:70%;
		.form-field{
			padding-left:0px;
			width:30%;
			padding-bottom: 0px;
		}
		input{
			padding: 5px !important;
			height: 30px !important;
			box-sizing: border-box;
			border-radius: 2px;
		}
		.DatePickerInput{
			width: 115%;
			padding: 5px !important;
			height: 30px !important;
			box-sizing: border-box;
			border-radius: 2px;
			border-width: 1px;
		}
	}
	.NotificationSummary{
		padding: 4% 4%;
	    font-weight: 600;
	    font-size: 13px;
	    .heading{
			font-weight: 500;
			margin-bottom: 8px;
	    }
	}
	.reoccuring{
		.NotificationSummary{
			padding: 4% 4%;
			font-weight: 600;
			font-size: 13px;
			text-align: left;
		}
		.editLink{
			color: #dd712f;
			padding: 2% 2.5% 0% 2.5%;
			text-align: left;
			cursor: pointer;
		}
	}
	.SelectListComponent{
		.Select.full_width{
			padding: 0;
			margin: 10px 0;
			.Select-menu-outer,.Select-control{
				width: 100%;
			}
		}
	}

	//colors

	//@extend-elements
	//original selectors
	//.rdtPicker td.rdtActive, .rdtPicker td.rdtActive:hover
	%extend_1 {
		background-color: $color_boston_blue_approx;
		color: $white;
		text-shadow: 0 -1px 0 $black-25;
	}

	//original selectors
	//.rdtPicker td.rdtDisabled, .rdtPicker td.rdtDisabled:hover
	%extend_2 {
		background: none;
		color: $color_mountain_mist_approx;
		cursor: not-allowed;
	}

	//original selectors
	//.rdtPicker td span.rdtDisabled, .rdtPicker td span.rdtDisabled:hover
	%extend_3 {
		background: none;
		color: $color_mountain_mist_approx;
		cursor: not-allowed;
	}

	//original selectors
	//.rdtPicker th.rdtDisabled, .rdtPicker th.rdtDisabled:hover
	%extend_4 {
		background: none;
		color: $color_mountain_mist_approx;
		cursor: not-allowed;
	}

	//original selectors
	//td.rdtMonth, td.rdtYear
	%extend_5 {
		height: 50px;
		width: 25%;
		cursor: pointer;
	}

	.rdt {
			width: 100%;
	}
	.rdtPicker {
		display: none;
		position: absolute;
		width: 96%;
		min-width:250px;
		padding: 4px;
		margin-top: 1px;
		z-index: 99999 !important;
		background: $white;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: 0 1px 3px $black-10;
		border: 1px solid $gray-f9;
		.rdtTimeToggle {
			text-align: center;
			&:hover {
				background: $gray-ee;
				cursor: pointer;
			}
		}
		table {
			width: 100%;
			margin: 0;
		}
		td {
			text-align: center;
			height: 28px;
			cursor: pointer;
			&.rdtOld {
				color: $color_mountain_mist_approx;
			}
			&.rdtNew {
				color: $color_mountain_mist_approx;
			}
			&.rdtToday {
				position: relative;
				&:before {
					content: '';
					display: inline-block;
					border-left: 7px solid transparent;
					border-bottom: 7px solid $color_boston_blue_approx;
					border-top-color: $black-20;
					position: absolute;
					bottom: 4px;
					right: 4px;
				}
			}
			&.rdtActive {
				@extend %extend_1;
				&:hover {
					@extend %extend_1;
				}
				&.rdtToday:before {
					border-bottom-color: $white;
				}
			}
			&.rdtDisabled {
				@extend %extend_2;
				&:hover {
					@extend %extend_2;
				}
			}
			span {
				&.rdtOld {
					color: $color_mountain_mist_approx;
				}
				&.rdtDisabled {
					@extend %extend_3;
					&:hover {
						@extend %extend_3;
					}
				}
			}
			&.rdtDay:hover {
				background: $gray-ee;
				cursor: pointer;
			}
			&.rdtHour:hover {
				background: $gray-ee;
				cursor: pointer;
			}
			&.rdtMinute:hover {
				background: $gray-ee;
				cursor: pointer;
			}
			&.rdtSecond:hover {
				background: $gray-ee;
				cursor: pointer;
			}
		}
		th {
			text-align: center;
			height: 28px;
			border-bottom: 1px solid $gray-f9;
			&.rdtSwitch {
				width: 100px;
			}
			&.rdtNext {
				font-size: 21px;
				vertical-align: top;
			}
			&.rdtPrev {
				font-size: 21px;
				vertical-align: top;
			}
			&.rdtDisabled {
				@extend %extend_4;
				&:hover {
					@extend %extend_4;
				}
			}
		}
		.dow {
			width: 14.2857%;
			border-bottom: none;
		}
		thead {
			button {
				width: 100%;
				height: 100%;
			}
			tr:first-child th {
				cursor: pointer;
				&:hover {
					background: $gray-ee;
				}
			}
		}
		tfoot {
			border-top: 1px solid $gray-f9;
		}
		button {
			border: none;
			background: none;
			cursor: pointer;
			&:hover {
				background-color: $gray-ee;
			}
		}
	}
	td {
		&.rdtMonth {
			@extend %extend_5;
			&:hover {
				background: $gray-ee;
			}
		}
		&.rdtYear {
			@extend %extend_5;
			&:hover {
				background: $gray-ee;
			}
		}
	}
	.rdtCounters {
		display: inline-block;
		> div {
			float: left;
		}
	}
	.rdtCounter {
		height: 120px;
		width: 40px;
		.rdtBtn {
			height: 33.33%;
			line-height: 40px;
			cursor: pointer;
			display: block;
			//Instead of the line below you could use @include user-select($select)
			user-select: none;
			&:hover {
				background: $gray-ee;
			}
		}
		.rdtCount {
			height: 33.33%;
			line-height: 40px;
			font-size: 1.2em;
			&:hover {
				background: $gray-ee;
			}
		}
	}
	.rdtCounterSeparator {
		line-height: 120px;
	}
	.rdtMilli {
		vertical-align: middle;
		padding-left: 8px;
		width: 48px;
		input {
			width: 100%;
			font-size: 1.2em;
			margin-top: 37px;
		}
	}
	.rdtOpen .rdtPicker {
		display: block;
	}
	.rdtStatic .rdtPicker {
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: none;
		position: static;
	}
	.rdtPrev span {
		display: block;
		//Instead of the line below you could use @include user-select($select)
		user-select: none;
	}
	.rdtNext span {
		display: block;
		//Instead of the line below you could use @include user-select($select)
		user-select: none;
	}




	//colors

	//@extend-elements
	//original selectors
	//.cdrPicker td.cdrActive, .cdrPicker td.cdrActive:hover
	%extend_1 {
		background-color: $color_boston_blue_approx;
		color: $white;
		text-shadow: 0 -1px 0 $black-25;
	}

	//original selectors
	//.cdrPicker td.cdrDisabled, .cdrPicker td.cdrDisabled:hover
	%extend_2 {
		background: none;
		color: $color_mountain_mist_approx;
		cursor: not-allowed;
	}

	//original selectors
	//.cdrPicker td span.cdrDisabled, .cdrPicker td span.cdrDisabled:hover
	%extend_3 {
		background: none;
		color: $color_mountain_mist_approx;
		cursor: not-allowed;
	}

	//original selectors
	//.cdrPicker th.cdrDisabled, .cdrPicker th.cdrDisabled:hover
	%extend_4 {
		background: none;
		color: $color_mountain_mist_approx;
		cursor: not-allowed;
	}

	//original selectors
	//td.cdrMonth, td.cdrYear
	%extend_5 {
		height: 50px;
		width: 25%;
		cursor: pointer;
	}
	.half_width{
	  display:inline-block;
	  width:50%;
	}
`