.logo {
    width: 160px;
    max-width: 100%;
    margin-bottom:20px;
}

body {
    /*background: rgb(241,245,249);
    background: -moz-linear-gradient(135deg, rgba(241,245,249,1) 0%, rgba(224,242,242,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(241,245,249,1) 0%, rgba(224,242,242,1) 100%);
    background: linear-gradient(135deg, rgba(241,245,249,1) 0%, rgba(224,242,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f1f5f9",endColorstr="#e0f2f2",GradientType=1);*/
    background:#f1f5f9;
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 400 !important;
    color: #2a4b4c !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: #121212;
    box-shadow: none;
    outline: 0 none;
    border: solid 1px #bbb !important;
}

input[type="number"],
input[type="password"],
input[type="text"] {
    position: relative;
    z-index: 0;
    padding: 12px 13px !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    margin-bottom: 5px;
    border: solid 1px #ddd;
    width: 100%;
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

select {
    height:47px !important;
}

input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #2a4b4c !important;
    opacity: 0.6 !important;

    /* Firefox */
}

input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #2a4b4c !important;
    opacity: 0.6 !important;
}

input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #2a4b4c !important;
    opacity: 0.6 !important;
}

textarea::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #2a4b4c !important;
    opacity: 0.6 !important;
    /* Firefox */
}

textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #2a4b4c !important;
    opacity: 0.6 !important;
}

textarea::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #2a4b4c !important;
    opacity: 0.6 !important;
}

.select select:hover,
.taginput .taginput-container.is-focusable:hover,
.textarea:hover,
.input:hover,
.select select.is-hovered,
.taginput .is-hovered.taginput-container.is-focusable,
.is-hovered.textarea,
.is-hovered.input {
    border-color: #ddd !important;
}

#mainheader {
    padding: 20px 0;
}

h1,
h2 {
    font-weight: 800 !important;
}

h3,
h4,
b,
strong {
    font-weight: 600 !important;
}

input {
    color: #2a4b4c;
    height: auto !important;
    margin-bottom: 10px !important;
}

button,
a {
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

button {
    border-radius: 3px !important;
    margin-top:10px !important;
    font-weight: 700;
    font-size: 14px !important;
}

#app button.is-danger {
    background:transparent !important;
    color:#f63051 !important;
    opacity:0.5;
    border: solid 1px #f63051 !important;
}

#app button.return-btn,
#app button.logout-btn {
    border:solid 1px transparent !important;
}

#app button.is-danger:hover {
    opacity:1;
    color:#f63051 !important;
}

.button.is-primary {
    color:#FFF !important;
    background-color: #2a4b4c !important;
}

.button.is-primary:hover {
    background-color: #3b5e5f !important;
}

.ahvenanmaa-label:hover {
    cursor:pointer;
}

#app input.elatuslaskelma-name-input {
    width:400px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
}

#app .calculation-row .inner-div,
#app .row > div {
    background: #f9fbfc;
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0px 23px 24px -24px rgba(0, 0, 0, 0.05);
    border:solid 1px #e0e6e9;
}

#app .calculation-row .inner-div {
    padding:20px;
}

#app .button:focus,
#app button:focus {
    box-shadow:none !important;
}

#app .row.calculation-row > div {
    background:transparent;
    padding:20px;
    box-shadow:none;
    border:none;
}

#app .logout-btn {
    position:absolute;
    top:0px;
    right:0px;
}

#app .return-btn {
    position:absolute;
    left:0;
    top:0;
}

#app .row > div.intro-container {
    box-shadow:none;
    background:transparent;
    border:none;
    padding-right:40px;
    display: flex;
    justify-content: center;
    flex-direction:column;
}

#app .row > div.intro-container p {
    font-size:15px;
}

#app .row > div.logo-container {
    background:transparent;
    border:none;
    text-align:center;
    box-shadow:none;
}

#app .row > div.table-col {
    padding: 0 0 0 0;
    margin-bottom:40px;
}

