@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.tracker {
    background:#EEEEEE;
    border-radius:20px;
    padding:24px 24px 48px;
    margin-bottom:20px;
    position:relative;
}

.tracker.tracker-water:before {
    content:'';
    background-image:url('/fileservice/file/download/a/608840/sc/236/h/d67afd361bc4f0c03cbca84917681f33.png');
    background-size:cover;
    width:71px;
    height:71px;
    position:absolute;
    top:12px;
    right:10px;
}

.tracker.tracker-enema:before {
    content:'';
    background-image:url('/fileservice/file/download/a/608840/sc/229/h/28a1f3c3b7c03b63c8f62f16144cebe2.png');
    background-size:cover;
    width:43.95px;
    height:59.29px;
    position:absolute;
    top:21px;
    right:28px;
    transform:rotate(173.69deg)
}

.tracker.tracker-protocol:before {
    content:'';
    background-image:url('/fileservice/file/download/a/608840/sc/354/h/8f7a69ed3e4ca24df92470d0fcb9bd79.png');
    background-size:cover;
    width:84px;
    height:84px;
    position:absolute;
    top:-6px;
    right:2px;
}

.tracker.tracker-collection:before {
    content:'';
    background-image:url('/fileservice/file/download/a/608840/sc/179/h/746cf63db43bce06ef1ac50201f05547.png');
    background-size:cover;
    width:66px;
    height:66px;
    position:absolute;
    top:15px;
    right:25px;
}

.tracker.tracker-castor:before {
    content: '';
    background-image: url(/fileservice/file/download/a/608840/sc/143/h/6201c9ef403e2752548bccf893eb26a0.png);
    background-size: cover;
    width: 66px;
    height: 66px;
    position: absolute;
    top: 15px;
    right: 25px;
}

.tracker > h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    color: #009884;
    margin-bottom:37px;
    display:flex;
    align-items: center;
    gap:21px;
    max-width:200px;
}

.tracker > h2:before {
    content:'';
    width:32px;
    height:32px;
    background-image:url('/fileservice/file/download/a/608840/sc/142/h/160a6a2f466e1b51e073e4fb073f86e6.png');
    background-size:cover;
    flex:0 0 32px;
}

.tracker-accordeon-head {
    margin-top:20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    cursor:pointer;
    display:flex;
    gap:25px;
}

.tracker-accordeon-head:before {
    content:'';
    width:23px;
    height:23px;
    background:url('/fileservice/file/download/a/608840/sc/211/h/dbd3e3f0e555d9d03909d98f658f134b.png');
    background-size:cover;
    flex:0 0 23px;
}

.tracker-accordeon-head.open-accordeon:before {
    background-image:url('/fileservice/file/download/a/608840/sc/99/h/32060e8a7310064ecdb497599a8dce07.png');
}

.tracker-accordeon-body {
    display:none;
    margin-top:15px;
}

.tracker-accordeon-body.main-inputs .input-wrapper {
    display:flex;
    flex-wrap:wrap;
    gap:10px 15px
}

.tracker-accordeon-body:not(.main-inputs) .input-wrapper {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.tracker-accordeon-body label {
    display: flex;
    gap: 8px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    flex:0 0 calc(50% - 15px);
    margin-bottom:0;
}

.tracker-enema .tracker-accordeon-body label {
    flex: 0 0 calc((100% - (4 * 15px)) / 5);
}

.tracker-accordeon-body input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border:1px solid #949494;
    border-radius: 50%;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
    background:#fff;
}

.tracker-accordeon-body input:checked {
    border-color: transparent;
    background: radial-gradient(circle, #949494 40%, #fff 45%);
}

.tracker-accordeon-body input:focus {
    outline:none;
}

.enema-result .tracker-accordeon-head,
.protocol-result .tracker-accordeon-head,
.collection-result .tracker-accordeon-head,
.castor-result .tracker-accordeon-head {
    gap:22px;
    cursor:unset;
}

.enema-result .tracker-accordeon-head:before,
.protocol-result .tracker-accordeon-head:before,
.collection-result .tracker-accordeon-head:before,
.castor-result .tracker-accordeon-head:before {
    background-image:url(/fileservice/file/download/a/608840/sc/294/h/d096cb9275da34bda38ffbf524c2747c.png);
    width:30px;
    height:30px;
    flex:0 0 30px;
}

.tracker .tracker-error {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    background-color: #e7acac;
    border:1px solid #e89898;
    padding:15px;
    margin-top:20px;
}

.tracker button {
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.18);
    background: linear-gradient(360deg, #009884 0%, #25d6bf 100%);
    background-size: 100% 200%;
    background-position: 0 0;
    border-radius:10px;
    border:none;
    margin-top:20px;
    padding:12px 38px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    transition:all .3s;
}

.tracker button:hover {
    background-position: 0 100%;
}

.tracker .chart-wrapper {
    position: relative;
    margin: 0px 0 00px 30px;
}
        
.tracker .chart {
    display: flex;
    justify-content: flex-start
    justify-content: space-around;
    height: 225px;
    position: relative;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    margin-bottom:31px;
}
        
.tracker .y-axis {
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    padding-right: 0px;
    font-family: 'Montserrat', sans-serif;
}

.tracker .y-axis:before {
    content:'';
    width:8px;
    height:8px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    position:absolute;
    top:0;
    left:25px;
    transform:rotate(-45deg);
} 

.tracker .y-axis:after {
    content:'литры';
    position:absolute;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    transform:rotate(-90deg);
    top:15px;
    left:20px;
    z-index:999;
}
        
.tracker .y-axis span {
    transform: translateY(50%);
    height:20px;
}

.tracker .y-axis span:before {
    content:'';
    height:1px;
    width:15px;
    background:#000;
    position:absolute;
    top:50%;
    right:-17px
}
        
.tracker .x-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -31px;
    display: flex;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

.tracker .x-axis:before {
    content:'';
    width:8px;
    height:8px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    position:absolute;
    top:-11px;
    right:0;
    transform:rotate(45deg);
}

.tracker .x-axis:after {
    content:'неделя';
    position:absolute;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    top:-35px;
    right:0px;
    z-index:999;
}
        
.tracker .x-axis span {
    transform: translateX(0%);
    width:14px;
    margin:0 5px;
    flex:0 0 14px;
}

.tracker .bar {
    flex: 1;
    margin: 0 5px;
    width: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
    height: 100%;
    justify-content: flex-end;
    flex:0 0 14px;
}

.tracker .bar-label,
.tracker .bar-value{
    display:none;
}
        
.tracker .bar-container {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}
        
.tracker .bar-column {
    width: 100%;
    background: #009884;
    position: relative;
    min-height: 4px;
}