doneit-web/src/app/modals/profile/profile.page.scss

@import '~src/function.scss';

.profile-header {
  margin: 0 em(20px);
  // background-color: #0782c9;
  padding: 20px 20px;
  border: 0 !important;

  .div-logo{
    background: transparent;
    width: em(140);
    justify-content: center;
    display: flex;
    color: black;
    overflow: auto;
    float: left;

    .logo-icon{
      width: 25.33%;
      overflow: auto;

      img{
        width: 100%;
        margin: 0px auto;
      }
    }

    .logo-description{
      width: 74.67%;
      margin: 0 auto;
      overflow: auto;
      font-size: rem(8.5);
      font-family: Bahnschrift;

      .logo-description-content{
        width: 100%;

        .logo-description-text{
          font-weight: 700;
          text-align: center;
          width: 100%;
          margin: 0 !important;
          padding: 0 !important;
        }

        .add-line{
          width: 100%;
          border-bottom: 1px solid #000;
          margin-bottom: 2.5px !important;
          padding: 0 !important;
        }

        .add-line-white{
          width: 100%;
          border-bottom: 1px solid #fff;
          margin-bottom: 2.5px !important;
          padding: 0 !important;
        }
      }
      .color-white{
        color: #fff !important;
      }

      .add-botton-border{
        border-bottom: 1px solid #000;
      }

      .add-botton-border-white{
        border-bottom: 1px solid #fff;
      }

    }
  }
}
.btn-close {
  float: right !important;
}
.profile-content {
  padding: 20px 20px;
  //color: var(--profile-text-color) !important;
}

.profile-pic{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
  border-color: transparent !important;
  object-fit: cover;
}

.icon {
  font-size: rem(40);
}

.profile-name {
  font-weight: 300;
  font-size: rem(20) !important;
  margin-bottom: 17px !important;
  color: var(--profile-text-color) !important;
}

.profile-title {
  font-weight: 300;
  font-size: rem(20) !important;
  margin-bottom: 40px !important;
  color: var(--profile-text-color) !important;
}

.line {
  width: 100% !important;
  margin-top: 15px;
  border-top: 1px solid #d8d8d8;
  color: var(--profile-title-color-RoleDescription) !important;
}

.btn-delete {
  background: #ffe0e0 !important;
  width: 40% !important;
  margin-left: 0 !important;
}

.btn-cancel {
  width: 40% !important;
  margin-right: 0 !important;
}

.buttonSize {
  width: 100% !important;
}

ion-list {
  background-color: transparent !important;
}

.notifications-content {
  padding: 0px 20px;
  .item {
    border-radius: 15px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
    border: solid 1px #e9e9e9;
    background-color: var(--white);
    margin: 0 auto;
    padding: 10px;
    margin-bottom: 10px;
    color: #000;
    overflow: hidden;

    .notification-item {
      width: fit-content;
      float: left;
      margin-right: 10px;
      padding: 0 !important;
      overflow: auto;
    }
    .notification-icon {
      font-size: rem(35) !important;
    }

    .notification-icon-error {
      width: 30px !important;
      height: 30px !important;
    }
    .approve-event-time {
      width: fit-content !important;
      float: left;
    }
    .approve-event-detail {
      width: calc(100% - 115px) !important;
      float: left;
      #profile-title {
        width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .approve-event-detail-error {
      width: calc(100% - 115px) !important;
      float: left;
      #profile-title-error {
        display: flex;
        width: 250px;
        font-size: small
        ;
      }
    }
    .notification-label-MD-official {
      float: right;
      width: 5px;
      height: 100%;
      border-radius: 0% 100% 100% 0%;
      background-color: #ffb703;
    }
    .notification-label-MD-pessoal {
      float: right;
      width: 5px;
      height: 100%;
      border-radius: 0% 100% 100% 0%;
      background-color: #ff0303;
    }

    .item-conten {
      border-right: 5px solid var(--notificationtypeagenda);
      border-radius: 5px;
    }

    .notification-label-PR-official {
      float: right;
      width: 5px;
      height: 100%;
      border-radius: 0% 100% 100% 0%;
      background-color: #03d838;
    }
    .notification-label-PR-pessoal {
      float: right;
      width: 5px;
      height: 100%;
      border-radius: 0% 100% 100% 0%;
      background-color: #8b0ae0;
    }
  }
}
.item-inner {
  padding: 0 !important;
}