.errorMsg {
    display: none;
    color: darkred;
    font-size: 0.8em;
}

#quickReport {
    background: white;
    padding: 10px;
}

#quickReport .formRow {
    margin: 10px 0;
}

#quickReport .custom-radio .custom-control-label {
    width: 100%;
}

#quickReport .custom-checkbox .custom-control-label {
    width: 100%;
}

#quickReport .sigPad label {
    width: 100%;
}

#quickReport textarea {
    resize: none;
    font-size: 16px;
    width: 75%;
    height: 32px;
    display: inline-block;
}

#quickReport input {
    font-size: 16px;
    display: inline-block;
}

#quickReport input[type="checkbox"], #quickReport input[type="radio"] {
    width: auto;
    margin: 0;
}

#quickReport input[type="checkbox"] + label, #quickReport input[type="radio"] + label {
    display: inline-block;
}

#quickReport .comboboxWrap {
    white-space: nowrap;
    position: relative;
    display: block;
}

#quickReport .comboboxWrap select {
    display: none;
}

#quickReport .comboboxWrap input[readonly] {
    background: #efefef;
    color: #777;
}

#quickReport .comboboxWrap input.missingField, #quickReport input[type="file"].missingField {
    background: #FFB2AF !important;
}

#quickReport .comboboxWrap input + button {
    width: 30px !important;
    height: 28px !important;
    margin-right: -20px !important;
    margin-top: -9px;
    padding: 0 !important;
    background: white url(/img/selectorGray.png) no-repeat 3% center;
    border: medium none;
}

#quickReport .rowCustom {
    margin: 10px 0;
}

#quickReport .rowCustom .comboboxWrap {
    width: 70%;
}

#quickReport .rowCustom .comboboxWrap input {
    width: 90%;
}

#quickReport .rowCustom .comboboxWrap input + button {
    margin-top: -30px;
}

#quickReport .rowCustom .comboboxWrap input + button:before {
    content: '';
}

#quickReport .rowCustom > .form-control {
    display: inline-block;
}

#quickReport .rowCustom .comboboxWrap {
    display: inline-block;
}

#quickReport .datePickerLabel {
    margin-left: 4px;
    width: 70%;
}

#quickReport .datePickerLabel input {
    width: 100%;
}

#quickReport .boxLabel {
    margin: 12px 5px 0;
}

#quickReport .customCbs {
    display: inline-block;
    vertical-align: top;
}

#quickReport .rowCustom input[type="checkbox"], #quickReport .rowCustom input[type="radio"] {
    display: inline-block;
    height: 16px;
    vertical-align: bottom;
}

#quickReport .customSelectAll {
    float: left;
    white-space: nowrap;
}

#quickReport .customSelectAll label {
    margin: 0 8px;
}

#quickReport .customSelectAll input[type="checkbox"] {
    vertical-align: top;
}

#quickReport .rangeLabel {
    display: block;
    width: 70%;
}

#quickReport .rangeLabel .rangePicker {
    display: inline-block;
}

#quickReport .rangeLabel .fa.fa-calendar.abstractDateField {
    top: 0;
    right: 18px
}

#quickReport .rangeLabel span {
    display: inline-block;
}

#quickReport .comboboxWrap input + button span.ui-button-text {
    padding: 0 !important;
    line-height: 1.3 !important;
}

#quickReport #uploadWrapQuickReport {
    background: #F3F3F3;
    padding: 20px;
}

#quickReport #uploadWrapQuickReport.focus {
    border: 1px solid #496FB6;
}

#quickReport #uploadWrapQuickReport input[type="file"] {
    opacity: 0;
    position: absolute;
    z-index: 1;
}

#quickReport #uploadWrapQuickReport .customUploadBtn img {
    margin: 0 0 0 20px;
}

#quickReport #submitBtn[disabled="disabled"] {
    background: #666;
    color: #aaa;
    text-shadow: #666 1px 2px;
}

#quickReport .sigWrapper {
    width: 200px;
    height: 67px;
}

#quickReport .customUpload input[type="file"] {
    opacity: 0;
    position: absolute;
    z-index: 1;
}

#quickReport .customUpload .customUploadBtn img {
    margin: 0 0 0 20px;
}

#quickReport .comboboxWrap input {
    width: 100%;
    margin-left: 5px;
    border-radius: 0 !important;
}

