body {
    background-color: #F9F9F9;
    color: black;
    font-family: "HelveticaNeue-Light", "Roboto", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300;
    margin: 0;
    padding: 0;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

::-webkit-input-placeholder { /* Edge */
  color: #05AED0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #05AED0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

::placeholder {
  color: #05AED0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 0.5em 0;
}

input{
  color: #05AED0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding-right: 0.5em 3em 0.5em 0;
}

@media screen and (min-width: 768px) {
    
    .mobile {
        display: none;
    }
    
}

@media screen and (max-width: 768px) {
    .desktop {
        display: none;
    }
    
    body {
        margin: 3% 0%;
        font-family: sans-serif; 
        background-color: white;
    }
    
}
    
.section_header {
      display: block;
      clear: both;
      font-size: 1.2rem;
      margin: 1% 0% 1.5rem 0%;
      font-weight: bold;
      text-align: left;
}

/*

    consecutive_chart_money.php / Title

*/

 .sub_header {
     font-weight: 300;
 }


@media screen and (max-width: 768px) {
	.section_header {
		font-size: 2rem;
		margin: 0.67rem 0 1.5rem 0;
	}
}




h1 {
    font-size: 3vw;
    font-weight: 500;
    color: white;
    margin-top: 0;
    margin-bottom: 0.3em;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 2.5em;
    }
}

h2 {
    font-size: 1.25vw;
    font-weight: 500;
    color: white;
}

@media screen and (max-width: 768px) {
    
    h2 {
        font-size: 3.9vw;
        margin-left: 0.8vw;
    }

}

h3 {
    font-size: 1vw;
    font-weight: 200;
    color: black;
    margin-top: 0;
    text-align: left;
}

@media screen and (max-width: 768px) {
    
    h3 {
        text-align: left;
        font-weight: 800;
        font-size: 4.5vw;
        margin-top: 1em;
    }

}

h5 {
	text-align: center;
	font-weight: 800;
	font-size: 1.5vw;
	margin-top: 10%;
}


@media screen and (max-width: 768px) {
    
    h5 {
    	font-size: 0.6em;
    }
    
}

.smalltext{
    font-size: 0.7vw;
    text-align: left;
    margin: -1.2vw 0.5vw;
    padding: 0.5vw;
    width: 3.8vw;
}

@media screen and (max-width: 768px) {
    
    smalltext {
    	font-size: 1.25vw;
    }
    
}

.right_comment {
    text-align: right; 
    font-size: 0.38em; 
    font-weight: 300; 
}

.central_comment {
    text-align: center; 
    font-size: 1vw; 
    font-weight: 300; 
}

 .input_header {
        display: none;
        position: relative; 
        left: -25vw; 
        top: 1vw; 
        font-size: 0.3vw; 
        font-weight: 100; 
        background-color:white; 
        padding: 0.25em 0.5em; 
        border-radius: 25px;
    }

@media screen and (max-width: 768px) {
    .central_comment {
        margin-top: 10vw;
        font-size: 3.75vw; 
    }
}

.input_header {
        display: none;
        position: relative; 
        left: -25vw; 
        top: 1vw; 
        font-size: 0.3vw; 
        font-weight: 100; 
        background-color:white; 
        padding: 0.25em 0.5em; 
        border-radius: 25px;
    }
    
.box {
    background-color: white;
    color: black;
    padding: 5%;
    text-align: center;
    border-radius: 12px;
}

.grey_box_holder {
	float: left;
	background-color: lightgrey;
	height: auto;
	width: 90%;
	margin: 2.5% 0%;
	padding: 5%;
	border-radius: 10px;
	text-align: left;
	font-size: 1rem;
}

.small_add_box  {
	float: right;
	background-color: #05AED0;
	color: white;
	width: auto;
	padding: 0.5em 1em;
	font-size: 0.8rem;
	border-radius: 10px;
}

.small_ok_box  {
	background-color: #05AED0;
	color: white;
	width: 3.5em;
	text-align: center;
	margin: 0 auto;
	padding: 0.5em 1em;
	font-size: 0.8rem;
	border-radius: 10px;
}

.small_delete_in_box {
    position: absolute;
    top: -0.5vw;
    right: -0.5vw;
    color: black;
}

.small_circle {
  border-radius: 50%;
  font-size: 0.75vw;
  width: 0.75vw;
  height: 0.75vw;
  padding: 0.25vw;
  background-color: #05AED0;
  color: white;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
}

@media screen and (max-width: 768px) {
    .small_delete_in_box {
        position: absolute;
        top: -0.5em;
        right: -0.5em;
        color: black;
    }

    .small_circle {
        border-radius: 50%;
        font-size: 3vw;
        width: 5vw;
        height: 5vw;
        padding: 0;
        vertical-align: center;
        background-color: #05AED0;
        color: white;
        display: flex; /* or inline-flex */
        align-items: center; 
        justify-content: center;
    }
    
}

.rectangle_selector {
    margin: 0 auto;
    font-size: 1rem;
    width: 50%;
    color: #05AED0;
    background-color: white;
    padding: 0.5rem 0;
    justify-content:center;
    align-items: center;
}

.rectangle_box_dormant {
    position: relative;
    width: 100%;
    height: auto;
    background-color: white;
    color: black;
    padding: 1% 5% 2.5% 5%;
    text-align: center;
    border-radius: 12px;
}

.circle {
    height: 8vw;
    width: 8vw;
    border-radius: 50%;
    display: inline-block;
    margin: auto;
	font-size: 5vw;
	line-height: 7vw;
	text-align: center;
	color: white;
}

@media screen and (max-width: 768px) {
    .circle {
    height: 50vw;
    width: 50vw;
    font-size: 25vw;
    line-height: 49vw;
    }
}

.solid-green {
    background-color: #A6DB21;
}

.green {
    background-color: #84fb95;
    background-image: linear-gradient(315deg, #84fb95 0%, #cef576 74%);
}

.amber {
	background-color: #FFBF00;
}

.orange {
	background-color: #F5A056;
    background-image: linear-gradient(to bottom right, #F5A056, #FF674D);
}

.solid-orange {
	background-color: #F5A056;
}

.purple {
    background-image: linear-gradient(to bottom right, #A4ADFF, #756BFD);
    color: white;
}

.red {
	background-color: red;
}

.grey {
    background-color: darkgrey;
}

.special-blue-background {
    background-color: #05AED0;
}

.special-blue {
    color: #05AED0;
}

.black-border {
    border: 1pt solid grey;
    color: grey;
}

.overlay {
	display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.7;
    z-index: 5;
}

.chart_title {
    font-size: 1.25vw;
    font-weight: 500;
    color: black;
    margin-bottom: 1em;
    text-align: left;
}

@media screen and (max-width: 768px) {
    
    .chart_title {
        text-align: center;
        font-weight: 800;
        font-size: 4.5vw;
        margin-top: 1em;
    }

}

.header {
    background-image: linear-gradient(to bottom right, #05AED0, #7ADEFF);
    height: 17.5%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border: none;
}

@media screen and (max-width: 768px) {
    .header {
    height: 30%;
    }
}

.decoration {
    position: fixed;
    top: 0;
    left: 10%;
    z-index: 1;
}

.rectangle {
    height: 75%;
    width: 10%;
    min-width: 100px;
    background-color: #FFFFFF;
    opacity: 0.11;
    transform: rotate(-35deg);
    border-radius: 117px;
    position: fixed;
    top: -20%;
    left: 10%;
}

.title_sub_title {
    margin: 1.5% 3.5%;
}

.triangle {
    width: 8vw;
    position: absolute;
    right: 3%;
    top: 3.5%;
}

.main_container {
    margin: 3em 2.5%;
}

@media screen and (max-width: 768px) {
    .main_container {
    margin: 15% 0%;
    }
}

.row_item:after {
  content: "";
  display: table;
  clear: both;
}

.row_item {
    margin: 1% 0;
}

@media screen and (max-width: 768px) {
    .row_item {
        margin: 1% 0;
    }
}

.left_half {
    float: left;
    width: 45%;
    margin-right: 5%;
}

@media screen and (max-width: 768px) {
    .left_half {
    width: 100%;
    margin: 0;
    }
}

.left_quarter {
    float: left;
    width: 24%;
    margin-right: 1%;
}

@media screen and (max-width: 768px) {
    .left_quarter {
    width: 100%;
    margin-bottom: 10%;
    }
}

.tab_grid {
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    grid-column-gap: 1%;
}

.tab {
    padding-top: 2vw;
    background-color: #05AED0;
    background-image: linear-gradient(180deg, #05AED0, #7ADEFF);
    color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    height: 3.9vw;
    border-radius: 0;
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 768px) {
    
.tab {
       height: 100%;
       padding: 5% 0;
       border-radius: 0;
    }
}

.button {
    border: 1pt solid white;
    color: white;
    padding: 0.25% 1.5%;
    border-radius: 5px;
    text-align: center;
    width: auto;
    clear: both;
}

.button-rounded {
    border: 1pt solid white;
    color: white;
    padding: 0.5vw 1vw;
    border-radius: 25px;
    text-align: center;
    width: 50%;
    margin: 2.5vw auto;
}

.button_absolute {
    border: 1pt solid white;
    color: white;
    padding: 0.25% 1.5%;
    border-radius: 5px;
    text-align: center;
    float: left;
}

.button_form_holder {
    text-align: center;
    margin: 1vw 5vw 0.5vw 5vw;
    padding-bottom: 2em;
    display: grid;
    grid-template-columns: 47.5% 47.5%;
    grid-column-gap: 5%;
    font-size: 1.2vw;
    overflow: scroll;
}

@media screen and (max-width: 768px) {
    .button_form_holder {
        margin: 1vw 5vw 1vw 5vw;
        padding-bottom: 5em;
        display: grid;
        grid-template-columns: 95%;
        grid-gap: 1%;
        font-size: 0.5em;
        height: 80%;
    }
}

.legacy_button_notification {
    color: #05AED0;
    border: 1pt solid #05AED0;
    padding: 0.25vw 1.5vw;
    border-radius: 25px;
    text-align: center;
    padding: 0.5vw 1vw;
}

@media screen and (max-width: 768px) {
    .legacy_button_notification {
        font-size: 1em;
        border: 1pt solid #05AED0;
        padding: 0.5em 0em;
        border-radius: 8px;
    }
}

.small_button {
    font-size: 1vw;
    border: 1pt solid white;
    color: white;
    padding: 0.25vw 1.5vw;
    border-radius: 25px;
    text-align: centre; 
    display: inline-block; 
    float: left; 
}

/* 

    consecutive_chart_money.php / Set Budgets 
    element_update_add_item_food.php / Lookup Calories

*/

@media screen and (max-width: 768px) {
    .small_button {
        font-size: 3.9vw;
        padding: 1vw 1.5em;
    }
}

input[type=submit] {
    background-color: #05AED0;
    color: white;
    padding: 0.5rem 3rem;
    border-radius: 5px;
    text-align: center;
    margin-top: 1rem;
    font-size: 1rem;
}



.type_one {
    padding: 0.25vw 1vw;
    color: white; 
    font-size: 1.25vw;
}

@media screen and (max-width: 768px) {
    .type_one {
    font-size: 1.2em;
    padding: 0.3em;
    }
}

.type_two {
        padding: 0.25vw 0.45vw; 
        color: white; 
        font-size: 0.9vw;
    }

@media screen and (max-width: 768px) {
    .type_two {
    font-size: 1.2em;
    padding: 0.3em;
    }
  
}

.type_three {
	padding: 0.5vw 1vw;
	border-radius: 8px;
}

.row_menu_item {
    width: 90%;
}

@media screen and (max-width: 768px) {
    .type_three {
    padding: 1em 1.5em;
    font-size: 1rem;
    }
    
    .row_menu_item {
        width: 80%;
    }
}

.type_four {
	padding: 0.5vw 0.5vw;

}

@media screen and (max-width: 768px) {
    .type_four {
    padding: 10px 10px;
    font-size: 5em;
    border-radius: 5px;
    }
}

.type_six {
    border-radius: 5px; 
    text-align: center; 
    height: auto;
    width: 50%;
    opacity: 1;
    padding: 0.3vw 1vw;
    background-color: #05AED0;
    background-image: linear-gradient(to bottom right, #05AED0, #7ADEFF);
    color: white;
    border: none;
    font-size: 0.8vw;
    margin: 1em 0;
}


@media screen and (max-width: 768px) {
    
    .type_six {
    	font-size: 0.35em;
        font-weight: 100;
        padding: 0.5em 1em;
        margin-top: 0.25em;
    }
}

.type_seven {
    border-radius: 5px; 
    text-align: center; 
    height: auto;
    opacity: 1;
    padding: 0.3vw 1vw;
    color: white;
    border: none;
}


@media screen and (max-width: 768px) {
    
    .type_seven {
    	font-size: 0.5em;n
        font-weight: 100;
        padding: 0.75em 1em;
        margin-top: 0.25em;
        border-radius: 8px;
        width: 80%;
    }
}


@media screen and (max-width: 768px) {
    
    .type_eight_input {
        margin-top: -0.25em;
    }
}

.button_margins_grid {
    margin-top: 1vw;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 1.5vw;
}

@media screen and (max-width: 768px) {
    .button_margins_grid {
        margin-top: 1vw;
        display: grid;
        grid-template-columns: auto;
        grid-column-gap: 1.5vw;
        grid-row-gap: 1em;
    }
}

.box_margins_grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-row-gap: 1%;
    grid-column-gap: 5%;
}

@media screen and (max-width: 768px) {
    
    .box_margins_grid {
        display: grid;
        grid-template-columns: auto;
        grid-row-gap: 2em;
        grid-column-gap: 0;
    }
}

.information {
    width: 7.5vw;
    height: 7.5vw;
    color: white;
    padding: 7.5%;
    text-align: center;
    border-radius: 12px;
}

.large_number {
    font-size: 2.5vw;
}

.number_description {
    font-size: 1.25vw;
}

.information_left_comment {
    grid-column: 1 / span 2;
    margin: 0.5em 0 0 0.5em;
}

.information_right_comment {
    grid-column: 3 / span 2;
    margin: 0.5em 0 0 0.5em;
}

.habit_comment {
    font-size: 1vw;
    font-weight: 600;
    margin: 0.5em 0 1em 0;
}

  .indicator_box {
        margin: auto;
        border-radius: 12px;
        width: 7.5vw;
        height: 1.5em;
        padding: 7.5%;
        color: white;
        text-align: center;
    }

@media screen and (max-width: 768px) {
    
    .information {
        margin: auto;
        width: 60vw;
        height: 60vw;

    }
    
    .large_number {
        font-size: 15vw;
    }
    
    .number_description {
        font-size: 18vw;
    }

    .habit_comment {
        margin: 0 0 1em 15%;
        font-size: 5vw;
    }
    
    .indicator_box {
        width: 60vw;
        height: 15vw;
        padding: 7.5%;
    }
    
    .indicator_message {
        font-size: 12vw;
    }
    
}

.consecutive_chart_holder_dormant {
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 12px;
    width: 100%; 
    padding: 2.5% 2.5%; 
    margin: 3% 0%;
}

.y_axis {
    width: 10vw; 
    text-align: left;
    font-size: 1vw;
}



@media screen and (max-width: 768px) {
    
    .consecutive_chart_holder_dormant {
        background-color: white;
        color: black;
        text-align: center;
        border-radius: 12px;
        width: 90%; 
        padding: 0.5em 2.5%; 
        margin: 1em 2.5%;
    }
    
    .y_axis {
    width: 15vw;
    margin-bottom: 1em;
    text-align: center;
    font-size: 3.3vw;
    }
}

.consecutive_grid_desktop {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-column-gap: 0.25vw;
    width: 50%;
}

.consecutive_grid_money {
    position: relative;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-row-gap: 0.25vw;
    width: 100%;
}

.consecutive_grid_mobile {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
}

.horizontal_chart {
        display: grid;
        grid-template-columns: 10vw 60vw 10vw;
}

.consecutive_grid_dash {
        margin: 0.3vw 0 0 0;
}

/* Action and Explanation Boxes */

.action_box {
	display: none;
    position: fixed; 
    top: 25%; 
    left: 30%;
    height: auto;
    width: 35%;
    background-color: white;
    color: black;
    border-radius: 5px;
    z-index: 12;
    font-size: 1.2vw;
    opacity: 0.95;
    text-align: center;
}

@media screen and (max-width: 768px) {
    
    .action_box {
        width: 100%;
        height: auto;
        top: 3em;
        left: 5%;
        font-size: 1rem;
        font-weight: 800;
    }
   
}

.alert_box {
	display: none;
    position: fixed; 
    top: 25%; 
    left: 67.5%;
    height: 8rem;
    width: 20%;
    padding: 5%;
    background-color: white;
    color: black;
    border-radius: 5px;
    z-index: 12;
    font-size: 1rem;
    opacity: 0.95;
    text-align: center;
}

@media screen and (max-width: 768px) {
    
    .alert_box {
        top: 35%; 
        width: 70%;
        left: 10%;
    }
   
}

.x_top_left_alert {
    position: absolute;
    top: 0.5%;
    left: 1.5%;
    color: black;
    font-weight: bold;
}

.input_box {
    height: 1em;
}

.action_box_input {
    background-color: #05AED0;
    opacity: 1;
    border: 1pt solid white; 
    border-radius: 5px; 
    text-align: center; 
    font-size: 1.35vw; 
    color: white; 
    width: 70%; 
    height: auto;
    padding: 0.5vw 1vw;
	border-radius: 5px;
	margin-bottom: 1em;
}


@media screen and (max-width: 768px) {
    
    .action_box_input {
    	font-size: 1rem;
    	text-align: left;
    	border: 1pt grey solid; 
    	color: #989696;
    	font-weight: 100;
    	padding: 1em 1.5em;
    	width: 80%;
    }
}


.action_box_inner {
    color: white;
    width: 100%; 
    height: 3vw; 
    background-color: #05AED0;
    background-image: linear-gradient(to bottom right, #05AED0, #7ADEFF);
    text-align: center; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    padding-top: 0.8vw;
    margin-bottom: 2vw;
}


@media screen and (max-width: 768px) {
    
    .action_box_inner {
        width: 100%;
        height: 15%;
        padding-top: 10%;
        font-size: 0.6em;
    }
    
}


@media screen and (max-width: 768px) {

	.right_side {
		left: 0;
		top: 0;
		width: 90%;
	}

}

@media screen and (max-width: 768px) {

	.top_format {
		top: 0;
		opacity: 1;
	}

}


/* Explain Box Items */
    
.explain_box {
    display: none;
    position: fixed;
    right: 5%;
    bottom: 5%;
    width: 39vw;
    height: 15vw;
    background-color: black;
    color: white;
    border-radius: 25px;
    z-index: 12;
    font-size: 2.5vw;
    font-family: sans-serif;
    font-weight: 800;
    opacity: 0.95;
}

.explain_box_inner {
  width: 100%; 
  height: 5vw; 
  background-color: #cb00f5; 
  text-align: center; 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  padding-top: 1.5vw;
}

.explain_box_content {
  padding: 1vw 5vw;
  font-size: 1.6vw;
}

.explain_box_medium {
    position: fixed;
    right: 5%;
    bottom: 5%;
    width: 39vw;
    height: auto;
    background-color: black;
    color: white;
    border-radius: 25px;
    z-index: 12;
    font-size: 1.75vw;
    font-family: sans-serif;
    font-weight: 800;
    opacity: 0.95;
}

.explain_box_inner_medium {
  width: 100%; 
  height: 3vw; 
  background-color: #cb00f5; 
  text-align: center; 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  padding-top: 1.5vw;
}

.explain_box_content_medium {
  padding: 1vw 5vw;
  font-size: 1.6vw;
}

.explain_box_simple {
  width: 39vw;
  height: 5vw;
  font-size: 1.25vw;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 25px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

/* Buttons */

.form_button {
    width: 60%;
    opacity: 1;
    padding: 0.3vw 1vw;
    background-color: #05AED0;
    background-image: linear-gradient(to bottom right, #05AED0, #7ADEFF);
    color: white;
    border: none;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    
    .form_button {
        width: 100%;
    	font-size: 0.5em;
        font-weight: 100;
        margin: 0 auto 0.25em auto;
        padding: 1em 1em;
        text-align: center;
    }
    
}

.topright {
    position: absolute;
    top: 1.5%;
    right: 2%;
    font-size: 1em;
    color: #05AED0;
}


@media screen and (max-width: 768px) {
    
    .topright {
        font-size: 1rem;
        font-weight: 100;
        color: #05AED0;
    }
    
}

.date_grid {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    width: 35%;
    margin: 1em auto;
    font-size: 1em;
    background-color: #F5F4F4;
    opacity: 1;
    border: 1pt black solid; 
    border-radius: 5px; 
    text-align: center; 
    font-size: 1.35vw; 
    color: black; 
    height: auto;
}

@media screen and (max-width: 768px) {
    .date_grid {
    width: 60%;
    font-size: 0.6em;
    margin: 1em auto;
    }
}



.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 0px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}


.input_holder {
    width: 100%; 
    margin: 2vw auto 1vw auto;
	color: black;
	background-color: #05AED0;
}

@media screen and (max-width: 768px) {
    
    .input_holder {
       
        margin: 0em auto 0 auto;
        width: 100%;

    }
    
}

.small_text {
    font-size: 1vw;
}


@media screen and (max-width: 768px) {
    
   .small_text {
        font-size: 0.11em;
        float: left;
        text-align: left;
    }
    
}


.small_square {
    width: 60%;
    opacity: 1;
    padding: 0.5vw;
    background-color: #05AED0;
    color: white;
    border: none;
    font-size: 1.1vw;
    margin: 0 auto;
}

.dot {
    margin: 0 auto;
    height: 1.75em;
    width: 1.75em;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.rectangle_vert {
  height: 2.5em;
  width: 5.5%;
  background-color: #555;
}

@media screen and (max-width: 768px) {
    
    .small_square {
        width: 90%;
    	font-size: 0.5em;
        font-weight: 100;
        margin: 0;
        padding: 0.5em 0;
        text-align: center;
        background-color: darkgrey;
    }
    
    .dot {
        height: 0.5em;
        width: 0.5em;
    }
    
}

/* Dropdown functionality */

    .dropbtn {
      background-color: #3498DB;
      color: white;
      border: none;
      cursor: pointer;
    }
    
    .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      font-size: 1em;
      padding: 12px 0px;
      text-decoration: none;
      display: block;
    }
    
     @media screen and (max-width: 768px) {

    .dropdown-content  a {
        font-size: 0.5em;
        }
    }
    
    .dropdown a:hover {background-color: #ddd;}
    
    .show {display: block;}

.consecutive_chart_holder {
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 12px;
    width: 100%; 
    padding: 2.5% 2.5%; 
    margin: 1em auto;
}

@media screen and (max-width: 768px) {
    
    .consecutive_chart_holder {
        background-color: white;
        color: black;
        text-align: center;
        border-radius: 0px;
        width: 90vw; 
        padding: 5vw 5vw; 
        margin: 0% 0%;
    }
    
}

.consecutive_grid_desktop {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    width: 100%;
}

.consecutive_grid_column {
    width: 7vw; 
    text-align: left;
    font-size: 1vw;
}

.consecutive_grid_dash {
        margin: 0.3vw 0 0 0.15vw;
    }
    
@media screen and (max-width: 768px) {
    
     .consecutive_grid_dash {
        margin: 0.3vw 0 0 0vw;
    }
    
}

    .action_box {
    	display: none;
        position: fixed; 
        top: 10%; 
        left: 30%;
        height: 80%;
        min-height: 35%;
        width: 35%;
        color: black;
        border-radius: 5px;
        z-index: 12;
        font-size: 1.2vw;
        opacity: 1;
        text-align: center;
        padding: 1em 2.5%;
    }
    
    .action_box_input {
        float: left;
        background-color: #F5F4F4;
        opacity: 1;
        border: 1pt black solid; 
        border-radius: 5px; 
        text-align: center; 
        font-size: 1.35vw; 
        color: black; 
        width: 80%; 
        height: auto;
        z-index: -1; 
        margin-bottom: 1em;
    }
    
    .overflow70 {
        overflow: auto; 
        height: 65%;
        background-color: white;
        z-index: 10;
    }
    
    .click_back {
        float: left; 
        margin: 0.5rem 2.5% 0.5rem 0;
        font-size: 2vw; 
    }
    
    .add_category {
        float: right; 
        font-size: 1rem; 
        margin: 1rem 2.5% 0 0;
        font-weight: 350;
    }
    
    .topright {
        position: absolute;
        color: grey;
        top: 1.5%;
        right: 2%;
    }
    
@media screen and (max-width: 768px) {
    
    .action_box {
        width: 85%;
        height: 99%;
        top: 0%;
        left: 0%;
        font-size: 2.5em;
        font-weight: 800;
        opacity: 0.99;
        padding: 0 5%;
        border: 0.5rem #05AED0 solid;
        border-radius: 0;
    }
    
    .action_box_input {
    	font-size: 5vw;
    	text-align: left;
    	padding: 0.5em 1em;
    	border: 1pt grey solid; 
    	color: #989696;
    	font-weight: 500;
    	margin-bottom: 0;
    }
    
    .click_back {
        font-size: 5vw; 
        margin: 0.5em 0 0.25em 0;
    }
    
    .add_category {
        float: right; 
        font-size: 1rem; 
        margin: 1em 0;
        font-weight: 650;
    }
    
    .topright {
        font-size: 5vw;
        font-weight: 100;
    }
    
    .overflow70 {
        height: 70%;
    }
    
}

.action_box_header {
    display: block; 
    font-size: 1.35em; 
    margin-top: 2.2em; 
    margin-bottom: 0.75em; 
    margin-left: 0; 
    margin-right: 0; 
    font-weight: bold;
    color: #05AED0;
}

@media screen and (max-width: 768px) {
        .action_box_header {
            display: block;
            font-size: 1.5rem;
            margin-top: 3.5rem;
            margin-bottom: 1.5rem;
            margin-left: 0;
            margin-right: 0;
            font-weight: bold;
            text-align: center;
            color: #05AED0;
            background-color: white;
    }
}

.action_box_input {
    background-color: #F5F4F4;
    opacity: 1;
    border: 1pt black solid; 
    border-radius: 5px; 
    text-align: center; 
    font-size: 1.35vw; 
    color: black; 
    width: 80%; 
    height: auto;
}


@media screen and (max-width: 768px) {
    
    .action_box_input {
    	font-size: 1.2rem;
    	text-align: left;
    	padding: 0.5rem 1rem;
    	border: 1pt grey solid; 
    	color: #989696;
    	font-weight: 100;
    }
}

.form_button {
    width: 60%;
    opacity: 1;
    padding: 0.3vw 1vw;
    background-color: #05AED0;
    background-image: linear-gradient(to bottom right, #05AED0, #7ADEFF);
    color: white;
    border: none;
    font-size: 1.1vw;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    
    .form_button {
        width: 80%;
    	font-size: 0.5em;
        font-weight: 100;
        margin: 0 auto 0.25em auto;
        padding: 1em 1em;
        text-align: center;
    }
    
}
 
input {
    color: black !important;
}

@media screen and (max-width: 768px) {
    input {
        color: black !important; /* Change to the desired text color */
        font-weight: 800 !important;
    }
}