update UI

actions/pelaporan.js

@@ -71,8 +71,13 @@ export const createLaporanPublic = async (data) => {
 // };
 
 export const updateLaporan = async (token, id, data) => {
-	const res = await axiosAPI.put(`/laporan/update/${id}`, data, { headers: { Authorization: token } });
-	return res.data;
+	try {
+		const res = await axiosAPI.put(`/laporan/update/${id}`, data, { headers: { Authorization: token } });
+		return res.data;
+	} catch (error) {
+		console.log("error", error.response.data);
+		return false;
+	}
 };
 
 // export const activeLaporan = async ({ number, ptId }) => {

components/Extras/calendar.view.js

@@ -146,23 +146,23 @@ class Calendar extends Component {
 	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
 
 	handleSimpan = async (e) => {
+		const { selectedOption } = this.state;
+		const { token, query } = this.props;
+		const { id } = query;
+		let update = null;
+		this.setState({ selectedOption });
 		const toastid = toast.loading("Please wait...");
-		try {
-			const { selectedOption } = this.state;
-			const { token, query } = this.props;
-			const { id } = query;
-			this.setState({ selectedOption });
-			if (selectedOption.value === this.getStatus()[1].value) {
-				await updateLaporan(token, id, { change_role: "true" });
-			}
-			if (selectedOption.value === this.getStatus()[2].value) {
-				await updateLaporan(token, id, { aktif: "false" });
-			}
-			Router.push("/app/penjadwalan");
+		if (selectedOption.value === this.getStatus()[1].value) {
+			update = await updateLaporan(token, id, { change_role: "true" });
+		} else if (selectedOption.value === this.getStatus()[2].value) {
+			update = await updateLaporan(token, id, { aktif: "false" });
+		}
 
-			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-		} catch (error) {
+		if (!update) {
 			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+		} else {
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push("/app/penjadwalan");
 		}
 	};
 
@@ -201,14 +201,16 @@ class Calendar extends Component {
 							<div className="row">
 								<div className="col-lg-12 col-md-6 col-12">
 									<Card className="card-default">
-										<CardHeader>
-											<CardTitle tag="h4">Status Pelaporan</CardTitle>
-										</CardHeader>
+										<div class="header-penjadwalan">
+											<h2 class="card-title-1">Status Pelaporan</h2>
+										</div>
 										<CardBody>
 											<Select value={selectedOption} onChange={this.handleChangeSelect} options={this.getStatus()} required />
-											<Button onClick={this.handleSimpan} className="mt-2" color="primary" block disabled={laporan.data?.evaluasi.length}>
-												Simpan
-											</Button>
+											<div className="btn-simpanjadwal">
+												<Button onClick={this.handleSimpan} className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
+													<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+												</Button>
+											</div>
 										</CardBody>
 									</Card>
 									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
@@ -216,9 +218,9 @@ class Calendar extends Component {
 									) : (
 										<>
 											<Card className="card-default" title="">
-												<CardHeader>
-													<CardTitle tag="h4">Input Jadwal</CardTitle>
-												</CardHeader>
+												<div class="header-penjadwalan">
+													<h2 className="card-title-1">Input Jadwal</h2>
+												</div>
 												<CardBody>
 													<Formik
 														enableReinitialize={true}
@@ -237,6 +239,7 @@ class Calendar extends Component {
 																	<div className="badge d-block" style={{ backgroundColor: this.state.color, color: "white" }}>
 																		{this.state.color}
 																	</div>
+																	{/* <div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}></div> */}
 																</FormGroup>
 
 																<FormGroup>
@@ -244,43 +247,49 @@ class Calendar extends Component {
 																	<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
 																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
 																</FormGroup>
-																<FormGroup>
-																	<label className="col-form-label">Dari Tanggal</label>
-																	<Field name="dari_tanggal">
-																		{({ field, form }) => (
-																			<Datetime
-																				timeFormat={false}
-																				inputProps={{ className: "form-control" }}
-																				value={field.value}
-																				onChange={(e) => {
-																					form.setFieldValue(field.name, e);
-																				}}
-																			/>
-																		)}
-																	</Field>
-																	<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
-																</FormGroup>
-																<FormGroup>
-																	<label className="col-form-label">Sampai Tanggal</label>
-																	<Field name="sampai_tanggal">
-																		{({ field, form }) => (
-																			<Datetime
-																				timeFormat={false}
-																				inputProps={{ className: "form-control" }}
-																				value={field.value}
-																				onChange={(e) => {
-																					form.setFieldValue(field.name, e);
-																				}}
-																			/>
-																		)}
-																	</Field>
-																	<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
-																</FormGroup>
+																<Row>
+																	<Col>
+																		<FormGroup>
+																			<label className="col-form-label">Dari Tanggal</label>
+																			<Field name="dari_tanggal">
+																				{({ field, form }) => (
+																					<Datetime
+																						timeFormat={false}
+																						inputProps={{ className: "form-control" }}
+																						value={field.value}
+																						onChange={(e) => {
+																							form.setFieldValue(field.name, e);
+																						}}
+																					/>
+																				)}
+																			</Field>
+																			<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
+																		</FormGroup>
+																	</Col>
+																	<Col>
+																		<FormGroup>
+																			<label className="col-form-label">Sampai Tanggal</label>
+																			<Field name="sampai_tanggal">
+																				{({ field, form }) => (
+																					<Datetime
+																						timeFormat={false}
+																						inputProps={{ className: "form-control" }}
+																						value={field.value}
+																						onChange={(e) => {
+																							form.setFieldValue(field.name, e);
+																						}}
+																					/>
+																				)}
+																			</Field>
+																			<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
+																		</FormGroup>
+																	</Col>
+																</Row>
 
-																<FormGroup row>
-																	<div className="col-xl-12">
-																		<Button color="primary" block type="submit" disabled={laporan.data?.evaluasi.length}>
-																			Simpan Jadwal
+																<FormGroup>
+																	<div className="btn-simpanpenjadwalan">
+																		<Button color="info" className="btn-colorpenjadwalan" block type="submit" disabled={laporan.data?.evaluasi.length}>
+																			<h4 className="text-btn-penjadwalan-1">Simpan</h4>
 																		</Button>
 																	</div>
 																</FormGroup>

components/Main/DetailLaporan.js

@@ -9,7 +9,13 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 		<>
 			{(!data.user.isPrivate || user.role.id === 2020) && (
 				<>
-					{noTitle ? "" : <p className="lead bb">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</p>}
+					{noTitle ? (
+						""
+					) : (
+						<div className="header-1">
+							<h2 className="card-title-1">Identitas Pelapor - {data.user.isPublic ? "Umum" : "Internal"}</h2>
+						</div>
+					)}
 					<FormGroup row>
 						<Col md="4">Nama Pelapor:</Col>
 						<Col md="8">
@@ -55,7 +61,13 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 					)}
 				</>
 			)}
-			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
+			{noTitle ? (
+				""
+			) : (
+				<div className="header-1">
+					<h2 className="card-title-1">Detail Laporan</h2>
+				</div>
+			)}
 			<form className="form-horizontal">
 				<FormGroup row>
 					<Col md="4">Nomor Laporan:</Col>

styles/app/layout/layout.scss

@@ -13,468 +13,461 @@
 // If modified or removed make sure to check the variable
 // shared with other components
 // -------------------------------------------------------------
-$aside-wd:                                220px;
-$aside-wd-collapsed:                      70px;
-$aside-wd-collapsed-text:                 90px;
-$aside-bg:                                #fff;
+$aside-wd: 220px;
+$aside-wd-collapsed: 70px;
+$aside-wd-collapsed-text: 90px;
+$aside-bg: #fff;
 
-$content-bg:                              $body-bg;
-$content-heading-bg:                      #fafbfc;
-$content-heading-border:                  #cfdbe2;
-$content-padding:                         20px;
+$content-bg: $body-bg;
+$content-heading-bg: #fafbfc;
+$content-heading-border: #cfdbe2;
+$content-padding: 20px;
 
-$footer-hg:                               60px;
+$footer-hg: 60px;
 
-$navbar-hg:                               $navbar-height;
+$navbar-hg: $navbar-height;
 
-$boxed-max-width:                         1140px;
-$z-index-main-section:                    111;
+$boxed-max-width: 1140px;
+$z-index-main-section: 111;
 
 html {
-    /* $replace rtl */
-    direction: ltr;
-    height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    font-size: 16px; // force same font size acrros all device
+	/* $replace rtl */
+	direction: ltr;
+	height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	font-size: 16px; // force same font size acrros all device
 }
 
-html, body, #__next, #__settings_provider, #__themes_provider {
-  // overflow-x: hidden;
-  height: 100%;
+html,
+body,
+#__next,
+#__settings_provider,
+#__themes_provider {
+	// overflow-x: hidden;
+	height: 100%;
 }
 
 // Main wrapper
 // -----------------------------
 .wrapper {
-    position: relative;
-    width: 100%;
-    height: auto;
-    min-height: 100%;
-    overflow-x: hidden;
-    // Contains the main sidebar
-    .aside-container {
-        // visibility: hidden;
-        position: absolute;
-        width: $aside-wd;
-
-        top: 0;
-        left: 0;
-        bottom: 0;
-        z-index: $z-index-main-section + 5; // @include transition(visibility 0s linear .3s);
-        backface-visibility: hidden;
-        background-color: $aside-bg;
-
-        .aside-inner {
-            padding-top: $navbar-hg;
-            height: 100%;
-            width: $aside-wd;
-            overflow: hidden;
-        }
-
-        .nav-floating {
-
-            // position: handled from directive
-            left: inherit;
-            margin-left: $aside-wd;
-            z-index: $z-index-main-section * 10;
-
-            min-width: 190px;
-            overflow: auto;
-        }
-    }
-    // Contains the main content
-    .section-container {
-        position: relative;
-        height: 100%;
-        margin-left: 0; // overflow: hidden;
-        z-index: $z-index-main-section;
-        background-color: $content-bg;
-        margin-bottom: $footer-hg !important; // ensure a space for the footer
-    } // Page Footer
-    .footer-container {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: $footer-hg;
-        border-top: 1px solid $gray-light;
-        padding: $content-padding;
-        z-index: $z-index-main-section - 2;
-        font-size: .875rem;
-        p {
-            margin: 0;
-        }
-    }
+	position: relative;
+	width: 100%;
+	height: auto;
+	min-height: 100%;
+	overflow-x: hidden;
+	// Contains the main sidebar
+	.aside-container {
+		// visibility: hidden;
+		position: absolute;
+		width: $aside-wd;
+
+		top: 0;
+		left: 0;
+		bottom: 0;
+		z-index: $z-index-main-section + 5; // @include transition(visibility 0s linear .3s);
+		backface-visibility: hidden;
+		background-color: $aside-bg;
+
+		.aside-inner {
+			padding-top: $navbar-hg;
+			height: 100%;
+			width: $aside-wd;
+			overflow: hidden;
+		}
+
+		.nav-floating {
+			// position: handled from directive
+			left: inherit;
+			margin-left: $aside-wd;
+			z-index: $z-index-main-section * 10;
+
+			min-width: 190px;
+			overflow: auto;
+		}
+	}
+	// Contains the main content
+	.section-container {
+		position: relative;
+		height: 100%;
+		margin-left: 0; // overflow: hidden;
+		z-index: $z-index-main-section;
+		background-color: $content-bg;
+		margin-bottom: $footer-hg !important; // ensure a space for the footer
+	} // Page Footer
+	.footer-container {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: $footer-hg;
+		border-top: 1px solid $gray-light;
+		padding: $content-padding;
+		z-index: $z-index-main-section - 2;
+		font-size: 0.875rem;
+		p {
+			margin: 0;
+		}
+	}
 }
 
 .modal-open .wrapper {
-    z-index: 0;
+	z-index: 0;
 }
 
 // Page main content
 // -----------------------------
 .content-wrapper {
-    padding: 15px;
-    width: 100%; // styling to visually wrap the component
-    border-top: 1px solid rgba(0, 0, 0, .15);
-    margin-top: -1px;
-
-    .unwrap {
-        margin: -15px; // expand over wrapper padding
-        @include media-breakpoint-up(md) {
-            margin: -20px; // expand over wrapper padding
-        }
-    }
-
-    .content-heading {
-        display: flex;
-        align-items: center;
-        font-size: 1.5rem;
-        line-height: $headings-line-height;
-        color: #929292;
-        margin: -15px;
-        margin-bottom: 20px;
-        padding: 15px;
-        font-weight: normal;
-        background-color: $content-heading-bg;
-        border-bottom: 1px solid $content-heading-border;
-        small {
-            display: block;
-            font-size: 12px;
-            color: $text-muted;
-        }
-    }
-
-    .container,
-    .container-fluid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    @include media-breakpoint-up(md) {
-        padding: $content-padding; //overflow: auto; // required for portlets
-        .content-heading {
-            margin: -$content-padding;
-            margin-bottom: $content-padding;
-            padding: $content-padding;
-            button,
-            .btn {
-                margin: 0;
-            }
-        }
-    }
+	padding: 15px;
+	width: 100%; // styling to visually wrap the component
+	border-top: 1px solid rgba(0, 0, 0, 0.15);
+	margin-top: -1px;
+
+	.unwrap {
+		margin: -15px; // expand over wrapper padding
+		@include media-breakpoint-up(md) {
+			margin: -20px; // expand over wrapper padding
+		}
+	}
+
+	.content-heading {
+		display: flex;
+		align-items: center;
+		font-size: 1.5rem;
+		line-height: $headings-line-height;
+		color: #929292;
+		margin: -15px;
+		margin-bottom: 20px;
+		padding: 15px;
+		font-weight: normal;
+		background-color: $content-heading-bg;
+		border-bottom: 1px solid $content-heading-border;
+		small {
+			display: block;
+			font-size: 12px;
+			color: $text-muted;
+		}
+	}
+
+	.container,
+	.container-fluid {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	@include media-breakpoint-up(md) {
+		padding: $content-padding; //overflow: auto; // required for portlets
+		.content-heading {
+			margin: -$content-padding;
+			margin-bottom: $content-padding;
+			padding: $content-padding;
+			// background-color: #e3f0ff;
+			button,
+			.btn {
+				margin: 0;
+			}
+		}
+	}
 }
 
 // Desktop layout
 // -----------------------------
 @include media-breakpoint-up(md) {
-
-    body {
-        min-height: 100%;
-    }
-
-    .wrapper {
-
-        .aside-container {
-            .aside-inner {
-                // padding-top: $navbar-hg;
-            }
-        }
-
-        .section-container,
-        .footer-container {
-            margin-left: $aside-wd;
-        }
-
-        .section-container {
-            // with just a margin we can make the
-            // right sidebar always visible
-            &.has-sidebar-right {
-                margin-right: $aside-wd + 20;
-                +.offsidebar {
-                    z-index: 1;
-                }
-            }
-        }
-    }
+	body {
+		min-height: 100%;
+	}
+
+	.wrapper {
+		.aside-container {
+			.aside-inner {
+				// padding-top: $navbar-hg;
+			}
+		}
+
+		.section-container,
+		.footer-container {
+			margin-left: $aside-wd;
+		}
+
+		.section-container {
+			// with just a margin we can make the
+			// right sidebar always visible
+			&.has-sidebar-right {
+				margin-right: $aside-wd + 20;
+				+ .offsidebar {
+					z-index: 1;
+				}
+			}
+		}
+	}
 }
 
 // Aside toggled layout
 // On mobile acts like offcanvas
 // -----------------------------
 @include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
+	// csstransforms3d
+	.wrapper {
+		backface-visibility: hidden;
+		.section-container,
+		.footer-container {
+			margin-left: 0;
+			transform: translate3d(0, 0, 0);
+			transition: transform 0.3s ease;
+		}
+		.aside-container {
+			margin-left: 0;
+			transform: translate3d(-$aside-wd, 0, 0);
+			transition: transform 0.3s ease;
+		}
+	}
+
+	.aside-toggled {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				transform: translate3d($aside-wd, 0, 0);
+			}
+			.aside-container {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+	}
 }
 
 // Toggle and collapsed behavior overrides
 @include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .aside-collapsed .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd-collapsed, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-collapsed.aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd-collapsed, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
+	// csstransforms3d
+	.aside-collapsed .wrapper {
+		backface-visibility: hidden;
+		.section-container,
+		.footer-container {
+			margin-left: 0;
+			transform: translate3d(0, 0, 0);
+			transition: transform 0.3s ease;
+		}
+		.aside-container {
+			margin-left: 0;
+			transform: translate3d(-$aside-wd-collapsed, 0, 0);
+			transition: transform 0.3s ease;
+		}
+	}
+
+	.aside-collapsed.aside-toggled {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				transform: translate3d($aside-wd-collapsed, 0, 0);
+			}
+			.aside-container {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+	}
 }
 
 // Aside collapsed layout
 // -------------------------------
 // Aside status toggled via JS
 .aside-collapsed {
-    overflow-y: auto;
-    .wrapper {
-        .aside-container {
-            &,
-            .aside-inner {
-                width: $aside-wd-collapsed;
-            }
-            .nav-floating {
-                margin-left: $aside-wd-collapsed;
-            }
-        }
-    }
+	overflow-y: auto;
+	.wrapper {
+		.aside-container {
+			&,
+			.aside-inner {
+				width: $aside-wd-collapsed;
+			}
+			.nav-floating {
+				margin-left: $aside-wd-collapsed;
+			}
+		}
+	}
 }
 
 // Margin only exists above tablet
 @include media-breakpoint-up(md) {
-    // Aside status toggled via JS
-    .aside-collapsed {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                margin-left: $aside-wd-collapsed;
-            }
-        }
-    }
+	// Aside status toggled via JS
+	.aside-collapsed {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				margin-left: $aside-wd-collapsed;
+			}
+		}
+	}
 }
 
 // ------------------------------
 // Collapsed variation with text
 // ------------------------------
 @include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .aside-collapsed-text .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd-collapsed-text, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-collapsed-text.aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd-collapsed-text, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