#app a {
    color:#2a4b4c;
}

#app table th,
#app table td {
    background:transparent;
    border:none;
    padding:20px 20px;
    vertical-align:middle;
    border-bottom:solid 1px #eee;
}

.tooltip-hl {
    display:inline-block;
}


.tooltip-hl:hover {
    cursor:pointer;
    text-decoration:underline;
}

#app table tr.valign-top td {
    vertical-align:top;
}

#app table td button {
    margin-left:5px;
}

#app table tr:nth-child(odd) td,
#app table tr:nth-child(odd) th {
    background:#f9fbfc;
}

#app table tr:nth-child(even) td,
#app table tr:nth-child(even) th {
    background:#fff;
}

#app table tr:first-child td:first-child {
    border-radius:6px 0 0 0;
}

#app table tr:first-child td:last-child {
    border-radius:0 6px 0 0;
}

#app table tr:last-child td:first-child {
    border-radius:0 0 0 6px;
    border-bottom:none;
}

#app table tr:last-child td:last-child {
    border-radius:0 6px 0 0;
    border-bottom:none;
}

#app table tr > td:last-child {
    text-align:right;
}

#app table tr > td:last-child {
    padding-right:10px;
}

#app table button {
    margin-top:0 !important;
}

#app table {
    background:transparent;
    border-radius:6px;
    margin-bottom:0px;
    width:100%;
}

#app .row > div.logo-container .logo {
    margin:80px 0 20px 0;
    width:200px;
}

.error-message {
    font-size:12px;
    color:#f63051;
    margin-bottom:10px;
}

#app .inner-table tr > td {
    padding-left:0 !important;
    padding-bottom:10px !important;
    padding-top:10px !important;
}

.button.is-danger {
    background-color: #f63051 !important;
}

.button.is-danger:hover {
    background-color:#931c30 !important;
}

#app .button.is-success {
    background-color:#6fc4c5 !important;
}

#app .create-new-btn {
    font-size:18px !important;
    margin-bottom:25px;
}

#app .button.is-success:hover {
    background-color:#84c0c1 !important;
}

.button:focus, .button.is-focused,
.select select:focus, .taginput .taginput-container.is-focusable:focus, .textarea:focus, .input:focus, .select select.is-focused, .taginput .is-focused.taginput-container.is-focusable, .is-focused.textarea, .is-focused.input, .select select:active, .taginput .taginput-container.is-focusable:active, .textarea:active, .input:active, .select select.is-active, .taginput .is-active.taginput-container.is-focusable, .is-active.textarea, .is-active.input {
    border-color: #bbb !important;
    box-shadow: 0 0 0 0.05em rgba(72, 95, 199, 0) !important;
}

#app button.is-primary.open-laskelma {
    background:#FFF !important;
    border:solid 1px #dbdbdb !important;
    color:#2a4b4c !important;
}

#app button.is-primary.open-laskelma:hover {
    border-color:#b5b5b5 !important;
}

#app h2 {
    color:#2a4b4c;
    margin-top:0px;
    display: block;
    text-align:left;
    position: relative;
    margin-bottom: 20px;
    font-weight:800 !important;
    font-size:17px !important;
}

#app h2 i {
    padding-right:5px;
}

/*#app h2:before {
    bottom: -6.5px;
    left: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 7.5px solid #b8d8d8;
    border-left: 7.5px solid transparent;
}

#app h2:after {
    bottom: -6.5px;
    right: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 7.5px solid #b8d8d8;
    border-right: 7.5px solid transparent;
}*/

#app .fw-row {
    width:100% !important;
}

#app {
    width:100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

#app button.return-btn,
#app button.logout-btn {
    color:#2a4b4c !important;
}

#app button.return-btn:hover,
#app button.logout-btn:hover {
    color:#2a4b4c !important;
    opacity: 1 !important;
}

#app .modal-background {
    background-color: rgba(42, 75, 76, 0.86);
}

