.ukuranhuruf {
  font-size: 60%;
  }

.hurufkecil {
    font-size: 40%;
    }
  
    
.btn_style{
  font-size: 15px;
  border: 1px solid #cecece;
  border-radius: 10px;
  padding: 5px  25px;
  box-shadow: 12px 12px 46px rgba(0, 0, 0, 0.4);
  color: white;
}
.btn_red{
  background-color: red;
}
.btn_green{
  background-color: green;
}
.btn_maroon{
  background-color: #b03060;
  color: #7CFC00;
}
.btn_blue{
  background-color: #4682B4;
}
.btn_style:hover{
  border: 1px solid #b1b1b1;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
  background-color: #ADD8E6;
  box-shadow:0 0 15px 13px white;
  color: midnightblue;
}



.cbtn_style{
  font-size: 15px;
  border: 1px solid #cecece;
  border-radius: 3px;
  padding: 5px 10px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4) ;
  color: rgb(255, 255, 255);
}
.cbtn_red{
  background-color: red;
}
.cbtn_green{
  background-color: green;
}
.cbtn_brown{
  background-color: #a52a2a;
}
.cbtn_maroon{
  background-color: #b03060;
}
.cbtn_orange{
  background-color: #ffa500;
}
.cbtn_pale{
  background-color: #db7093;
}
.cbtn_blue{
  background-color: #4682B4;
}
.cbtn_white{
  background-color: #f4f6f8;
}
.cbtn_style:hover{
  border: 1px solid #b1b1b1;
  box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.5);
  background-color: #7FFFD4;
  color: blue;
  box-shadow:0 0 15px 13px lightskyblue;

}





.gplus-transaction {
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  overflow: visible !important;
  width: 150px;
    height: 30px;
}
.gplus-transaction:before,
.gplus-transaction:after {
  content: "TRANSACTION";
    position: absolute;
  width:  100%;
    height: 100%;
    left: 0;
  top: 0;
  transform-origin: 5% 5% -15px;
  transition: all 0.3s ease-out;
}
.gplus-transaction:before {
  z-index: 1;
  background-color: lawngreen;
}
.gplus-transaction:after {
  background-color: green;
  color: #FFFFFF;
  transform: rotateX(-90deg);
}
/* EFFECT */
.gplus-transaction:hover:after {
  z-index: 2;
  transform: rotateX(0);
}
.gplus-transaction:hover:before {
  transform: rotateX(180deg);
}


.gplus-tables {
  perspective: 700px;
  -webkit-transform-style: preserve-3d;
  overflow: visible !important;
  width: 150px;
    height: 30px;
}
.gplus-tables:before,
.gplus-tables:after {
  content: "TABLES";
    position: absolute;
  width: 100%;
    height: 100%;
    left: 0;
  top: 0;
  transform-origin: 5% 5% -15px;
  transition: all 0.3s ease-out;
}
.gplus-tables:before {
  z-index: 1;
  background-color: lightcyan;
}
.gplus-tables:after {
  background-color: blue;
  color: #FFFFFF;
  transform: rotateX(-90deg);
}
/* EFFECT */
.gplus-tables:hover:after {
  z-index: 2;
  transform: rotateX(0);
}
.gplus-tables:hover:before {
  transform: rotateX(180deg);
}


.gplus-utility {
  perspective: 700px;
  -webkit-transform-style: preserve-3d;
  overflow: visible !important;
  width: 150px;
    height: 30px;
}
.gplus-utility:before,
.gplus-utility:after {
  content: "UTILITY";
    position: absolute;
  width: 100%;
    height: 100%;
    left: 0;
  top: 0;
  transform-origin: 5% 5% -15px;
  transition: all 0.3s ease-out;
}
.gplus-utility:before {
  z-index: 1;
  background-color: lemonchiffon;
}
.gplus-utility:after {
  background-color: yellow;
  color: blue;
  transform: rotateX(-90deg);
}
/* EFFECT */
.gplus-utility:hover:after {
  z-index: 2;
  transform: rotateX(0);
}
.gplus-utility:hover:before {
  transform: rotateX(180deg);
}




