body { font-family: 'Arial', 'Helvetica', sans-serif; background-color: white; }
li { font-size: medium; font-weight: 500; }
.wrapper { margin: 0vw auto; padding: 2vw; max-width: 800px; min-width: 200px; }

.logo { width: 100%; text-align: center; margin: 20px 0px 0px 0px; }
.logo img { display: inline-block; vertical-align: middle; margin: 0px 10px; }
/* .logo img { width: 300px; } { height: 120px; } controlled on-page due to size differences */
.logo, .languageSelect { display: inline-block; }
.languageSelect { float:right; width: 300px; position: absolute; top: 3px; right: 6px; }

.searchingModal { display: block; position: absolute; top: 300px; left: 50%; right: 50%; }
.searchingModal>img { position: absolute; left: -25px; }

.main { text-align: center; }
.textBannerTop { font-size: x-large; font-weight: bold; padding: 2vw 1vw 0vw 1vw; text-align: center; }
.textBlockHeading { font-size: large; font-weight: bold; padding: 1vw 0.5vw 0vw 0.5vw; }

.warningPrompt { border: 1px solid black; border-radius: 5px; background-color: lightyellow; max-width: 500px; margin: 0px auto; }

.deviceDisplay { border: 1px solid black; border-radius: 5px; max-width: 500px; margin: 10px auto; padding: 6px; background-color: #eeffee; }

.sideBySideChild { display: inline-block; vertical-align: middle; padding: 3px; }
/* .wrappingText { word-break: break-word; width: 300px; } */

.imageButtonGrid>ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; padding: 0px; }
.imageButtonItem { list-style: none; display: block; border: 1px solid black; border-radius: 5px; cursor: pointer; }
.imageButtonItem span { font-weight: bold; display: block; }
.imageButtonItem img { width: 50%; padding: 6px; }

.diagnosticsList { margin: 2vw auto; text-align: left; counter-reset: li; list-style-type: none; }
.diagnosticsList>li { position: relative; padding: 3px 0px 30px 10px; }
.diagnosticsList>li:before { display: block; content: counter(li); counter-increment: li; height: 45px; width: 45px; border: 1px solid grey; border-radius: 50%; font-size: 30px; position: absolute; text-align: center; top: -8px; left: -45px; }
.inputCondition { position: relative; }
.inputHeading { font-weight: bold; }
.inputLeft, .inputRight { display: inline-block; vertical-align: top; }
.inputRight { float: right; margin: 0px; position: absolute; top: 0px; right: 0px; z-index: 999; }
.inputImei input, .inputSerial input, .imeiInput button, .blockElement input, .blockElement button { vertical-align: top; }
.inputImei>input, .inputSerial>input, .blockElement>input { border: 1px solid black; font-size: large; padding: 4px 6px; border-radius: 5px; }

.highlightYes { background-color: lightgreen; }
.highlightNo { background-color: darkred; color: white; }

.blockElement { padding: 3px; min-height: 50px; vertical-align: middle; }
.blockElement .selectLabel, .blockElement .select_box { display: inline-block; }
.blockElement .selectLabel { width: 40%; text-align: right; }

.select_values { display: inline-block; vertical-align: top; }
.select_box { display: inline-block; font-size: large; border-radius: 5px; width: 50%; margin: 5px 3px; vertical-align: middle; }
.languageSelect .select_box { width: 99%; }
.select_box .vs__selected-options { overflow: hidden; }
.select_box .vs__selected { white-space: nowrap; }

.inputTac input { border: 1px solid black; border-radius: 5px; padding: 0.3vw; font-size: large; vertical-align: middle; }
.actionButton { border: 1px solid black; padding: 7px 10px; border-radius: 5px; display: inline-block; vertical-align: middle; cursor: pointer; }

.deviceDetailBox { text-align: left; }
.deviceDetailBox img { width: 25%; display: inline-block; vertical-align: middle; outline: 1px solid black; border-radius: 5px; padding: 3px; background-color: white; }
.deviceDetailBox strong { display: inline-block; vertical-align: middle; text-align: left; padding: 10px; }

.inputImei, .selectMfgModel { display: inline-block; vertical-align: top; }
.inputCondition .inputHeading { margin: 0px 100px 0px 0px; }

#blockDiagnostics .warningPrompt { padding: 6px; }
#blockDiagnostics .warningPrompt p { text-align: left; padding: 0px 0px 0px 10px; margin: 0px 0px 6px 0px; }

#outcomeDiagnostics { max-width: 500px; margin: 10px auto; border: 1px solid black; border-radius: 5px; padding: 6px; background-color: #eeffee; }
.conditionTitle { font-weight: bold; margin: 0px 0px 10px 0px; }
.conditionDetails { margin: 0px 0px 10px 0px; }

.formRow { max-width: 600px; min-width: 300px; padding: 3px; margin: 0px auto; }
.formRow div, .formRow input { display: inline-block; }
.formRow div { width: 29%; text-align: right; }
.formRow input { border: 1px solid black; font-size: large; padding: 4px 6px; border-radius: 5px; width: 69%; }

.paymentTypeForm { position: relative; margin: 10px 0px 0px 0px; }
.paymentRadio, .paymentRadioLabel { display: inline-block; }
.paymentRadio { padding: 10px 10px 10px 10px; margin: 5px; }
.paymentRadioLabel { padding: 0% 1% 0% 0%; }
/* .paymentOptionsForm { height: 120px; } */
.select_option_panel { max-width: 600px; margin: 3px auto 20px auto; padding: 6px; border: 1px solid lightgray; border-radius: 5px; }
.select_option_panel label, .select_option_panel .inputLabel { display: inline-block; vertical-align: middle; }
.select_option_panel .inputLabel { width: 39%; text-align: right; }
.select_option_panel input { border: 1px solid black; font-size: large; padding: 4px 6px; border-radius: 5px; width: 59%; }
.select_option_panel .select_box { font-size: large; padding: 4px 6px; border-radius: 5px; width: 59%; }
.select_option_panel .select_box input { border: 0px solid white; font-size: large; padding: 4px 6px; border-radius: 5px; width: 59%; }


#outcomePayment { max-width: 500px; margin: 10px auto; border: 1px solid black; border-radius: 5px; padding: 6px; background-color: #eeffee; }
#outcomePayment .wrappingText { margin: 0px; padding: 3px; text-align: left; }

.radioRow { text-align: left; max-width: 500px; margin: 0px auto; }

#outcomeShipping { max-width: 500px; margin: 10px auto; border: 1px solid black; border-radius: 5px; padding: 6px; background-color: #eeffee; }
.footer { display: block; text-align: center; padding: 30px 0px 0px 0px; }
.appDownloads { display: block; text-align: center; }
.appDownloads img { display: block; height: 50px; display: inline-block; margin: 0px 10px 10px 10px; }

@media screen and (max-width: 500px) {
    .paymentTypeForm { display: grid; grid-template-columns: 1fr 1fr; }
    .paymentRadio, .paymentRadioLabel { display: block; }
    .paymentRadio { margin: 6px 0px 0px 85%; }
    .paymentRadioLabel { text-align: left; }
    .select_option_panel .inputLabel { text-align: right; }
    .select_option_panel input { width: 50%; }
    .select_option_panel .select_box { width: 50%; }
    .select_option_panel .select_box input { width: 50%; }
}