/* rainbow247 plugin styles */

/* home page */
#divMapResults {
    height: 420px;
    width: 100%;
    margin: 0;
    max-width: 100%;
}

#divMapResults #content {
    padding-right: 2em;
}

#divMapResults .gm-style .gm-style-iw-c {
    padding: 16px !important;
}

html[lang^=fa] #divMapResults .gm-style .gm-style-iw-c button[title=Close] {
    right: auto !important;
    left: -6px;
}

#divMapResults h2.infowindow-heading {
    font-size: 18px;
    max-width: 20em;
    margin: 0 0 0.2em;
    line-height: 1.2;
}

#divMapResults .cluster-info .incident-info {
    margin-top: 8px;
}

#divMapResults .cluster-info .incident-info:first-child {
    margin-top: 0;
}

#divMapResults .pair {
    font-size: 14px;
}

#divMapResults .pair .name {
    font-weight: bold;
    padding-inline-end: 0.5em;
}

#divFilterWrapper {
    text-align: center;
    position: relative;
    z-index: 99;
}

#divMapResults + #divFilterWrapper {
    top: -30px;
}

#divFilterToolbar {
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: auto;
    padding: 9px;
    background-color: #fff;
    border-radius: 10px;
}

#divFilterToolbar select {
    color: #999;
    width: auto;
    max-width: 9em;
    margin: 0 3px;
}

#divFilterToolbar select#selectPerp { max-width: 12em; }
#divFilterToolbar select#selectProvince { max-width: 10.5em; }

#divFilterToolbar input.has-value,
#divFilterToolbar select.has-value {
    color: var(--color);
    border-color: var(--color);
}

#divFilterToolbar select.has-value option:first-child {
    color: transparent;
}

#divFilterToolbar input[type=text] {
    width: auto;
    max-width: 13.5em;
}

#divFilterToolbar #divSearchStringAndButton {
    display: flex;
}

#divFilterToolbar #divSearchStringAndButton #inputSearchString {
    margin-left: 3px;
}

#divFilterToolbar #divSearchStringAndButton #submitFilter {
    font-family: dashicons!important;
    font-size: 20px;
    display: inline-block;
    height: var(--form-field-height, 40px);
    position: static;
    margin-inline-start: -50px;
}
#divFilterToolbar #divFilterStartAndEndDate {
    position: absolute;
    left: 0px;
    top: 49px;
    height: 303px;
    padding: 0 9px 9px;
    display: flex;
    background-color: white;
    /*     border: black solid 1px; */
}

html[lang^=fa] #divFilterToolbar #divFilterStartAndEndDate {
    right: 0px;
    left: auto;
}

#divFilterToolbar #divFilterStartAndEndDate.hidden {
    display: none;
}

@media (max-width: 999px) {
    #divFilterToolbar {
	display: block;
    }
    #divFilterToolbar input[type=text] {
	width: 100%;
	max-width: none;
	display: block;
    }
    #divFilterToolbar select, #divFilterToolbar select#selectPerp, #divFilterToolbar select#selectProvince {
	width: 100%;
	max-width: none;
	margin: 3px 0;
	display: block;
    }
    #divFilterToolbar #divSearchStringAndButton #inputSearchString {
	margin-left: 0;
    }
}

#divFilterStartAndEndDate h3 {
    font-size: 14px;
    font-family: tahoma;
    margin: 0rem 0;
    font-style: normal;
    font-weight: normal;
    background-color: white;
    color: var(--paletteColor4);
    border: var(--paletteColor5) solid 1px;
}

/*  change the colour of the links that switch from "day picker" to "year/month" to "decade/year" */
#divFilterStartAndEndDate .datepicker-plot-area .datepicker-navigator .pwt-btn-switch {
    color: var(--linkInitialColor);
    text-decoration: underline;
}

#divFilterStartAndEndDate .datepicker-plot-area .datepicker-day-view .table-days td.today span {
    background-color: #fff;
    color: var(--paletteColor1);
    text-shadow: none;
}

#divFilterStartAndEndDate .datepicker-parent.blank .datepicker-plot-area .datepicker-day-view .table-days td.selected span {
    background-color: #fff;
    color: #333;
}

#divFilterStartAndEndDate .datepicker-parent {
    position: relative;
}

html[lang^=en] #divFilterStartAndEndDate .datepicker-plot-area .datepicker-navigator .pwt-btn-next,
html[lang^=en] #divFilterStartAndEndDate .datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
html[lang^=en] #divFilterStartAndEndDate .datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    float: right;
}

