@import url('_variables.css');

/* ------------------------------ *\
 * peachcloud.css
 *
 * Index
 * - ALIGNMENT
 * - BODY
 * - BUTTONS
 * - CARDS
 * - CAPSULES
 * - CIRCLES
 * - COLORS
 * - GRIDS
 * - HTML
 * - FLASH MESSAGE
 * - FONTS
 * - FORMS
 * - ICONS
 * - INPUTS
 * - LABELS
 * - LINKS
 * - LISTS
 * - MAIN
 * - METERS
 * - NAVIGATION
 * - PARAGRAPHS
 * - SWITCHES / SLIDERS
 * - TEXT
 * - TITLES
 *
\* ------------------------------ */

/*
 * ALIGNMENT
 */

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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

.center-vert {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.push-right {
    margin-left: auto;
    padding-right: 0;
}

.top-left {
    /* place-self combines align-self and justify-self */
    place-self: end center;
}

@media only screen and (min-width: 600px) {
    .top-left {
        place-self: end;
    }
}

.top-right {
    place-self: end center;
}

@media only screen and (min-width: 600px) {
    .top-right {
        place-self: end start;
    }
}

.top-middle {
    place-self: center;
}

@media only screen and (min-width: 600px) {
    .top-middle {
        padding-bottom: 2rem;
        place-self: center;
    }
}

.middle {
    place-self: center;
    grid-column-start: 1;
    grid-column-end: 4;
}

.bottom-middle {
    place-self: center;
}

@media only screen and (min-width: 600px) {
    .bottom-middle {
        padding-top: 2rem;
        place-self: center;
    }
}

.bottom-left {
    place-self: start center;
}

@media only screen and (min-width: 600px) {
    .bottom-left {
        place-self: start end;
    }
}

.bottom-right {
    place-self: start center;
}

@media only screen and (min-width: 600px) {
    .bottom-right {
        place-self: start;
    }
}

/*
 * BODY
 */

body {
  background-color: var(--background);
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/*
 * BORDERS
 */

.border-circle-small {
    border: 4px solid;
}

.border-settings {
    border-color: var(--color-settings);
}

.border-ssb {
    border-color: var(--color-ssb);
}

.border-status {
    border-color: var(--color-status);
}

.border-primary {
    border-color: var(--primary);
}

.border-success {
    border-color: var(--success);
}

.border-info {
    border-color: var(--info);
}

.border-warning {
    border-color: var(--warning);
}

.border-danger {
    border-color: var(--danger);
}

.border-dark-gray {
    border-color: var(--dark-gray);
}

/*
 * BUTTONS
 */

.button {
    border: 1px solid var(--button-border);
    border-radius: var(--border-radius-2);
    /* Needed to render inputs & buttons of equal width */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--button-text-color);
    cursor: pointer;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-5);
    font-family: var(--sans-serif);
    /* width: 80%; */
    width: 16rem;
    margin-top: 5px;
    margin-bottom: 5px;
}

.button.full-width {
    width: 100%;
}

.button-div {
    grid-column-start: 1;
    grid-column-end: 4;
    margin-bottom: 1rem;
}

.button-primary {
    background-color: var(--button-background);
}

.button-primary:hover {
    background-color: var(--primary);
    color: var(--button-text-hover-color);
}

.button-primary:focus {
    background-color: var(--primary);
    color: var(--button-text-hover-color);
    outline: none;
}

.button-secondary {
    background-color: var(--button-background);
}

.button-secondary:hover {
    background-color: var(--light-silver);
    color: var(--button-text-hover-color);
}

.button-secondary:focus {
    background-color: var(--light-silver);
    color: var(--button-text-hover-color);
    outline: none;
}

.button-warning {
    background-color: var(--button-background);
}

.button-warning:hover {
    background-color: var(--light-red);
    color: var(--button-text-hover-color);
}

.button-warning:focus {
    background-color: var(--light-red);
    outline: none;
}

/*
 * CAPSULES
 */