+	// csstransforms3d
+	.aside-collapsed-text .wrapper {
+		backface-visibility: hidden;
+		.section-container,
+		.footer-container {
+			margin-left: 0;
+			transform: translate3d(0, 0, 0);
+			transition: transform 0.3s ease;
+		}
+		.aside-container {
+			margin-left: 0;
+			transform: translate3d(-$aside-wd-collapsed-text, 0, 0);
+			transition: transform 0.3s ease;
+		}
+	}
+
+	.aside-collapsed-text.aside-toggled {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				transform: translate3d($aside-wd-collapsed-text, 0, 0);
+			}
+			.aside-container {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+	}
 }
 
 // Aside collapsed layout
 // -------------------------------
 // Aside status toggled via JS
 .aside-collapsed-text {
-    overflow-y: auto;
-    .wrapper {
-        .aside-container {
-            &,
-            .aside-inner {
-                width: $aside-wd-collapsed-text;
-            }
-            .nav-floating {
-                margin-left: $aside-wd-collapsed-text;
-            }
-        }
-    }
+	overflow-y: auto;
+	.wrapper {
+		.aside-container {
+			&,
+			.aside-inner {
+				width: $aside-wd-collapsed-text;
+			}
+			.nav-floating {
+				margin-left: $aside-wd-collapsed-text;
+			}
+		}
+	}
 }
 
 // Margin only exists above tablet
 @include media-breakpoint-up(md) {
-    // Aside status toggled via JS
-    .aside-collapsed-text {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                margin-left: $aside-wd-collapsed-text;
-            }
-        }
-    }
+	// Aside status toggled via JS
+	.aside-collapsed-text {
+		.wrapper {
+			.section-container,
+			.footer-container {
+				margin-left: $aside-wd-collapsed-text;
+			}
+		}
+	}
 }
 
 // end collapsed variation with text
 // mixin to remove transformations
 @mixin disable-transform() {
-    -webkit-transform: none;
-    -moz-transform: none;
-    -opera-transform: none;
-    -ms-transform: none;
-    transform: none;
+	-webkit-transform: none;
+	-moz-transform: none;
+	-opera-transform: none;
+	-ms-transform: none;
+	transform: none;
 }
 
 // Fixed layout
 // -----------------------------
 .layout-fixed {
-
-    @media (max-width: $boxed-max-width) {
-        &.aside-toggled,
-        &.offsidebar-open {
-            overflow-y: hidden;
-        }
-    }
-
-    .wrapper {
-        .topnavbar-wrapper {
-            position: fixed;
-            top: 0px;
-            width: 100%;
-            z-index: $z-index-main-section + 10;
-        }
-        .aside-container,
-        .offsidebar {
-            position: fixed;
-        }
-        /* only applied to sidebar */
-        .aside-container {
-            /* safari fix */
-            height: 1px;
-            min-height: 100%;
-            /* ios blanks space fix */
-            .aside-inner {
-                position: fixed;
-                top: 0;
-                bottom: 0;
-            }
-        }
-        .section-container {
-            margin-top: $navbar-hg;
-        }
-    }
+	@media (max-width: $boxed-max-width) {
+		&.aside-toggled,
+		&.offsidebar-open {
+			overflow-y: hidden;
+		}
+	}
+
+	.wrapper {
+		.topnavbar-wrapper {
+			position: fixed;
+			top: 0px;
+			width: 100%;
+			z-index: $z-index-main-section + 10;
+		}
+		.aside-container,
+		.offsidebar {
+			position: fixed;
+		}
+		/* only applied to sidebar */
+		.aside-container {
+			/* safari fix */
+			height: 1px;
+			min-height: 100%;
+			/* ios blanks space fix */
+			.aside-inner {
+				position: fixed;
+				top: 0;
+				bottom: 0;
+			}
+		}
+		.section-container {
+			margin-top: $navbar-hg;
+		}
+	}
 }
 
