From f09d129735399196df46282e5003e32d18ef3ed3 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 28 Apr 2022 13:48:16 +0100
Subject: [PATCH] improve

---
 .../gabinete-digital.page.scss                | 1277 ++++++++---------
 1 file changed, 602 insertions(+), 675 deletions(-)

diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index d43777b98..feb9324d8 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -1,676 +1,603 @@
 ion-content{
- /*  --padding-top:15px; */
-/*   --padding-end:15px;
-  --padding-start:15px; */
- /*  --padding-bottom:15px; */
-  /* --background:#ecf8ff; */
-}
-ion-segment{
-  overflow: auto;
-}
-ion-segment-button{
-  margin: 0 auto !important;
-  padding: 0 !important;
-
-  --padding-bottom: 0px;
-  --padding-top: 5px;
-  --margin-bottom: 5px;
-  --margin-top: 0px;
-
-  min-height: 25px;
-  min-width: 25px;
-}
-:host{
-  // background: #0782c9;
-  ion-card-title {
-    text-align: center;
-  }
-  .title-container{
-    background:var(--gabinete-title-container);
-    padding: 30px 20px 15px 20px !important;
-    //margin-bottom: 15px;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
-
-    .title{
-      width: fit-content;
-      font-size: 25px !important;
-      float: left;
-    }
-    .btn-no-color{
-      display: flex;
-      float: right;
-    }
-    .title-icon{
-      float: right;
-      margin-right: 20px;
-      font-size: 30px;
-      color: #42b9fe;
-    }
-    .title-icons{
-      width: fit-content;
-      float: right !important;
-      align-self: baseline;
-    }
-    .title-icons fa-icon{
-      font-size: 25px !important;
-    }
-  }
-
-  ion-card{
-    background-color: #d4d5ca;
-    border-radius: 20px;
-  }
-  ion-item{
-    margin-bottom: 10px;
-    border-radius: 5px;
-  }
-  ion-button{
-    color: #000;
-    --background:none;
-    --border-color: none;
-    --box-shadow:none;
-  }
-  ion-label{
-    padding: 10px;
-  }
-}
-.ion-item-change-color{
-  --ion-background-color:#fff2cc !important;
-  margin-bottom: 10px;
-  border-radius: 5px;
-}
-.div-top-header{
-  width: 400px;
-  margin: 0 auto;
-  background-color: #0782c9;
-  overflow: auto;
-  padding-top: 15px;
-  border: 0!important;
-
-  .div-search{
-    font-size: 45px;
-    float: left;
-    margin: 0 0 0 10px
-  }
-  .div-logo{
-    background: transparent;
-    width: 140px;
-    margin: 5px 0 0px 71px;
-    float: left;
-  }
-  .div-logo img{
-    width: 100%;
-  }
-  .div-profile{
-    font-size: 45px;
-    float: right;
-    margin-right: 10px;
-  }
-}
-
-
-/* NEW CSS */
-.main-content {
-  width: 100%; /* 400px */
-  height: 100%;
-  font-family: Roboto;
-  margin: 0 auto;
-  background:var(--gabinete-main-container);
-  overflow:hidden;
-  padding: 0 !important;
-
-  .aside-wrapper{
-    overflow: hidden;
-    .listview{
-      width: 100%t;
-      height: auto !important;
-      padding: 0px 20px 15px 20px !important;
-      overflow: auto;
-    }
-  }
-
-
-
-  .aside{
-    align-items: center;
-    justify-content: center;
-
-    .exp-card{
-      cursor: pointer;
-      user-select: none;
-      width: 173px;
-      height: 200px;
-      margin: 7px;
-      padding: 30px 5px 30px 5px;
-      border-radius: 15px;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-      background: white;
-      border: 1px solid white;
-      float: left;
-    }
-    .exp-card-long{
-      cursor: pointer;
-      user-select: none;
-      background:  white;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-      width: 90%;
-      margin: 0px 7px;
-      border-radius: 15px;
-      padding: 7px;
-      border:1px solid white;
-
-      .center-div{
-        width: fit-content;
-        margin: 0 auto;
-        overflow: auto;
-
-        .exp-card-title{
-          margin: 0 !important;
-        }
-      }
-
-      .exp-card-icon{
-        width: fit-content;
-        font-size: 48px;
-        float: left !important;
-      }
-      .exp-card-text{
-        padding: 0 !important;
-        margin: 0 !important;
-        width: fit-content;
-        float: left !important;
-      }
-    }
-
-    .exp-card-icon{
-      margin: 0 auto;
-    }
-    .exp-card ion-icon{
-      font-size: 48px !important;
-    }
-    .exp-card fa-icon{
-      font-size: 30px;
-      padding: 0 1px 0 1px;
-      margin: 6px;
-      //border: 1px solid #ccc;
-      color: #797979;
-    }
-    .exp-card-title{
-      font-size: 15px;
-      color: var(--title-text-color);;
-      font-family: Roboto;
-      font-weight: bold;
-      font-stretch: normal;
-      font-style: normal;
-      margin: 15px 0 0 10px;
-      text-align: center;
-    }
-    .exp-card-title p{
-      text-align: center;
-
-    }
-    .exp-card-content{
-      font-size: 13px;
-      color: #797979;
-      margin: 11px 0 0;
-      font-family: Roboto;
-      font-weight: 700;
-      font-stretch: normal;
-      font-style: normal;
-      line-height: normal;
-      letter-spacing: normal;
-      text-align: center;
-    }
-
-  }
-}
-.title-content{
-  height: auto;
-  margin: 0 auto;
-  overflow: hidden;
-  padding: 0 !important;
-  background: transparent;
-}
-.div-title{
-  padding: 0!important;
-  float: left;
-}
-.title{
-  font-size: 25px;
-}
-.div-icon{
-  float: right;
-  font-size: 35px;
-  overflow: auto;
-}
-
-/* New list view CSS */
-ion-list{
-  background: transparent;
-}
-.item-wrapper{
-  border-radius: 15px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-  border:1px solid #e9e9e9 !important;
-  background-color: #fff !important;
-  margin-bottom: 10px !important;
-  padding: 15px;
-
-  .item{
-    background-color: var(--white);
-    margin: 0 auto;
-    overflow: hidden;
-
-    .item-top-detail{
-      width: 100%;
-      float: left;
-      font-family: Roboto;
-      font-size: 12pt;
-      font-weight: 700;
-      color: var(--title-text-color);
-      padding-left: 3px;
-
-      .item-subject{
-        width: 84%;
-        float: left;
-
-        ion-label{
-          margin: 0 !important;
-          padding: 2.5px 10.5px 2.5px 10.5px;
-        }
-      }
-
-      .item-icon{
-        width: fit-content;
-        float: right;
-      /* font-size: 13px; */
-        margin: 0 !important;
-        padding: 0 !important;
-
-        ion-icon{
-          font-size: 12pt;
-          color: #42b9fe;
-          float: left;
-        }
-        label{
-          font-size: 10pt;
-        }
-      }
-    }
-    .item-middle-detail{
-      font-size: 10pt;
-      width: 100%;
-      overflow: auto;
-      padding-left: 3px;
-      //border: 1px solid red;
-      margin: 0 !important;
-
-      .item-remetente{
-        //width: 200px;
-        font-family: Roboto;
-       /*  font-size: 13px; */
-        font-weight: normal;
-        color: #000000;
-        float: left;
-        /* border: 1px solid red; */
-
-        ion-label{
-          padding: 2.5px 10.5px 2.5px 10.5px;
-          margin: 0 !important;
-        }
-      }
-    }
-    .item-middle-detail-extra{
-      font-size: 10pt;
-      padding-left: 3px;
-      //border: 1px solid red;
-
-      .item-middle-detail-extra-text{
-        //border: 1px solid blue;
-
-        ion-label{
-          padding: 2.5px 10.5px 2.5px 10.5px;
-          margin: 0 !important;
-        }
-      }
-    }
-    .item-bottom-detail{
-      font-size: 12pt;
-      width: 100%;
-      overflow: auto;
-      margin-top: 10px;
-      padding-bottom: 0 !important;
-
-      .item-workflow{
-        float: left;
-        margin: 0 !important;
-        align-self: flex-start;
-
-
-        .label{
-          border-radius: 15px;
-          background: var(--label-bg-color);
-          /* font-size: 12px; */
-          float: right;
-          padding: 2.5px 13.5px 2.5px 13.5px;
-          color: #fff;
-      }
-      }
-      .item-date{
-        width: auto;
-        font-family: Roboto;
-        font-size: 10pt;
-        font-weight: normal;
-        font-stretch: normal;
-        font-style: normal;
-        line-height: normal;
-        letter-spacing: normal;
-        color: #797979;
-        text-align: right;
-        flex-grow: 1;
-
-        ion-label{
-          margin: 0 !important;
-          padding: 0 !important;
-        }
-      }
-    }
-    .item-middle-detail, .item-bottom-detail{
-      margin-bottom: 5px;
-    }
-  }
-}
-
-
-@media only screen and (min-width: 561px) {
-  .exp-card-long{
-    width: 547px !important;
-  }
-}
-/* @media only screen and (min-width: 749px) {
-  .exp-card-long{
-    width: 734px !important;
-  }
-} */
-
-
-@media only screen and (min-width: 701px) {
-  ion-content{
-    --background: transparent;
-  }
-  .title{
-    font-size: 15px !important;
-  }
-
-  .main-content{
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
-    overflow: hidden;
-
-    .aside-wrapper{
-      display: flex;
-      width: 35%;
-      justify-content: flex-start !important;
-      border-right: 1px solid #d8d8d8;
-      overflow: hidden;
-
-      .aside{
-        background:transparent;
-
-        .d-none{
-          display: block;
-        }
-      }
-      .aside-title{
-        font-family: Roboto;
-        font-size: 16px !important;
-        text-align: left;
-      }
-      .exp-card{
-        width: 90% !important;
-        justify-content: flex-start !important;
-        padding: 10px !important;
-
-        .exp-card-title{
-          text-align: left !important;
-        }
-
-      }
-      .exp-card-long{
-        //display: none;
-        width: 90% !important;
-        cursor: pointer;
-        user-select: none;
-        background:  white;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-        background: white;
-
-        .center-div{
-          display: flex;
-          justify-content: center;
-          width: 100%;
-          margin: 0 !important;
-
-          .exp-card-text{
-            width: calc(100% - 50px);
-          }
-        }
-        .title1{
-          display: none !important;
-
-        }
-        .exp-card-title {
-          flex: 1;
-          float: left !important;
-          text-align: left;
-          padding-left: 10px;
-        }
-        .exp-card-content{
-          width: fit-content;
-          float: right;
-        }
-        .exp-card-text{
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-    .aside-content{
-      width: 65%;
-      display: flex !important;
-      background-color: white;
-    }
-  }
-
-  .exp-card{
-    display: flex;
-    align-items: center;
-    margin: 0 auto;
-    margin-bottom: 15px;
-    flex-direction: row !important;
-    width: 100%;
-    padding: 10px 17px 10px 17px;
-    height: unset !important;
-    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-
-    .exp-card-title{
-      flex: 1;
-      text-align: left;
-      margin-top: 0px !important;
-    }
-    .exp-card-content{
-      margin: 0 !important;
-    }
-    .exp-card-content .title1{
-      display: none;
-      margin-top: 0px !important;
-    }
-    .exp-card-content .number{
-      //display: none;
-      margin-top: 0px !important;
-    }
-  }
-}
-
-@media only screen and (min-width: 801px) {
-  .title{
-    font-size: 25px !important;
-  }
-  .content{
-    width: 65%;
-  }
-
-  .aside-right{
-    width: 35%;
-  }
-  .aside-title{
-    font-family: Roboto;
-    font-size: 25px;
-    text-align: left;
-  }
-}
-@media only screen and (min-width: 1024px){
-  .content{
-    width: 70%;
-  }
-  .aside-right{
-    width: 30%;
-  }
-}
-@media only screen and (min-width: 1140px) {
-  .div-icon{
-    display: none;
-  }
-  .content{
-    width: 75%;
-    border-right: 1px solid #d8d8d8;
-  }
-  .aside-right{
-    width: 25%;
-  }
-}
-
-
-.active {
-  color: white !important;
-  fill: white !important;
-  border: var(--gabinete-active-hove-box-border) !important;
-  background: var(--gabinete-active-hove-background) !important;
-  box-sizing: border-box;
-
-  .exp-card-content, .icon-selected{
-    color: white !important;
-  }
-
-  .exp-card-title {
-    color: rgb(255, 255, 255) !important;
-  }
-
-  svg path::part(native) {
-    color: white !important;
-    fill: white !important;
-  }
-
-  svg path::part(button):hover {
-    color: white !important;
-    fill: rgb(255, 255, 255) !important;
-  }
-
-  svg{
-    path{
-         fill: rgb(255, 255, 255) !important
-    }
-  }
-}
-
-.active ion-icon::part(button) {
-  color: white !important;
-  fill: rgb(255, 255, 255) !important;
-}
-
-.active ion-icon::part(native) {
-  color: white !important;
-  fill: rgb(255, 255, 255) !important;
-}
-
-.active ion-icon{
-  color: white !important;
-  fill: red !important;
-}
-
-ion-item.item {
-  background-color: white !important;
-}
-
-.item{
-  width: 100% !important;
-  padding: 0px 20px 0 20px !important;
-  border-bottom: 1px solid #ebebeb !important;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-  background-color: transparent;
-  overflow: auto;
-
-  .item-icon{
-    //margin-top: 28px;
-    width: 45px;
-    float: left;
-    font-size: 40px;
-
-    .item-icon ion-icon{
-      color: #061b52;
-    }
-  }
-  .item-icon2{
-    //margin-top: 23px;
-    width: 45px;
-    float: left;
-    font-size: 40px;
-  }
-
-  .item-content{
-    width: 100%;
-    padding: 15px 0 15px 10px;
-    overflow: auto;
-    margin-right: 5px;
-
-    p{
-      white-space: nowrap;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-    }
-
-    .item-content-date{
-      color: #797979;
-      font-size: 13px;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-    .item-content-title{
-      color: var(--title-text-color);
-      font-size: 15px;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-    .item-content-detail{
-      color: #000000;
-      font-size: 13px;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-    .item-options{
-      color: var(--box-hover-background-color);
-      width: 25px;
-      font-size: 20px;
-    }
-    .item-content-date-active, .item-content-title-active, .item-content-detail-active{
-      color: #fff;
-    }
-  }
-  .item-options-active{
-    display: none !important;
-  }
-}
\ No newline at end of file
+  /*  --padding-top:15px; */
+ /*   --padding-end:15px;
+   --padding-start:15px; */
+  /*  --padding-bottom:15px; */
+   /* --background:#ecf8ff; */
+ }
+ ion-segment{
+   overflow: auto;
+ }
+ ion-segment-button{
+   margin: 0 auto !important;
+   padding: 0 !important;
+ 
+   --padding-bottom: 0px;
+   --padding-top: 5px;
+   --margin-bottom: 5px;
+   --margin-top: 0px;
+ 
+   min-height: 25px;
+   min-width: 25px;
+ }
+ :host{
+   // background: #0782c9;
+   ion-card-title {
+     text-align: center;
+   }
+   .title-container{
+     background:var(--gabinete-title-container);
+     padding: 30px 20px 15px 20px !important;
+     //margin-bottom: 15px;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+ 
+     .title{
+       width: fit-content;
+       font-size: 25px !important;
+       float: left;
+     }
+     .btn-no-color{
+       display: flex;
+       float: right;
+     }
+     .title-icon{
+       float: right;
+       margin-right: 20px;
+       font-size: 30px;
+       color: #42b9fe;
+     }
+     .title-icons{
+       width: fit-content;
+       float: right !important;
+       align-self: baseline;
+     }
+     .title-icons fa-icon{
+       font-size: 25px !important;
+     }
+   }
+ 
+   ion-card{
+     background-color: #d4d5ca;
+     border-radius: 20px;
+   }
+   ion-item{
+     --ion-background-color:#dae3f3;
+     margin-bottom: 10px;
+     border-radius: 5px;
+   }
+   ion-button{
+     color: #000;
+     --background:none;
+     --border-color: none;
+     --box-shadow:none;
+   }
+   ion-label{
+     padding: 10px;
+   }
+ }
+ .ion-item-change-color{
+   --ion-background-color:#fff2cc !important;
+   margin-bottom: 10px;
+   border-radius: 5px;
+ }
+ .div-top-header{
+   width: 400px;
+   margin: 0 auto;
+   background-color: #0782c9;
+   overflow: auto;
+   padding-top: 15px;
+   border: 0!important;
+ 
+   .div-search{
+     font-size: 45px;
+     float: left;
+     margin: 0 0 0 10px
+   }
+   .div-logo{
+     background: transparent;
+     width: 140px;
+     margin: 5px 0 0px 71px;
+     float: left;
+   }
+   .div-logo img{
+     width: 100%;
+   }
+   .div-profile{
+     font-size: 45px;
+     float: right;
+     margin-right: 10px;
+   }
+ }
+ 
+ 
+ /* NEW CSS */
+ .main-content {
+   width: 100%; /* 400px */
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background:var(--gabinete-main-container);
+   overflow:hidden;
+   padding: 0 !important;
+ 
+   .aside-wrapper{
+     overflow: hidden;
+     .listview{
+       width: 100%t;
+       height: auto !important;
+       padding: 0px 20px 15px 20px !important;
+       overflow: auto;
+     }
+   }
+ 
+ 
+ 
+   .aside{
+     align-items: center;
+     justify-content: center;
+ 
+     .exp-card{
+       cursor: pointer;
+       user-select: none;
+       width: 173px;
+       height: 200px;
+       margin: 7px;
+       padding: 30px 5px 30px 5px;
+       border-radius: 15px;
+       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+       background: white;
+       border: 1px solid white;
+       float: left;
+     }
+     .exp-card-long{
+       cursor: pointer;
+       user-select: none;
+       background:  white;
+       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+       width: 360px;
+       margin: 7px 20px;
+       border-radius: 15px;
+       padding: 7px;
+       border:1px solid white;
+ 
+       .center-div{
+         width: fit-content;
+         margin: 0 auto;
+         overflow: auto;
+ 
+         .exp-card-title{
+           margin: 0 !important;
+         }
+       }
+ 
+       .exp-card-icon{
+         width: fit-content;
+         font-size: 48px;
+         float: left !important;
+       }
+       .exp-card-text{
+         padding: 0 !important;
+         margin: 0 !important;
+         width: fit-content;
+         float: left !important;
+       }
+     }
+ 
+     .exp-card-icon{
+       margin: 0 auto;
+     }
+     .exp-card ion-icon{
+       font-size: 48px !important;
+     }
+     .exp-card fa-icon{
+       font-size: 30px;
+       padding: 0 1px 0 1px;
+       margin: 6px;
+       //border: 1px solid #ccc;
+       color: #797979;
+     }
+     .exp-card-title{
+       font-size: 15px;
+       color: var(--title-text-color);;
+       font-family: Roboto;
+       font-weight: bold;
+       font-stretch: normal;
+       font-style: normal;
+       margin: 15px 0 0 10px;
+       text-align: center;
+     }
+     .exp-card-title p{
+       text-align: center;
+ 
+     }
+     .exp-card-content{
+       font-size: 13px;
+       color: #797979;
+       margin: 11px 0 0;
+       font-family: Roboto;
+       font-weight: 700;
+       font-stretch: normal;
+       font-style: normal;
+       line-height: normal;
+       letter-spacing: normal;
+       text-align: center;
+     }
+ 
+   }
+ }
+ .title-content{
+   height: auto;
+   margin: 0 auto;
+   overflow: hidden;
+   padding: 0 !important;
+   background: transparent;
+ }
+ .div-title{
+   padding: 0!important;
+   float: left;
+ }
+ .title{
+   font-size: 25px;
+ }
+ .div-icon{
+   float: right;
+   font-size: 35px;
+   overflow: auto;
+ }
+ 
+ /* New list view CSS */
+ ion-list{
+   background: transparent;
+ }
+ .item-wrapper{
+   border-radius: 15px;
+   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+   border:1px solid #e9e9e9 !important;
+   background-color: #fff !important;
+   margin-bottom: 10px !important;
+   padding: 15px;
+ 
+   .item{
+     background-color: var(--white);
+     margin: 0 auto;
+     overflow: hidden;
+ 
+     .item-top-detail{
+       width: 100%;
+       float: left;
+       font-family: Roboto;
+       font-size: 12pt;
+       font-weight: 700;
+       color: var(--title-text-color);
+       padding-left: 3px;
+ 
+       .item-subject{
+         width: 84%;
+         float: left;
+ 
+         ion-label{
+           margin: 0 !important;
+           padding: 2.5px 10.5px 2.5px 10.5px;
+         }
+       }
+ 
+       .item-icon{
+         width: fit-content;
+         float: right;
+       /* font-size: 13px; */
+         margin: 0 !important;
+         padding: 0 !important;
+ 
+         ion-icon{
+           font-size: 12pt;
+           color: #42b9fe;
+           float: left;
+         }
+         label{
+           font-size: 10pt;
+         }
+       }
+     }
+     .item-middle-detail{
+       font-size: 10pt;
+       width: 100%;
+       overflow: auto;
+       padding-left: 3px;
+       //border: 1px solid red;
+       margin: 0 !important;
+ 
+       .item-remetente{
+         //width: 200px;
+         font-family: Roboto;
+        /*  font-size: 13px; */
+         font-weight: normal;
+         color: #000000;
+         float: left;
+         /* border: 1px solid red; */
+ 
+         ion-label{
+           padding: 2.5px 10.5px 2.5px 10.5px;
+           margin: 0 !important;
+         }
+       }
+     }
+     .item-middle-detail-extra{
+       font-size: 10pt;
+       padding-left: 3px;
+       //border: 1px solid red;
+ 
+       .item-middle-detail-extra-text{
+         //border: 1px solid blue;
+ 
+         ion-label{
+           padding: 2.5px 10.5px 2.5px 10.5px;
+           margin: 0 !important;
+         }
+       }
+     }
+     .item-bottom-detail{
+       font-size: 12pt;
+       width: 100%;
+       overflow: auto;
+       margin-top: 10px;
+       padding-bottom: 0 !important;
+ 
+       .item-workflow{
+         float: left;
+         margin: 0 !important;
+         align-self: flex-start;
+ 
+ 
+         .label{
+           border-radius: 15px;
+           background: var(--label-bg-color);
+           /* font-size: 12px; */
+           float: right;
+           padding: 2.5px 13.5px 2.5px 13.5px;
+           color: #fff;
+       }
+       }
+       .item-date{
+         width: auto;
+         font-family: Roboto;
+         font-size: 10pt;
+         font-weight: normal;
+         font-stretch: normal;
+         font-style: normal;
+         line-height: normal;
+         letter-spacing: normal;
+         color: #797979;
+         text-align: right;
+         flex-grow: 1;
+ 
+         ion-label{
+           margin: 0 !important;
+           padding: 0 !important;
+         }
+       }
+     }
+     .item-middle-detail, .item-bottom-detail{
+       margin-bottom: 5px;
+     }
+   }
+ }
+ 
+ 
+ @media only screen and (min-width: 561px) {
+   .exp-card-long{
+     width: 547px !important;
+   }
+ }
+ /* @media only screen and (min-width: 749px) {
+   .exp-card-long{
+     width: 734px !important;
+   }
+ } */
+ 
+ 
+ @media only screen and (min-width: 701px) {
+   ion-content{
+     --background: transparent;
+   }
+   .title{
+     font-size: 15px !important;
+   }
+ 
+   .main-content{
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     overflow: hidden;
+ 
+     .aside-wrapper{
+       display: flex;
+       width: 35%;
+       justify-content: flex-start !important;
+       border-right: 1px solid #d8d8d8;
+       overflow: hidden;
+ 
+       .aside{
+         background:transparent;
+ 
+         .d-none{
+           display: block;
+         }
+       }
+       .aside-title{
+         font-family: Roboto;
+         font-size: 16px !important;
+         text-align: left;
+       }
+       .exp-card{
+         width: 90% !important;
+         justify-content: flex-start !important;
+         padding: 10px !important;
+ 
+         .exp-card-title{
+           text-align: left !important;
+         }
+ 
+       }
+       .exp-card-long{
+         //display: none;
+         width: 100% !important;
+         cursor: pointer;
+         user-select: none;
+         background:  white;
+         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+         background: white;
+ 
+         .center-div{
+           display: flex;
+           justify-content: center;
+           width: 100%;
+           margin: 0 !important;
+ 
+           .exp-card-text{
+             width: calc(100% - 50px);
+           }
+         }
+         .title1{
+           display: none !important;
+ 
+         }
+         .exp-card-title {
+           flex: 1;
+           float: left !important;
+           text-align: left;
+           padding-left: 10px;
+         }
+         .exp-card-content{
+           width: fit-content;
+           float: right;
+         }
+         .exp-card-text{
+           display: flex;
+           align-items: center;
+           justify-content: center;
+         }
+       }
+     }
+     .aside-content{
+       width: 65%;
+       display: flex !important;
+       background-color: white;
+     }
+   }
+ 
+   .exp-card{
+     display: flex;
+     align-items: center;
+     margin: 0 auto;
+     margin-bottom: 15px;
+     flex-direction: row !important;
+     width: 100%;
+     padding: 10px 17px 10px 17px;
+     height: unset !important;
+     //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+ 
+     .exp-card-title{
+       flex: 1;
+       text-align: left;
+       margin-top: 0px !important;
+     }
+     .exp-card-content{
+       margin: 0 !important;
+     }
+     .exp-card-content .title1{
+       display: none;
+       margin-top: 0px !important;
+     }
+     .exp-card-content .number{
+       //display: none;
+       margin-top: 0px !important;
+     }
+   }
+ }
+ 
+ @media only screen and (min-width: 801px) {
+   .title{
+     font-size: 25px !important;
+   }
+   .content{
+     width: 65%;
+   }
+ 
+   .aside-right{
+     width: 35%;
+   }
+   .aside-title{
+     font-family: Roboto;
+     font-size: 25px;
+     text-align: left;
+   }
+ }
+ @media only screen and (min-width: 1024px){
+   .content{
+     width: 70%;
+   }
+   .aside-right{
+     width: 30%;
+   }
+ }
+ @media only screen and (min-width: 1140px) {
+   .div-icon{
+     display: none;
+   }
+   .content{
+     width: 75%;
+     border-right: 1px solid #d8d8d8;
+   }
+   .aside-right{
+     width: 25%;
+   }
+ }
+ 
+ 
+ .active {
+   color: white !important;
+   fill: white !important;
+   border: var(--gabinete-active-hove-box-border) !important;
+   background: var(--gabinete-active-hove-background) !important;
+   box-sizing: border-box;
+ 
+   .exp-card-content, .icon-selected{
+     color: white !important;
+   }
+ 
+   .exp-card-title {
+     color: rgb(255, 255, 255) !important;
+   }
+ 
+   svg path::part(native) {
+     color: white !important;
+     fill: white !important;
+   }
+ 
+   svg path::part(button):hover {
+     color: white !important;
+     fill: rgb(255, 255, 255) !important;
+   }
+ 
+   svg{
+     path{
+          fill: rgb(255, 255, 255) !important
+     }
+   }
+ }
+ 
+ .active ion-icon::part(button) {
+   color: white !important;
+   fill: rgb(255, 255, 255) !important;
+ }
+ 
+ .active ion-icon::part(native) {
+   color: white !important;
+   fill: rgb(255, 255, 255) !important;
+ }
+ 
+ .active ion-icon{
+   color: white !important;
+   fill: red !important;
+ }
+ 
\ No newline at end of file