.week {
		display: flex;
}

.hide {
    opacity: 0.25;
}

@media screen and (min-width: 1px) {
    .day {
        height: 20px;
        width: 30px;
        background-size: 80%;
    }
    
    .day-selected {
        height: 25px;
        width: 36px;
        background-size: 80%;
    }
}

@media screen and (min-width: 320px) {
    .day {
        height: 50px;
        width: 36px;
    }
    
    .day-selected {
        height: 25px;
        width: 36px;
        background-size: 80%;
    }
}

@media screen and (min-width: 375px) {
    .day {
        height: 50px;
        width: 44px;
        background-size: 80%;
    }
    
    .day-selected {
        height: 50px;
        width: 44px;
        background-size: 100%;
    }
}

@media screen and (min-width: 414px) {
.day {
    height: 50px;
    width: 50px;
    background-size: 80%;
}

.day-selected {
    height: 50px;
    width: 50px;
    background-size: 100%;
}
}

@media screen and (min-width: 600px) {
    .day {
        height: 50px;
        width: 75px;
        margin: 5px;
        background-size: 80%;
    }
    
    .day-selected {
        height: 50px;
        width: 75px;
        margin: 5px;
        background-size: 100%;
    }
    }

.button {
    width: 50px !important;
    height: 50px;
    padding: 0px;
    margin: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    border-style: none !important;
}

.btn-yes {
    background-image: url(assets/YesButton.svg);
}

.btn-no {
    background-image: url(assets/NoButton.svg);
}

.btn-delete {
    background-image: url(assets/EraseButton.svg);
}

.btn-skip {
    background-image: url(assets/SkipButton.svg);
}

.rule-selector {
    width: 80px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

.rule-cell {
    
    
}

.rule-day {
    margin-bottom: 4px;
}

.popover-container {
    background-color: white;
    display: inline-block;
    width: 168px  !important;
    border-radius: 6px;

}

.card {
    border-radius: 10px;
}

.menu-hidden {
    visibility: hidden;
}

.menu-visible {
    visibility: visible;
}


.smartskips {
    margin-top: 20px;
    
}


.cell {
    border-color: black;
    border-width: 0px;
    border-style: solid;    
    padding: 0px;
}

.green {
    background-image: url(assets/green.svg);
    background-repeat: no-repeat;
    background-position: center;

}
    

.red {
    background-image: url(assets/red.svg);
    background-repeat: no-repeat;
    background-position: center;}

.skip {
    background-image: url(assets/userskip.svg);
    background-repeat: no-repeat;
    background-position: center;}

.unchecked {
    background-image: url(assets/unchecked.svg);
    background-repeat: no-repeat;
    background-position: center;}

.smart {
    background-image: url(assets/skip.svg);
    background-repeat: no-repeat;
    background-position: center;}

.ignore {
    background-image: url(assets/ignore.svg);
    background-repeat: no-repeat;
    background-position: center;}


.legends {
    margin-bottom: 3em;
    padding: 1em;
}

.legend-cell {
    text-align: center;
}

.legend-text {
    line-height:50px;
    margin-right: 3em;
    font-size: 0.75em;
    text-align: center;
}

.legend-container {
    display: flex;
    padding: 10px;
    background-color: rgb(245, 245, 245);
}

.legend {
    height: 40px;
    width: 60px;
    margin-right: 1em;
}

.goal-percentage {
    font-size: 1.5em;
    text-align: center;
}

.illustration {
    align-content: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.last-paragraph {
    padding-top: 80px;
}


.uk-dropdown {
    padding: 5px !important;
    border-radius: 10px;
    background-color: lightgray !important;
}

.update-menu-dropdown {
    width: 242px;
}

.bar-behind {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 40px;
    width: 50px;
    background-color:lightgray;
}

.bar {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 40px;
    opacity: 0.75;
    width: 50px;
    background-color:  rgb(104, 193, 110);
}

.entries {
    margin-top: 100px;
    display: flex;
    position: relative;
}

.preset-rule {
    padding: 0.5em;
    margin: 0.25em;
}

.playground p {
    color: #000000;
}

.playground {
    border-width: 2px;
    border-color: lightslategray;
    border-style: solid;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 1em;
    background-color: #f7f7f7;
}

.sidebar {
    border-left: 3px;
    border-left-color: grey;
    border-left-style: solid;
    margin-left: 3em;
    padding-left: 1em;
}

body > div > form > input.uk-input.uk-form-large.\.uk-form-width-medium {
    background-color: rgb(65, 207, 101);
    color: white;
}