.calculate {
  box-sizing: border-box;
  --co-body-accent: #0000A8;
  --co-body-accent-contrast: #fff;
  --co-textfld-bg: #fff;
  --co-textfld-border: #ccc;
  --co-textfld-active-border: #aaa;
  --co-textfld-focus-border: var(--co-body-accent);
  --co-textfld-valid-active-border: hsl(140 50% 65%);
  --co-textfld-valid-focus-border: hsl(140 50% 50%);
  --co-textfld-invalid-active-border: hsl(20 65% 65%);
  --co-textfld-invalid-focus-border: hsl(20 65% 50%);
  --co-btn-text: var(--co-body-accent-contrast);
  --co-btn-bg: var(--co-body-accent);
  --co-btn-active-bg: #000074;
  --co-btn-focus-bg: #000074;
}
*,
.calculate::before,
.calculate::after {
  box-sizing: inherit;
}
.calculate {
  --leading-inputs: 120%;
  --padding-inputs: 0.75em;
  --margin-form-gap: 1.5em;
  --margin-btn-gap: 1em;
  --width-input-border: 2px;
  --width-inputs: 70px;
  --width-textarea: 450px;
  --height-textarea: 250px;
  --radius-inputs: 0.25em;
  --opacity-input-disabled: 0.5;
  --transition-duration-inputs: 250ms;
  --transition-function-inputs: ease-in-out;
  --transition-inputs: color var(--transition-duration-inputs),
    background-color var(--transition-duration-inputs),
    border-color var(--transition-duration-inputs)
      var(--transition-function-inputs);
}

:read-only:not(label, button, input[type="button"], input[type="submit"], input[type="reset"]) {
  cursor: default;
}

:disabled {
  opacity: var(--opacity-input-disabled);
  cursor: not-allowed;
}
.calculate
input,
button,
input::file-selector-button {
  font: inherit;
  color: inherit;
  accent-color: var(--co-body-accent);
  transition: var(--transition-inputs);
  line-height: var(--leading-inputs);
}
.calculate
input[type="number"],
input[type="text"],
button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button {
  border: var(--width-input-border) solid var(--co-textfld-border);
  padding: var(--padding-inputs);
  border-radius: var(--radius-inputs);
  background-color: var(--co-textfld-bg);
}
.calculate
input[type="number"]:focus,
input[type="text"]:focus,
button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input::file-selector-button:focus {
  outline: 0;
}
.calculate
input[type="number"],
input[type="text"] {
  max-width: var(--width-inputs);
  width: 100%;
}
.calculate
input[type="number"]:hover:not([readonly], [disabled]),
input[type="number"]:active:not([readonly], [disabled]),
input[type="text"]:hover:not([readonly], [disabled]),
input[type="text"]:active:not([readonly], [disabled]) {
  border-color: var(--co-textfld-active-border);
}
.calculate
input[type="number"]:focus:not([readonly], [disabled]),
input[type="text"]:focus:not([readonly], [disabled]) {
  border-color: var(--co-textfld-focus-border);
}
.calculate
input[type="number"]:required:valid:hover:not([readonly], [disabled]),
input[type="number"]:required:valid:active:not([readonly], [disabled]),
input[type="text"]:required:valid:hover:not([readonly], [disabled]),
input[type="text"]:required:valid:active:not([readonly], [disabled]) {
  border-color: var(--co-textfld-valid-active-border);
}
.calculate
input[type="number"]:required:valid:focus:not([readonly], [disabled]),
input[type="text"]:required:valid:focus:not([readonly], [disabled]) {
  border-color: var(--co-textfld-valid-focus-border);
}
.calculate
input[type="number"]:required:invalid:hover,
input[type="number"]:required:invalid:active,
input[type="text"]:required:invalid:hover,
input[type="text"]:required:invalid:active {
  border-color: var(--co-textfld-invalid-active-border);
}
.calculate
input[type="number"]:required:invalid:focus,
input[type="text"]:required:invalid:focus {
  border-color: var(--co-textfld-invalid-focus-border);
}
.calculate
input[type="number"]::selection,
input[type="text"]::selection {
  background-color: var(--co-body-accent);
  color: var(--co-body-accent-contrast);
}
.calculate
button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button {
  border-color: var(--co-btn-bg);
  background-color: var(--co-btn-bg);
  color: var(--co-btn-text);
  cursor: pointer;
}
.calculate
button:hover,
button:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
input::file-selector-button:hover,
input::file-selector-button:active {
  background-color: var(--co-btn-active-bg);
  border-color: var(--co-btn-active-bg);
}
.calculate
button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input::file-selector-button:focus {
  background-color: var(--co-btn-active-bg);
}
.calculate
input::file-selector-button {
  margin-right: var(--margin-form-gap);
}

.calculate{
    display: table;
    background-color: white;
    border-radius: 10px;
    border: solid 3px;
    border-color: #424242;
    font: normal normal 14px "roboto_ltregular", sans-serif, aria;
}
.calculate_header{
    display: table;
    width: 100%;
    padding: 7px 0;
    background-color: #DDDDDD;
    text-align: center;
}
.calculate_header span{
    display: block;
    color: #363636;
}
.calculate_title{
    font-size: 26px;
    font-weight: bold;
}
.calculate_description{
    font-size: 12px;
}
.form_calculate{
    margin: 20px;
}
.form_cols {
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.form_cols__item {
    margin-top: 10px;
    margin-bottom: 10px;
}
.form_calculate__input {
    width: 50px;
    margin: 0 5px;
}
.from_calc__text{
    padding-top: 12px;
    text-align: left;
    color: #5A5A5A;
    font-size: 14px;
    font-weight: bold;
}
.form_calc__label{
    width: 150px;
    text-align: right;
}
.form_calc_result{
    text-align: center;
    padding: 10px 20px;
    background-color: #DDDDDD;
    margin: 12px 7px;
}
.form_calculate_reset{
    text-align: center;
}
.calculate_title{
	margin-top:7px;
}
.calculate_description{
	margin-bottom:7px;
}