#divFilterStartAndEndDate a.clear-filterdate {
    display: block;
    position: absolute;
    top: 3px;
    right: 7px;
    font-size: 12px;
    left: auto;
    cursor: pointer;
}

body.rtl #divFilterStartAndEndDate a.clear-filterdate {
    right: auto;
    left: 7px;
}

section.rainbow247-incidentgrid-section {
    margin-bottom: 3rem;
}

@media (max-width: 767px) {
    section.rainbow247-incidentgrid-section article:not(.first3) {
	display: none;
    }
}

#hMatchingReportsText {
    display: none;

    text-align: center;
    margin-top: 0;
    line-height: 1;
    font-size: 1.6rem;
    font-weight: normal;
    color: var(--paletteColor3);
}

#hMatchingReportsText .report-count {
    color: var(--paletteColor1);
}

#divSearchResults {
    position: relative;
    z-index: 1;
}

.rainbow247-incidentgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 26px;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .rainbow247-incidentgrid {
	grid-template-columns: 1fr;
    }
}

.rainbow247-incident {
    background-color: var(--paletteColor5);
    padding: 1.5em;
    border-radius: 15px;
    position: relative;
    margin-top: 2em;
}

#divViewMatching {
    display: none;
    padding-bottom: 2rem;
    border-bottom: var(--paletteColor3) solid 1px;
    margin-bottom: 2rem;
}

#divViewMatching.show {
    display: block;
}

.rainbow247-incident.incident-template {
    display: none;
}

.rainbow247-incidentgrid .rainbow247-incident {
    margin-top: 0em;
}

.rainbow247-incident .dashicons-before:before {
    position: relative;
    top: 2px;
    color: var(--paletteColor1);
}

.rainbow247-incident .display.date {
    margin-top: 2.5em;
    margin-bottom: 1em;
}

@media (min-width: 1300px) {
    .rainbow247-incident .display.date {
	margin-top: 0;
    }
}

.rainbow247-incident .offset-tab {
    background-color: var(--paletteColor1);
    color: #fff;
    padding: 5px 9px;
    width: 250px;
    transform: skewX(-17deg);
    position: absolute;
    right: -10px;
    top: 19px;
}

body.rtl .rainbow247-incident .offset-tab {
    right: auto;
    left: -7px;
}

.rainbow247-incident .offset-tab > div {
    transform: skewX(17deg);
}

.rainbow247-incident .offset-tab .dashicons-before:before {
    color: #fff;
    padding-right: 22px;
}

body.rtl .rainbow247-incident .offset-tab .dashicons-before:before {
    padding-right: 0;
    padding-left: 22px;
}

@media (max-width: 767px) {
    .rainbow247-incident .offset-tab {
	width: 195px;
    }
}

@media (max-width: 374px) {
    .rainbow247-incident .display.date {
	margin-bottom: 0em;
	margin-top: 50px;
    }
    .rainbow247-incident .offset-tab {
	width: 75vw;
    }
}

.rainbow247-incident .info-box {
    position: relative;
    background-color: var(--paletteColor8);
    margin: 1em -0.7em;
    padding: 0.7em;
    border-radius: 1em;
}

.rainbow247-incident .info-box .victim-number {
    position: absolute;
    right: 10px;
    top: -10px;
    background-color: var(--paletteColor1);
    color: var(--paletteColor8);
    padding: 0 0.5em;
    border-radius: 0.8em;
}
body.rtl .rainbow247-incident .info-box .victim-number {
    right: auto;
    left: -10px;
}

.rainbow247-incident .info-box .name-value-pair {
    margin-block-end: 0.2em;
}

.rainbow247-incident .info-box .name-value-pair span.name {
    color: var(--paletteColor1);
    padding-inline-end: 0.3em;
}

.rainbow247-incident .info-box h4 {
    color: var(--paletteColor1);
    font-size: 16px;
    font-weight: normal;
    margin: 0;
}

html[lang^=fa] .rainbow247-incident .info-box h4 {
    font-family: Yekan Bakh;
}

.rainbow247-incident .info-box .name-value-pair span.name:after,
.rainbow247-incident .info-box h4:after {
    content: ':';
}

.rainbow247-incident .info-box.followup-questions .name-value-pair span.name:after,
.rainbow247-incident .info-box.followup-questions h4:after {
    content: none;
}

.rainbow247-incident .info-box .display {
    margin: 1em 0;
    break-inside: avoid;
}

.rainbow247-incident .info-box .display.mediafiles,
.rainbow247-incident .info-box .update-mediafiles {
    text-align: center;
}

