/* Add here all your CSS customizations */

/*Buttons*/
a,
.btn-link-purple {
/*	color: #7eb73d;
26 nov 2020
*/
color: #056F3F;
}

a:hover,
a:focus,
.btn-link-purple:hover,
.btn-link-purple:focus {
/*	color: #7eb73d;
26 nov 2020 : Esa*/
	color: #056F3F;
}

body .btn-purple {
	border-radius: 3px;
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	/*background-color: #7eb73d;
	border-color: #7eb73d;
	26 NOV 2020 :Esa 
	*/

	background-color: #056F3F;
	border-color: #056F3F;
	font-weight : 400;
}

body .btn-purple:hover {
	/*border-color: #7eb73d !important;
	background-color: #7eb73d;
	26 nov 2020
	*/

	border-color: #056F3F !important;
	background-color: #056F3F;
}

body .btn-purple:active,
body .btn-purple:focus {
	/*border-color: #7eb73d !important;
	background-color: #7eb73d;
	26 nov 2020 : Esa
	*/

	border-color: #056F3F !important;
	background-color: #056F3F;
}

body .btn-purple[disabled] {
	/*border-color: #7eb73d !important;
	background-color: #7eb73d;
    26 nov 2020 :Esa
	*/
	border-color: #056F3F !important;
	background-color: #056F3F;
}

.btn-purple:hover, .btn-purple:focus, .btn-purple.focus {
	color: #fff;
	/*background-color: #7eb73d !important;
	border-color: #7eb73d !important;
26 nov 2020 : Esa
	*/
	background-color: #056F3F !important;
	border-color: #056F3F !important;
	text-decoration: none;
}

.btn-lg-purple,
.btn-group-lg > .btn {
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.33;
	border-radius: 6px;
}

/*TEKS SIGN?*/
.teks-sign{
	/*
	font-family: "Segoe UI", "Helvetica Neue", sans-serif;*/
	font-family: "Poppins", "Helvetica Neue", sans-serif;
	font-size : 28px;
	font-color : #c4cdd5;
	font-weight : 600;
}

/*UKURAN LOGO SIGN*/
.size-logo {
	width: 120px;
    height: 120px;
}
.size-font-logo{
	font-size: 20px;
	text-align:center;
	margin-bottom: 34px;
    color: black;
    font-weight: 600;
}

.border-form-input-green:focus {
  /*border-color: #7eb73d;
 26 nov 2020 :Esa 
  */

  border-color: #056F3F;
  border-width: 2px;
  -webkit-box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.075), 0 0 5px #c0a16b;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075), 0 0 0px #c0a16b;
}

/*posisi title purple*/
.posisi-title-purple {
	padding-top: 30px;
	text-align: center;
}


.form-panel-body-purple{
	background: #fdfdfd;
	padding: 15px 15px 15px 15px;
	margin-left: 150px; 
	margin-right: 150px;
}

.body-sign .panel-sign .panel-title-sign .title-panel-purple {
	/*background-color: #0088cc;*/
	/*
	font-family: "Segoe UI", "Helvetica Neue", sans-serif;
	26 nov 2020 :Esa
	*/
	font-family: "Poppins", "Helvetica Neue", sans-serif;
	font-size : 28px;
	font-color : black;
	font-weight : 640;
	margin-top: 0px;
}
.title-login {
	/*background-color: #0088cc;*/
	/*
	font-family: "Segoe UI", "Helvetica Neue", sans-serif;
	26 nov 2020 :Esa
	*/
	font-family: "Poppins", "Helvetica Neue", sans-serif;
	font-size : 28px;
	font-color : black;
	font-weight : 640;
	margin-top: 0px;
}


.body-register {
	background: #f4f6f8;
	width: 100%;
	/*padding-left: 20px;
	padding-right: 20px;*/
}

.body-sign-purple {
	display: table;
	height: 100vh;
	margin: 0 auto;
	max-width: 800px;
	padding: 0 0px;
	width: 100%;
}