-
 /* IE10+ hack: safari fix breaks ie so we need to target ie only to restore */
 
 _:-ms-lang(x),
 .layout-fixed .wrapper .aside-container .aside-inner {
-    position: static !important;
+	position: static !important;
 }
 
 // Boxed layout (only for desktops)
 // -----------------------------
 .layout-boxed {
-
-    @include media-breakpoint-up(lg) {
-        overflow: auto !important;
-        .wrapper {
-            margin: 0 auto;
-            overflow: hidden;
-            box-shadow: 0 0 13px rgba(0, 0, 0, .25);
-
-            .offsidebar {
-                position: absolute !important;
-            }
-
-            .aside-container {
-                left: inherit;
-            }
-            &,
-            & .topnavbar-wrapper {
-                width: 970px;
-            }
-        }
-
-        &.layout-fixed {
-            .wrapper .aside-container .aside-inner {
-                left: inherit;
-            }
-        }
-    } // max size for large devices
-    @include media-breakpoint-up(xl) {
-        .wrapper {
-            &,
-            & .topnavbar-wrapper {
-                width: $boxed-max-width;
-            }
-        }
-    }
+	@include media-breakpoint-up(lg) {
+		overflow: auto !important;
+		.wrapper {
+			margin: 0 auto;
+			overflow: hidden;
+			box-shadow: 0 0 13px rgba(0, 0, 0, 0.25);
+
+			.offsidebar {
+				position: absolute !important;
+			}
+
+			.aside-container {
+				left: inherit;
+			}
+			&,
+			& .topnavbar-wrapper {
+				width: 970px;
+			}
+		}
+
+		&.layout-fixed {
+			.wrapper .aside-container .aside-inner {
+				left: inherit;
+			}
+		}
+	} // max size for large devices
+	@include media-breakpoint-up(xl) {
+		.wrapper {
+			&,
+			& .topnavbar-wrapper {
+				width: $boxed-max-width;
+			}
+		}
+	}
 } // boxed
 
 // Sidebar backdrop
 .sidebar-backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: $aside-wd;