#app .modal-content {
    border-radius:6px;
    background: #f9fbfc;
    padding: 30px 30px 30px 30px;
    border-radius: 6px;
    box-shadow: none;
    border:solid 1px #e0e6e9;
    max-width: 90%;
    width: 500px;
}

#app .modal-content .content {
    margin-bottom:0;
}

#app h3 {
    margin-top:0;
    margin-bottom:10px;
    font-weight:800 !important;
}

.b-tabs .tab-content {
    padding: 0rem !important;
    margin-left: -20px;
    margin-right: -20px;
}

.b-tabs .tabs div a.is-active {
    border-bottom-color:#6fc4c5 !important;
    border-bottom-width: 1px !important;
}


#app table input {
    width:100%;
    margin-bottom:0 !important;
}

#app table {
    table-layout:fixed !important;
}

#app table input[type="radio"],
#app table input[type="checkbox"] {
    width:auto;
}

#app label {
    cursor:pointer;
    margin-right:15px;
    margin-bottom:0;
    padding-left:4px;
}

#app .b-tabs {
    padding-top:20px;
}

#app table.calc-table tr > td:last-child {
    padding-right:20px;
    text-align:left;
}

#app table.calc-table > tr > td:first-child {
    width:45% !important;
}

#app table.calc-table > tr > td:last-child {
    width:55% !important;
}

.appBlue {
    color: #6fc4c5 !important;
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: #2a4b4c;
}

input[type="checkbox"]:hover {
    cursor:pointer;
}

.b-tooltip.is-primary .tooltip-content {
    background: #2a4b4c !important;
    color: #fff;
}

.select:not(.is-multiple):not(.is-loading)::after {
    border-color:#2a4b4c !important;
    transform: rotate(-45deg) scale(0.7) !important;
    right: 12px !important;
}

.info-paragraph {
    margin-top: 10px; /* Example styling */
    font-size:13px;
}

.appBlue:hover {
    cursor:pointer;
}

.breakdown-td {
    position:relative;
    vertical-align:top;
}

.total-breakdown {
    position:absolute;
    font-weight:600;
    top:20px;
    right:20px;
}

.breakdown-td > strong {
    padding-right:100px;
}

.inner-fw-table-container,
.breakdown-wrapper {
    margin-left:-20px;
    margin-right:-20px;
    padding-top:10px;
}

.add-new-breakdown tr > td {
    padding:0 5px 10px 5px !important;
    border-bottom:none !important;
    vertical-align:bottom !important;
}

#app .add-new-breakdown select {
    width:100% !important;
}

.select:not(.is-multiple) {
    height:auto !important;
}

select,
.select {
    width: 100% !important;
    display:block !important;
}

#app .add-new-breakdown tr > td button {
    height:43px;
    margin-top:5px !important;
    display:inline-block;
    width:auto !important;
    margin-left:5px !important;
    margin-right:20px !important;
    border:solid 1px transparent !important;
}

#app .b-tabs .tabs div a {
    font-size:13px;
    font-weight:600 !important;
}

#app .b-tabs .tabs div a:hover {
    text-decoration:none !important;
}

#app .add-new-breakdown small {
    display:block;
    margin-top:10px;
}

#app .add-new-breakdown tr > td input,
#app .add-new-breakdown tr > td select,
#app .add-new-breakdown tr > td button {
    font-size:12px !important;
}

#app .add-new-breakdown tr > td select {
    height:43px !important;
}

.add-new-breakdown tr > th:first-child,
.add-new-breakdown tr > td:first-child {
    padding-left:20px !important;
    width:35% !important;
}

.add-new-breakdown tr > th.custom-width:first-child,
.add-new-breakdown tr > td.custom-width:first-child {
    width:60% !important;
    padding-left:20px !important;
}

.add-new-breakdown tr > th:nth-child(2),
.add-new-breakdown tr > td:nth-child(2) {
    width:20% !important;
}

