doneit-web/src/app/pages/events/events.page.scss

/* HEADER */
.ion-text-header-top{
    text-align: center;
    padding-top: 20px;
  }
  .div-logo{
    width: 98px;
  }
  .div-logo img{
    width: 100%;
  }
  .header-large{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    /* font-weight: 600; */
  }
  .header-medium{
    font-size: 16pt;
    font-family: roboto;
  }
  .header-xsmall{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12.7pt;
    font-weight: bold;
    padding-bottom: 3.5px;
    margin-bottom: 3.5px;
    border-bottom: 1px solid #ccc;
  }
  .p-small{
    font-size: 12pt;
    margin-top: 25px;
    color:#000;
  }
  
  /* CONTENT */
  .item-list-small{
      font-size: 14px;
      overflow: auto;
    }
    .ion-item-class{
      padding: 0;
    
    }
    .label-text{
      width: 100%;
      padding: 0;
      margin: 0;
    }
    
    //DIV
    .div-item-Oficial{
      width: 100%;
      overflow: auto;
      /* border-bottom: 1px solid #ccc; */
      margin: 10px 0 5px 0;
      background: #cab0dc;
      border-radius: 20px;
      padding: 10px;
      /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    }
    .div-item-Pessoal{
      width: 100%;
      overflow: auto;
      /* border-bottom: 1px solid #ccc; */
      margin: 10px 0 5px 0;
      background: #cbeecb;
      border-radius: 20px;
      padding: 10px;
      /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    }
    .div-up{
      width: 100%;
      overflow: auto;
    }
    .div-up h3{
      margin: 0;
      padding: 0;
      font-size: 17px;
      width: 100%;
    }
    .div-icon{
      width: 10%;
      font-size: 22px;
      float: left;
      color: #808080;
    }
    .div-icon ion-icon{
      display: block;
      margin: 0 auto;
    
    }
    .div-content-Oficial{
      width: 85%;
      float: left;
      border-left: 4px solid #cab0dc;
      padding: 0 0 0 12px;
    }
    .div-content-Pessoal{
      width: 85%;
      float: left;
      border-left: 4px solid #cbeecb;
      padding: 0 0 0 12px;
    }
    .div-content-Oficial h3, .div-content-Pessoal h3{
      font-size: 14pt;
      /* border: 1px solid red; */
    }
    .div-content-Oficial p, .div-content-Pessoal p{
      font-size: 12pt;
      color: rgb(94, 92, 92);
      padding: 0 !important;
      margin: 0 !important;
    }
    .div-botton{
      width: 100%;
      overflow: auto;
      margin: 10px 0 5px 0;
    }
    .div-botton-left{
      width: 10%;
      float: left;
    }
    .ion-icon-location{
      text-align: center;
      display: block;
      color: #000;
      font-size: 16px;
      margin: 0 auto;
    }
    .div-botton-middle{
      width: 75%;
      float: left;
      margin-top: 0.5px;
    }
    .div-botton-middle p{
      padding: 0;
      margin: 0;
    }
    .div-botton-right{
      width: 10%;
      float: left;
      margin: 0;
      padding: 0;
    }
    .ion-icon-attach{
      color: #666666;
      font-size: 20px;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 90px;
      height: 34px;
      float: right;
      margin-right: 37px;
    }
    
    .switch input {display:none;}
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ffffff;
      border: 1px solid #e16817;
      color: #e16817;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 23.5px; /* 26px;  */
      width: 24px;
      left: 4px;
      bottom: 4px;
      background-color: #ffffff;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #e16817;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(55px);
      -ms-transform: translateX(55px);
      transform: translateX(55px);
    }
    
    /*------ ADDED CSS ---------*/
    .pr
    {
      display: none;
      text-align: left !important;
      left: 25px !important; 
      color: white;
    }
    .mdgpr
    {

      left: 58px !important;
      color: #e16817;
    }
    
    .pr, .mdgpr
    {
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
      font-size: 12px;
      font-family: Verdana, sans-serif;
    }
    
    input:checked+ .slider .pr
    {display: block;
      background:#e16817;
    }
    
    input:checked + .slider .mdgpr
    {display: none;
    }
    
    /*--------- END --------*/
    
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
      
    }
    
    .slider.round:before {
      border-radius: 50%;
      border: 1px solid #e16817;
    }