-    z-index: $z-index-main-section + 1;
-    .aside-collapsed & {
-        left: $aside-wd-collapsed;
-    }
-    .aside-collapsed-text & {
-        left: $aside-wd-collapsed-text
-    }
-}
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: $aside-wd;
+	z-index: $z-index-main-section + 1;
+	.aside-collapsed & {
+		left: $aside-wd-collapsed;
+	}
+	.aside-collapsed-text & {
+		left: $aside-wd-collapsed-text;
+	}
+}

styles/bootstrap/_buttons.scss

@@ -5,200 +5,213 @@
 //
 
 .btn {
-  display: inline-block;
-  font-family: $btn-font-family;
-  font-weight: $btn-font-weight;
-  color: $body-color;
-  text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: $btn-white-space;
-  vertical-align: middle;
-  user-select: none;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-  @include transition($btn-transition);
-
-  @include hover() {
-    color: $body-color;
-    text-decoration: none;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: $btn-focus-box-shadow;
-  }
-
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    @include box-shadow(none);
-  }
-
-  &:not(:disabled):not(.disabled) {
-    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
-
-    &:active,
-    &.active {
-      @include box-shadow($btn-active-box-shadow);
-
-      &:focus {
-        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-      }
-    }
-  }
+	display: inline-block;
+	font-family: $btn-font-family;
+	font-weight: $btn-font-weight;
+	color: $body-color;
+	text-align: center;
+	text-decoration: if($link-decoration == none, null, none);
+	white-space: $btn-white-space;
+	vertical-align: middle;
+	user-select: none;
+	background-color: transparent;
+	border: $btn-border-width solid transparent;
+	@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+	@include transition($btn-transition);
+
+	@include hover() {
+		color: $body-color;
+		text-decoration: none;
+	}
+
+	&:focus,
+	&.focus {
+		outline: 0;
+		box-shadow: $btn-focus-box-shadow;
+	}
+
+	// Disabled comes first so active can properly restyle
+	&.disabled,
+	&:disabled {
+		opacity: $btn-disabled-opacity;
+		@include box-shadow(none);
+	}
+
+	&:not(:disabled):not(.disabled) {
+		cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
+
+		&:active,
+		&.active {
+			@include box-shadow($btn-active-box-shadow);
+
+			&:focus {
+				@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+			}
+		}
+	}
 }
 
 // Future-proof disabling of clicks on `<a>` elements
 a.btn.disabled,
 fieldset:disabled a.btn {
-  pointer-events: none;
+	pointer-events: none;
 }
 
-
 //
 // Alternate buttons
 //
 
 @each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @include button-variant($value, $value);
-  }
+	.btn-#{$color} {
+		@include button-variant($value, $value);
+	}
 }
 
 @each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
+	.btn-outline-#{$color} {
+		@include button-outline-variant($value);
+	}
 }
 
-
 //
 // Link buttons
 //
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: $font-weight-normal;
-  color: $link-color;
-  text-decoration: $link-decoration;
+	font-weight: $font-weight-normal;
+	color: $link-color;
+	text-decoration: $link-decoration;
 
-  @include hover() {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
+	@include hover() {
+		color: $link-hover-color;
+		text-decoration: $link-hover-decoration;
+	}
 
-  &:focus,
-  &.focus {
-    text-decoration: $link-hover-decoration;
-  }
+	&:focus,
+	&.focus {
+		text-decoration: $link-hover-decoration;
+	}
 
-  &:disabled,
-  &.disabled {
-    color: $btn-link-disabled-color;
-    pointer-events: none;
-  }
+	&:disabled,
+	&.disabled {
+		color: $btn-link-disabled-color;
+		pointer-events: none;
+	}
 
-  // No need for an active state here
+	// No need for an active state here
 }
 
