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





.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{
    border-radius: 21px !important;
    color: black !important;
    margin: 0px auto !important;
    width: 35px !important;
}
.calendar-mdgpr-event-type-Oficial{
    border-left: 3px solid #ffb703 !important;
}
.calendar-mdgpr-event-type-Pessoal{
    border-right: 3px solid #f05d5e !important;
}
.calendar-mdgpr-event-type-both{
    border-left: 3px solid #ffb703 !important;
    border-right: 3px solid #f05d5e !important;
}
.calendar-pr-event-type-both{
    border-left: 3px solid #99e47b !important;
    border-right: 3px solid #958bfc !important;
}

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

.calendar-pr-event-type-Pessoal{
    border-left: 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%;
    }
}

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


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

.search-desktop-modal{
    .modal-wrapper{
        position: absolute;
        right: 0px;
        height: 100%;
        width: 400px;
    } 
}


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



.gabinete-digital-mobile-modal-to-Desktop{
    top: 75px;
    left: 340px;
    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;
        }
    }
}

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

@media only screen and (min-width: 1024px) {
  .gabinete-digital-mobile-modal-to-Desktop{
    top: 75px;
    left: 40%;

    .modal-wrapper{
      transform: none !important;
        width: 100%;
        height: 100%;
        box-shadow: none !important;
        .ion-page {
          transform: none !important;
        }
    }
  }

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

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


@media only screen and (min-width: 1024px) {
    .search-modal-to-desktop{
        padding-top: 0px;
        top: 75px;
        .modal-wrapper{
            transform: none !important;
              width: 100%;
              height: 100%;
              box-shadow: none !important;
              .ion-page {
                transform: none !important;
              }
          }
    }
}

.gabinete-digital-mobile-modal-to-Desktop{
    border-top-right-radius: 27px;
}

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



// timeline
.timeline-md{
    .cal-time{
      display: none;
    }
    .cal-current-time-marker::before {
      display: none !important;
    }
  
    .timeline-box{
        left: -17%;
        position: relative;
        width: 115%;
    }
}


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

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