page {
  height: 100%;
  width: 100vw;
  background-color: #f6f6f6;

  .report-type {
    height: 96px;
    background-color: #fff;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
      margin-left: 30px;
    }

    .radio {
      margin-right: 30px;
    }
  }

  .input-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-bottom: 5px;

    .img-r {
      width: 24px;
      height: 14px;
      margin-right: 30px;
      // margin-left: 10px;
    }
    .img-l {
      width: 24px;
      height: 14px;
    }
  }

  .patrol-picker {
    background-color: #fff;
    padding: 20px;

  }

  .conserve-picker {
    background-color: #fff;
    padding: 20px;

    .horizontal-line {
      height: 30px;
      width: 100%;
      border-radius: 5px;
      display: flex;
      justify-content: left;
      align-items: center;

      .circle {
        margin-left: 4px;
        width: 22px;
        height: 22px;
        background-color: #fff;
        border-radius: 50%;
      }

      .text {
        margin-left: 46px;
        font-size: 24px;
      }
    }
    .hl-one {
      background-color: #DFDFDF;

      .c-one {
        border: solid 4px #999999;
      }

      .t-one {
        color: #999999;
      }
    }
    .hl-two {
      background-color: #f7d3a5;

      .c-two {
        border: solid 4px #FE9B1C;
      }

      .t-two {
        color: #FE9B1C;
      }
    }
    .hl-three {
      background-color: #a0f3a4;

      .c-three {
        border: solid 4px #08D514;
      }

      .t-three {
        color: #08D514;
      }
    }

    .img-picker {
      margin: 20px;
    }
  }

  .sub-btn {
    width: 70%;
    margin: 80px auto;
  }
}