/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2021-04-10, 12:22:43
*/

/*
    1. Font
    2. Input, button, select
    3. Style
    4. Tooltip
    5. Media
*/


/* 1. Font */
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.ttf');
}

@font-face{
    font-family: 'Roboto-Medium';
    src: url('../font/Roboto-Medium.ttf');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../font/Roboto-Bold.ttf');
}

/* 2. Button, select, input */

textarea,
input[type=text],
input[type=number],
input[type=button],
input[type=submit],
select {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    height: 45px;
    padding: 0 30px 0 10px;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

button.btn,
div.btn-primary-ppk,
input[type="submit"]  {
    display: block;
    margin: 0 auto;
    width: 200px !important;
    line-height: 43px;
    padding: 0;
    font-size: 16px;
    border-radius: 0;
    font-family: 'Roboto-Bold';
}

button.btn-primary.no-fixed-width {
    width: auto !important;
}

button,
button.btn-primary,
div.btn-primary-ppk,
input[type="submit"] {
    background-color: #0073B1;
    font-family: 'Roboto-Bold';
    color: #fff;
    border: 0;
}

button.btn-secondary {
    border: 1px solid #0073B1;
    color: #0073B1;
    background-color: #fff;
    font-family: 'Roboto-Bold';
}

button:hover,
button.btn-primary:hover,
div.btn-primary-ppk:hover,
button.btn-primary:active,
input[type="submit"]:hover {
    background-color: #005688;
}

button.btn-secondary:hover,
button.btn-secondary:active {
    color: #0073B1;
    background-color: #F2F8FB;
    border: 1px solid #0073B1;
}

.btn-secondary:not(:disabled):not(.disabled):active {
    color: #0073B1;
    background-color: #F2F8FB;
    border: 1px solid #0073B1;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

button.btn-primary:focus,
button.btn-secondary:focus {
    box-shadow: none;
}

.removePeriod {
    line-height: 33px;
    padding: 0 15px;
    margin-left: 10px;
    color: #B74701;
    background-color: #fff;
    border: 1px solid #B74701;
    cursor: pointer;
}

.results {
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.results .tabHeader div {
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Roboto';
    margin: 3px;
    padding: 20px 0;
    border-bottom: 4px solid #0073B1;
}

.results .resultsHeader .buttons {
    text-align: right;
}

.results .resultsHeader .buttons button {
    display: inline-block;
    width: auto !important;
    line-height: 33px;
    padding: 0 10px;
    font-size: 14px;
}

.results .resultsHeader .buttons button[title="Drukuj"] .icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 18px;
    margin-right: 10px;
    background-image: 
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxOHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAxOCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZmYiIGlkPSJDb3JlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU0LjAwMDAwMCwgLTMzOS4wMDAwMDApIj48ZyBpZD0icHJpbnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NC4wMDAwMDAsIDMzOS4wMDAwMDApIj48cGF0aCBkPSJNMTcsNSBMMyw1IEMxLjMsNSAwLDYuMyAwLDggTDAsMTQgTDQsMTQgTDQsMTggTDE2LDE4IEwxNiwxNCBMMjAsMTQgTDIwLDggQzIwLDYuMyAxOC43LDUgMTcsNSBMMTcsNSBaIE0xNCwxNiBMNiwxNiBMNiwxMSBMMTQsMTEgTDE0LDE2IEwxNCwxNiBaIE0xNyw5IEMxNi40LDkgMTYsOC42IDE2LDggQzE2LDcuNCAxNi40LDcgMTcsNyBDMTcuNiw3IDE4LDcuNCAxOCw4IEMxOCw4LjYgMTcuNiw5IDE3LDkgTDE3LDkgWiBNMTYsMCBMNCwwIEw0LDQgTDE2LDQgTDE2LDAgTDE2LDAgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+");
    background-size: contain;
}

.results .resultsHeader .buttons button[value="Przelicz"] .icon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-image: 
    url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiPjxwYXRoIGQ9Ik0gMTUgMyBDIDEyLjAzMTM5OCAzIDkuMzAyODIwMiA0LjA4MzQzODQgNy4yMDcwMzEyIDUuODc1IEEgMS4wMDAxIDEuMDAwMSAwIDEgMCA4LjUwNTg1OTQgNy4zOTQ1MzEyIEMgMTAuMjU0MDcgNS45MDAwOTI5IDEyLjUxNjYwMiA1IDE1IDUgQyAyMC4xOTY1NiA1IDI0LjQ1MDk4OSA4LjkzNzkyNjcgMjQuOTUxMTcyIDE0IEwgMjIgMTQgTCAyNiAyMCBMIDMwIDE0IEwgMjYuOTQ5MjE5IDE0IEMgMjYuNDM3OTI1IDcuODUxNjU4OCAyMS4yNzc4MzkgMyAxNSAzIHogTSA0IDEwIEwgMCAxNiBMIDMuMDUwNzgxMiAxNiBDIDMuNTYyMDc1IDIyLjE0ODM0MSA4LjcyMjE2MDcgMjcgMTUgMjcgQyAxNy45Njg2MDIgMjcgMjAuNjk3MTggMjUuOTE2NTYyIDIyLjc5Mjk2OSAyNC4xMjUgQSAxLjAwMDEgMS4wMDAxIDAgMSAwIDIxLjQ5NDE0MSAyMi42MDU0NjkgQyAxOS43NDU5MyAyNC4wOTk5MDcgMTcuNDgzMzk4IDI1IDE1IDI1IEMgOS44MDM0NCAyNSA1LjU0OTAxMDkgMjEuMDYyMDc0IDUuMDQ4ODI4MSAxNiBMIDggMTYgTCA0IDEwIHoiLz48L3N2Zz4=");
    background-size: contain;
}

select {
    width: 100%;
    height: 45px;
    padding: 0 30px 0 10px;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: url('../img/arrow-down.svg') #ffffff calc(100% - 10px) center no-repeat;
    appearance: none;
}
.calculatorContainer input[type="submit"],
.calculatorContainer button[type="submit"] {
    margin-top: 10px;
}

.tableScrollBox {
    overflow-x: auto;
    width: 100%;
    margin: 0 0 10px;
}

.tablePadding {
    margin: 0;
}

.tablePadding td {
    padding: 10px;
}

.legendBox .color {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 21px;
    margin-right: 8px;
}

.helpBox {
    margin-top: 20px;
}

/* 3. Style */
body {
    overflow: hidden;
}

h2 {
    font-family: 'Roboto-Bold';
    font-size: 24px;
}

h3 {
    font-family: 'Roboto-Bold';
    font-size: 18px;
}

.resultsHeader h3 {
    font-size: 22px;
}

.calculatorContainer {
    font-family: 'Roboto', sans-serif;
}

.content .description .infoHeader {
    margin-bottom: 10px;
}

.content .description .infoHeader .icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    margin-right: 10px;
    background-image: 
    url("data:image/svg+xml,%3Csvg%20height%3D%22200px%22%20width%3D%22200px%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%3E%3Cg%20fill%3D%22%23000000%22%20id%3D%22Core%22%20transform%3D%22translate(-86.000000%2C%20-296.000000)%22%3E%3Cg%20id%3D%22info-outline%22%20transform%3D%22translate(86.000000%2C%20296.000000)%22%3E%3Cpath%20d%3D%22M9%2C15%20L11%2C15%20L11%2C9%20L9%2C9%20L9%2C15%20L9%2C15%20Z%20M10%2C0%20C4.5%2C0%200%2C4.5%200%2C10%20C0%2C15.5%204.5%2C20%2010%2C20%20C15.5%2C20%2020%2C15.5%2020%2C10%20C20%2C4.5%2015.5%2C0%2010%2C0%20L10%2C0%20Z%20M10%2C18%20C5.6%2C18%202%2C14.4%202%2C10%20C2%2C5.6%205.6%2C2%2010%2C2%20C14.4%2C2%2018%2C5.6%2018%2C10%20C18%2C14.4%2014.4%2C18%2010%2C18%20L10%2C18%20Z%20M9%2C7%20L11%2C7%20L11%2C5%20L9%2C5%20L9%2C7%20L9%2C7%20Z%22%20id%3D%22Shape%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: contain;
}

.title {
    display: none;
}

.offset-1, .offset-md-1 {
    margin: 0;
}

.col-5 {
    width: 60%;
    max-width: 60%;
    flex: 0 0 60%;
}

.col-5 + .col-5 {
    width: 40%;
    max-width: 40%;
    flex: 0 0 40%;
}

label {
    font-family: 'Roboto-Medium';
}

label.form-check-label {
    font-family: 'Roboto';
}

.form-group label {
    margin-bottom: 5px;
}

.absoluteLabel {
    right: 12px;
    bottom: 9px;
}

.content .form-group .absoluteInfoLabel {
    display: inline-block;
    vertical-align: middle;    
    height: 18px;
    width: 18px;
    bottom: 11px;
    right: -20px;
    font-size: 0;
    background: url('../img/sprite.png') no-repeat scroll -78px 0 transparent;
    cursor: pointer;
}

.content .form-group .absoluteInfoLabel2 {
    display: inline-block;
    vertical-align: middle;    
    height: 18px;
    width: 18px;
    bottom: 11px;
    right: -20px;
    font-size: 0;
    background: url('../img/sprite.png') no-repeat scroll -78px 0 transparent;
    cursor: pointer;
}

.infoLabelBoxWrapper {
    position: fixed;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 20px;
    margin: 0;
    background: rgba(0,0,0,.2)
}

.infoLabelBoxWrapper .infoLabelBox {
    background: #fff;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,.2);
}

.infoLabelBoxWrapper .infoLabelBox .header {
    position: relative;
    padding: 15px 25px;
    background: #0073B1;
    color: #fff;
}

.infoLabelBoxWrapper .infoLabelBox .header h5 {
    margin: 0;
    font-size: 21px;
    font-family: 'Roboto-Bold';
}

.infoLabelBoxWrapper .infoLabelBox .header .closeWindowButton {
    position: absolute;
    display: inline-block;
    height: 26px;
    width: 26px;
    top: 50%;
    right: 20px;
    margin-top: -13px;
    background: url('../img/sprite.png') no-repeat scroll -165px 0 transparent;
    font-size: 0;
    cursor: pointer;
}

.infoLabelBoxWrapper .infoLabelBox .content {
    overflow-y: auto;
    max-height: 70vh;
    padding: 30px 20px 40px;
    font-size: 13px;
}

.infoLabelBoxWrapper .infoLabelBox .content p {
    font-size: 18px;
    font-family: 'Roboto-Bold';
}

.infoLabelBoxWrapper .infoLabelBox .content ol,
.infoLabelBoxWrapper .infoLabelBox .content ul {
    padding: 0;
    list-style-position: inside;
}

.infoBox_1 {
    padding: 30px 10px;
    text-align: center;
    background: #f2f2f2;
}

.infoBox_1 .textExtraSmall {
    font-size: 12px;
}

.infoBox_2{
    padding: 55px 20px 20px;
    width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.25);
}