.capsule {
    padding: 1rem;
    border-style: solid;
    border-radius: var(--border-radius-3);
    background-color: var(--capsule-background);
    /* margin-top: 1rem; */
    /* margin-bottom: 1rem; */
}

.capsule-container {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-bottom: 1rem;
}

.capsule-profile {
    margin-left: 1rem;
    margin-right: 1rem;
}

@media only screen and (min-width: 600px) {
    .capsule-profile {
        margin-left: 0;
	margin-right: 0;
    }
}

@media only screen and (min-width: 600px) {
    .capsule-container {
      margin-left: 0;
      margin-right: 0;
    }
}

/*
 * CARDS
 */

.card {
    min-height: 50vh;
    max-height: 90vh;
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

@media only screen and (min-width: 600px) {
    .card {
        min-height: 50vh;
        max-height: 90vh;
        width: 20rem;
    }
}

@media only screen and (min-width: 600px) {
    .card-wide {
        width: 30rem;
    }
}

.card-container {
    justify-content: center;
    padding: 0.5rem;
}

.form-container {
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 80%;
    margin: auto;
}

.text-container {
    width: 80%;
    margin: auto;
}

.card-text {
    color: var(--text-color);
    margin: 0;
    font-size: var(--font-size-5);
    padding-bottom: 0.5rem;
}

.container {
    display: grid;
    grid-template-columns: 2fr 5fr 2fr;
    grid-template-rows: auto;
    grid-row-gap: 1rem;
    align-items: center;
    justify-items: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*
 * CIRCLES
 */

.circle {
    align-items: center;
    background: var(--circle-background);
    border-radius: 50%;
    box-shadow: var(--box-shadow-3);
    display: flex;
    justify-content: center;
    position: relative;
}

.circle-small {
    height: 5rem;
    width: 5rem;
}

.circle-small:hover {
    background: var(--circle-small-hover-background);
}

.circle-small:focus {
    background: var(--circle-small-hover-background);
    outline: none;
}

.circle-medium {
    height: 8rem;
    width: 8rem;
}

.circle-large {
    height: 13rem;
    width: 13rem;
}

.circle-success {
    background-color: var(--success);
    color: var(--white);
    font-size: var(--font-size-4);
}

.circle-warning {
    background-color: var(--warning);
    color: var(--white);
    font-size: var(--font-size-4);
}

.circle-error {
    background-color: var(--danger);
    color: var(--white);
    font-size: var(--font-size-4);
}

/* quartered-circle: circle for the center of radial-menu */

.quartered-circle {
    width: 100px;
    height: 100px;
}

.quarter {
    width: 50%;
    height: 50%;
}

.quarter-link {
    left: 50%;
    margin: -2em;
    top: 50%;
}

.quarter-icon {
    position: absolute;
    bottom: 1em;
    left: 1.5em;
}

/*
 * COLORS
 */

.primary-bg {
    background-color: var(--primary);
}

.secondary-bg {
    background-color: var(--secondary);
}

.success-bg {
    background-color: var(--success);
}

.info-bg {
    background-color: var(--info);
}

.warning-bg {
    background-color: var(--warning);
}

.danger-bg {
    background-color: var(--danger);
}

.light-bg {
    background-color: var(--light);
}

/*
 * GRIDS
 */

.grid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 2fr 1fr 2fr;
    height: 80vh;
}

.flex-grid {
    display: flex;
    align-content: space-between;
    align-items: baseline;
    justify-content: center;
}

.two-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding-bottom: 1rem;
    /* margin-right: 2rem; */
    /* margin-left: 2rem; */
    /* padding-top: 1.5rem; */
}

.two-grid-top-right {
    grid-column: 2;
    justify-self: right;
    padding: 0;
}

.three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    justify-items: center;
    margin-right: 2rem;
    margin-left: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.stack {
    display: grid;
    align-items: flex-end;
    justify-items: center;
    justify-content: center;
}