#quickReport .comboboxWrap .comboboxItself.notActive {
    opacity: 0;
    height: 0;
    width: 0;
}

#quickReport .comboboxWrap .comboboxItself.shown input {
    width: 90%;
}

#quickReport .comboboxWrap.used .appButtons {
    font-size: 0.75em;
    margin-bottom: 15px;
}

#quickReport .comboboxWrap .appButtons button {
    padding: 5px 10px;
    min-width: 60px;
    background: #eee;
    border: none;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    margin: 0 5px;
}

#quickReport .comboboxWrap .appButtons.error button {
    color: red;
    box-shadow: 0px 0px 2px rgba(255, 0, 0, 0.8);
}

body[dir=rtl] #quickReport .comboboxWrap input {
    margin-left: 0;
    margin-right: 5px;
}

#quickReportMap {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
}

#quickReportSuccess .successCircle {
    position: relative;
    width: 195px;
    height: 195px;
    margin: 0 auto;
    border: 2px solid #27957A;
    border-radius: 50%;
}

#quickReportSuccess .successCircleInner {
    position: absolute;
    width: 160px;
    height: 160px;
    left: calc(50% - 80px);
    top: calc(50% - 80px);
    border-radius: 50%;
    border: 5px solid #27957A;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.25);
}

#quickReportSuccess .successSign {
    position: absolute;
    width: 25px;
    height: 50px;
    left: calc(50% - 10px);
    top: calc(50% - 35px);
    border: 5px solid #27957A;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
}

#quickReportSuccess .buttonsWrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#quickReportSuccess .viewReport,
#quickReportSuccess .createNewReport {
    width: 95%;
    font-size: 24px;
    border-radius: 8px;
    max-width: 400px;
    padding: 10px 0;
    margin-bottom: 10px;
}

#quickReportSuccess .viewReport:hover,
#quickReportSuccess .createNewReport:hover {
    text-decoration: none;
    text-underline: none;
    cursor: pointer;
}

#quickReportSuccess .viewReport {
    background: #27957A;
    color: #FFF;
}

#quickReportSuccess .createNewReport {
    background: transparent;
    border: 2px solid #27957A;
    color: #27957A;
}

#quickReportSuccess .successHeader {
    font-weight: bold;
    color: #27957A;
}

#quickReportSuccess .successText {
    margin: 15px 0;
    line-height: 20px;
}

#quickReportNoLocation {
    display: none;
    margin: 10px;
    border: 1px solid red;
    color: red;
    font-weight: bold;
    padding: 10px;
}

#quickRegPassWrap label {
    width: 100%;
}

#quickReportResidentStream {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.55);
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
}

#quickReportResidentStream #infoBox {
    font-size: 1.4em;
}

#quickReportResidentStream .withGenericLoading {
    position: relative;
}

#quickReportResidentStream .withGenericLoading::before {
    position: absolute;
    content: '';
    z-index: -1;
    transition: all 0.2s ease-in-out;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#quickReportResidentStream .withGenericLoading.loading::before {
    z-index: 99912;
    background: #fff;
}

#quickReportResidentStream .withGenericLoading.loading::after {
    position: absolute;
    content: '';
    z-index: 99913;
    left: calc(50% - 32px);
    top: calc(50% - 32px);
    background: url("/img/tinyLoader.gif") no-repeat scroll center center transparent;
    width: 64px;
    height: 64px;
    display: inline-block;
}

#quickReportResidentStream #infoBox .liveMsg:not(.hidden)::after {
    content: '';
    display: inline-block;
    margin: 0 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.35);
    background: #F10F00;
    animation: pulsate 3s ease-in-out infinite;
}

#quickReportResidentStream video {
    max-height: 400px;
    max-width: 100%;
    border-radius: 8px;
}

#customFields .customUpload {
    width: 50%;
}

#customFields .customUpload label {
    width: 100%;
}

#customFields .customUploadBtn {
    width: 27%;
    background: white;
    border: 2px solid #4071CE;
    padding: 15px 25px;
    color: #4071CE;
    margin: 10px 0;
    text-align: center;
}

#customFields .customUpload .customUploadBtn img {
    margin: 0;
}

#quickReportSuccess .card-body {
    text-align: center !important;
}