-
 //
 // Button Sizes
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+	@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+	@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 }
 
-
 //
 // Block button
 //
 
 .btn-block {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 
-  // Vertically space out multiple block buttons
-  + .btn-block {
-    margin-top: $btn-block-spacing-y;
-  }
+	// Vertically space out multiple block buttons
+	+ .btn-block {
+		margin-top: $btn-block-spacing-y;
+	}
 }
 
 // Specificity overrides
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
-
-.button-kirimlaporan{
-  // background: rgba(0, 0, 0, 0.05);
-  display: inline-block;
-background-color: #6FB9DE;
-width: 175px;
-height: 40px;
-
-}
-.text-kirimlaporan{
-  font-weight: 500;
-  font-size: 20px;
-  letter-spacing: 0.02em;
-  text-align: center;
-  padding-bottom: 5px;
-}
-.button-lihatpemantauan{
-  position: relative;
-  margin-left: auto;
-  // background: rgba(0, 0, 0, 0.05);
-  display: inline-block;
-  background-color: #6FB9DE;
-  width: 200px;
-  height: 40px;
-}
-.text-lihatpemantauan{
-  font-weight: 500;
-  font-size: 20px;
-  letter-spacing: 0.02em;
-  text-align: center;
-  padding-bottom: 5px
+	&.btn-block {
+		width: 100%;
+	}
+}
+
+.button-kirimlaporan {
+	// background: rgba(0, 0, 0, 0.05);
+	display: inline-block;
+	background-color: #6fb9de;
+	width: 175px;
+	height: 40px;
+}
+.text-kirimlaporan {
+	font-weight: 500;
+	font-size: 20px;
+	letter-spacing: 0.02em;
+	text-align: center;
+	padding-bottom: 5px;
+}
+.button-lihatpemantauan {
+	position: relative;
+	margin-left: auto;
+	// background: rgba(0, 0, 0, 0.05);
+	display: inline-block;
+	background-color: #6fb9de;
+	width: 200px;
+	height: 40px;
+}
+.text-lihatpemantauan {
+	font-weight: 500;
+	font-size: 20px;
+	letter-spacing: 0.02em;
+	text-align: center;
+	padding-bottom: 5px;
 }
 .btn-labeled {
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 20px;
-    margin-top: 3%;
-    background: #6FB9DE;
-
-}
-.btn-labeled-2{
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-left: 20px;
-    margin-top: 3%;
-    background: #6FB9DE;
-}
-.btn-login{
-  background: #6FB9DE;
-}
-.navbar-color{
-  background-color: #6FB9DE;
-}
-.posisi-btn-1{
-  position: relative;
-  margin-left: auto;
-  padding-right: 20px;
-}
-.tengah{
-text-align: center;
-padding: 30px;
-}
+	padding-top: 0;
+	padding-bottom: 0;
+	font-size: 20px;
+	margin-top: 3%;
+	background: #6fb9de;
+}
+.btn-labeled-2 {
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-left: 20px;
+	margin-top: 3%;
+	background: #6fb9de;
+}
+.btn-login {
+	background: #6fb9de;
+}
+.navbar-color {
+	background-color: #6fb9de;
+}
+.posisi-btn-1 {
+	position: relative;
+	margin-left: auto;
+	padding-right: 20px;
+}
+.tengah {
+	text-align: center;
+	padding: 30px;
+}
+.btn-simpanpenjadwalan {
+	margin-left: auto;
+	width: 100px;
+}
+.btn-colorpenjadwalan {
+	// display: inline-block;
+	background-color: #6fb9de;
+	height: 35px;
+}
+.text-btn-penjadwalan-1 {
+	letter-spacing: 0.02em;
+	text-align: center;
+}
+.btn-simpanjadwal {
+	margin-left: auto;
+	width: 100px;
+	margin-top: 20px;
+	margin-bottom: 15px;
+}

styles/bootstrap/_card.scss

@@ -3,77 +3,77 @@
 //
 
 .card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-  height: $card-height;
-  word-wrap: break-word;
-  background-color: $card-bg;
-  background-clip: border-box;
-  border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
-
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  > .list-group {
-    border-top: inherit;
-    border-bottom: inherit;
-
-    &:first-child {
-      border-top-width: 0;
-      @include border-top-radius($card-inner-border-radius);
-    }
-
-    &:last-child  {
-      border-bottom-width: 0;
-      @include border-bottom-radius($card-inner-border-radius);
-    }
-  }
-
-  // Due to specificity of the above selector (`.card > .list-group`), we must
-  // use a child selector here to prevent double borders.
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
-    border-top: 0;
-  }
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+	height: $card-height;
+	word-wrap: break-word;
+	background-color: $card-bg;
+	background-clip: border-box;
+	border: $card-border-width solid $card-border-color;
+	@include border-radius($card-border-radius);
+
+	> hr {
+		margin-right: 0;
+		margin-left: 0;
+	}
+
+	> .list-group {
+		border-top: inherit;
+		border-bottom: inherit;
+
+		&:first-child {
+			border-top-width: 0;
+			@include border-top-radius($card-inner-border-radius);
+		}
+
+		&:last-child {
+			border-bottom-width: 0;
+			@include border-bottom-radius($card-inner-border-radius);
+		}
+	}
+
+	// Due to specificity of the above selector (`.card > .list-group`), we must
+	// use a child selector here to prevent double borders.
+	> .card-header + .list-group,
+	> .list-group + .card-footer {
+		border-top: 0;
+	}
 }
 
 .card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  // Workaround for the image size bug in IE
