body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

code {
    font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace
}

.App {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.logo {
    width: 100%;
    clear: both
}

.logo img {
    height: 90pt;
    margin-top: 15pt
}

.leftPanel {
    flex: 1 1;
    min-width: 300px
}

.foodSelector {
    margin: 5pt 20pt 20pt
}

.foodSelectorInput {
    width: 100%
}

.rightPanel {
    flex: 2 1;
    margin-top: 10pt;
    min-width: 300px
}

.macroNutrients {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 20px;
    margin: 24pt 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 33px
}

.macroNutrients:focus,.microNutrients:focus {
    outline: none
}

.macroNutrient {
    flex: 1 1;
    min-width: 100px
}

.macroChart {
    margin-top: -10pt;
    display: flex;
    justify-content: center
}

.macroChartEmpty {
    opacity: .1
}

.macroNutrient div:first-child {
    font-weight: 600
}

.microNutrients {
    justify-content: space-around;
    flex-wrap: wrap
}

.microNutrient,.microNutrients {
    display: flex;
    flex-direction: row
}

.microNutrient {
    flex-wrap: nowrap;
    justify-content: flex-end
}

.nutrientType {
    display: block;
    font-size: 20px;
    margin: 10pt 0;
    font-weight: 600
}

.microNutrientName {
    margin: 0 5pt;
    text-align: left;
    white-space: nowrap;
    flex-grow: 1
}

.microNutrientAmount {
    margin: 0 5pt;
    white-space: nowrap;
    width: 59px;
    text-align: right
}

.microNutrientProgressBar {
    min-width: 115px;
    justify-self: flex-start;
    align-self: flex-end;
    margin-right: 6pt;
    display: flex
}

.microNutrientProgressBar span {
    padding-left: 5pt;
    color: rgba(0,0,0,.45);
    font-size: .9em;
    vertical-align: middle
}

.microNutrientType {
    max-width: 300px
}

.selectedFoodsLabel {
    text-transform: uppercase
}

.selectedFood {
    margin: 10pt;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.selectedFoodAmount .ant-input {
    text-align: right;
    width: 60px;
    margin: 0
}

.selectedFoodAmount {
    display: flex;
    flex-direction: row;
    align-content: flex-start
}

.deleteBtn {
    margin-left: 5pt
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

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

@keyframes flickerAnimation {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.animate-flicker {
    -webkit-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
    font-size: 50pt;
    color: grey
}

.github-corner:hover .octo-arm {
    -webkit-animation: octocat-wave .56s ease-in-out;
    animation: octocat-wave .56s ease-in-out
}

@-webkit-keyframes octocat-wave {
    0%,to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    20%,60% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg)
    }

    40%,80% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@keyframes octocat-wave {
    0%,to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    20%,60% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg)
    }

    40%,80% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        -webkit-animation:none;
        animation: none
    }

    .github-corner .octo-arm {
        -webkit-animation: octocat-wave .56s ease-in-out;
        animation: octocat-wave .56s ease-in-out
    }
}

body {background-color: rgba(128, 113, 113, 0.351);}