input[type="date"]::-webkit-calendar-picker-indicator {
	background: transparent;
	bottom: 0;
	color: transparent;
	cursor: pointer;
	height: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

.sidebar-filler {
    height: 100vh;
    width: calc(100vw - 550px);
    position: fixed;
}

.sidebar-r {
	height: 100vh;
	width: 550px;
	position: fixed;
	top: 0;
	z-index: 1000;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

	.sidebar-r {
		right: -550px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		-o-transition: opacity 0.3s linear, right 0.3s ease-out;
		transition: opacity 0.3s linear, right 0.3s ease-out;
		display: inherit;
	}

	.modal.fade:not(.show) {
		display: initial;
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s 0.3s, opacity 0.3s 0s;
	}

	.modal.fade:not(.show) .sidebar-r {
		right: -550px;
	}

	.modal.fade.show {
		display: initial;
		visibility: inherit;
	}

	.modal.fade.show .sidebar-r {
		right: 0;
	}

	.sidebar-r .dropdown-item {
		color: #003C71;
		font-weight: 400;
	}

	.sidebar-r .wnd {
		height: 100%;
		max-height: 100vh !important;
		background-color: #F4F4F4;
	}

	.sidebar-r .modal-header {
		padding: 0.75rem 1rem;
		color: #101820;
	}

		.sidebar-r .modal-title {
			text-align: center;
			width: 100%;
			color: #101820
		}

		.sidebar-r .modal-header button {
			font-size: 1.15rem;
			padding: 0 0.5rem;
			position: fixed;
			right: 1rem;
		}

	.sidebar-r .modal-body {
		color: #101820;
	}

	.sidebar-r .modal-footer div {
		display:grid;
		grid-template-columns: auto 1fr auto;
		width:100%;
	}

	.sidebar-r .btnN {
		color: #003C71;
		background-color: white;
		border-color: #CCCCCC;
		font-weight:500;
		font-size: 0.875rem;
	}
		.sidebar-r .btnN:hover {
			background-color: #e2e6ea;
			color: #003C71;
		}

	.sidebar-r .btnDel:hover .svgDel {
		fill: white;
	}
	.sidebar-r .btnDel .svgDel {
		fill: #EF3340;
	}

	.sidebar-r .title {
		display: grid;
		grid-template-columns: 1fr auto;
		width: 100%;
	}

	.sidebar-r .title button {
		height: 2.25rem;
	}

	.sidebar-r .mat-section {
		background-color:white;
		margin-top: 0.5rem;
	}

	.sidebar-r hr {
		margin: 0.6rem 0;
	}

	/*#region EditMaterial */
	.sidebar-r .mat-edit {
		margin-bottom: 1rem;
	}
	.sidebar-r .mat-edit h5 {
		font-weight: 400;
		font-size: 0.75rem;
		color: #003C71;
		padding-left:4px;
	}

	.sidebar-r .mat-edit h6 {
		font-size: 0.625rem;
		font-weight: 500;
		color: #717C7D;
		margin-bottom: 0;
	}

	.sidebar-r .mat-edit input::placeholder {
		color: #7F9DB8;
	}

	.sidebar-r .mat-edit select:invalid {
		color: #7F9DB8;
	}

	.sidebar-r .mat-edit input {
		color: #003C71;
		border: 1px solid #CCCCCC;
		border-radius: 3px;
		width: 100%;
		padding: 3px;
	}

	.sidebar-r .mat-edit select {
		color: #003C71;
		border: 1px solid #CCCCCC;
		border-radius: 3px;
		width: 100%;
		padding: 3px;
	}

	.sidebar-r .mat-edit option {
		color: #003C71;
	}

	.sidebar-r .mat-edit .grid1 {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		column-gap: 1rem;
		row-gap:1rem;
		margin:0.6rem;
	}

	.sidebar-r .mat-edit .grid2-default {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
		margin: 1rem 0.6rem 1rem 0.6rem;
	}

		.sidebar-r .mat-edit .grid2-default span {
			font-size: 0.75rem;
			font-weight: 500;
			color: #38342C;
			padding-left:4px;
		}

	.sidebar-r .mat-edit .routes {
		border-top: 1px solid #dee2e6;
		border-bottom: 1px solid #dee2e6;
		margin: 0 0.6rem;
	}

		.sidebar-r .mat-edit .routes button {
			padding: 0 0.1rem;
		}


		.sidebar-r .mat-edit .routes .view{
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 1rem;
			margin-top: 0.6rem;
			border-bottom: 1px solid #dee2e6;
		}

		.sidebar-r .mat-edit .routes .view span {
			font-size: 0.75rem;
			font-weight: 500;
			color: #38342C;
			padding-left: 4px;
		}

		.sidebar-r .mat-edit .routes .add {
			grid-template-rows: auto auto;
		}

			.sidebar-r .mat-edit .routes .add > div {
				margin: 0.6rem 0;
			}

		.sidebar-r .mat-edit .routes .footer {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
		}

			.sidebar-r .mat-edit .routes .footer .btn {
				padding: 0;
				margin: 0.3rem 0;
			}

		.sidebar-r .mat-edit .routes .material-icons {
			vertical-align: middle;
			padding-left: 0 !important
		}

		.sidebar-r .mat-edit .routes .btn:hover {
			background-color: #e2e6ea;
			color: #003C71;
		}
		.sidebar-r .mat-edit .routes .disabled.btn:hover {
			background-color: white;
			color: #cccccc;
		}
	/*#endregion*/

	/*#region ViewMaterial */
	.sidebar-r .mat-view {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto auto;
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
		margin: 0.6rem;
	}

		.sidebar-r .mat-view div {
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
		}

		.sidebar-r .mat-view h6 {
			font-size: 0.625rem;
			font-weight: 500;
			color: #717C7D;
			padding-left: 4px;
			margin-bottom: 0;
		}

		.sidebar-r .mat-view span {
			font-size: 0.75rem;
			font-weight: 500;
			color: #38342C;
			padding-left: 4px;
		}
	/*#endregion*/

	/*#region CompareTable*/
	.sidebar-r .tcompare {
		font-size: 0.625rem;
		font-weight: 500;
		margin-bottom:0 !important;
	}
		.sidebar-r .tcompare th {
			min-width:6rem;
			height: 2.5rem;
			font-weight:500;
			padding: 0 !important;
			vertical-align: middle !important;
			background-color: #E5EBF1;
			color: #717C7D;
			position: sticky;
			top: 0;
			border-top: none !important;
		}

		.sidebar-r .tcompare tbody tr:nth-child(even) {
			background-color: #fbfcfc;
		}

		.sidebar-r .tcompare tbody tr:nth-child(odd) {
			background-color: #ffffff;
		}

		.sidebar-r .tcompare td {
			color: #101820;
			padding: 0.2rem 0.5rem !important;
		}

		.sidebar-r .tcompare .tdl {
			text-align: left;
		}

		.sidebar-r .tcompare .tdr {
			text-align: right;
			font-size: 0.75rem;
		}
	/*#endregion*/

	/*#region Comparisons*/
	.sidebar-r .mat-cmp {
		border-bottom: 1px solid #dee2e6;
	}
		.sidebar-r .mat-cmp .expander {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items:baseline;
			padding-bottom:0.3rem;
		}

			.sidebar-r .mat-cmp h4 {
				font-weight: 500;
				font-size: 0.875rem;
				color: #101820;
			}

			.sidebar-r .mat-cmp .expander button {
				padding: 0 0.1rem;
			}
			.sidebar-r .mat-cmp .expander .btn:hover {
				background-color: #e2e6ea;
				color: #003C71;
			}

		.sidebar-r .mat-cmp .edit{
			background-color:white;
			margin-bottom:0.6rem;
		}

		.sidebar-r .mat-cmp .grid1 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			grid-column-gap: 1rem;
			grid-row-gap: 1rem;
			margin: 0.6rem;
		}
	/*#endregion*/

@media (max-width: 767.98px) {
    .sidebar-filler {
        height: 0;
        width: 0;
        position: inherit;
    }

	.sidebar-r {
		width: inherit;
		height: 100%;
		position: inherit;
		border-top: 1px solid #dee2e6 !important
	}

	.sidebar-r .wnd {
		border: none !important;
		border-radius: unset !important;
	}

	.sidebar-r-modal {
		position: static !important;
		top:auto !important;
		left:auto !important;

	}

	.modal-dialog-r {
		max-height: 100% !important;
		max-width: none !important;
		margin: unset !important;
		width:100% !important;
		height:100%;
	}
}