viewer rotation

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

@@ -67,9 +67,13 @@ ion-button{
     margin: 20px auto;
 }
 
+.upper-content-margin {
+  margin-left: 41px;
+}
+
+
 .upper-content{
   font-family: Roboto;
-  margin-left: 41px;
   font-size: rem(18);
 
   .label{
@@ -209,3 +213,96 @@ ion-button{
     width: 25%;
   }
 }
+
+
+
+.expand {
+  margin-left: -20px;
+  margin-right: -20px;
+  width: calc(100% + 40px);
+}
+
+
+
+.selected-card {
+  border: 3px solid #ffb703;
+  color: #3498db;
+
+}
+
+
+.visionDesktop-flex {
+  display: none;
+}
+.visionDesktop-block {
+  display: none;
+}
+
+.visionMobile-flex {
+  display: none;
+}
+.visionMobile-block {
+  display: none;
+}
+
+@media screen and (orientation:portrait) {
+  .visionDesktop-flex {
+    display: none !important;
+  }
+  .visionDesktop-block {
+    display: none !important;
+  }
+
+  .visionMobile-flex {
+    display: flex !important;
+  }
+  .visionMobile-block {
+    display: block !important;
+  }
+
+  .mobile-header {
+    flex-grow: 1;
+  }
+
+  .content-details {
+    display: flex;
+  }
+
+  .upper-content {}
+
+
+  .middle-content {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+
+
+  .upper-content {
+    margin-left: 41px;
+  }
+
+  .activity-instanceName {
+    padding-right: 20px;
+  }
+}
+
+@media screen and (orientation:landscape) {
+  .visionDesktop-flex {
+    display: flex !important;
+  }
+  .visionDesktop-block {
+    display: block !important;
+  }
+  // CSS applied when the device is in landscape mode
+
+  .visionMobile-flex {
+    display: none !important;
+  }
+  .visionMobile-block {
+    display: none !important;
+  }
+
+
+
+}