.w-60{
    width: 60%;
}

#anonEmailCell{
    width: 273px;
}

.formRow .input-group {
    width: 75%;
}

.missingField {
    background: #FFB2AF !important;
}

.boxLabel.missingField {
    background: inherit !important;
    color: #FFB2AF !important;
}
.control-label{
    display: inline;
}
.hint-uploader-label{
    display: flex!important;
}
body[dir='rtl'] .field-city_group_id .d-block{
    display: inline!important;
}
body[dir='rtl'] .field-city_group_id .select2-container{
    width: 60%!important;
}

body:not([dir='rtl']) #quickReport .formInputRow {
    clear: both;
    text-align: right;
}
body:not([dir='rtl']) #quickReport .formInputRow label {
    float: left;
    text-align: left;
}
body:not([dir='rtl']) #quickReport .formInputsWrap {
    float: left;
}

body[dir='rtl'] #quickReport .formInputRow {
    clear: both;
    text-align: left;
}
body[dir='rtl'] #quickReport .formInputRow label {
    float: right;
    text-align: right;
}
body[dir='rtl'] #quickReport .formInputsWrap {
    float: right;
}

body:not([dir='rtl']) #customFields .fakeRadio,
body:not([dir='rtl']) #customFields .fakeCb {
    position: absolute;
    top: -3px;
    left: -5px;
    z-index: 1;
}
body[dir='rtl'] #customFields .fakeRadio,
body[dir='rtl'] #customFields .fakeCb {
    position: absolute;
    top: -3px;
    right: -5px;
    z-index: 1;
}

@keyframes pulsate {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-height: 300px) {
    #quickReportMap {
        height: 150px;
    }
}
@media (min-width: 768px) {
    .ui-autocomplete {
        max-width: 320px;
    }
    body:not([dir='rtl']) #quickReport label {
        width: 23%;
        display: inline-block;
        font-size: 14px;
    }
    #customFields .customUpload .customUploadBtn img {
        margin-left: -12px;
    }
    body:not([dir='rtl']) #quickReport .comboboxWrap label {
        width: 24%;
    }
    body[dir='rtl'] #quickReport .comboboxWrap label {
        width: 40%;
    }
    #quickReport .comboboxWrap input + button {
        margin-right: 0 !important;
    }

    ul.ui-autocomplete {
        font-size: 12px;
        max-width: 65vw;
    }

    #quickReportSuccess a.viewReport,
    #quickReportSuccess a.createNewReport {
        padding: 20px 0;
    }

    .container #quickReportSuccess {
        border: none;
    }

    #quickReport .rangeLabel {
        width: 100%;
    }

    .xdsoft_datetimepicker {
        left: 20px !important;
    }

    #quickReport .sigPad {
        border: none;
    }
    body[dir='rtl'] .field-city_group_id .select2-container {
        width: 71%!important;
    }
    body:not([dir='rtl']) .field-catGroups .control-label {
        white-space: normal;
    }
    body:not([dir='rtl']) .field-quickreportform-description .control-label {
        white-space: nowrap;
    }
    body:not([dir='rtl']) #quickReport label {
        font-size: 13px;
    }
}
@media (min-width: 1024px) {
    .field-quickreportform-description .control-label{
        vertical-align: bottom;
    }
    .field-quickreportform-phone .control-label{
        white-space: nowrap;
    }
    .field-quickreportform-cell .control-label{
        vertical-align: top;
    }
}
@media (max-width: 992px) {
    #quickReportMap {
        height: 25vh;
    }
    #quickReport #submitBtn {
        width: 100%;
        padding: 5px 0;
        margin-left: 0;
    }
}
@media (max-width: 375px) {
    #customFields label{
        width: 100%;
    }
}
#quickReport .help-block {
    clear: both;
}
body:not([dir='rtl']) #quickReport .select2Widget {
    float: right;
}
body[dir='rtl'] #quickReport .select2Widget {
    float: left;
}
span.required {
    color: red;
    font-size: inherit;
}