.three-grid-icon-1 {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
    max-width: 55%;
    text-align: center;
}

.three-grid-icon-2 {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
    max-width: 55%;
    text-align: center;
}

.three-grid-icon-3 {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
    max-width: 55%;
    text-align: center;
}

.three-grid-label-1 {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}

.three-grid-label-2 {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}

.three-grid-label-3 {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}

.grid-column-1 {
    grid-column: 1;
}

.grid-column-2 {
    grid-column: 2;
    justify-self: left;
}

.grid-column-3 {
    grid-column: 3;
}

/*
 * HTML
 */

html {
  height: 100%;

  --background: var(--background);
  --button-background: var(--button-background);
  --button-border: var(--button-border);
  --button-text-color: var(--text-color-normal);
  --button-text-hover-color: var(--text-color-normal);
  --circle-background: var(--circle-background);
  --circle-small-hover-background: var(--circle-small-hover-background);
  --icon-color: var(--icon-normal);
  --list-background: var(--list-background);
  --nav-icon-color: var(--nav-icon-color);
  --text-color: var(--text-color-normal);
}

html[data-theme='dark'] {
  --background: var(--background-dark);
  --button-background: var(--button-background-dark);
  --button-border: var(--button-border-dark);
  --button-text-color: var(--text-color-light);
  --button-text-hover-color: var(--text-color-normal);
  --capsule-background: var(--capsule-background-dark);
  --circle-background: var(--circle-background-dark);
  --circle-small-hover-background: var(--circle-small-hover-background-dark);
  --icon-color: var(--icon-light);
  --list-background: var(--list-background-dark);
  --nav-icon-color: var(--nav-icon-color-light);
  --text-color: var(--text-color-light);
  --text-color-gray: var(--text-color-light-gray);
}

/*
 * FLASH MESSAGE
 */

.flash-message {
    font-family: var(--sans-serif);
    font-size: var(--font-size-6);
    /*margin-left: 2rem;*/
    /*margin-right: 2rem;*/
    margin-top: 1rem;
    width: 14rem;
}

/*
 * FONTS
 */

.font-normal {
    color: var(--text-color);
}

.font-near-black {
    color: var(--near-black);
}

.font-gray {
    color: var(--text-color-gray);
}

.font-light-gray {
    /* color: var(--silver); */
    color: var(--text-color-light-gray);
}

/*
 * FORMS
 */

form {
    width: 90%;
}

@media only screen and (min-width: 600px) {
    form {
        width: 100%;
    }
}

/*
 * ICONS
 */

.icon {
    width: 3rem;
}

.icon-small {
    width: 1rem;
}

.icon-medium {
    width: 2rem;
}

.icon-large {
    width: 5rem;
}

.icon-100 {
    width: 100%;
}

/* icon-active: sets color of icon svg to near-black */
.icon-active {
    filter: var(--icon-color);
}

/* icon-inactive: sets color of icon svg to gray */
.icon-inactive {
    filter: var(--icon-gray);
}

/*
 * INPUTS
 */

.input {
    /* Needed to render inputs & buttons of equal width */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* margin-top: 0.5rem; */
    margin-bottom: 1rem;
    padding-left: 5px;
    line-height: 1.5rem;
    width: 80%;
}

.form-input {
    margin-bottom: 0;
    margin-left: 0px;
    border: 0px;
    padding-left: 5px;
    line-height: 1.5rem;
    width: 100%;
}

.message-input {
    height: 7rem;
    margin-top: 0.5rem;
    overflow: auto;
    resize: vertical;
    width: 100%;
}

.alert-input {
    /* Needed to render inputs & buttons of equal width */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0.25rem;
    padding-right: 0.25rem;
    text-align: right;
    width: 7rem;
}

.input-wrapper {
    margin-bottom: 15px;
}

/*
 * LABELS
 */

.label-small {
    font-family: var(--sans-serif);
    font-size: var(--font-size-7);
    display: block;
    margin-bottom: 2px;
}