-  // See: https://github.com/twbs/bootstrap/pull/28855
-  min-height: 1px;
-  padding: $card-spacer-x;
-  color: $card-color;
+	// Enable `flex-grow: 1` for decks and groups so that card blocks take up
+	// as much space as possible, ensuring footers are aligned to the bottom.
+	flex: 1 1 auto;
+	// Workaround for the image size bug in IE
+	// See: https://github.com/twbs/bootstrap/pull/28855
+	min-height: 1px;
+	padding: $card-spacer-x;
+	color: $card-color;
 }
 
 .card-title {
-  margin-bottom: $card-spacer-y;
+	margin-bottom: $card-spacer-y;
 }
 
 .card-subtitle {
-  margin-top: -$card-spacer-y / 2;
-  margin-bottom: 0;
+	margin-top: -$card-spacer-y / 2;
+	margin-bottom: 0;
 }
 
 .card-text:last-child {
-  margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 .card-link {
-  @include hover() {
-    text-decoration: none;
-  }
+	@include hover() {
+		text-decoration: none;
+	}
 
-  + .card-link {
-    margin-left: $card-spacer-x;
-  }
+	+ .card-link {
+		margin-left: $card-spacer-x;
+	}
 }
 
 //
@@ -81,233 +81,242 @@
 //
 
 .card-header {
-  padding: $card-spacer-y $card-spacer-x;
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
-
-  &:first-child {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
-  }
+	padding: $card-spacer-y $card-spacer-x;
+	margin-bottom: 0; // Removes the default margin-bottom of <hN>
+	color: $card-cap-color;
+	background-color: $card-cap-bg;
+	border-bottom: $card-border-width solid $card-border-color;
+
+	&:first-child {
+		@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+	}
 }
 
 .card-footer {
-  padding: $card-spacer-y $card-spacer-x;
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
-
-  &:last-child {
-    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
-  }
+	padding: $card-spacer-y $card-spacer-x;
+	color: $card-cap-color;
+	background-color: $card-cap-bg;
+	border-top: $card-border-width solid $card-border-color;
+
+	&:last-child {
+		@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+	}
 }
 
-
 //
 // Header navs
 //
 
 .card-header-tabs {
-  margin-right: -$card-spacer-x / 2;
-  margin-bottom: -$card-spacer-y;
-  margin-left: -$card-spacer-x / 2;
-  border-bottom: 0;
+	margin-right: -$card-spacer-x / 2;
+	margin-bottom: -$card-spacer-y;
+	margin-left: -$card-spacer-x / 2;
+	border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -$card-spacer-x / 2;
-  margin-left: -$card-spacer-x / 2;
+	margin-right: -$card-spacer-x / 2;
+	margin-left: -$card-spacer-x / 2;
 }
 
 // Card image
 .card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: $card-img-overlay-padding;
-  @include border-radius($card-inner-border-radius);
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	padding: $card-img-overlay-padding;
+	@include border-radius($card-inner-border-radius);
 }
 
 .card-img,
 .card-img-top,
 .card-img-bottom {
-  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
-  width: 300px;
-  height: 150px;
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-  // width: 345.73px;
-  // height: 185px;
-
-  // Required because we use flexbox and this inherently applies align-self: stretch
+	flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
+	width: 300px;
+	height: 150px;
+	position: relative;
+	margin-left: auto;
+	margin-right: auto;
+	// width: 345.73px;
+	// height: 185px;
+
+	// Required because we use flexbox and this inherently applies align-self: stretch
 }
 
 .card-img,
 .card-img-top {
-  @include border-top-radius($card-inner-border-radius);
+	@include border-top-radius($card-inner-border-radius);
 }
 
 .card-img,
 .card-img-bottom {
-  @include border-bottom-radius($card-inner-border-radius);
+	@include border-bottom-radius($card-inner-border-radius);
 }
 
-
 // Card deck
 
 .card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
+	.card {
+		margin-bottom: $card-deck-margin;
+	}
+
+	@include media-breakpoint-up(sm) {
+		display: flex;
+		flex-flow: row wrap;
+		margin-right: -$card-deck-margin;
+		margin-left: -$card-deck-margin;
+
+		.card {
+			// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+			flex: 1 0 0%;
+			margin-right: $card-deck-margin;
+			margin-bottom: 0; // Override the default
+			margin-left: $card-deck-margin;
+		}
+	}
 }
 
-
 //
 // Card groups
 //
 
 .card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
+	// The child selector allows nested `.card` within `.card-group`
+	// to display properly.
+	> .card {
+		margin-bottom: $card-group-margin;
+	}
+
+	@include media-breakpoint-up(sm) {
+		display: flex;
+		flex-flow: row wrap;
+		// The child selector allows nested `.card` within `.card-group`
+		// to display properly.
+		> .card {
+			// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+			flex: 1 0 0%;
+			margin-bottom: 0;
+
+			+ .card {
+				margin-left: 0;
+				border-left: 0;
+			}
+
+			// Handle rounded corners
+			@if $enable-rounded {
+				&:not(:last-child) {
+					@include border-right-radius(0);
+
+					.card-img-top,
+					.card-header {
+						// stylelint-disable-next-line property-disallowed-list
+						border-top-right-radius: 0;
+					}
+					.card-img-bottom,
+					.card-footer {
+						// stylelint-disable-next-line property-disallowed-list
+						border-bottom-right-radius: 0;
+					}
+				}
+
+				&:not(:first-child) {
+					@include border-left-radius(0);
+
+					.card-img-top,
+					.card-header {
+						// stylelint-disable-next-line property-disallowed-list
+						border-top-left-radius: 0;
+					}
+					.card-img-bottom,
+					.card-footer {
+						// stylelint-disable-next-line property-disallowed-list
+						border-bottom-left-radius: 0;
+					}
+				}
+			}
+		}
+	}
 }
 
-
 //
 // Columns
 //
 
 .card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
+	.card {
+		margin-bottom: $card-columns-margin;
+	}
+
+	@include media-breakpoint-up(sm) {
+		column-count: $card-columns-count;
+		column-gap: $card-columns-gap;
+		orphans: 1;
+		widows: 1;
+
+		.card {
+			display: inline-block; // Don't let them vertically span multiple columns
+			width: 100%; // Don't let their width change
+		}
+	}
 }
 
-
 //
 // Accordion
 //
 
 .accordion {
-  overflow-anchor: none;
+	overflow-anchor: none;
 
-  > .card {
-    overflow: hidden;
+	> .card {
+		overflow: hidden;
 
-    &:not(:last-of-type) {
-      border-bottom: 0;
-      @include border-bottom-radius(0);
-    }
+		&:not(:last-of-type) {
+			border-bottom: 0;
+			@include border-bottom-radius(0);
+		}
 
-    &:not(:first-of-type) {
-      @include border-top-radius(0);
-    }
+		&:not(:first-of-type) {
+			@include border-top-radius(0);
+		}
 
-    > .card-header {
-      @include border-radius(0);
-      margin-bottom: -$card-border-width;
-    }
-  }
+		> .card-header {
+			@include border-radius(0);
+			margin-bottom: -$card-border-width;
+		}
+	}
+}
+
+.header-1 {
+	background: #6fb9de;
+	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+	border-radius: 5px;
+	// width: 830px;
+	height: 45px;
+	margin-bottom: 30px;
+}
+.card-title-1 {
+	margin-left: 10px;
+	padding: 10px;
+	font-size: 25px;
+	text-align: left;
+	color: rgba(255, 255, 255, 0.9);
+}
+.border-radius-login {
+	border-radius: 5px;
 }
 