@media (min-width: 768px) {
    .rainbow247-incident .info-box .display.mediafiles,
    .rainbow247-incident .info-box .update-mediafiles {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 2.5em -4em;
	justify-content: center;
    }
}

.rainbow247-incident .info-box .mediafile img,
.rainbow247-incident .info-box .mediafile video {
    max-height: 150px;
    border-radius: 15px;
    box-shadow: 10px 10px 10px rgb(180 180 180 / 50%);
}

.rainbow247-incident .info-box .mediafile.not-image-or-video {
    width: 135px;
    max-height: 150px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 10px 10px 10px rgb(180 180 180 / 50%);
    border: #ddd solid 1px;
    padding: 7px 7px;
}

@media (max-width: 767px) {
    .rainbow247-incident .info-box .mediafile {
	margin: 1rem 0;
    }

    .rainbow247-incident .info-box .mediafile.not-image-or-video {
	margin: 1rem auto;
    }
}

.rainbow247-incident .info-box .mediafile.not-image-or-video img {
    max-height: 85px;
    border-radius: unset;
    box-shadow: none;
}

.rainbow247-incident .info-box .mediafile.not-image-or-video .filename {
    font-size: 12px;
    line-height: 1.3;
    margin-top: 0.5em;
}

.rainbow247-incident .info-box .display:first-child {
    margin-top: 0;
}

.rainbow247-incident .info-box .display:last-child {
    margin-bottom: 0;
}

.rainbow247-incident .info-box .display ul {
    list-style-type: none;
    padding-inline-start: 0;
}

.rainbow247-incident .info-box .display ul li {
    margin: 0;
}

.rainbow247-incident .incident-updates > h3,
.single-incident .related-incidents h3 {
    color: var(--paletteColor1);
    text-align: center;
}

.rainbow247-incident .incident-updates .info-box {
    background-color: #fdf4e3;
}

.rainbow247-incident .incident-updates .info-box.updates h4 {
    font-size: 19px;
}

.rainbow247-incident .incident-updates .info-box.updates .update-content + h4 {
    margin-top: 1.5em;
}

.rainbow247-incident .loading-indicator {
    color: #fff;
}

.rainbow247-incident a.more {
    display: block;
    font-weight: bold;
    text-align: end;
}

body.home #main section.not-passive {
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 1rem 3rem;
}

body.home section.not-passive .wp-block-columns {
    align-items: center;
    margin: 0;
}

body.home section.not-passive h3,
body.home section.not-passive h4 {
    margin: 0;
}

body.home section.not-passive a.rainbow247-button {
    background-color: #fff;
}

body.home section.rainbow247-provincegrid-section {
    padding-top: 2em;
}

.uagb-post-grid article .uagb-post__inner-wrap,
.uagb-post-grid article .uagb-post__inner-wrap img {
    border-radius: 24px;
}

body.rtl #main .uagb-post-grid .uagb-post__text {
    text-align: center;
}

body.rtl #main .uagb-post-grid.faqs .uagb-post__text {
    text-align: right;
}

/* All Farsi and English FAQs paragraph Should be Justify */
body.home .faqs .answer,
body.page #main .uagb-post-grid.faqs .uagb-post__text .uagb-post__excerpt {
    text-align: justify;
}

body.rtl #main .uagb-post__text .uagb-post-grid-byline {
    font-size: 16px;
    margin-top: 1rem;
}

body.home .faqs {
    max-width: 500px !important;
}

body.home .faqs .faq-wrapper {
    padding: 5px 15px;
    border-bottom: var(--paletteColor5) solid 2px;
    cursor: pointer;
    border-radius: 5px;
}

body.home .faq-wrapper span.dashicons {
    position: relative;
    top: 7px;
    margin-inline-end: 0.5rem;
    width: 16px;
    height: 16px;
    font-size: 13px;
    border: #666 solid 1px;
    color: #666;
}

body.home .faqs .faq-wrapper.viewing {
    background-color: var(--paletteColor5);
}

body.home .faqs .faq-wrapper .question {
    font-size: 18px;
}

body.home .faqs .faq-wrapper.viewing .question {
    color: var(--paletteColor1);
}

body.home .faqs .faq-wrapper.viewing span.dashicons {
    border-color: var(--paletteColor1);
}

body.home .faqs .faq-wrapper .answer {
    display: none;
    padding-inline-start: 22px;
}


/* TODO: make the selects when they have a value selected --paletteColor4: #353535; */
body #main article>.hero-section {
    background-color: var(--paletteColor1);
}

body #main article>.hero-section h1 {
    color: var(--paletteColor8);
}