.label-medium {
    font-size: var(--font-size-3);
    display: block;
}

.label-large {
    font-size: var(--font-size-2);
    display: block;
}

.label-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    /*width: 10rem;*/
}

.input-label {
    margin-bottom: 0.4rem;
}

/*
 * LINKS
 */

.link {
    text-decoration: none;
    color: var(--text-color);
}

.link:hover {
    text-decoration: underline;
}

/*
 * LISTS
 */

.list {
    padding-left: 0;
    width: 90%;
    border: 1px solid var(--light-silver);
    border-radius: var(--border-radius-2);
    list-style-type: none;
    font-family: var(--sans-serif);
}

@media only screen and (min-width: 600px) {
    .list {
        width: 100%;
        max-width: var(--max-width-6);
    }
}

.list-container {
    width: var(--max-width-5);
}

.list-icon {
    align-self: center;
    justify-self: right;
    grid-column: 2;
    grid-row: 1/3;
}

.list-item {
    background-color: var(--list-background);
    display: grid;
    padding: 1rem;
    border-bottom-color: var(--light-silver);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.list-text {
    justify-self: left;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: var(--font-size-5);
}

.list-label {
    justify-self: left;
    grid-column: 1;
    grid-row: 2;
}

/*
 * MAIN
 */

main {
  flex: 1 0 auto;
}

/*
 * METERS
 */

meter {
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    /* height: 1rem; */
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 100%;
    /* remove default styling */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    /* Firefox */
    background: none; /* remove default background */
    background-color: var(--near-white);
    box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-bar {
    background: none; /* remove default background */
    background-color: var(--near-white);
    box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
    background-size: 100% 100%;
    box-shadow: 0 5px 5px -5px #999 inset;
    transition: width .5s;
}

/* Firefox styling */
meter::-moz-meter-bar {
    background: var(--mid-gray);
    background-size: 100% 100%;
    box-shadow: 0 5px 5px -5px #999 inset;
}

.meter-gauge {
    background-color: var(--near-white);
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 5px 5px -5px #333 inset;
    display: block;
}

/* Chrome styling */
.meter-gauge > span {
    background: var(--mid-gray);
    background-size: 100% 100%;
    box-shadow: 0 5px 5px -5px #999 inset;
    display: block;
    height: inherit;
    text-indent: -9999px;
}

/*
 * NAVIGATION
 */

.nav-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2em;
    padding-top: 1rem;
    padding-bottom: 1rem;
    justify-content: space-between;
}

.nav-title {
    color: var(--text-color);
    font-family: var(--sans-serif);
    font-size: var(--font-size-4);
    font-weight: normal;
    margin: 0;
}

.nav-icon {
    width: auto;
    height: 90%;
    cursor: pointer;
}

.nav-icon-left {
    float: left;
    padding-left: 10px;
}

.nav-icon-right {
    float: right;
    padding-right: 10px;
}

.nav-item {
    display: inline-block;
    list-style-type: none;
}

/*
 * PARAGRAPHS
 */

p {
    font-family: var(--sans-serif);
    overflow-wrap: anywhere;
}

/*
 * SWITCHES / SLIDERS
 */

/* switch: the box around the slider */
.switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

/* hide default HTML checkbox */
.switch input {
    height: 0;
    opacity: 0;
    width: 0;
}

.switch-icon-left {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.switch-icon-right {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
}

.slider {
    background-color: var(--moon-gray);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    -webkit-transition: .4s;
}

.slider:before {
    background-color: var(--white);
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    -webkit-transition: .4s;
    width: 26px;
}

input:checked + .slider {
    background-color: var(--near-black);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--near-black);
}

input:checked + .slider:before {
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    -webkit-transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*
 * TEXT
 */

.text-info {
    color: var(--info);
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

/*
 * TITLES
 */

.title-medium {
    font-size: var(--font-size-4);
    font-family: var(--sans-serif);
    max-width: var(--max-width-6);
}