doneit-web/src/global.scss

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";




// calendar
// ionic calendar2
// calendar current day

// current day

ion-slide {
    td {
        div {
            padding-left: 7px;
            border-radius: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 25px;
        }
    }
}

td.monthview-primary-with-event {
    background-color: white !important;
}

// current date
td.monthview-current{
    border-bottom: 1px solid lightskyblue !important;
    color: black !important;
    background-color: white !important;
}
// selected date =============================
td.monthview-selected {
    background-color: lightskyblue !important;
    color: white !important;
}  

td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-dwf-c153]  {
    background-color: white !important;
    color: black !important;
}



.event-detail-container{
    display: none;
}

.cal-week-view {
    border-top: none !important;
}

.calendar-event-type

/* Timeline */

.cal-hour-segment {
    border-bottom: none !important;
  }
  
  .cal-current-time-marker {
    background-color: #42b9fe !important;
  }
.timeline .cal-event, .cal-event{
    padding: 0px !important;
}

.cal-current-time-marker {
    width: 100% !important;
    margin-left: 0px !important;
}
.line{
    margin-top: 15px;
    border-top: 1px solid #d8d8d8;
}




.cal-time{
    font-family: Roboto;
    font-size: 13px;
    color: #797979;
}

.timeline-box{

    position: relative;
    width: calc(100% - 0px);
    border-radius: 5px;
    padding: 3px;
    background-color: white !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
    border: solid 1px #e9e9e9 !important;
    color: black;
    .timeline-start-time, .timeline-location{
        font-family: Roboto;
        font-size: 13px;
        margin-right: 10px;
    }
    .timeline-event-discription{
        font-family: Roboto;
        font-size: 15px;
        font-weight: bold;
    }
}


.timeline-pr-box-Pessoal{
    border-left: 5px solid #958bfc !important;

    height: 100%;
}
.timeline-pr-box-Oficial{
    border-left: 5px solid #99e47b !important;
    height: 100%;
}


.timeline-mdgpr-box-Oficial{
    border-left: 5px solid #ffb703 !important;

}
.timeline-mdgpr-box-Pessoal{
    border-left: 5px solid #f05d5e !important;
}


.table-bordered, .table-bordered{
    border: none !important;
    td, th {
        border: none !important;
    }
}
.cal-tooltip, .cal-tooltip-top{
    display: none;
}

/* .timeline-box-{} */


.calendar-event-border{
    color: black !important;
    margin: 0px auto !important;
    border: 1px solid #fff;
    border-radius: 50px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 106px;
    padding: 0px !important;
    div.day{
        padding: 0px !important;
        transform: rotate(-45deg);
    }
}

.calendar-mdgpr-event-type-Oficial{
    border-left: 3px solid #ffb703 !important;
}
.calendar-mdgpr-event-type-Pessoal{
    border-top: 3px solid #f05d5e !important;
}
.calendar-mdgpr-event-type-both{
    border-left: 3px solid #ffb703 !important;
    border-top: 3px solid #f05d5e !important;
}
.calendar-pr-event-type-both{
    border-right: 3px solid #99e47b !important;
    border-bottom: 3px solid #958bfc !important;
}

.calendar-pr-event-type-Oficial{
    border-right: 3px solid #99e47b !important;
}

.calendar-pr-event-type-Pessoal{
    border-bottom: 3px solid #958bfc !important;
}

.cal-hour-segment {
    border-bottom: none !important;
}


.calendar-profile{
    font-size: 36px
}

  
/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";
@import "./style/main.scss";


// disable calendar build in header
.calendar-component{
    thead{
      display: none;
    }
}


.calendar-top0{
    margin-top: 0px;
}

.calendar-top15{
    margin-top: 15px;
}

.calendar-top30{
    margin-top: 30px;
}

.calendar-top45{
    margin-top: 45px;
}


.cal-event{
    overflow: visible !important;
}

/* .cal-week-view mwl-calendar-week-view-hour-segment, .cal-week-view .cal-hour-segment {
    display: block;
    height: 60px !important;
} */

.calendar-container{
    height: 333px;
    z-index: 10;
    transition: 0.5s;
    overflow-y: hidden;
    .monthview-container{
        overflow-y: hidden;
      height: unset  !important;
    }
}
  

.modal-desktop{
    .modal-wrapper{
        max-width: 1466px !important;
        height: 100%;
    }
}

@media screen and (min-width: 1200px) { 
    .hide-desktop{
        display: none !important;
      }
      .container-div{
        border-bottom:none !important;
      }
}
@media only screen and (max-width: 800px){
    .btn-refresh{
        display: none;
    }
    .attach-title-item{
        width: 200px !important;
        border: 1px solid red;
    }
}

.hideAsideOptions{
    @media only screen and (max-width: 800px) {
        .div-icon{
          display: none;
        }
        .content{
          width: 100%;
          border-right: 1px solid #d8d8d8;
        }
      
        .aside-right{
          display: none;
        }
      }
    /* .aside-right{
        display: none;
        width: 0;
    }
    .content{
        width: 100%;
    } */
}
.app-default-padding{
    padding: 30px 20px 0 20px !important;
}
.showAsideOptions{

    @media only screen and (min-width: 800px) {
        .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) {
        .div-icon{
          display: none;
        }
        .content{
          width: 75%;
          border-right: 1px solid #d8d8d8;
        }
      
        .aside-right{
          width: 25%;
        }
      }
}