body:not([dir='rtl']) #customFields .customRemark {
    width: 100%;
    text-align: left;
}
body[dir='rtl'] #customFields .customRemark {
    width: 100%;
    text-align: right;
}
body:not([dir='rtl']) #customFields .radio,
body:not([dir='rtl']) #customFields textarea,
body:not([dir='rtl']) #customFields .customCbs,
body:not([dir='rtl']) #customFields .dateRangeWrap,
body:not([dir='rtl']) #customFields .datePickerLabel {
    margin-left: 1%!important;
}
body[dir='rtl'] #customFields .radio,
body[dir='rtl'] #customFields textarea,
body[dir='rtl'] #customFields .customCbs,
body[dir='rtl'] #customFields .dateRangeWrap,
body[dir='rtl'] #customFields .datePickerLabel {
    margin-right: 1%!important;
}
body:not([dir='rtl']) #quickReport #customFields input[type="text"],
body:not([dir='rtl']) #quickReport #customFields .custom-checkbox {
    margin-left: 0!important;
}
body[dir='rtl'] #quickReport #customFields input[type="text"],
body[dir='rtl'] #quickReport #customFields .custom-checkbox {
    margin-right: 0!important;
}
#quickReport .select2-container,
#customFields .datetimepicker-input {
    width: 100%!important;
}