.infoBox_2:before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    content:"UWAGA!";
    color:#fff;
    background: #0073B1;
    font-size: 16px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
}

.scrollOverflow {
    overflow-y: scroll;
    position: relative;
    width: 100%;
    max-height: 400px;
    border: 1px solid #ccc;
}

.scrollableTable tr td {
    vertical-align: middle;
}

.description {
    padding: 15px;
    background-color: #F3F6F8;
}

.description .infoHeader {
    line-height: 30px;
    font-size: 21px;
    color: #000;
    font-family: 'Roboto-Bold', sans-serif;
}
.description ul {
    list-style: disc;
    padding: 0 0 0 40px;
}
.thickbox {
    color: #0073B1;
}

.noMargin {
    margin: 0;
}

.noPadding {
    padding: 0 !important;
}

.tableInput {
    min-width: 1100px;
}

.tableInput input {
    min-width: 70px;
}

table input {
    height: 25px !important;
    padding: 0 !important;
    font-size: 14px !important;
}

.calculatorDate .col-xl-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

#miesiacKwZmn {
    margin: 5px 0 15px;
}

.inputWrapper {
    display: inline-block;
    position: relative;
    width: 100%;
    font-size: 0;
}
.inputWrapper input {
    width: 100%;
    padding: 2px 20px 2px 10px !important;
    font-size: 12px !important;
}
.inputWrapper .absoluteLabel {
    line-height: 16px;
    top: 50%;
    right: 10px;
    margin-top: -8px;
    font-size: 12px;
}