.add-new-breakdown tr > th:nth-child(3),
.add-new-breakdown tr > td:nth-child(3) {
    width:15% !important;
    padding-right:0 !important;
}

.add-new-breakdown tr > th:nth-child(4),
.add-new-breakdown tr > td:nth-child(4) {
    width:15% !important;
    padding-right:0 !important;
}

.add-new-breakdown tr > th:last-child,
.add-new-breakdown tr > td:last-child {
    width:10% !important;
    text-align:right !important;
}

#app .add-new-breakdown tr > th {
    padding:10px 10px 0 10px;
    border-bottom:0;
    font-size:12px;
}

.add-new-breakdown tr > td {
    background:transparent !important;
}

.add-new-breakdown-btn-disabled,
.add-new-breakdown-btn {
    margin-left:20px;
    margin-right:20px;
    border-radius:6px;
    text-align:left;
    padding:13px;
    font-weight:700;
    margin-top:-55px;
    position:relative;
}

.add-new-breakdown-btn:hover {
    cursor:pointer;
}

.add-new-breakdown-btn-disabled {
    cursor:disabled;
    opacity:0.3;
}

.add-new-breakdown-blur > td {
    filter:blur(0px);
    opacity:0.5;
    pointer-events:none;
}

.add-new-breakdown-blur > td:last-child {
    filter:blur(0px);
    opacity:1;
    pointer-events:auto;
}

#app .results-table tr > td:last-child {
    text-align:left !important;
}

#app .results-table tr > td:first-child {
    padding-left:40px !important;
}

#app .results-table tr > td:nth-child(2),
#app .results-table tr > td:nth-child(3) {
    text-align:center !important;
}

#app .results-table thead tr > th:nth-child(2),
#app .results-table thead tr > th:nth-child(3) {
    text-align:center !important;
}

#app .total-money {
    margin-top:20px !important;
}

#app .total-money th,
#app .total-money td {
    background:#2a4b4c !important;
    font-size:17px !important;
    color:#FFF !important;
    margin-top:20px !important;
    font-weight:600 !important;
    border:none !important;
}

#app .results-table h2 {
    margin-bottom:0;
    padding-bottom:0;
    font-weight:700 !important;
    font-size:14px !important;
    color:#FFF !important;
}

#app .results-table td,
#app .results-table th {
    padding-top:10px !important;
    padding-bottom:10px !important;
    font-size:12px !important;
}

#app .results-table thead th {
    font-size:14px !important;
    background:#2a4b4c !important;
    color:#FFF !important;
}

#app .total-money th {
    border-radius: 3px !important;
}

#app .print-btn {
    position:absolute;
    right:35px;
    top:25px;
    z-index:9;
    background:#FFF;
    display:inline-block;
}

#app .results-table tbody tr:last-child td,
#app .results-table tbody tr:last-child th {
    border-bottom:1px solid #eee !important;
}

#app .results-table .elatusapu-info {
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px;
}

.elatusapu-tr {
    position:relative;
}

.print-logo {
    width:200px;
    margin-bottom:40px;
    display:none;
}

#app .results-table tbody .elatusapu-tr td {
    color:#FFF !important;
    border:none !important;
    border-radius: 0 !important;
    padding:0 20px !important;
    border-bottom:none !important;
}

#app .elatusapu-info {
    background:#6fc4c5 !important;
    color:#FFF !important;
    padding:10px;
    font-weight:400 !important;
    line-height:1.4;
}

#app .results-table thead tr strong {
    color:#FFF !important;
}

#app .elatusapu-info strong,
#app .elatusapu-info b {
    color:#FFF;
    font-weight:600 !important;
}

.elatusapu-info:before {
    position:absolute;
    content:'';
    left:20px;
    top:-7px;
    width:7.5px;
    height:7.5px;
    background:transparent;
    border-left:7.5px solid transparent;
    border-right:7.5px solid transparent;
    border-bottom:7.5px solid #6fc4c5;
}