.profile-modal{
    .modal-wrapper{
        position: absolute;
        top: -40px;
        right: 0px;
        height: 100%;
        max-width: 400px;
    }
}


.desktop-search {
    padding-top: 0px !important;
    margin-top: 80px !important;
    position: relative !important;

    ion-backdrop {
        display: none !important;
    }
    // margin-top: 86px;
    .model-wrapper {

    }
}

.notification-modal {
    ion-backdrop {
        display: none;
    }
    .modal-wrapper {
        position: absolute;
        top: 23px;
        right: 0px;
        height: 87px;
        max-width: 400px;
        border-radius: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        -ms-border-radius: 9px;
        -o-border-radius: 9px;
    }

    .ion-page {
        box-shadow: 0 28px 48px rgba(0, 0, 0, 0.2) !important;
    }
}

.hide-footer{
    ion-footer{
        display: none !important;
    }
}
.aside-modal{
    .modal-wrapper{
        position: absolute;
        right: 0px;
        height: 100%;
        width: 400px;
    }
}

.modal-width-100-width-background, .modal-desktop {
    padding-top: 76px;
    .modal-wrapper {
        width: 100%  !important;
        height: 99%  !important;
        position: relative;
    }
}

.modal-padding-top {
    margin-top: 87px;
    .modal-wrapper {
        // height: 99%;
        // top: 2%;
        // position: relative;
    }
}

.modal-top-100-width-background, .modal-desktop {
    .modal-wrapper {
        width: 100%;
        height: 99%;
        position: relative;
    }
}
@media only screen and (min-width: 1366px) {
    .modal-desktop-shadow{
        .ion-page{
            box-shadow: 0 0 15px 0 rgb(0 0 0 / 49%);
        }
    }

    .modal-desktop-remove-background{
        padding-top: 0px;
        top: 85px;
        ion-backdrop{
            display: none;
            transform: none !important;
        }
        .modal-wrapper{
            transform: none !important;
              box-shadow: none !important;
              height: 100% !important;
              top: unset !important;
              .ion-page {
                transform: none !important;
                -webkit-transform: none !important;
                -moz-transform: none !important;
                -ms-transform: none !important;
                -o-transform: none !important;
}
          }
    }
}


.modal-desktop-shadow{
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.49);
}

.footer-container{
    padding: 10px 20px;
}





.chat-mobile-modal-to-Desktop{
    top: 75px;
    left: 31%;
    transform: none !important;
    ion-backdrop{
      display: none;
      transform: none !important;
    }
    .modal-wrapper{
      transform: none !important;
        width: 100%;
        height: 100%;
        box-shadow: none !important;
        .ion-page {
          transform: none !important;
        }
    }
}

.modal-width-100{
    .modal-wrapper{
        width: 100%;
        height: 100%;
    }
}


@media only screen and (min-width: 1365px) {

  .search-modal{
    ion-backdrop{
        display: none;
    }
  }

  
  .search-submodal{
    background-color: rgb(0 0 0 / 55%);
  }
}



@media only screen and (min-width: 1024px) {

    .timeline-mobile{
        .timeline-box {
            position: relative;
            left: -4%;
            width: 102%;
        }
    }
}



/* Breakpoints */
._xs{
    width: 100%;
}
._sm{
    width: 540px;
}
._md{
    width: 720px;
}
._lg{
    width: 960px;
}
._xl{
    width: 1140px;
}



.timeline-container {
    div:nth-child(3) {
        .cal-time{
            display: none;
          }
          .cal-current-time-marker::before {
            display: none !important;
          }
        
          .timeline-box{
              left: -13%;
              position: relative;
              width: 113%;
          }
    }
}

.timeline{
    div.cal-event:focus{
        outline: none !important;
    }
}


.calendar-component .monthview-container table.table {
    
    td {
        width: 50px;
        height: 40px;
        div {
            padding-left: 0px;
        }
        display: flex;
        align-content: center;
        justify-content: center;

    }
    td div:not(.day, .day-container, .number) {
        width: 30px !important;
        height: 30px;
    }
    tr {
        display: flex;
        justify-content: space-around;
    }
}


// agenda attendee component
.attendee-search-bar input{
    border: 1px solid #cecece !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
  }  
  
  .attendee-search-bar .searchbar-input {
    border: 1px solid #cecece !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
  }
  .title-icon {
    font-size: 40px !important;
    color: #42b9fe;
    overflow: auto;
  }
  ion-icon {
    pointer-events: none;
  }
  .btn-no-color {
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    ion-icon {
      font-size: 35px;
    }
  }
  .btn-no-color:focus {
    outline: 0;
  }


