* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto';
  line-height: 1.16;
  font-weight: 500;
}

h1 {
  font-weight: 500;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #616365;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #616365;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #616365;
}

.cal-container {
    background: #D9EAF9;
    max-width: 672px;
    padding: 10px;
}

.cal-container .title {
    background: #0062c2;
    color: #ffffff;
    font-size: 50px;
    text-align: center;
    padding: 27px 0 28px 0;
}

.cal-container .cal-input {
    padding: 25px 0;
}

.cal-container .cal-input form {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.cal-container .cal-input form label {
    color: #0062c2;
    font-size: 25px;
    text-align: center;
}

.cal-container .cal-input form input {
    border: 2px solid #0062c2;
    border-radius: 0;
    color: #616365;
    background: rgba(235, 235, 235, 0.593);
    font-size: 20px;
    text-align: center;
    max-width: 195px;
    padding: 13px 10px 11px 10px;
}

.cal-container .cal-input form input::-webkit-input-placeholder {
    color: #D7D7D7;
    opacity: 1;
}

input:focus, input:focus-visible {
    outline: none;
    background: #fff !important;
}

.cal-container .cal-output {
    border-top: 4px solid #0062c2;
    background: #ffffff;
    padding: 20px 15px;
}

.cal-output table {
    border-spacing: 5px 0;
}

.cal-output th,
.cal-output td {
    text-align: center;
    font-weight: 500;
}

.cal-output th {
    border-bottom: 15px solid #ffffff;
    text-transform: uppercase;
    padding: 10px;
    word-wrap: break-word;
}

.cal-output th:not(.main) {
    width: 22%;
}

.cal-output tr th.usage,
.cal-output tr th.elt {
    font-size: 25px;
    line-height: 1;
}

.cal-output tr th.usage {
    background: #D9EAF9;
    color: #0062c2;
    text-align: left;
}

.cal-output tr th.elt {
    background: #0062c2;
    color: #FFFFFF;
}

.cal-output tr th.avgs,
.cal-output tr th.vs {
    font-size: 16px;
}

.cal-output tr th.avgs {
    background: #EFEFEF;
    color: #616365;
    text-align: left;
}

.cal-output tr th.vs {
    background: #298737;
    color: #FFFFFF;
}

.cal-output tr th.elt,
.cal-output tr th.vs,
.cal-output tr td {
    position: relative;
}

.cal-output tr th.elt::after,
.cal-output tr th.vs::after {
    border-top: 18px solid;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    content: '';
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    left: 0;
    right: 0;
    bottom: -12px;
    margin: auto;
}

.cal-output tr th.elt::after {
    border-top-color: #0062c2;
}

.cal-output tr th.vs::after {
    border-top-color: #298737;
}

.cal-output td {
    color: #616365;
    font-size: 20px;
    padding: 3px 12px 5px;
}

.cal-output td.label {
    color: #0062c2;
    text-align: left;
}

.cal-output td.label div {
    color: #616365;
    font-size: 14px;
    line-height: 1.14;
    word-wrap: break-word;
    word-break: break-word;
}

.cal-output td.money {
    text-align: right;
    padding-left: 25px;
}

.cal-output td.money::before {
    content: '$';
    display: block;
    position: absolute;
    left: 10px;
}

.cal-output tr td::after,
.cal-output tr.water td:not(.water):not(.electric)::before {
    background: #ADAFAF;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
}

.cal-output tr td.water::after,
.cal-output tr td.electric::after {
    left: 5px;
    width: calc(100% - 10px);
}

.cal-output tr td.water::after {
    background: #0062c2;
}

.cal-output tr td.electric::after {
    background: #298737;
}

.cal-output tr td::after {
    bottom: 0;
}

.cal-output tr.water td::before {
    top: 0;
}

.cal-output tr.water td.water {
    border-top: 2px solid #0062c2;
}

.cal-output tr.electric td.water {
    border-bottom: 2px solid #0062c2;
}

.cal-output tr td.water {
    background: #D9EAF9;
    color: #0062c2;
    border-left: 2px solid #0062c2;
    border-right: 2px solid #0062c2;
}

.cal-output tr.water td.electric {
    border-top: 2px solid #298737;
}

.cal-output tr.electric td {
    padding-bottom: 10px;
}

.cal-output tr.electric td::after {
    bottom: 6px;
}

.cal-output tr.electric td.electric {
    border-bottom: 2px solid #298737;
}

.cal-output tr td.electric {
    background: #EFEFEF;
    border-left: 2px solid #298737;
    border-right: 2px solid #298737;
}

@media only screen and (max-width: 580px) {
    .cal-container .title {
      font-size: 40px;
    }
    
    .cal-container .cal-output {
      padding: 5px 0;
    }
    
    .cal-container .cal-input {
        padding: 15px 0;
    }
    
    .cal-container .cal-input form label {
        font-size: 20px;
        margin: 0 16px 0 0;
    }

    .cal-container .cal-input form input {
        max-width: 145px;
    }

    .cal-output table {
        border-spacing: 4px 0;
    }

    .cal-output th {
        padding: 8px;
    }

    .cal-output th {
        width: 25% !important;
    }

    .cal-output tr th.usage, .cal-output tr th.elt{
        font-size: 18px;
    }

    .cal-output tr th.avgs, .cal-output tr th.vs {
        font-size: 12px;
    }

    .cal-output td {
        font-size: 14px;
        padding: 3px 6px 5px;
    }

    .cal-output td.money {
        padding-left: 21px;
    }

    .cal-output td.label div {
        font-size: 8px;
    }

    .cal-output tr th.elt::after,
    .cal-output tr th.vs::after {
        bottom: -8px;
    }

    .cal-output tr td.water::after, .cal-output tr td.electric::after {
        left: 4px;
        width: calc(100% - 8px);
    }
}