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-current-time-marker::before{
    width: 10px;
    height: 10px;
    background-color: #42b9fe !important;
    content: ".";
    color: transparent;
    left: 55px;
    position: absolute;
    border-radius: 91px;
    top: -3.5px;

}

.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;
    width: 30px !important;
    height: 30px;
    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{
        width: 100%;
        height: 100%;
    }
}

@media screen and (min-width: 1200px) { 
    .hide-desktop{
        display: none !important;
      }
      .container-div{
        border-bottom:none !important;
      }
}

.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%;
        width: 400px;
    }
}

.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{
    .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 {
    td {
        padding: 7.5px !important;
        div {
            padding-left: 0px;
        }
    }
}


// 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-approve-event ion-content .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;
}


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

@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%);
    }
    .blue-background {
        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%);
    }
}


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

ion-content {
    --background:none;
}



.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;
}