.gplus-reports {
  perspective: 700px;
  -webkit-transform-style: preserve-3d;
  overflow: visible !important;
  width: 150px;
    height: 30px;
}
.gplus-reports:before,
.gplus-reports:after {
  content: "REPORTS";
    position: absolute;
  width: 100%;
    height: 100%;
    left: 0;
  top: 0;
  transform-origin: 5% 5% -15px;
  transition: all 0.3s ease-out;
}
.gplus-reports:before {
  z-index: 1;
  background-color: lightpink;
}
.gplus-reports:after {
  background-color: red;
  color: #FFFFFF;
  transform: rotateX(-90deg);
}
/* EFFECT */
.gplus-reports:hover:after {
  z-index: 2;
  transform: rotateX(0);
}
.gplus-reports:hover:before {
  transform: rotateX(180deg);
}



.gplus-history {
  perspective: 700px;
  -webkit-transform-style: preserve-3d;
  overflow: visible !important;
  width: 150px;
    height: 30px;
}
.gplus-history:before,
.gplus-history:after {
  content: "REPORTS";
    position: absolute;
  width: 100%;
    height: 100%;
    left: 0;
  top: 0;
  transform-origin: 5% 5% -15px;
  transition: all 0.3s ease-out;
}
.gplus-history:before {
  z-index: 1;
  background-color: mistyrose;
}
.gplus-history:after {
  background-color: magenta;
  color: #FFFFFF;
  transform: rotateX(-90deg);
}
/* EFFECT */
.gplus-history:hover:after {
  z-index: 2;
  transform: rotateX(0);
}
.gplus-history:hover:before {
  transform: rotateX(180deg);
}



.gplus-home {
  perspective: 700px;
  -webkit-transform-style: preserve-3d;
  overflow: visible !important;
  width: 150px;
    height: 30px;
}
.gplus-home:before,
.gplus-home:after {
  content: "Home";
    position: absolute;
  width: 100%;
    height: 100%;
    left: 0;
  top: 0;
  transform-origin: 5% 5% -15px;
  transition: all 0.3s ease-out;
}
.gplus-home:before {
  z-index: 1;
  background-color: red;
  color:white;
}
.gplus-home:after {
  background-color: lemonchiffon;
  color: blue;
  transform: rotateX(-90deg);

}
/* EFFECT */
.gplus-home:hover:after {
  z-index: 2;
  transform: rotateX(0);
}
.gplus-home:hover:before {
  transform: rotateX(180deg);
}

.styled-select {
  width: 100%px;
  height: 30px;
  margin-left: 10px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-select:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-select select {
  width: 100%px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-select select {
  color: blue;
}



<style>

.styled-select2 {

  height: 28px;
  margin-left: 10px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-select2:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-select2 select {

  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-select2 select {
  color: blue;
}


.styled-kurs {
  width: 98%px;
  height: 28px;
  margin-left: 10px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-kurs:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-kurs select {
  width: 98%px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-kurs select {
  color: blue;
}


.styled-wilayah {
  width: 98%;
  height: 30px;
  margin-left: 10px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-wilayah:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-wilayah select {
  width: 98%;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-wilayah select {
  color: blue;
}


.styled-tps {
  width: 300px;
  height: 30px;
  margin-left: 10px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-tps:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-tps select {
  width: 300px;
  padding: 10px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-tps select {
  color: blue;
}




.styled-kawin {
  width: 160px;
  height: 30px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-kawin:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-kawin select {
  width: 160px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-kawin select {
  color: blue;
}



.styled-pendidikan {
  width: 120px;
  height: 30px;
  overflow: hidden;
  background: no-repeat right #F0F8FF;
  border: 1px solid #000000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.styled-pendidikan:hover{
  box-shadow:0 0 5px 3px blue;
}
.styled-pendidikan select {
  width: 120px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}

.styled-pendidikan select {
  color: blue;
}

.wrapper {
    display:flex;
    width:320px;
    height:120px;
    margin-top: 5px;
    margin-left: 5px;
    background:#eee;
}
.lingkaran {
    background: #e51e63;
    border-radius: 50%;
    box-shadow: 0px 5px 10px -2px #e51e63;
    height: 50px;
    margin: 0 auto;
    width: 50px;
}



table {
	border: 1px solid black;
	width: 100%;
	margin: 20px;
	height: 35px;
	}
th {
	border: 1px solid blue;
	color: magenta;
	}
td {
	border: 1px solid blue;
	padding: 2px;
}

</style>