/* page subtitle, which crudely forces itself back into the hero-section */
#main .hero-section + .entry-content > h2.page-subtitle:first-child {
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
    margin-top: -82px !important;
    margin-bottom: 32px !important;
    color: var(--paletteColor8);
}

@media (max-width: 767px) {
    body #main article>.hero-section h1 {
	padding: 50px 0 75px 0;
    }

    #main .hero-section + .entry-content > h2.page-subtitle:first-child {
	margin-top: -107px !important;
	margin-bottom: 57px !important;
    }
}

/* incident form */
:root {
    --form-element-background-color: #f5f5f5;
    --form-element-focus-color: #e5e5e5;
    --form-element-text-color: #787878;
}

#formIncidentform,
.restricted-width {
    max-width: 1020px;
    margin: 0 auto;
}

#formIncidentform {
    line-height: 1.3;
}

#formIncidentform.update p.please-enter-your-code {
    background-color: var(--paletteColor5);
    text-align: left;
    padding: 0.5em;
}

body.rtl #formIncidentform.update p.please-enter-your-code {
    text-align: right;
}

#formIncidentform.update input[name="followupcode"] {
    width: 13em;
}

#formIncidentform.update h2 {
    font-size: 24px;
}

form p {
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 46px;
}

@media (max-width: 767px) {
    .grid-2col {
	grid-template-columns: 1fr;
    }
}

.grid-2col .question-block .input-wrapper,
.grid-2col .question-block .select-wrapper {
    width: 100%;
}

.grid-2col .question-block .input-wrapper input[type="text"],
.grid-2col .question-block .select-wrapper select {
    width: 100%;
}

#formIncidentform h2.number-sticker {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin: 1rem auto;
    font-size: 35px;
    line-height: 1.7;
    text-align: center;
    background-color: var(--paletteColor1);
    color: var(--paletteColor8);
}

.question-block {
    margin: 1em 0;
    position: relative;
    line-height: 1.3;
}

.question-block .select-wrapper {
    display: inline-flex;
    background-color: var(--form-element-background-color);
    padding: 0px;
    border-radius: 15px;
}

.question-block .select-wrapper select {
    height: 46px;
    background-color: var(--form-element-background-color);
    border-color: var(--form-element-background-color);
    padding: 8px 40px 8px 27px;
    border-radius: 15px;
    color: #999;
}

.question-block .select-wrapper select:focus {
    border-color: var(--form-element-focus-color);
    color: var(--form-element-text-color);
}

.question-block .select-wrapper select.has-value {
    color: var(--form-element-text-color);
}

.question-block .input-wrapper {
    display: inline-flex;
    background-color: var(--form-element-background-color);
    padding: 2px 20px 2px 5px;
    border-radius: 15px;
    border: var(--form-element-background-color) solid 1px;
}

.question-block > .label:first-child {
    display: none;
}

.question-block .input-wrapper.has-focus,
.question-block .textarea-wrapper.has-focus {
    border-color: var(--form-element-focus-color);
}

.question-block .input-wrapper .dashicons-before {
    display: inline-block;
    height: 40px;
}

.question-block .input-wrapper .dashicons-before:before {
    display: inline-block;
    line-height: 1.3;
    width: 30px;
    height: 30px;
    font-size: 30px;
    vertical-align: middle;
    text-align: center;
    color: var(--form-element-text-color);
}

.question-block .input-wrapper .dashicons-before + input[type=text] {
    border-color: transparent;
    background-color: transparent;
    color: var(--form-element-text-color);
    padding-left: 0;
}

.question-block .input-wrapper textarea {
    border-color: var(--form-element-background-color);
}

.question-block .input-wrapper textarea:focus {
    border-color: var(--form-element-focus-color);
}

.question-block .textarea-wrapper {
    background-color: var(--form-element-background-color);
    padding: 5px;
    border-radius: 15px;
    border: var(--form-element-background-color) solid 1px;
    color: var(--form-element-text-color);
}

.question-block .textarea-wrapper .dashicons-before:before {
    font-size: 30px;
    width: 30px;
    height: 30px;
}

.question-block .textarea-wrapper textarea {
    border-color: var(--form-element-background-color);
    color: var(--form-element-text-color);
}

.question-block .radio-wrapper {
    background-color: var(--form-element-background-color);
    color: var(--form-element-text-color);
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border-radius: 15px;
}

.question-block .radio-wrapper .radio-buttons {
    min-width: 325px;
    margin-inline-start: 2rem;
}