-.header-1{
-  background: #6FB9DE;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 5px;
-  // width: 830px;
-  height: 45px;
-  margin-bottom: 30px;
+.header-penjadwalan {
+	background: #6fb9de;
+	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+	border-radius: 5px;
+	// width: 830px;
+	height: 45px;
+	margin: 20px;
 }
-.card-title-1{
-  margin-left: 10px;
-  padding: 10px;
-  font-size: 25px;
-text-align: left;
-color: rgba(255, 255, 255, 0.9);
+.warna-penjadwalan-block {
+	height: 35px;
+	width: 60px;
+	margin-left: auto;
 }
-.border-radius-login{
-  border-radius: 5px;
-}

styles/bootstrap/_forms.scss

@@ -5,89 +5,88 @@
 //
 
 .form-control {
-  display: block;
-  width: 100%;
-  height: $input-height;
-  padding: $input-padding-y $input-padding-x;
-  font-family: $input-font-family;
-  @include font-size($input-font-size);
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius, 0);
-
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  // Unstyle the caret on `<select>`s in IE10+.
-  &::-ms-expand {
-    background-color: transparent;
-    border: 0;
-  }
-
-  // Remove select outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $input-color;
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus($ignore-warning: true);
-
-  // Placeholder
-  &::placeholder {
-    color: $input-placeholder-color;
-    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
-  }
-
-  // Disabled and read-only inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled,
-  &[readonly] {
-    background-color: $input-disabled-bg;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
+	display: block;
+	width: 100%;
+	height: $input-height;
+	padding: $input-padding-y $input-padding-x;
+	font-family: $input-font-family;
+	@include font-size($input-font-size);
+	font-weight: $input-font-weight;
+	line-height: $input-line-height;
+	color: $input-color;
+	background-color: $input-bg;
+	background-clip: padding-box;
+	border: $input-border-width solid $input-border-color;
+
+	// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+	@include border-radius($input-border-radius, 0);
+
+	@include box-shadow($input-box-shadow);
+	@include transition($input-transition);
+
+	// Unstyle the caret on `<select>`s in IE10+.
+	&::-ms-expand {
+		background-color: transparent;
+		border: 0;
+	}
+
+	// Remove select outline from select box in FF
+	&:-moz-focusring {
+		color: transparent;
+		text-shadow: 0 0 0 $input-color;
+	}
+
+	// Customize the `:focus` state to imitate native WebKit styles.
+	@include form-control-focus($ignore-warning: true);
+
+	// Placeholder
+	&::placeholder {
+		color: $input-placeholder-color;
+		// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+		opacity: 1;
+	}
+
+	// Disabled and read-only inputs
+	//
+	// HTML5 says that controls under a fieldset > legend:first-child won't be
+	// disabled if the fieldset is disabled. Due to implementation difficulty, we
+	// don't honor that edge case; we style them as disabled anyway.
+	&:disabled,
+	&[readonly] {
+		background-color: $input-disabled-bg;
+		// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+		opacity: 1;
+	}
 }
 
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
-  &.form-control {
-    appearance: none; // Fix appearance for date inputs in Safari
-  }
+	&.form-control {
+		appearance: none; // Fix appearance for date inputs in Safari
+	}
 }
 
 select.form-control {
-  &:focus::-ms-value {
-    // Suppress the nested default white text on blue background highlight given to
-    // the selected option text when the (still closed) <select> receives focus
-    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
-    // match the appearance of the native widget.
-    // See https://github.com/twbs/bootstrap/issues/19398.
-    color: $input-color;
-    background-color: $input-bg;
-  }
+	&:focus::-ms-value {
+		// Suppress the nested default white text on blue background highlight given to
+		// the selected option text when the (still closed) <select> receives focus
+		// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
+		// match the appearance of the native widget.
+		// See https://github.com/twbs/bootstrap/issues/19398.
+		color: $input-color;
+		background-color: $input-bg;
+	}
 }
 
 // Make file inputs better match text inputs by forcing them to new lines.
 .form-control-file,
 .form-control-range {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 }
 
-
 //
 // Labels
 //
@@ -95,54 +94,52 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label (or legend)
 // text to align with the form controls.
 .col-form-label {
-  padding-top: add($input-padding-y, $input-border-width);
-  padding-bottom: add($input-padding-y, $input-border-width);
-  margin-bottom: 0; // Override the `<label>/<legend>` default
-  @include font-size(inherit); // Override the `<legend>` default
-  line-height: $input-line-height;
-  margin-bottom: 15px;
+	padding-top: add($input-padding-y, $input-border-width);
+	padding-bottom: add($input-padding-y, $input-border-width);
+	margin-bottom: 0; // Override the `<label>/<legend>` default
+	@include font-size(inherit); // Override the `<legend>` default
+	line-height: $input-line-height;
+	margin-bottom: 15px;
 }
 
 .col-form-label-lg {
-  padding-top: add($input-padding-y-lg, $input-border-width);
-  padding-bottom: add($input-padding-y-lg, $input-border-width);
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
+	padding-top: add($input-padding-y-lg, $input-border-width);
+	padding-bottom: add($input-padding-y-lg, $input-border-width);
+	@include font-size($input-font-size-lg);
+	line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: add($input-padding-y-sm, $input-border-width);
-  padding-bottom: add($input-padding-y-sm, $input-border-width);
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
+	padding-top: add($input-padding-y-sm, $input-border-width);
+	padding-bottom: add($input-padding-y-sm, $input-border-width);
+	@include font-size($input-font-size-sm);
+	line-height: $input-line-height-sm;
 }
 
-
 // Readonly controls as plain text
 //
 // Apply class to a readonly input to make it appear like regular plain
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y 0;
-  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  @include font-size($input-font-size);
-  line-height: $input-line-height;
-  color: $input-plaintext-color;
-  background-color: transparent;
-  border: solid transparent;
-  border-width: $input-border-width 0;
-
-  &.form-control-sm,
-  &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
-  }
+	display: block;
+	width: 100%;
+	padding: $input-padding-y 0;
+	margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+	@include font-size($input-font-size);
+	line-height: $input-line-height;
+	color: $input-plaintext-color;
+	background-color: transparent;
+	border: solid transparent;
+	border-width: $input-border-width 0;
+
+	&.form-control-sm,
+	&.form-control-lg {
+		padding-right: 0;
+		padding-left: 0;
+	}
 }
 
-
 // Form control sizing
 //
 // Build on `.form-control` with modifier classes to decrease or increase the