.removeDevice {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('../img/sprite.png') no-repeat scroll -195px 4px transparent;
    cursor: pointer;
}

/* 4. Tooltip */
/* Add this attribute to the element that needs a tooltip */
.questionTag {
}

.questionTag .info {
    display: block;
    width: 20px;
    height: 20px;
    background-image: 
    url("data:image/svg+xml,%3Csvg%20height%3D%22200px%22%20width%3D%22200px%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%3E%3Cg%20fill%3D%22%23000000%22%20id%3D%22Core%22%20transform%3D%22translate(-86.000000%2C%20-296.000000)%22%3E%3Cg%20id%3D%22info-outline%22%20transform%3D%22translate(86.000000%2C%20296.000000)%22%3E%3Cpath%20d%3D%22M9%2C15%20L11%2C15%20L11%2C9%20L9%2C9%20L9%2C15%20L9%2C15%20Z%20M10%2C0%20C4.5%2C0%200%2C4.5%200%2C10%20C0%2C15.5%204.5%2C20%2010%2C20%20C15.5%2C20%2020%2C15.5%2020%2C10%20C20%2C4.5%2015.5%2C0%2010%2C0%20L10%2C0%20Z%20M10%2C18%20C5.6%2C18%202%2C14.4%202%2C10%20C2%2C5.6%205.6%2C2%2010%2C2%20C14.4%2C2%2018%2C5.6%2018%2C10%20C18%2C14.4%2014.4%2C18%2010%2C18%20L10%2C18%20Z%20M9%2C7%20L11%2C7%20L11%2C5%20L9%2C5%20L9%2C7%20L9%2C7%20Z%22%20id%3D%22Shape%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: contain;
  }
.questionTag:hover {
    text-decoration: none;
}

.questionTag[data-tooltip] {
    position: absolute;
    right: -18px;
    bottom: 12px;
    font-size: 16px;
    z-index: 2;
    cursor: pointer;
}

/* Hide the tooltip content by default */
.questionTag[data-tooltip]:before,
.questionTag[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
.questionTag[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    width: 250px;
    line-height: 1.2;
    bottom: 120%;
    left: 50%;
    padding: 7px;
    margin-bottom: 5px;
    margin-left: -125px;
    color: #000;
    border: 1px solid #000;
    background-color: #F3F6F8;
    font-size: 11px;
    text-align: center;
    font-weight: 400;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: 'Roboto';
}

/* Triangle hack to make tooltip look like a speech bubble */
.questionTag[data-tooltip]:after {
    position: absolute;
    bottom: 120%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* Show tooltip content on hover */
.questionTag[data-tooltip]:hover:before,
.questionTag[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}


/* 5. Media */
@media (max-width: 768px) {
    .col-5,
    .col-5 + .col-5{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .periodList .align-items-end .col-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .results .resultsHeader .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .calculatorContainer .leftContainer .form-group.col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

.calculatorContainer .form-group .form-check {
    display: flex;
    align-content: center;
    justify-content: start;
    flex-wrap: wrap;
}

.content .form-group .blockGroup .range-wrapper .rangeslider.range-steps::before {
    width: 0 !important;
}
.content .form-group .blockGroup .range-wrapper .rangeslider.range-steps::after {
    right: -18px !important;
}

.content .form-group .blockGroup .range-wrapper .rangeslider.range-steps .ui-slider-range-min.ui-corner-all {
    left: -8px !important;
}

.content .form-group .blockGroup .range-wrapper .rangeslider.range-steps {
    width: calc(100% - 20px) !important;
    margin-left: 9px !important;
}

.content .form-group .button-container {
    display: flex;
    width: 100%;
}