/*
Theme Name:   Seiko Calculator
Theme URI:    
Description:  Theme for Seiko
Author:  Liquid Thought
Author URI:  
Version:  1.0.0
Text Domain:  seiko_calculator
*/


:root {
    --grey:#47484B;
    --light-grey:#D9D9D9;
    --lightest-grey:#efefef;
    --profit:#0061b1;
    --mustard:#0061b1;
}

*,a,div,ul,li{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,nav,section,summary{display:block}
img {max-width:100%;height:auto;}

html, body {margin:0px;padding:0px;background:#fff;height:100%;font-size:20px;line-height:1.6em;}

body {color:var(--grey);-webkit-font-smoothing:antialiased;font-smoothing:antialiased;font-family: 'Arial',sans-serif;font-size:15px;}

body.admin-bar {margin-top:15px;}

ul.nav {display: flex;margin: 0;padding: 10px;list-style: none;justify-content: flex-end;gap: 10px;}
ul.nav a {border-radius:5px;display:flex;align-items: center;justify-content: center; height:40px;background: #FFF;border: 1px solid rgba(217, 217, 217, 0.05);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);padding:0px 10px;color:var(--grey);text-decoration:none;}
ul.nav .current-menu-item a {background:var(--grey);color:white;}

@media screen and (max-width:768px){
    html, body {font-size:18px;}
}
@media screen and (max-width:576px){
    html, body {font-size:16px;}
}

header {margin-bottom:20px;margin-top:20px;}
img.logo {max-width:100px;margin:auto;}
.logo-holder {text-align:center;}
h1 {font-size:22px;}
.main-width {
    max-width: 1280px;
    margin: 0px auto;
}

@media screen and (max-width: 1360px){
.main-width {
    padding-left: 40px;
    padding-right: 40px;
}
}
.card {
    background: #FFF;
    border: 1px solid rgba(217, 217, 217, 0.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    padding: 25px;
    margin-bottom:20px;
}

.client-holder {display:flex;gap: 10px;align-items: center;}
.client-holder>div:nth-of-type(2) {margin-right:auto;}

.table-calculator {}
.table-calculator th {padding:5px;border-bottom:1px solid var(--lightest-grey);text-align:left;}
.table-calculator th:empty {background:#fff;}
.table-calculator td {padding:5px;text-align:left;white-space: nowrap;}
.table-calculator td.allow-wrap {white-space: wrap;}
.table-calculator td.text-right {text-align:right;}
.table-calculator td.text-center {text-align:center;}
.table-calculator td:nth-last-of-type(1) {width:110px;}

.previous1, .previous2 {}
.previous1{border-left:1px solid #eee;}
.previous2 {border-right:1px solid #eee}
.previous-top {border-top:1px solid #eee;}
.previous-bottom {border-bottom:1px solid #eee;}
.current1, .current2 {}
.current1{border-left:1px solid #ccc;}
.current2 {border-right:1px solid #ccc}
.current-top {border-top:1px solid #ccc;}
.current-bottom {border-bottom:1px solid #ccc;}

.future-left {border-left:1px solid #0061b1;}
.future-right {border-right:1px solid #0061b1;}
.future-top {border-top:1px solid #0061b1;}
.future-bottom {border-bottom:1px solid #0061b1;}


.slider {font-size:14px;text-align:center;color:#270089;position:relative;width: 200px;margin: 0px auto;}
.slider:before {content:"2.5%";position:absolute;left:0px;color:#898A8D;font-size:12px;top:4px;}
.slider:after {content:"17.5%";position:absolute;right:-5px;color:#898A8D;font-size:12px;top:4px;}
.range-slider input {-webkit-appearance: none;height: 4px;background: transparent;}
.range-slider input[type="range"]::-webkit-slider-runnable-track {
  background: var(--light-grey);
  height: 4px;
}
.range-slider input[type="range"]::-moz-range-track {
  background: var(--light-grey);
  height: 4px;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -13px; /* Centers thumb on the track */
   background-color: var(--lightest-grey);border:2px solid var(--grey);border-radius:20px;
   height: 30px;
   width: 30px; 
   cursor:pointer;
}
.range-slider input[type="range"]::-webkit-slider-thumb:hover {background:#fff;}
.slider .rangeValues strong {font-weight:normal;}
.slider .rangeValues {text-align: left;width: 100%;display: inline-block;padding-left: 30px;}

.quarterly-difference {font-size:20px;}
.profit-format {color:var(--profit);font-size:20px;}

.textfield {border: 1px solid #F7F6F9;border-radius: 5px;display: flex;height: 40px;justify-content: flex-start;padding: 0px 10px;font-size: 16px;color: var(--main-grey);width: 100%;appearance: none;-webkit-appearance: none;-moz-appearance: none;position: relative;background: #F7F6F9;}
.textfield.discount {width:80px;}
.textfield.client {width:300px;}
.ui-autocomplete.ui-front {border-radius: 3px;font-size: 14px;font-family: 'Arial',sans-serif;}
.percentage {position:relative;}
.percentage:after {content:"%";position:absolute;top:8px;right:30px;pointer-events:none;}

h4 {margin: 0px auto;font-size: 11px;text-transform: uppercase;line-height: 1em;}
h4:nth-last-of-type(1) {margin-top:12px;}

.quarterly-difference strong:nth-last-of-type(1) {font-size: 16px;}
.profit-format strong:nth-last-of-type(1) {font-size: 16px;}
.negative {color:#dd1313;}


/* Input smoothing */
input[type="range"] {
  touch-action: none;
}
/*
.scroll-container {
  -webkit-overflow-scrolling: touch;
}
input[type="range"] {
  transition: all 0.2s ease-out;
}*/

.card.login {
    max-width: 400px;
    margin: 40px auto;
}
.card.login label {display:block;}
.card.login input[type=text], .card.login input[type=password] {
border: 1px solid #F7F6F9;
    border-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: flex-start;
    padding: 0px 10px;
    font-size: 16px;
    color: var(--main-grey);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    background: #F7F6F9;
}
.card.login .button {border: 1px solid #F7F6F9;
    border-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: flex-start;
    padding: 0px 10px;
    font-size: 16px;
    color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;background:var(--mustard);cursor:pointer;}
.card.login input:focus {
    outline-color: #ececec;
}

.login-error {color: var(--mustard);}
.standard_link {color: var(--mustard);}
.main-width.text-right {text-align:right;}