#maincontainer {
    overflow-x:hidden !important;
}

@media (max-width:1500px) {
    #app.container,
    #app .container {
        max-width:100% !important;
    }
}

@media (max-width:982px) {
    #app.container {
        min-height:auto;
    }
    #maincontainer .login-row .logo {
        padding-top:80px;
    }
    #maincontainer .login-row {
        margin-left:0 !important;
        margin-right:0 !important;
    }
    #app .b-tabs:not(:last-child) {
        margin-bottom: 3rem;
    }
    #maincontainer > .container,
    #maincontainer {
        padding-left:0 !important;
        padding-right:0 !important;
    }
    #app table th, #app table td {
        padding:20px;
    }
    #app select,
    #app input {
        font-size:12px;
    }
    #app table.table > tr > td:first-child,
    #app table.table > tr > td:last-child,
    #app table.calc-table > tr > td:first-child,
    #app table.calc-table > tr > td:last-child {
        width:100% !important;
        display:block !important;
    }
    #app table.table > tr > td:first-child,
    #app table.calc-table > tr > td:first-child {
        border-bottom:none !important;
        padding-bottom:0 !important;
    }
    #app table.calc-table > tr > td.breakdown-td:last-child {
        border-bottom:solid 1px #eee !important;
        padding-bottom:20px !important;
        padding-top:20px !important;
    }
    #app .open-laskelma {
        margin-left:0;
    }
    #app table.table > tr > td:last-child,
    #app table.calc-table > tr > td:last-child {
        padding-top:10px !important;
        text-align:left !important;
    }
    #app .container {
        padding-left:0px;
        padding-right:0px;
    }
}

@media (max-width:768px) {
    #app button.return-btn, #app button.logout-btn {
        font-size:12px !important;
    }
    #app .results-table th,
    #app .results-table td,
    #app .results-table h2,
    #app .results-table thead th {
        font-size: 10px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
    #app .results-table tr > td:first-child {
        padding-left: 20px !important;
    }
    #app .total-money th, #app .total-money td {
        font-size:15px !important;
    }
    #app .total-money {
        margin-top:0 !important;
    }
    #app .add-new-breakdown tr > td input, #app .add-new-breakdown tr > td select, #app .add-new-breakdown tr > td button {
        font-size: 10px !important;
        padding:6px !important;
    }
    #app .add-new-breakdown tr > th {
        font-size:10px !important;
    }
    #app .add-new-breakdown tr > td button,
    #app .add-new-breakdown tr > td select {
        height: 29px !important;
    }
    #app .add-new-breakdown tr > td button {
        margin-left:0 !important;
    }
    #app .add-new-breakdown .select:not(.is-multiple):not(.is-loading)::after {
        border-color: #2a4b4c !important;
        transform: rotate(-45deg) scale(0.45) !important;
        right: 3px !important;
        margin-top:-0.35em !important;
    }
}

@media print {
    #app .hide-on-print {
        display:none !important;
    }
    body #app * {
        visibility: hidden !important;
    }
    body #app .print-area, body #app .print-area * {
        visibility: visible !important;
    }
    
    .print-area .print-logo {
        display:block;
        margin-top:30px;
        margin-bottom:30px;
    }
    #app .print-area .results-table h2,
    #app .print-area .results-table thead tr strong,
    #app .print-area .results-table thead th,
    #app .print-area .total-money th,
    #app .print-area .total-money td {
        color:#2a4b4c !important;
        font-size:18px !important;
    }
    #app .print-area .elatusapu-info strong, #app .print-area .elatusapu-info b,
    #app .print-area .elatusapu-info {
        color:#2a4b4c !important;
    }
    #app .print-area .elatusapu-info:before {
        display:none !important;
    }
    #app .calculation-row .inner-div.print-area {
        border:none !important;
        box-shadow:none !important;
        border-radius:0 !important;
    }
    body, html {
        margin: 0 !important;
        padding: 0 !important;
    }
}