.question-block .radio-wrapper .radio-buttons label {
    padding-inline-start: 0.5em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .question-block .radio-wrapper {
	background-color: transparent;
	padding: 8px 0;
    }

    .question-block .radio-wrapper .radio-buttons {
	background-color: var(--form-element-background-color);
	margin: 5px 0;
	padding: 8px 16px;
	border-radius: 15px;
    }

    .question-block .radio-wrapper .radio-buttons label {
	margin: 0;
    }
}

.question-block .radio-wrapper .radio-buttons label:first-child {
    padding-inline-start: 0;
}

.question-block .radio-wrapper .radio-buttons label input[type="radio"] {
    display: inline-block;
    margin-inline-end: 0.3em;
}

@media (max-width: 767px) {
    .question-block .radio-wrapper {
	display: block;
    }

    .question-block .radio-wrapper .radio-buttons {
	min-width: none;
	margin-inline-start: 0;
	display: flex;
	justify-content: space-evenly;
    }
}

.question-block.required::after {
    content: '*';
    position: absolute;
    right: -7px;
    top: -19px;
    font-size: 50px;
    font-weight: bold;
    line-height: 1.3;
    color: var(--paletteColor1);
}

.question-block input[type="date"] {
    max-width: 16em;
}

.question-block input[type="tel"] {
    width: 16em;
}

.question-block select {
    width: auto;
}
.question-block input.auto-width {
    width: auto;
}

.question-block input {
    max-width: 40em;
}

.question-block .todo {
    position: absolute;
    text-align: end;
    right: 0;
    top: 0;
    color: #ff9a69;
    font-style: italic;
}

body.rtl .question-block .todo {
    right: auto;
    left: 0;
}
.question-block .todo::before {
    content: 'TO DO: ';
}

div.g-recaptcha > div {
    margin: 0 auto;
}

#divEndOfForm {
    max-width: 630px;
    margin: 0 auto;
    text-align: center;
}

#divSubmitStatus > div {
    padding: 8px 16px;
    border-radius: 15px;
    color: var(--form-element-text-color);
    background-color: #50EC8B;
    margin: 0.5rem 0;
}

#divSubmitStatus > div.status-green { background-color: #50EC8B; }
#divSubmitStatus > div.status-yellow { background-color: #ECD052; }
#divSubmitStatus > div.status-red { color: #fff; background-color: #DF4344; }

#divSuccessMessage > div {
    margin: 0.5rem 0;
}

/* NOTE: this is temporary, so that we can see the error messages but still witness the process of receiving the status messages */
/* #divSubmitStatus > div.hidden { */
/*     display: block; */
/*     opacity: 0.2; */
/* } */

form:not(.myselforother) div.hide-until-myselforother {
    display: none;
}

.only-third-party-report,
form.third-party-report .not-third-party-report,
select.hide-u-if-self-report option[value=U],
.radio-buttons.hide-u-if-self-report label.val-U {
    display: none;
}

form.third-party-report .only-third-party-report,
form.third-party-report select.hide-u-if-self-report option[value=U],
form.third-party-report .radio-buttons.hide-u-if-self-report label.val-U {
    display: initial;
}

form .question-block .option-text { display: none !important; }

/* single incident page */
.single-incident #divMapResults {
    height: 255px;
}

.single-incident .rights.list-all {
    margin: 2em -40px 1em;
    background-color: var(--paletteColor1);
    padding: 2em 2em;
    color: var(--paletteColor8);
    border-radius: 25px;
}

.single-incident .rights.list-all label {
    display: block;
    margin: 0;
    line-height: 1.3;
    opacity: 0.3;
}

.single-incident .rights.list-all label.checked {
    opacity: 1;
}

span.fake-checkbox {
    display: inline-block;
    position: relative;
    top: 3px;
    width: 1em;
    height: 1em;
    border: white solid 1px;
    border-radius: 3px;
    margin-inline-end: 0.2em;
}


span.fake-checkbox img {
    position: relative;
    top: -4px;
    height: 1em;
}


table.incident-data ul.rights {
    /* list-style-type: none; */
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

/* the "related incidents" */
.single-incident .related-incidents {
    width: var(--container-width);
    max-width: var(--container-width);
    margin: 2rem auto;
}

.single-incident .link-to-update {
    display: flex;
    justify-content: flex-end;
}

.single-incident .link-to-update > div:first-child {
    line-height: 2.7;
    padding-inline-end: 1em;
}

@media (max-width: 767px) {
    .single-incident .link-to-update {
	display: block;
	text-align: end;
    }

    .single-incident .link-to-update > div:first-child {
	line-height: 1.3;
	padding-inline-end: 0;
    }
}
/* normal WP pages */