// center
app-diploma-assinar ion-content .main-content, 
app-approve-event ion-content .main-content, 
app-view-event ion-content .main-content,
app-expediente-pr .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-expediente-detail ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-despacho ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-despacho-pr ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-pedido ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-diploma ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-gabinete-digital ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-publications ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-agenda ion-content .container-wrapper{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-chat ion-content .main-content{
    max-width: 1366px !important;
    margin: 0px auto !important;
}

app-header .ion-toolbar{
    max-width: 1366px;
    margin: 0px auto;
}

app-header-no-search  .ion-toolbar{
    max-width: 1366px;
    margin: 0px auto;
}

/* .main-content{
    height: 100% !important;
    overflow-y: auto !important;
} */


body, .blue-background{ background: #0782C9 !important;}

@media only screen and (min-width: 1365px) {

    body{
        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
    }
    .blue-background {
        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
    }
}


:host {
    ion-content {
        --background:none;
    }
    --background:none;
}

ion-content {
    --background:none;
}
.header-default-padding{
    padding: 30px 20px 0 20px !important;
  }
.content-default-padding{
   padding: 0px 20px 0 20px !important;
}



.chat-popover .popover-content {
    width: 100% !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    top: calc(100% - 160px) !important;
    max-height: 160px;
    min-height: 160px; 
}


.monthview-secondary-with-event, .text-muted {
    .day {
        color: #cecece;
    }
}

ion-icon{
    cursor: pointer;
}

.temporary-message {
    background-color: #00000073;

    .modal-wrapper {
        width: 500px;
        height: fit-content;
        height: 300px;
    }  
}


@media only screen and (max-width: 500px) { 

    ::-webkit-scrollbar {
      width: 5px !important;
      height: 5px !important;
    }
}


::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
  
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(92, 92, 92);
}


// ===================================
.hide-scroll::-webkit-scrollbar {
    display: none !important;
}
    
/* Track */
.hide-scroll::-webkit-scrollbar-track {
    display: none !important;
}

/* Handle */
.hide-scroll::-webkit-scrollbar-thumb {
    display: none !important;
}

/* Handle on hover */
.hide-scroll::-webkit-scrollbar-thumb:hover {
    display: none !important;
}

.notification{
    position: absolute;
    top: 23px;
    right: 0px;
    height: 87px;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
    background-color: white;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    background-image: url("/assets/background/background-circle-negative.svg");
    background-size: 686px 674px;
    background-position: center;
    background-position-y: 0px;
    background-repeat: no-repeat;
    min-width: 340px;
    box-shadow: 0px 2px 10px #0000003d;
    animation-name: notification;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    transition: 1s;

    .main-content {
        display: flex;
        align-items: center;
    }
    .message {
        font-size: 12pt;
    }
}

.notificationPush{
    position: absolute;
    top: 23px;
    right: 0px;
    height: 87px;
    max-width: 400px;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
    background-color: white;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    background-image: url("/assets/background/background-circle-negative.svg");
    background-size: 686px 674px;
    background-position: center;
    background-position-y: 0px;
    background-repeat: no-repeat;
    min-width: 340px;
    box-shadow: 0px 2px 10px #0000003d;
    display: flex;
    align-items: center;
    animation-name: notification-top;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    transition: 1s;

    .main-content {
        display: flex;
        align-items: center;
    }
    .message {
        font-size: 12pt;
    }
}


@keyframes notification {
    from {right: -100%;}
    to {right:  0px;}
}

@keyframes notification-top {
    from {top: -100%;}
    to {top:  23px;}
}


.calendar-component .monthview-container table.table tbody {
    tr:nth-child(n+6) {
      display:  none;
    }
}

.modal {
    display: flex !important;
}

// calendar
.mat-calendar-body-selected {
    background-color: #42b9fe !important;
}

// select background
// .mat-primary .mat-option.mat-selected:not(.mat-option-disabled), .mat-option-ripple {
//     background-color: #fafafa !important;
// }

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: #42b9fe36 !important;
}

.mat-form-field-underline.ng-tns-c193-6.ng-star-inserted, .mat-form-field-underline {
    // display: none;
}

.date-hour-picker {
    margin-top: -6px;
  
    label#mat-form-field-label-7 {
      display: none;
    }
  
    .span.ng-tns-c193-4, .ng-star-inserted {
      // display: none;
    }
  
    .ng-star-inserted{
      // display: none;
      position: absolute;
      width: 100%;
      height: 43px;
      opacity: 0;
      button {
        width: 100%;
        height: 100%;
      }
    }
    button {
      width: 100%;
      height: 100%;
    }
  
    .mat-datepicker-toggle, mat-datepicker-toggle {
      width: 100%;
    }
  }

.mat-active span {
    color: #0d89d1 !important;
}

// .ng-star-inserted {
//     opacity: 0;
// }



.input-error{
    border: 1px solid #fba0a0 !important;
}

.input-errror-message{
    margin-top: -16px;
    margin-bottom: 10px;
    font-size: 11pt;
}


.mat-selected {
    background-color: #87cefa !important;
    span {
        color: white !important;
    }
}

ngx-mat-datetime-content{
    .actions {
        .mat-button-disabled {
            background-color: #ff5a5a59 !important;
        }
    } 

}


// angular material inputs

.mat-form-field-infix, .mat-form-field-wrapper {
    padding: 0px !important;
}