@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
  background-color: #f0f0f0;
  font-family: 'Montserrat', sans-serif;
}

#page_body {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: flex-start;
  width: 100%;
  gap: 16px;
}
#lhs_container {
  width: auto;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px; */
}
#rhs_container {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  flex-grow: 1;
}

.id {
  font-family: monospace;
  color: #555;
  font-size: 0.9em;
}

button {
  background-color: #ffffffaa;
  color: black;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 24px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s, transform 0.2s;
}
button:hover {
  transform: scale(1.02);
}
button.green {
  background-color: #6aa84faa;
  color: white;
}
button.green:hover {
  background-color: #45a049;
}
button.orange {
  background-color: #ee7752aa;
  color: white;
}
button.orange:hover {
  background-color: #e67e22;
}
button.red {
  background-color: #f44336aa;
  color: white;
}
button.red:hover {
  background-color: #e53935;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.top_bar {
  border-bottom: 1px solid #ccc;
  max-height: 30px;
}
.top_bar img {
  height: 30px;
  width: auto;
}



form,
.form_style {
  padding: 16px;
  display:grid;
  grid-template-columns: max-content max-content;
  grid-gap:5px;

}
.form_style_3 {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-gap: 5px;
}
form label,
.form_style label {
  /* font-weight: bold; */
  margin-right: 8px;
  text-align: right;
}
form.valid_form {
  border: 1px solid #4CAF50;
}
form.invalid_form {
  border: 1px solid #f44336;
}
input.invalid_input {
  border: 1px solid #f44336;
  background-color: #ffe6e6;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 0.9em;
}
table th, table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
table th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr.clickable {
  cursor: pointer;
}
tr.clickable:hover {
  background-color: #b1fcff;
}

.td_actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.td_actions button {
  font-size: 0.8em;
}

.user_list_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 16px;
}

.section {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 8px;
  /* i need the child section_controls_container to be positioned in the top right of this section */
  position: relative;
  background-color: #ffffffaa;
}
.section:has(> .section_controls_container) {
  padding-right: 32px;
}
.section_header {
  cursor: pointer;
  padding: 8px 16px;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-top: 0px;
}
.section_arrow {
  font-size: 0.8em;
  transition: transform 0.2s;
  margin-right: 8px;
}
.section_header_open > .section_header > .section_arrow
{
  transform: rotate(90deg);
}
.section_red {
  border: 1px solid #e73c7e;
  background-color: #e73c7e22;
}
.section_green {
  border: 1px solid #23d5ab;
  background-color: #23d5ab22;
}

.partner_controls_container {
  display: block;
  float: right;
  width: auto;
  right: 0;
}

.chart_section_container {
  position: relative;
}




.dashboard_flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
  gap: 16px;
}

.dashboard_flexbox > div {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: fit-content;
}

.section_controls_container {
  /* I wish for this class to be positioned in the top right of it's parnet (class "section")
  It will contain buttons such as add, edit, delete, etc. and a spinner */
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 0.7em;
  padding-top: 0;
  padding-right: 0;
  padding-left: 8px;
}
.section_control_btn {
  background-color: #00000011;
  border: none;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-right: 0;
  margin-left: 8px;
  white-space: nowrap;
}
.section_control_btn:hover {
  background-color: #00000022;
}


.chart_controls_container {
  display:inline-block;
  user-select: none;
  margin-bottom: 8px;
  width: auto;
}
.chart_controls_group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  float:right;
  border-radius: 8px;
  background-color: #00000011;
  padding: 4px;
  margin-left:8px;
  font-size: 0.6em;
  transition-property: font-size;
  transition-duration: 0.3s;
  transition-delay: 0s;
}
.chart_control_group_label {
  font-weight: bold;
  margin-left: 8px;
  color: #333;
}
.chart_controls_form {
  padding: 0;
  margin:0;
  display: flex;
}
.chart_radio_controls {
  display: flex; 
  flex-direction: row;
  padding: 0;
  margin: 0;
  border: 0;
  padding: 4px 0px;
}
.chart_radio_option {
  flex: 1 1 auto;
}
.chart_radio_option > input[type='radio'] {
  display: none;
}

.chart_radio_option > label { 
  flex: 1 1 auto; 
  cursor: pointer;
}

.chart_radio_option > input + label { /* hide by default, and show on hover */
  display: none;
}

.chart_radio_option > input:checked + label { 
  background: #333; 
  color: #fff; 
  display: inline; /* always show checked option */
  
}

.chart_controls_group:hover {
  font-size: 1em;
  border: 1px solid #23a6d5;
}
.chart_controls_group:hover .chart_radio_option > input + label { 
  display: inline;
}
.chart_controls_group:hover .chart_radio_option > input:checked + label { 
  background: #333;
  color: #fff;
}

