form.occurrence-report-form .state-report {
  position: relative;
}

form.occurrence-report-form .state-report .desc {
  text-align: center;
  color:      darkgoldenrod;
  font-size:  0.9rem
}

form.occurrence-report-form .state-report #edit-actions {
  position:   fixed;
  bottom:     80px;
  left:       0;
  right:      0;
  background: gray;
}

#ui-id-1.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item a.ui-menu-item-wrapper {
  color:           #333333;
  font-size:       1.2rem;
  text-decoration: none;
  display:         block;
}

/*---- btn-upload-photo ----*/
form.occurrence-report-form .state-report .btns-upload-photo-container {
  position: absolute;
  width:    100%;
  margin:   10px 0;
}

form.occurrence-report-form .state-report .btns-upload-photo-container .btns-upload-photo {
  width:      282px;
  margin:     0 auto;
  visibility: hidden;
  display:    flex;
  gap:        5px;
  flex-wrap:  wrap;
}

form.occurrence-report-form .state-report .btns-upload-photo-container .btn-upload-photo {
  display:    inline-block;
  width:      90px;
  height:     90px;
  background: white;
}

form.occurrence-report-form .state-report .btns-upload-photo-container .btn-upload-photo:before {
  display:     inline-block;
  width:       90px;
  height:      90px;
  padding:     15px 25px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size:   40px;
  content:     "\f030";
  color:       #333333;
  position:    relative;
  z-index:     100
}

form.occurrence-report-form .state-report .form-item-files-field-photo-,
form.occurrence-report-form .state-report .form-item-field-photo {
  display: none;
}

/*---- canvas-photo ----*/

.canvas-photo {
  clear:    both;
  position: relative;
  width:    280px;
  margin:   10px auto;
}

.canvas-photo canvas {
  width:         90px;
  height:        90px;
  border:        1px dashed #333333;
  padding:       0;
  border-radius: 4px;
}

/*---- preview ----*/

.page-report .preview {
  background: #FFFFFF;
  position:   fixed;
  z-index:    1100;
  top:        0;
  bottom:     0;
  left:       0;
  right:      0;
  display:    none;
}

.page-report .preview img {
  position:     absolute;
  top:          45%;
  left:         50%;
  margin-right: -50%;
  transform:    translate(-50%, -50%);
  width:        90%;
}

.page-report .preview .delete-photo {
  position:  absolute;
  top:       10px;
  font-size: 20px;
  z-index:   2005;
  left:      20px;
  color:     red;
}

.page-report .preview .close {
  position:  fixed;
  top:       5px;
  z-index:   2005;
  color:     #000000;
  right:     5px;
  font-size: 40px;
  opacity:   0.8;
}

/*---- datetime ----*/
form.occurrence-report-form .state-report .event-date-wrapper {
  margin:  10px 0;
  padding: 0 20px;
}

form.occurrence-report-form .state-report .event-date-wrapper #edit-event-date > .form-item-event-date-date {
  width: 100%;
}

form.occurrence-report-form .state-report .event-date-wrapper #edit-event-date > .form-item-event-date-date > .field-label-wrapper {
  display: none;
}

form.occurrence-report-form .state-report .event-date-wrapper #edit-event-date > .form-item-event-date-date > .field-content-wrapper {
  width: 100%;
}

form.occurrence-report-form .state-report .event-date-wrapper #edit-event-date > .form-item-event-date-date > .field-content-wrapper input {
  width:            100%;
  border-radius:    0.375rem;
  padding:          0.375rem 0.75rem;
  border:           1px solid #DEE2E6;
  color:            #212529;
  display:          block;
  font-size:        1rem;
  font-weight:      400;
  line-height:      1.5;
  appearance:       none;
  background-color: var(--bs-body-bg);
  background-clip:  padding-box;
  transition:       border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

/*---- location ----*/
form.occurrence-report-form .state-report .location-wrapper {
  padding: 0 20px;
}

form.occurrence-report-form .state-report .location-wrapper .location-latlng-wrapper {
  display: flex;
  gap:     0 10px;
  margin:  10px 0;
}

form.occurrence-report-form .state-report .location-wrapper .location-latlng-wrapper > .form-item {
  margin: 0;
}

/*---- issues ----*/
form.occurrence-report-form .state-report .issues {
  margin:    0 15px;
  padding:   10px 0 10px 0;
  font-size: 18px;
}

form.occurrence-report-form .state-report .issues .form-item {
  margin: 5px 0 0 0;
}

form.occurrence-report-form .state-report .issues input.form-checkbox {
  display: none;
}

