.calculator-container{width:100%;display:flex;column-gap:1.5rem;row-gap:1.5rem}.calculator-container .calculator,.calculator-container .summary{flex:1 1}.calculator-container .calculator{display:flex;flex-direction:column;row-gap:1.5rem}.calculator-container .calculator>*{width:100%}.calculator-container .calculator select{padding:.5rem .75rem;color:#eee;background:#333;border:2px solid #25d2fe;border-radius:.5rem}.calculator-container .calculator select:after{margin-right:1rem}.calculator-container .calculator .extras{display:flex;margin:.5rem 0;column-gap:.5rem;row-gap:.5rem;flex-wrap:wrap}.calculator-container .calculator .extras button{padding:.5rem .75rem;background:transparent;color:#eee;border:2px solid #25d2fe;border-radius:.5rem;cursor:pointer;transition:background .3s}.calculator-container .calculator .extras button:hover{background:hsla(0,0%,100%,.1)}.calculator-container .calculator .extras button.active{background:#0196bc}.calculator-container .calculator .slider{width:100%;display:flex;flex-direction:column;row-gap:.5rem}.calculator-container .calculator .slider input{accent-color:#25d2fe}.calculator-container .calculator .slider .labels{display:flex;justify-content:space-between}.calculator-container .calculator .slider .labels span{flex:1 1}.calculator-container .calculator .slider .labels span:nth-child(2){color:#25d2fe;text-align:center}.calculator-container .calculator .slider .labels span:nth-child(3){text-align:end}.calculator-container .summary{display:flex;flex-direction:column;row-gap:1.5rem;background:#333;border-radius:1rem}.calculator-container .summary>h1{text-align:center;margin:1rem 0}.calculator-container .summary .part,.calculator-container .summary .total{margin:0 1rem}.calculator-container .summary .part h3{margin-bottom:.5rem}.calculator-container .summary .part .value{display:flex;justify-content:space-between;background:#363636}.calculator-container .summary .part .value:nth-child(2n){background:#383838}.calculator-container .summary .part .value>span{padding:.5rem}.calculator-container .summary .part .value>span:first-child{overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.calculator-container .summary .part .value>span:nth-child(2){min-width:5rem}.calculator-container .summary .total{display:flex;justify-content:space-between;margin-bottom:1rem}@media only screen and (max-width:700px){.calculator-container{flex-direction:column}}@media only screen and (min-width:700px){.calculator-container hr{display:none}}