.body-sign-purple .panel-sign-purple {
	margin-top: 30px;
	background: #ffffff;
	height: 500px;
}

.body-sign-purple .panel-sign-purple .panel-body-purple {
	background-color: #f4f6f8;
	padding: 50px 33px 15px;
}

.body-sign-purple .panel-sign-purple .panel-body-purple-step {
	background-color: #ffffff;
	padding: 6px 33px 15px;
}

.circle-purple{
	display: inline-block;
	margin-right: 1.4rem;
	/*align-items: center;*/
	width: .8rem;
	height: .8rem;
	background: #637381;
	border-radius: 50%;
}

.circle-purple-grey{
	background: #dfe3e8;
	display: inline-block;
	margin-right: 1.4rem;
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
}

.body-sign .center-sign-purple {
	/*display: table-cell;*/
	padding-top: 20px;
	vertical-align: middle;
}

.login-card {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: calc(404px + 4rem);
    min-height: calc(60vh - 5rem);
    margin: 0px auto;
    padding: 0 2rem;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

/*BUTTON OUTLINE PURPLE*/
.btn-outline-grey {
	/*
  color: #212b36;
  background-color: transparent;
  background-image: none;
  border-color: #c4cdd5;
  border-radius: 3px;
  font-size: 14px;*/
  color: #222222 !important;
  background-color: transparent;
  background-image: none;
  border-color: #222222;
  border-radius: 4px;
  font-size: 14px;

}

.btn-outline-hide {
	color: #eb2f2f !important;
	background-color: transparent;
	background-image: none;
	border-color: #222222;
	border-radius: 4px;
	font-size: 14px;
}

.btn-outline-hide:hover {
	color: white !important;
	background-color: #eb2f2f;
	background-image: none;
	border-color: #eb2f2f;
	border-radius: 4px;
	font-size: 14px;
}

.btn-outline-hide:focus {
	color: #eb2f2f !important;
	background-color: transparent;
	background-image: none;
	border-color: #222222;
	border-radius: 4px;
	font-size: 14px;
}

.btn-outline-edit {
	color: #222222 !important;
	background-color: transparent;
	background-image: none;
	border-color: #222222;
	border-radius: 4px;
	font-size: 14px;
  }
  .btn-outline-del {
	color: #222222 !important;
	background-color: transparent;
	background-image: none;
	border-color: #222222;
	border-radius: 4px;
	font-size: 14px;
  }
  .btn-outline-lock {
	color: #056f3f !important;
	background-color: transparent;
	background-image: none;
	border-color: #056f3f;
	border-radius: 4px;
	font-size: 14px;
  }
  .btn-outline-lock:hover {
	color: white !important;
	background-color: #056f3f;
	background-image: none;
	border-color: #056f3f;
	border-radius: 4px;
	font-size: 14px;
  }
  .btn-outline-del:hover {
	color: white !important;
	background-color: #EB2F2F;
	background-image: none;
	border-color: #EB2F2F;
	border-radius: 4px;
	font-size: 14px;
  }
  .btn-outline-edit:hover {
	color: white !important;
	background-color: #2760FE;
	background-image: none;
	border-color: #2760FE;
	border-radius: 4px;
	font-size: 14px;
  }
  .btn-outline-grey:hover {
	color: white !important;
	background-color: #222222;
	background-image: none;
	border-color: #222222;
	border-radius: 4px;
	font-size: 14px;
  }

/*END BUTTON OUTLINE PURPLE*/

/*ALRET PURPLE*/
.alert-purple{
	color: #212529;
	background-color: white;
	border-color: white;
	width: 100%; 
	border-radius: 0px; 
	position: fixed; 
	z-index: 1040; 
	margin-bottom: 0px; 
	box-shadow: 0 0.1px 0.1px rgba(20, 20, 93, 0.2), 0 1px 1px rgba(0, 0, 0, 0.17);
	height: 57px;
	margin-left: -283px;
	margin-top: -143px;
}
/*END ALRET PURPLE*/

/*BADGE*/
.badge-purple {
  color: #000000;
  /*background-color: rgba(203, 210, 246, 0.5);*/
}

.badge-purple[href]:hover,
.badge-purple[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #324cdd;
}
/*END BADGE*/

/* BINTANG */
div.modal-review__rating-order-wrap>span {
  display: block;
  float: left;
  height: 30px;
  width: 30px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='30'%3E%3Cpath%20d='M17.5,12.5h-8.5l6.8,5-2.6,8.1,6.8-5,6.8,5-2.6-8.1,6.8-5h-8.5l-2.6-8.1z'%20fill='%23c0c0c0'%20stroke='%23c0c0c0'/%3E%3Cpath%20d='M57.5,12.5h-8.5l6.8,5-2.6,8.1,6.8-5,6.8,5-2.6-8.1,6.8-5h-8.5l-2.6-8.1z'%20fill='%23ffd83d'%20stroke='%23eac328'/%3E%3C/svg%3E");
  background-position: 0px 0px;
  /* gray star */
}

/* Persistent state */

div.modal-review__rating-order-wrap[data-rating-value]>span {
  background-position: -40px 0px;
  /* gold star */
}

div.modal-review__rating-order-wrap>span.active~span {
  background-position: 0px 0px;
  /* gray star */
}
/* END BINTANG */

/*RATING BINTANG*/
.bintang 
{
	width: 100px;
	border: none;
	padding-left: 5px;
}

.starImg 
{
	width: 100px;
	height: 21px;
	display: block;
	background: url(http://1.bp.blogspot.com/-Sp-iHFztZdc/UVD89O9oM1I/AAAAAAAAEU0/Xh-FBDaWyJY/s1600/star.png) 0 0 no-repeat;
}

.star-0 {background-position: -100px -0;}
.star-5 {background-position: -81px -21px;}
.star-10 {background-position: -81px 0;}
.star-15 {background-position: -61px -21px;}
.star-20 {background-position: -60px 0;}
.star-25 {background-position: -40px -21px;}
.star-30 {background-position: -40px 0;}
.star-35 {background-position: -21px -21px;}
.star-40 {background-position: -21px 0;}
.star-45 {background-position: 0 -21px;}
.star-50 {background-position: 0 0;}
/*END RATING BINTANG*/

/*ZEBRA TABLE*/
.zebra-tabel
{ /* CSS Tabel */
	border-collapse: collapse;
}
.zebra-tabel th
{ /* CSS Tabel Header */
	font-size: 14px;
	text-align: center;
	background-color: #ffffff;
	padding-bottom: 10px;
	padding-top: 10px;
}
.zebra-tabel td
{ /* CSS Tabel Data */
	border: 1px solid #928f87;
	font-size: 14px;
	padding-bottom: 10px;
	padding-top: 10px;
}
.zebra-tabel tr:nth-child(even)
{ /* style td dengan warna putih agak ke abu
abuan*/
	background: #ffffff;
}
.zebra-tabel tr:nth-child(odd)
{/* style td dengan warna orange*/
	background: #ffffff;
}
/*END ZEBRA TABLE*/

/*EFEK HOVER TOMBOL IMAGE ZOOM*/
.zoom-img {
  transition: transform .2s;
  margin: 0 auto;
}

.zoom-img:hover {
  transform: scale(1.005); 
}
/*END EFEK HOVER TOMBOL IMAGE ZOOM */

/*POSISI TENGAH MIDDLE*/
.posisi-tengah 
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.posisi-tengah:hover,focus
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
/*END POSISI TENGAH MIDDLE*/

/*EFEK HOVER TOMBOL IMAGE ZOOM*/
.zoom-img {
  transition: transform .2s;
  margin: 0 auto;
}

.zoom-img:hover {
  transform: scale(1.005); 
}
/*END EFEK HOVER TOMBOL IMAGE ZOOM */

/*FONT MENU DI SIDEBAR*/
.link-navbars-putih:hover {
  background-color: transparent;
  border-radius: 0px!important;
  width: 100%;
  border-right: 3px solid #5562C1 !important;
}

.link-navbars-putih:active {
  background-color: transparent;
  border-radius: 0px!important;
  opacity: 0.4;
}

.menu-sidebar{
	margin-top: 5px;
	font-size: 14px;
	font-weight: 400;
	color: #31373d;
}

.btn-outline-putih {
  color: #212b36;
  background-color: transparent;
  background-image: none;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400;
  height: 56px;
}

.btn-outline-putih:hover {
  background-color: transparent;
  box-shadow: none !important;
}

.btn-outline-putih:active {
  background-color: transparent;
  border-bottom: 3px solid #5562C1 !important;
  box-shadow: none !important;
}

.dropdown-items {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-size: 14px;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-items:hover,
.dropdown-items:focus {
  color: #ffffff;
  text-decoration: none;
  background-color: #5e72e4;
}

.dropdown-items.active,
.dropdown-items:active {
  color: #212529;
  text-decoration: none;
  background-color: transparent;
}

.dropdown-items.disabled,
.dropdown-items:disabled {
  color: #8898aa;
  background-color: transparent;
}
/*END FONT MENU DI SIDEBAR*/

/*NAVBAR TOP*/
.navbar-atas {
	top: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: hidden;
	width: 280px;
	height: 56px;
	max-width: 250px;
	position: fixed;
	border-right: 1px solid #dfe3e8;
	background-color: #ffffff;    
	z-index: 2;
}
/*END NAVBAR TOP*/

/*TAMBAHAN */
/*warna orange*/
.steps {
	margin: -10px;
	padding: 0;
	overflow: hidden;
}

.steps li {
	float: left;
	margin-left: 0;
	width: 100px; /* 100 / number of steps */
	height: 35px; /* total height */
	list-style-type: none;
	padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
	border-right: 3px solid white; /* width: gap between arrows, color: background of document */
	position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.steps li:first-child {
	border-radius: 3px;
	padding-left: 5px;
	margin-bottom: 20px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.steps li:nth-child(n+2)::before {
	position: absolute;
	top:0;
	left:0;
	display: block;
	border-left: 25px solid white; /* width: arrow width, color: background of document */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width: 0;
	height: 0;
	content: " ";
}
/* colored arrow to the right */
.steps li::after {
	z-index: 1; /* need to bring this above the next item */
	position: absolute;
	top: 0;
	right: -18px; /* arrow width (negated) */
	display: block;
	border-left: 18px solid #ff9800; /* width: arrow width */
	border-top: 17px solid transparent; /* width: half height */
	border-bottom: 18px solid transparent; /* width: half height */
	width:0;
	height:0;
	content: " ";
}

.steps li { background-color: #ff9800; }
.steps li::after { border-left-color: #ff9800; }

/* Current */
.steps li.current { background-color: #C36615; }
.steps li.current::after { border-left-color: #C36615; }

/* Following */
.steps li.current ~ li { background-color: #EBEBEB; }
.steps li.current ~ li::after { border-left-color: #EBEBEB; }
/*end warna orange*/

/*warna hijau*/
.stepsGreen {
	margin: -10px;
	padding: 0;
	overflow: hidden;
}

.stepsGreen li {
	float: left;
	margin-left: 0;
	width: 100px; /* 100 / number of steps */
	height: 35px; /* total height */
	list-style-type: none;
	padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
	border-right: 3px solid white; /* width: gap between arrows, color: background of document */
	position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.stepsGreen li:first-child {
	border-radius: 3px;
	padding-left: 5px;
	margin-bottom: 20px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.stepsGreen li:nth-child(n+2)::before {
	position: absolute;
	top:0;
	left:0;
	display: block;
	border-left: 25px solid white; /* width: arrow width, color: background of document */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width: 0;
	height: 0;
	content: " ";
}
/* colored arrow to the right */
.stepsGreen li::after {
	z-index: 1; /* need to bring this above the next item */
	position: absolute;
	top: 0;
	right: -18px; /* arrow width (negated) */
	display: block;
	border-left: 18px solid #50b83c; /* width: arrow width */
	border-top: 17px solid transparent; /* width: half height */
	border-bottom: 18px solid transparent; /* width: half height */
	width:0;
	height:0;
	content: " ";
}

.stepsGreen li { background-color: #50b83c; }
.stepsGreen li::after { border-left-color: #50b83c ; }

/* Current */
.stepsGreen li.current { background-color: #C36615; }
.stepsGreen li.current::after { border-left-color: #C36615; }

/* Following */
.stepsGreen li.current ~ li { background-color: #EBEBEB; }
.stepsGreen li.current ~ li::after { border-left-color: #EBEBEB; }

/*end warna hijau*/

/*warna Blue*/
.stepsBlue {
	margin: -10px;
	padding: 0;
	overflow: hidden;
}

.stepsBlue li {
	float: left;
	margin-left: 0;
	width: 130px;
	height: 35px; /* total height */
	list-style-type: none;
	display: inline-block;
    text-align: center;
	padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
	border-right: 3px solid white; /* width: gap between arrows, color: background of document */
	position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.stepsBlue li:first-child {
	border-radius: 3px;
	padding-left: 5px;
	margin-bottom: 20px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.stepsBlue li:nth-child(n+2)::before {
	position: absolute;
	top:0;
	left:0;
	display: block;
	border-left: 25px solid white; /* width: arrow width, color: background of document */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width: 0;
	height: 0;
	content: " ";
}
/* colored arrow to the right */
.stepsBlue li::after {
	z-index: 1; /* need to bring this above the next item */
	position: absolute;
	top: 0;
	right: -18px; /* arrow width (negated) */
	display: block;
	border-left: 18px solid #3372dd; /* width: arrow width */
	border-top: 17px solid transparent; /* width: half height */
	border-bottom: 18px solid transparent; /* width: half height */
	width:0;
	height:0;
	content: " ";
}

.stepsBlue li { background-color: #3372dd; }
.stepsBlue li::after { border-left-color: #3372dd ; }

/* Current */
.stepsBlue li.current { background-color: #C36615; }
.stepsBlue li.current::after { border-left-color: #C36615; }

/* Following */
.stepsBlue li.current ~ li { background-color: #EBEBEB; }
.stepsBlue li.current ~ li::after { border-left-color: #EBEBEB; }
/*end warna blue*/

/*warna Red*/
.stepsRed {
	margin: -10px;
	padding: 0;
	overflow: hidden;
}

.stepsRed li {
	float: left;
	margin-left: 0;
	width: 130px;
	height: 35px; /* total height */
	list-style-type: none;
	display: inline-block;
    text-align: center;
	padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
	border-right: 3px solid white; /* width: gap between arrows, color: background of document */
	position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.stepsRed li:first-child {
	border-radius: 3px;
	padding-left: 5px;
	margin-bottom: 20px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.stepsRed li:nth-child(n+2)::before {
	position: absolute;
	top:0;
	left:0;
	display: block;
	border-left: 25px solid white; /* width: arrow width, color: background of document */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width: 0;
	height: 0;
	content: " ";
}
/* colored arrow to the right */
.stepsRed li::after {
	z-index: 1; /* need to bring this above the next item */
	position: absolute;
	top: 0;
	right: -18px; /* arrow width (negated) */
	display: block;
	border-left: 18px solid #eb2f2f; /* width: arrow width */
	border-top: 17px solid transparent; /* width: half height */
	border-bottom: 18px solid transparent; /* width: half height */
	width:0;
	height:0;
	content: " ";
}

.stepsRed li { background-color: #eb2f2f; }
.stepsRed li::after { border-left-color: #eb2f2f ; }

/* Current */
.stepsRed li.current { background-color: #C36615; }
.stepsRed li.current::after { border-left-color: #C36615; }

/* Following */
.stepsRed li.current ~ li { background-color: #EBEBEB; }
.stepsRed li.current ~ li::after { border-left-color: #EBEBEB; }
/*end warna abu abu*/

/*warna abu abu*/
.stepsGrey {
	margin: -10px;
	padding: 0;
	overflow: hidden;
}

.stepsGrey li {
	float: left;
	margin-left: 0;
	width: 150px; /* 100 / number of steps */
	height: 35px; /* total height */
	list-style-type: none;
	padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
	border-right: 3px solid white; /* width: gap between arrows, color: background of document */
	position: relative;
}
/* remove extra padding on the first object since it doesn't have an arrow to the left */
.stepsGrey li:first-child {
	border-radius: 3px;
	padding-left: 5px;
	margin-bottom: 20px;
}
/* white arrow to the left to "erase" background (starting from the 2nd object) */
.stepsGrey li:nth-child(n+2)::before {
	position: absolute;
	top:0;
	left:0;
	display: block;
	border-left: 25px solid white; /* width: arrow width, color: background of document */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width: 0;
	height: 0;
	content: " ";
}
/* colored arrow to the right */
.stepsGrey li::after {
	z-index: 1; /* need to bring this above the next item */
	position: absolute;
	top: 0;
	right: -18px; /* arrow width (negated) */
	display: block;
	border-left: 18px solid #b9a1de; /* width: arrow width */
	border-top: 17px solid transparent; /* width: half height */
	border-bottom: 18px solid transparent; /* width: half height */
	width:0;
	height:0;
	content: " ";
}

.stepsGrey li { background-color: #b9a1de; }
.stepsGrey li::after { border-left-color: #b9a1de ; }

/* Current */
.stepsGrey li.current { background-color: #C36615; }
.stepsGrey li.current::after { border-left-color: #C36615; }

/* Following */
.stepsGrey li.current ~ li { background-color: #EBEBEB; }
.stepsGrey li.current ~ li::after { border-left-color: #EBEBEB; }
/*end warna abu abu*/

/*bulatan hitam kecil*/
.circle-purple-black{
	background: #525f7f;
	display: inline-block;
	margin-right: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
}
/*END TAMBAHAN*/

/*garis vertical*/
.vertical-line {
	border-left: 1px solid #5562C1;
	height: auto;
	width: auto;
}
/*end garis vertical*/

/*RESPONSIVE*/
@media only screen and (max-width: 450px) {
	.btn-lg-purple,
	.btn-group-lg > .btn {
	  padding: 10px 16px;
	  font-size: 16px;
	  line-height: 1.33;
	  border-radius: 6px;
	  margin-top: -60px;
	}

}

@media only screen and (max-width: 500px) {
	.form-panel-body-purple {
		margin-left: 0px;
		margin-right: 0px;
	}

	.posisi-title-purple{
		padding-top: 0px;
	}
}

@media only screen and (max-width: 800px) {
	.body-sign-purple{
		background-color: #ffffff;
	}
}

@media (max-width: 575.98px) {
  .alert-text{
  	margin-left: 0px;
  }
  .alert-purple {
  	margin-top: -57px;
  	padding-left: 10px;
    padding-right: 10px;
    margin-left: 0px;
  }
}

@media (max-width: 767.98px) {
	.icon-navbar-putih {
        height: 42px;
        width: 30px;
        color: #9c9797;
    }

    .icon-navbar-putih:active {
        color: grey!important;
    }

    .link-atas{
    	margin-top: 50px;
    }

    .link-atas-gambar{
    	margin-top: 60px;
    }
}

@media (max-width: 768px) {
	.line-none {
    	display: none !important;
    }
}
/*END RESPONSIVE*/

.form-control-label {
	color: #565a5c;
	font-size: 16px;
}

.input-field label.error {
    position: inherit;
    text-align: left;
    color: #ef5350!important;
    font-size: 16px;
}

.input-field label.error-suspend {
	position: inherit;
    text-align: left;
    color: #ef5350!important;
    font-size: 16px;
}