form.occurrence-report-form .state-report .issues input.form-checkbox + label::before {
  display:     inline-block;
  opacity:     1;
  padding:     0 3px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  content:     "\f0c8";
  color:       #AAAAAA;
}

form.occurrence-report-form .state-report .issues input.form-checkbox:checked + label:before {
  color:       rgb(99, 208, 63);
  font-weight: 900;
  content:     "\f14a";
}

form.occurrence-report-form .state-report .issues input.form-radio {
  display: none;
}

form.occurrence-report-form .state-report .issues input.form-radio + label::before {
  display:     inline-block;
  opacity:     1;
  padding:     0 3px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  content:     "\f111";
  color:       #AAAAAA;
}

form.occurrence-report-form .state-report .issues input.form-radio:checked + label:before {
  color:       rgb(99, 208, 63);
  font-weight: 900;
  content:     "\f111";
}

form.occurrence-report-form .state-report .issues .level2 {
  margin:  0 0 0 25px;
  display: none;
}

form.occurrence-report-form .state-report .issues .level3 {
  margin:  0 0 0 25px;
  display: none;
}

form.occurrence-report-form .state-report .issues .form-type-textfield {
  margin:  0 0 0 25px;
  display: none;
}

/*---- map ----*/
#report-form-occurrence-map {
  position:    fixed;
  z-index:     9999;
  top:         0;
  bottom:      0;
  left:        0;
  right:       0;
  padding-top: 60px;
  width:       100%;
  height:      100%;
}

#get-position-from-maps {
  width:  100%;
  margin: 0 auto;
}

.get-position-from-maps-close {
  display:   none;
  z-index:   0;
  color:     #000000;
  position:  fixed;
  right:     5px;
  top:       5px;
  font-size: 40px;
  opacity:   1;
}

/*---- home ----*/
body.page-report-state-home {
  padding-top:      30px;
  background-color: #FFFFFF;
}

/*body.page-report-state-home .container-xl {*/
/*  padding: 0;*/
/*}*/

.state-home .report-content {
  color:     #666666;
  font-size: 14px;
}

.state-home .report-content a {
  color:    #666666;
  position: relative;
  display:  block
}

.state-home .report-section-title {
  text-align:     center;
  font-size:      13px;
  background:     #AAAAAA;
  color:          #FFFFFF;
  width:          65px;
  margin:         0 auto 10px auto;
  padding:        2px;
  letter-spacing: 1px;
  font-weight:    normal;
  border-radius:  2px;
}

.state-home .report-content .latest-news {
  padding: 10px 0;
}

.state-home .report-content .latest-news .news-item {
  padding: 5px 0;
}

/*.state-home .report-content .latest-news .news-item:nth-child(even) {*/
/*  background: #EEEEEE;*/
/*}*/

.state-home .report-content .latest-news .news-item .news-created {
}

.state-home .report-content .latest-news .news-item .created {
  font-family: monospace, serif;
  background:  #EEEEEE;
}

.state-home .report-content .latest-news .news-item .cate {
  background: #EEEEEE;
}

.state-home .report-content .latest-news .news-item .news-title {
  flex: 1
}

.state-home .latest-occurrences {
  margin:  10px 0;
  padding: 10px 0;
}

.state-home .latest-occurrences img {
  width:  100%;
  border: 1pt solid transparent;
}

.state-home .latest-occurrences a {
  color: #CCCCCC;
}

.state-home .latest-occurrences .report-date {
  position:   absolute;
  bottom:     0;
  font-size:  80%;
  text-align: center;
  margin:     0 auto;
  right:      0;
  width:      100%;
  opacity:    .5;
}

.state-home .quicklinks-wrapper {
  margin: 0 0 10px 0;
}

.state-home .quicklinks-item a {
  display:       block;
  width:         100%;
  font-size:     1.1rem;
  margin:        10px auto;
  padding:       10px 10px;
  text-align:    center;
  background:    #FFFFFF;
  border-radius: 5px;
  border:        1px solid #999999;
  color:         #333333;
}

.state-home .partner-wrapper {
  background-color: #FFFFFF;
}

.state-home .supporter-wrapper {
  background-color: #FFFFFF;
  padding:          20px 0;
}

.state-home .supporter-wrapper img {
  max-width: 80%;
  padding:   10px;
}

.state-home .supporter-wrapper a {
  color:     #666666;
  font-size: 18px
}

.state-home .supporter-wrapper h4 {
  color:     #666666;
  font-size: 18px
}

.state-home .more-home {
  padding-top: 10px;
}