:root {
    --color-black: #000;
    --color-white: #fff;
    --color-blue: #1967D2;
    --color-green: #188038;
    --color-yellow: #FBBC04;
    --color-red: #D93025;
    --color-grey-25: #F8F8F8;
    --color-grey-50: #F2F2F2;
    --color-grey-100: #DCDBDB;
    --color-grey-200: #A09E9E;
    --color-grey-400: #636060;
    --color-grey-500: #423F3F;
    --color-grey-800: #191818;
    --color-grey-900: #050505;
    --color-yeti-orange: #ff4c1d;
    --color-yeti-purple: #9b0063;
    --color-whiskers-dark-blue: #1A1D27;
    --margin-large: 64px;
    --margin-medium: 32px;
    --margin-small: 12px;      
}

html {
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Google Sans","Roboto","Arial",sans-serif;
    font-size: xx-large;
    background: var(--color-grey-25);
    color: var(--color-grey-900);
}
.app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.flex {
    display: flex;
}
.flex-row {
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-center {
    justify-content: center;
    align-items: center;
    height: 100%;
}
.rbtn {
    color: var(--color-whiskers-dark-blue);
    background: var(--color-grey-100);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: var(--margin-small);
}
.rbtn > * {
    align-self: stretch;
    margin: var(--margin-medium);
}
.rbtn > .small {
    margin: var(--margin-large);
}
/* .svg-disabled > img{
    filter: invert(58%) sepia(31%) saturate(12%) hue-rotate(314deg) brightness(102%) contrast(94%);
} */
.rbtn .label {
    text-align: center;
    margin: 0;
    margin-top: calc(50% - 20px);
}
.non-selectable {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}