@@ -151,31 +148,31 @@ select.form-control {
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
 .form-control-sm {
-  height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
+	height: $input-height-sm;
+	padding: $input-padding-y-sm $input-padding-x-sm;
+	@include font-size($input-font-size-sm);
+	line-height: $input-line-height-sm;
+	@include border-radius($input-border-radius-sm);
 }
 
 .form-control-lg {
-  height: $input-height-lg;
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-  @include border-radius($input-border-radius-lg);
+	height: $input-height-lg;
+	padding: $input-padding-y-lg $input-padding-x-lg;
+	@include font-size($input-font-size-lg);
+	line-height: $input-line-height-lg;
+	@include border-radius($input-border-radius-lg);
 }
 
 // stylelint-disable-next-line no-duplicate-selectors
 select.form-control {
-  &[size],
-  &[multiple] {
-    height: auto;
-  }
+	&[size],
+	&[multiple] {
+		height: auto;
+	}
 }
 
 textarea.form-control {
-  height: auto;
+	height: auto;
 }
 
 // Form groups
@@ -184,75 +181,72 @@ textarea.form-control {
 // horizontal forms, use the predefined grid classes.
 
 .form-group {
-  margin-bottom: $form-group-margin-bottom;
+	margin-bottom: $form-group-margin-bottom;
 }
 
 .form-text {
-  display: block;
-  margin-top: $form-text-margin-top;
+	display: block;
+	margin-top: $form-text-margin-top;
 }
 
-
 // Form grid
 //
 // Special replacement for our grid system's `.row` for tighter form layouts.
 
 .form-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -$form-grid-gutter-width / 2;
-  margin-left: -$form-grid-gutter-width / 2;
-
-  > .col,
-  > [class*="col-"] {
-    padding-right: $form-grid-gutter-width / 2;
-    padding-left: $form-grid-gutter-width / 2;
-  }
+	display: flex;
+	flex-wrap: wrap;
+	margin-right: -$form-grid-gutter-width / 2;
+	margin-left: -$form-grid-gutter-width / 2;
+
+	> .col,
+	> [class*="col-"] {
+		padding-right: $form-grid-gutter-width / 2;
+		padding-left: $form-grid-gutter-width / 2;
+	}
 }
 
-
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
 
 .form-check {
-  position: relative;
-  display: block;
-  padding-left: $form-check-input-gutter;
+	position: relative;
+	display: block;
+	padding-left: $form-check-input-gutter;
 }
 
 .form-check-input {
-  position: absolute;
-  margin-top: $form-check-input-margin-y;
-  margin-left: -$form-check-input-gutter;
-
-  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
-  &[disabled] ~ .form-check-label,
-  &:disabled ~ .form-check-label {
-    color: $text-muted;
-  }
+	position: absolute;
+	margin-top: $form-check-input-margin-y;
+	margin-left: -$form-check-input-gutter;
+
+	// Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
+	&[disabled] ~ .form-check-label,
+	&:disabled ~ .form-check-label {
+		color: $text-muted;
+	}
 }
 
 .form-check-label {
-  margin-bottom: 0; // Override default `<label>` bottom margin
+	margin-bottom: 0; // Override default `<label>` bottom margin
 }
 
 .form-check-inline {
-  display: inline-flex;
-  align-items: center;
-  padding-left: 0; // Override base .form-check
-  margin-right: $form-check-inline-margin-x;
-
-  // Undo .form-check-input defaults and add some `margin-right`.
-  .form-check-input {
-    position: static;
-    margin-top: 0;
-    margin-right: $form-check-inline-input-margin-x;
-    margin-left: 0;
-  }
+	display: inline-flex;
+	align-items: center;
+	padding-left: 0; // Override base .form-check
+	margin-right: $form-check-inline-margin-x;
+
+	// Undo .form-check-input defaults and add some `margin-right`.
+	.form-check-input {
+		position: static;
+		margin-top: 0;
+		margin-right: $form-check-inline-input-margin-x;
+		margin-left: 0;
+	}
 }
 
-
 // Form validation
 //
 // Provide feedback to users when form field values are valid or invalid. Works
@@ -261,7 +255,7 @@ textarea.form-control {
 // server side validation.
 
 @each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+	@include form-validation-state($state, map-get($data, color), map-get($data, icon));
 }
 
 // Inline forms
@@ -274,75 +268,94 @@ textarea.form-control {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
-
-  // Because we use flex, the initial sizing of checkboxes is collapsed and
-  // doesn't occupy the full-width (which is what we want for xs grid tier),
-  // so we force that here.
-  .form-check {
-    width: 100%;
-  }
-
-  // Kick in the inline
-  @include media-breakpoint-up(sm) {
-    label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 0;
-    }
-
-    // Inline-block all the things for "inline"
-    .form-group {
-      display: flex;
-      flex: 0 0 auto;
-      flex-flow: row wrap;
-      align-items: center;
-      margin-bottom: 0;
-    }
-
-    // Allow folks to *not* use `.form-group`
-    .form-control {
-      display: inline-block;
-      width: auto; // Prevent labels from stacking above inputs in `.form-group`
-      vertical-align: middle;
-    }
-
-    // Make static controls behave like regular ones
-    .form-control-plaintext {
-      display: inline-block;
-    }
-
-    .input-group,
-    .custom-select {
-      width: auto;
-    }
-
-    // Remove default margin on radios/checkboxes that were used for stacking, and
-    // then undo the floating of radios and checkboxes to match.
-    .form-check {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: auto;
-      padding-left: 0;
-    }
-    .form-check-input {
-      position: relative;
-      flex-shrink: 0;
-      margin-top: 0;
-      margin-right: $form-check-input-margin-x;
-      margin-left: 0;
-    }
-
-    .custom-control {
-      align-items: center;
-      justify-content: center;
-    }
-    .custom-control-label {
-      margin-bottom: 0;
-    }
-  }
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
+
+	// Because we use flex, the initial sizing of checkboxes is collapsed and
+	// doesn't occupy the full-width (which is what we want for xs grid tier),
+	// so we force that here.
+	.form-check {
+		width: 100%;
+	}
+
+	// Kick in the inline
+	@include media-breakpoint-up(sm) {
+		label {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 0;
+		}
+
+		// Inline-block all the things for "inline"
+		.form-group {
+			display: flex;
+			flex: 0 0 auto;
+			flex-flow: row wrap;
+			align-items: center;
+			margin-bottom: 0;
+		}
+
+		// Allow folks to *not* use `.form-group`
+		.form-control {
+			display: inline-block;
+			width: auto; // Prevent labels from stacking above inputs in `.form-group`
+			vertical-align: middle;
+		}
+
+		// Make static controls behave like regular ones
+		.form-control-plaintext {
+			display: inline-block;
+		}
+
+		.input-group,
+		.custom-select {
+			width: auto;
+		}
+
+		// Remove default margin on radios/checkboxes that were used for stacking, and
+		// then undo the floating of radios and checkboxes to match.
+		.form-check {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: auto;
+			padding-left: 0;
+		}
+		.form-check-input {
+			position: relative;
+			flex-shrink: 0;
+			margin-top: 0;
+			margin-right: $form-check-input-margin-x;
+			margin-left: 0;
+		}
+
+		.custom-control {
+			align-items: center;
+			justify-content: center;
+		}
+		.custom-control-label {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.uk-form-tanggal-1 {
+	position: relative;
+	width: 47%;
+	float: left;
+}
+.uk-form-tanggal-2 {
+	position: relative;
+
+	width: 47%;
+	float: right;
 }
+// .heading-penjadwalan-2{
+//   margin: 20px;
+//   margin-top:-20px;
+//   margin-right: 20px;
+//   padding: 20px;
+//   background-color: #E3F0FF;
+// }