.chart_control_group_label {
  font-weight: bold;
  margin-left: 8px;
  color: #333;
}

input[type="date"] {
  /* width: 100%;
  padding: 8px; */
  border: 1px solid #999;
  border-radius: 4px;
  cursor: pointer;
  padding: 0px 8px;
  /* font-size: 0.9em;
  box-sizing: border-box; */
}


.pill {
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.7em;
  padding: 2px 8px;
  color: #aaa;
}
.black {
  color: #000;
  border-color: #000;
}
.orange,
.warning {
  color: #ee7752;
  border-color: #ee7752;
}
.green,
.good {
  color: #6aa84f;
  border-color: #6aa84f;
}
.red,
.error {
  color: #e73c7e;
  border-color: #e73c7e;
}
.blue,
.cool {
  color: #23a6d5;
  border-color: #23a6d5;
}

td.id {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#usage_table td,
#usage_table th {
  text-align: right;
}
#usage_table td:first-child,
#usage_table th:first-child {
  text-align: left;
}

.usage_tr[data-level="account"] {
  font-weight: bold;
}
.usage_tr[data-level="account"]>td {
  padding-left:0;
}
.usage_tr[data-level="practice"],
.usage_tr[data-level="user"] {
  font-weight: normal;
}
.usage_tr[data-level="practice"]>td:first-child,
.usage_tr[data-level="user"]>td:first-child {
  padding-left:32px;
}
.usage_tr[data-level="client"] {
  font-weight: normal;
  font-style: italic;
  font-size: 0.7em;
  color: #666;
}
.usage_tr[data-level="client"]>td:first-child {
  padding-left:64px;
}

.tr_expand_icon {
  cursor: pointer;
  font-size: 0.8em;
  color: #999;
  margin-right: 12px;
  /* width: 24px; */
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}

.usage_tr.usage_tr_open .tr_expand_icon {
  transform: rotate(90deg);
}

.usage_tr_icon {
  margin-right: 12px;
  display: inline-block;
  color: #999;
}

.show_on_td_hover {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s linear;
  cursor: pointer;
  float: right;
}
.show_on_td_hover:hover {
  visibility: visible;
  opacity: 1;
}
td:hover .show_on_td_hover {
  visibility: visible;
  opacity: 0.5;
}





.button_rhs_ghost {
  opacity: 0.2;
  float: right;
  cursor: pointer;
  border: 1px solid #fff;
  font-size: 0.8em;
  padding: 2px 8px;
  border-radius: 8px;
}

.button_rhs_ghost:hover {
  opacity: 1;
  border-color: #ccc;
}



/* Password Strength Meter */
meter {
	appearance: none;	
		-webkit-appearance: none;
		-moz-appearance: none;
	margin: 0;
	width: 100%;
	height: 5px;
	background: none;
  	background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
	background: none;
	background-color: rgba(0, 0, 0, 0.1);
}


/* meter[value="0"] { background: grey; } 
meter[value="1"] { background-image: linear-gradient(to right, #e73c7e,#ee7752); }
meter[value="2"] { background-image: linear-gradient(to right,#ee7752,#f1c232); }
meter[value="3"] { background-image: linear-gradient(to right,#f1c232,#6aa84f); }
meter[value="4"] { background-image: linear-gradient(to right,#6aa84f,#38761d); } */

meter[value="0"]::-moz-meter-bar { background: grey; } 
meter[value="1"]::-moz-meter-bar { background-image: linear-gradient(to right,#e73c7e,#ee7752); }
meter[value="2"]::-moz-meter-bar { background-image: linear-gradient(to right,#ee7752,#f1c232); }
meter[value="3"]::-moz-meter-bar { background-image: linear-gradient(to right,#f1c232,#6aa84f); }
meter[value="4"]::-moz-meter-bar { background-image: linear-gradient(to right,#6aa84f,#38761d); }

meter[value="1"]::-webkit-meter-optimum-value { background: grey; } 
meter[value="1"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#e73c7e,#ee7752); }
meter[value="2"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#ee7752,#f1c232); }
meter[value="3"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#f1c232,#6aa84f); }
meter[value="4"]::-webkit-meter-optimum-value { background-image: linear-gradient(to right,#6aa84f,#38761d); }

/* ================================================== */
/* ScrollBar styling */
/* ================================================== */
.scrollBarStyle-1{
	overflow: auto;
}
.scrollBarStyle-1::-webkit-scrollbar
{
	width: 10px;
	height: 10px;
	background-color: #fff;
}

.scrollBarStyle-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #fff;
}

.scrollBarStyle-1::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ddd;
}


.hide {
  display: none;
}