doneit-web/src/app/modals/view-event/view-event.page.scss

@import '~src/function.scss';
ion-content{
    --background:transparent;
    /* --padding-top:0px;
    --padding-start: 20px;
    --padding-end: 20px;
    font-size: 18px; */
    overflow: auto;
}
ion-menu{
    --height: 225px;
  }
.header-toolbar{
   --background:transparent;
   --opacity: 1;
}
  .main-header{
    width: 100%; /* 400px */
    font-family: Roboto;
    background-color: #fff;
    color:#000;
    transform: translate3d(0, 1px, 0);

    .title-content{
      width: 100% !important;
      margin: 0px auto;
      padding: 0 !important;
      background: #fff;
      overflow: auto;

      .left{
        width: 37px;
        float: left;
        font-size: 35px;
      }
      .middle{
        width: calc(100% - 138.5px) !important;
        padding: 0 !important;
        float: left;
        margin: 0 !important;
        overflow: auto;

        p{
          margin: 0 !important;
        }
      }
      .header-icon-right{
        width: 45px;
        font-size: 45px;
        float: right;
      }
      .menu-options{
        width: fit-content;
        height: fit-content;
        align-items: flex-start;
        justify-content: flex-start;
        float: right;
        padding: 1px;
        margin-left: 15px;
      }
      .menu-options .edit{
        font-size: 35px;
        float: left;
      }
      .menu-options .delete{
        padding: 7px;
        font-size: 21px;
        color:#fff;
        background: #d30606;
        border-radius: 20px;
        margin-left: 10px;
      }
    }

    .title{
      font-size: 25px;
    }

  }
  .main-content{
    width: 100%;
    font-family: Roboto;
    background-color: #fff !important;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow:auto;

    .content{
      padding: 30px 20px 0 20px !important;
      margin: 0;
      float: left;
    }

    .upper-content{
      width: calc(100%-50px);
      margin-left: 50px;
      font-size: 18px;

        .content-location{
          width: 100%;
          margin: 0 auto;
          padding: 0;
          overflow: auto;

          .date{
            width: calc(100% - 105px);
            float: left;
          }


        }

        .location-detail{
          width: 210px;
          font-weight: 700;
          font-size: 18px;
          float: left;
          margin: 5px 5px 5px 0px;
        }
        .button-mdgpr-Oficial{
            width: 91px;
            --border-radius: 20px;
            --background: var(--label-bg-color);
            margin-left: 5px;
            float: left;
        }
        .button-mdgpr-Pessoal{
          width: 91px;
          --border-radius: 20px;
          --background: #f05d5e;
          margin-left: 5px;
          float: left;
        }

        .button-pr-Oficial{
          width: 91px;
          --border-radius: 20px;
          --background: #cbeecb;
          margin-left: 5px;
          float: left;
      }
      .button-pr-Pessoal{
        width: 91px;
        --border-radius: 20px;
        --background: #cab0dc;
        margin-left: 5px;
        float: left;
      }


        .button-calendar-type ion-button{
          height: 25px;
        }
        .button-edit-event {
            width: 140px;
            height: 44px;
            border-radius: 22.5px;
            --background: #e0e9ee;
            --color:#061b52;
        }
        .content-details p{
            font-size: 16px;
        }
      }
      .line{
        width: 100% !important;
        margin-top: 15px;
        border-top: 1px solid #d8d8d8;
      }
      .middle-conten{
        width: 100% !important;
        overflow: auto;

        .middle-content h3, .middle-content p{
          font-size: 16px;
        }
      }

      .bottom-content{
        margin: 0 auto;

        .bottom-content h3{
          font-size: 16px;
          margin: 0 0 0 10px;
        }
        .attach-document{
          font-size: 15px;
          color: var(--title-text-color);
          margin: 5px 5px 5px 10px;
          padding: 5px;
          float: left;
        }
        .attach-icon{
          width: 37px;
          font-size: 35px;
          float: left;
        }
        .attach-title-item{
          width: 100%;
          font-size: 15px;
          color: var(--title-text-color);
        }
        /* 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;
      }
    }
    .buttons{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .btn-ok, .btn-cancel, .btn-delete{
        height: auto !important;
        font-size: 16px !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;
    }
  }
  textarea{
    border:none;
    --background:#fff !important;
  }

  @media only screen and (max-width: 800px) {
    .content{
      width: 100% !important;
    }
    .aside-right{
      display: none;
    }
  }
  @media only screen and (min-width: 801px) {
    .menu-options{
      display: none !important;
    }
    .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%;
    }
  }

  .label{
    border-radius: 20px;
    background: var(--label-bg-color);
    float: right;
    padding: 5px 13.5px 5px 13.5px;
    color: #fff;
  }