Improve pin

src/app/shared/pin/pin.page.scss

@@ -1,3 +1,22 @@
+@import '~src/function.scss';
+
+.div-top-header{
+  margin: 0 em(20px);
+  padding-top: em(15px);
+  border: 0!important;
+}
+
+.div-logo{
+  background: transparent;
+  width: em(140px);
+  justify-content: center;
+  display: flex;
+}
+.div-logo img{
+  width: 100%;
+  margin: 0px auto;
+}
+
 :host{
     text-align: center;
     align-items: center;
@@ -6,23 +25,23 @@
     background-image: url("/assets/background/auth.svg");
     background-size: 686px 674px;
     background-position: center;
-    background-position-y: 0px;
+    background-position-y: 78px;
     background-repeat: no-repeat;
 }
 
 
 .circle{
     color: white;
-    width: 85px;
-    height: 85px;
+    width: 70px;
+    height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19pt;
     background: #44b5ea;
     border-radius: 56px;
-    margin-left: 10px;
-    margin-bottom: 10px;
+    margin-left: 30px;
+    margin-bottom: 15px;
 }
 
 .title{
@@ -31,5 +50,26 @@
 
 .terminal {
     padding-top: 112px;
-    margin-left: -9px;
+    margin-left: -30px;
+}
+
+.clear{
+    color: #44b5ea;
+    font-size: 12pt;
+}
+.dot-active{
+    background: #44b5ea;
+}
+
+.dot{
+    width: 25px;
+    height: 25px;
+    margin: 0 10px 0 0;
+    border: 3px solid #44b5ea;
+    box-sizing: border-box;
+    border-radius: 50px;
+    -webkit-border-radius: 50px;
+    -moz-border-radius: 50px;
+    -ms-border-radius: 50px;
+    -o-border-radius: 50px;
 }