@media (min-width: 1201px) {
    body:not([dir='rtl']) #quickReport label {
        width: 24%;
    }
    body[dir='rtl'] #quickReport label {
        width: 39%;
    }
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group,
    body:not([dir='rtl']) #customFields .dateRangeWrap,
    body:not([dir='rtl']) #customFields .radio {
        width: 75%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group,
    body[dir='rtl'] #customFields .dateRangeWrap,
    body[dir='rtl'] #customFields .radio {
        width: 60%;
    }
    body:not([dir='rtl']) #customFields .customRemark {
        padding-left: 25%;
    }
    body:not([dir='rtl']) #customFields .customUpload {
        margin-left: 25%;
    }
    body[dir='rtl'] #customFields .customRemark {
        padding-right: 40%;
    }
    body[dir='rtl'] #customFields .customUpload {
        margin-right: 40%;
    }
    #customFields .rangeLabel {
        width: 50%!important;
    }
    #customFields .rangePicker,
    #customFields .custom-checkbox,
    #customFields .custom-radio {
         width: 100%!important;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 1.4%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -1.4%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 1.7%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -1.7%;
    }
    #customFields .customUpload > label,
    #customFields .customUpload .hint-uploader-label {
        width: 100%!important;
    }
    body:not([dir='rtl']) #customFields .datePickerLabel {
        width: 75%!important;
    }
    body[dir='rtl'] #customFields .datePickerLabel {
        width: 60%!important;
        margin-left: 0;
    }
    #customFields .datetimepicker-input {
        width: 100%!important;
    }
}
@media (max-width: 1200px) {
    body:not([dir='rtl']) #quickReport input[type="text"] {
        margin-left: 3px;
    }
    body[dir='rtl'] #quickReport input[type="text"] {
        margin-right: 3px;
    }
    body[dir='rtl'] #quickReport textarea {
        margin-right: 3px;
    }
    body:not([dir='rtl']) #quickReport label {
        width: 24%;
    }
    body[dir='rtl'] #quickReport label {
        width: 39%;
    }
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group,
    body:not([dir='rtl']) #customFields .dateRangeWrap,
    body:not([dir='rtl']) #customFields .radio {
        width: 75%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group,
    body[dir='rtl'] #customFields .dateRangeWrap,
    body[dir='rtl'] #customFields .radio {
        width: 60%;
    }
    body:not([dir='rtl']) #customFields .customRemark {
        padding-left: 25%;
    }
    body:not([dir='rtl']) #customFields .customUpload {
        margin-left: 25%;
    }
    body[dir='rtl'] #customFields .customRemark {
        padding-right: 40%;
    }
    body[dir='rtl'] #customFields .customUpload {
        margin-right: 40%;
    }
    #customFields .rangeLabel {
        width: 50%!important;
    }
    #customFields .rangePicker,
    #customFields .custom-checkbox,
    #customFields .custom-radio {
        width: 100%!important;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 1.5%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -1.5%;
    }
    #customFields .customUpload > label,
    #customFields .customUpload .hint-uploader-label {
        width: 100%!important;
    }
    body:not([dir='rtl']) #customFields .datePickerLabel {
        width: 75%;
    }
    body[dir='rtl'] #customFields .datePickerLabel {
        width: 60%;
        margin-left: 0;
    }
    body:not([dir='rtl']) #customFields .datetimepicker-input {
        width: 100%!important;
        margin-left: 0!important;
    }
    body[dir='rtl'] #customFields .datetimepicker-input {
        width: 100%!important;
        margin-right: 0!important;
    }
}
@media (max-width: 991px) {
    body:not([dir='rtl']) #quickReport label {
        width: 23%;
    }
    body[dir='rtl'] #quickReport label {
        width: 38%;
    }
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group {
        margin-left: 1%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group {
        margin-right: 1%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 1.5%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 1.75%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -1.75%;
    }
}
@media (max-width: 991px) and (min-width: 721px) {
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group {
        margin-right: 1%;
    }
    body:not([dir='rtl']) #quickReport .formRow .input-group .input-group-append {
        margin-left: -1%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group {
        margin-left: 1%;
    }
    body[dir='rtl'] #quickReport .formRow .input-group .input-group-append {
        margin-right: -1%;
    }
}
@media (max-width: 768px) {
    body:not([dir='rtl']) #quickReport label {
        font-size: 14px;
    }
    body[dir='rtl'] #quickReport label {
        font-size: 14px;
    }
    #quickReport textarea, #quickReport input,
    #quickReport .select2Widget,
    #quickReport .formRow .input-group {
        font-size: 14px;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 1.5%;
        margin-right: -1px;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 1.5%;
        margin-left: -1px;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -1.5%;
    }
}
@media (max-width: 720px) {
    body:not([dir='rtl']) #quickReport label {
        width: 29%;
    }
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group,
    body:not([dir='rtl']) #customFields .dateRangeWrap,
    body:not([dir='rtl']) #customFields .datePickerLabel,
    body:not([dir='rtl']) #customFields .radio {
        width: 70%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group,
    body[dir='rtl'] #customFields .dateRangeWrap,
    body[dir='rtl'] #customFields .datePickerLabel,
    body[dir='rtl'] #customFields .radio {
        width: 60%;
    }
    body:not([dir='rtl']) #customFields .customRemark {
        padding-left: 30%;
    }
    body:not([dir='rtl']) #customFields .customUpload {
        margin-left: 30%;
    }
    body[dir='rtl'] #customFields .customRemark {
        padding-left: 40%;
    }
    body[dir='rtl'] #customFields .customUpload {
        margin-left: 40%;
    }
    #customFields .rangeLabel {
        width: 50%!important;
    }
    #customFields .rangePicker,
    #customFields .custom-checkbox,
    #customFields .custom-radio {
        width: 100%!important;
    }
    #customFields .datetimepicker-input {
        width: 100%!important;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 3.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -3.5%;
    }
}
@media (max-width: 425px) {
    body:not([dir='rtl']) #quickReport label {
        width: 39%;
    }
    body[dir='rtl'] #quickReport label {
        width: 39%;
    }
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group,
    body:not([dir='rtl']) #customFields .dateRangeWrap,
    body:not([dir='rtl']) #customFields .radio,
    body:not([dir='rtl']) #customFields .datePickerLabel {
        width: 60%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group,
    body[dir='rtl'] #customFields .dateRangeWrap,
    body[dir='rtl'] #customFields .radio,
    body[dir='rtl'] #customFields .datePickerLabel {
        width: 60%;
    }
    body:not([dir='rtl']) #customFields .customRemark {
        padding-left: 40%;
    }
    body:not([dir='rtl']) #customFields .customUpload {
        margin-left: 40%;
    }
    body[dir='rtl'] #customFields .customRemark {
        padding-right: 40%;
    }
    body[dir='rtl'] #customFields .customUpload {
        margin-right: 40%;
    }
    #customFields .rangeLabel {
        width: 50%!important;
    }
    #customFields .rangePicker,
    #customFields .custom-checkbox,
    #customFields .custom-radio {
        width: 100%!important;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 1.5%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -1.5%;
    }
    #customFields .datePickerLabel {
        display: block;
    }
}
@media (max-width: 375px) {
    body:not([dir='rtl']) #customFields label,
    body:not([dir='rtl']) #customFields input,
    body:not([dir='rtl']) #customFields textarea,
    body:not([dir='rtl']) #customFields .dateRangeWrap,
    body:not([dir='rtl']) #customFields .radio,
    body:not([dir='rtl']) #customFields .datePickerLabel,
    body:not([dir='rtl']) #customFields .customUpload,
    body:not([dir='rtl']) #quickReport .quickRegRow label,
    body:not([dir="rtl"]) #quickReport #anonFname,
    body:not([dir="rtl"]) #quickReport #anonLname,
    body:not([dir="rtl"]) #quickReport #anonEmailCell,
    body[dir='rtl'] #customFields label,
    body[dir='rtl'] #customFields input,
    body[dir='rtl'] #customFields textarea,
    body[dir='rtl'] #customFields .dateRangeWrap,
    body[dir='rtl'] #customFields .radio,
    body[dir='rtl'] #customFields .datePickerLabel,
    body[dir='rtl'] #customFields .customUpload,
    body[dir="rtl"] #quickReport #anonFname,
    body[dir="rtl"] #quickReport #anonLname,
    body[dir="rtl"] #quickReport #anonEmailCell {
        width: 100%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 1.5%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 1.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -1.5%;
    }
    body:not([dir='rtl']) #customFields .customRemark {
        padding-left: 0;
    }
    body:not([dir='rtl']) #customFields .customUpload {
        margin-left: 0;
    }
    body[dir='rtl'] #customFields .customRemark {
        padding-right: 0;
    }
    body[dir='rtl'] #customFields .customUpload {
        margin-right: 0;
    }
    body:not([dir='rtl']) label[for=anonFname]{
        display: inline-block;
    }
    body:not([dir='rtl']) label[for=anonLname]{
        display: inline-block;
    }
    body:not([dir='rtl']) #quickReport .js-email-cell-wrap label,
    body:not([dir='rtl']) #quickReport .js-email-cell-wrap input {
        width: auto;
    }
    body[dir='rtl'] #quickReport .js-email-cell-wrap label,
    body[dir='rtl'] #quickReport .js-email-cell-wrap input {
        width: auto;
    }
}
@media (max-width: 320px) {
    body:not([dir='rtl']) #quickReport label {
        width: 49%;
    }
    body[dir='rtl'] #quickReport label {
        width: 49%;
    }
    body:not([dir='rtl']) #customFields label,
    body:not([dir='rtl']) #customFields input,
    body:not([dir='rtl']) #customFields textarea,
    body:not([dir='rtl']) #customFields .dateRangeWrap,
    body:not([dir='rtl']) #customFields .radio,
    body:not([dir='rtl']) #customFields .datePickerLabel,
    body:not([dir='rtl']) #customFields .customUpload,
    body[dir='rtl'] #customFields label,
    body[dir='rtl'] #customFields input,
    body[dir='rtl'] #customFields textarea,
    body[dir='rtl'] #customFields .dateRangeWrap,
    body[dir='rtl'] #customFields .radio,
    body[dir='rtl'] #customFields .datePickerLabel,
    body[dir='rtl'] #customFields .customUpload {
        width: 100%;
    }
    body:not([dir='rtl']) #quickReport textarea,
    body:not([dir='rtl']) #quickReport input,
    body:not([dir='rtl']) #quickReport .select2Widget,
    body:not([dir='rtl']) #quickReport .formRow .input-group {
        width: 49%;
    }
    body[dir='rtl'] #quickReport textarea,
    body[dir='rtl'] #quickReport input,
    body[dir='rtl'] #quickReport .select2Widget,
    body[dir='rtl'] #quickReport .formRow .input-group {
        width: 49%;
    }
    #customFields .rangeLabel {
        width: 49%!important;
    }
    #customFields .rangePicker,
    #customFields .custom-checkbox,
    #customFields .custom-radio {
        width: 100%!important;
    }
    body:not([dir='rtl']) #quickReport .field-parentId input {
        margin-left: 4.5%;
    }
    body:not([dir='rtl']) #quickReport .field-parentId .input-group-append {
        margin-right: -4.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId input {
        margin-right: 4.5%;
    }
    body[dir='rtl'] #quickReport .field-parentId .input-group-append {
        margin-left: -4.5%;
    }
    body:not([dir='rtl']) label[for=anonFname]{
        display: inline-block;
    }
    body:not([dir='rtl']) label[for=anonLname]{
        display: inline-block;
    }
}