Improve

src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss

@@ -0,0 +1,197 @@
+@import '~src/function.scss';
+.main-content{
+  background-color: #fff !important;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+}
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+}
+.color-red{
+  font-weight: 500;
+  color:#d30a0a !important;
+}
+.btn-size{
+  font-size: 18px !important;
+}
+.main-header{
+  display: flex;
+  font-family: Roboto;
+  background-color: #fff;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
+  .title-content{
+    display: flex;
+    justify-content: start !important;
+    align-items: flex-start !important;
+    border-radius: 0 !important;
+    }
+    .title{
+      width: fit-content;
+      height: auto;
+      font-size: 25px;
+      overflow: auto;
+      float: left;
+      padding-left: 5px;
+    }
+    .div-icon{
+      width: 40px !important;
+      font-size: 35px !important;
+      text-align: start !important;
+      padding: 1px;
+    }
+}
+ion-item-group{
+    margin: 15px;
+}
+ion-button{
+    display: block;
+    width: 80%;
+    margin: 20px auto;
+}
+
+.upper-content{
+  font-family: Roboto;
+  margin-top: 15px;
+  margin-left: 41px;
+  font-size: 18px;
+
+  .label{
+      border-radius: 20px;
+      background: #ffb703;
+      float: right;
+      padding: 5px 13.5px 5px 13.5px;
+      color: #fff;
+  }
+
+  .button-calendar-type ion-button{
+    height: 25px;
+  }
+  .content-details{
+    font-size: 17px;
+    .date{
+      color: #797979;
+    }
+  }
+}
+.middle-conten{
+ .middle-content p{
+    font-size: 16px;
+  }
+}
+.bottom-content{
+  //width: 360px;
+  margin: 0 auto;
+  
+  .bottom-content h3{
+    font-size: 16px;
+    margin: 0 0 0 10px;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 5px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attach-title-item{
+    font-size: 18px;
+    width: 100%;
+    color:#0d89d1;
+    padding-bottom: 5px;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
+  float: right;
+  font-size: 13px;
+  }
+}
+.aside-right{
+  padding: 30px 20px 0 20px !important;
+
+  .arrow-right{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+   
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+  }
+  .buttons{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .btn-ok, .btn-cancel, .btn-delete{
+      height: auto !important;
+      font-size: 16px !important;
+      font-weight: 600 !important;
+      width: 100% !important;
+      margin-bottom: 10px !important;
+      padding: 15px !important;
+    }
+  }
+  .solid {
+    display: block;
+    width: 90%;
+    border-top: 1px solid #ebebeb;
+    margin: 0 auto !important;
+    margin-bottom: 10px !important;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .content{
+    width: 100% !important;
+  }
+  .aside-right{
+    display: none;
+  }
+}
+@media only screen and (min-width: 801px) {
+  .div-icon{
+    display: none;
+  }
+  .content{
+    width: 65%;
+    border-right: 1px solid #d8d8d8;
+  }
+
+  .aside-right{
+    width: 35%;
+  }
+}
+
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
+  }
+  .aside-right{
+    width: 30%;
+  }
+}
+
+@media only screen and (min-width: 1140px){
+  .content{
+    width: 75%;
+  }
+  .aside-right{
+    width: 25%;
+  }
+}