body {
	font-family: Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding: 20px;
	position: relative;
}
article {
	/* max-width: 800px; */
	margin: 0 auto;
}
#error_pane {
	display: none;
	color: red;
}
body.wait {
	cursor: wait;
}
body.errors #error_pane {
	display: block;
}
body.progress {
}
#progress_pane {
	display: none;
}
body.progress {
	pointer-events: none;
}
body.progress #progress_pane {
	display: block;
	background-color: rgba(255, 255, 255, 0.85);
	top: 0;
	left: 0;
	clear: both;
	width: 360px;
	margin: 0 auto;
}
#progress_inner {
	display: block;
}
#progress_title {
	text-align: center;
	font-weight: bold;
	line-height: 20px;
}
#slider {
	/* width: calc( 100% - 40px ); */
	position: relative;
	height: 20px;
	border: thin solid darkblue;
	text-align: center;
}
#slider_label {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	color: cadetblue;
	line-height: 20px;
}
#slider_fill {
	position: absolute;
	height: 100%;
	background-color: blue;
	width: 0%;
	top: 0;
	left: 0;
}

.war-container {
	display: none;
	line-height: 30px;
	flex-direction: column;
	align-items: center;
}
body.authenticated .war-container {
	display: flex;
}
body.authenticated .authenticate {
	display: none;
}
.authenticate {
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: space-evenly;
	padding-top: 90px;
	width: 100%;
}
.authenticate button {
	padding: 10px 12px;
	background-color: #4285f4;
	color: white;
	border: none;
	border-radius: 3px;
	font-weight: bold;
	text-transform: capitalize;
}
.title {
	line-height: 1.3em;
}
.page-title {
	font-weight: normal;
	font-size: 1.25em;
	line-height: 1.3em;
	clear: both;
	display: block;
}

.buttons-and-feedback {
	margin-left: 110px;
}

button {
	cursor: pointer;
}
.button-container {
	/* text-align: right; */
	/* margin-right: -120px; */
	white-space: nowrap;
	margin: 0;
}

.nomargin {
	margin: 0;
}

#combined_button.disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

.input-container {
	margin-bottom: 50px;
}

button.info {
	position: relative;
	border: none;
	background: none;
	min-width: 20px;
	min-height: 20px;
	top: 13px;
	vertical-align: top;
}
button.info .i {
	color: white;
	background-color: black;
	border-radius: 12px;
	width: 15px;
	height: 15px;
	position: absolute;
	font-family: Times New Roman;
	top: 0;
	left: 5px;
}
button.info .secret {
	display: none;
	position: absolute;
	width: 400px;
	padding: 10px;
	border: thin solid rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
	left: 30px;
	top: 0;
	text-align: left;
	line-height: 1.25em;
	background: white;
	white-space: normal;
}

button.info:hover .secret {
	display: block;
}

.verified {
	background-color: #ccffcd;
	border: thin solid #064103;
	padding: 15px;
}
.gdrive {
	margin-bottom: 30px;
}
.gdrive-link {
	float: right;
	display: inline-flex;
	align-items: center;
}
.gdrive-link img {
}
.gdrive-label {
	padding-left: 4px;
	color: #5f6368;
	opacity: 1;
	display: inline-block;
	font-family: "Product Sans", Arial, sans-serif;
	font-size: 22px;
	line-height: 24px;
	padding-left: 8px;
	position: relative;
	top: -1.5px;
	vertical-align: middle;
}
.war-button {
	margin-left: 10px;
	margin-right: 4px;
	background-color: rgba(255, 255, 255, 0.88);
	border: 1px solid #dadce0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	max-height: 48px;
	overflow: hidden;
	outline: none;
	padding: 0;
	vertical-align: middle;
	width: 134px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	float: left;
	width: 94px;
	height: 48px;
}
.war-logo {
	max-height: 60px;
	width: 130px;
	margin-left: -16px;
}
.google-bullet-button {
	user-select: none;
	align-items: center;
	background-color: #fff;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 24px;
	box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
	color: #3c4043;
	display: inline-flex;
	font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 14px;
	height: 40px;
	letter-spacing: 0.15px;
	line-height: 22px;
	margin: 0;
	min-width: 120px;
	padding: 0 10px 0 0;
	text-transform: none;
	width: inherit;
	min-width: 240px;
}
.google-bullet-button::before {
	border: 1px dotted transparent;
	background: transparent;
	bottom: 0;
	box-shadow: inset 0 0 0 1px #1a73e8;
	content: " ";
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
	margin: -1px;

	border-radius: 50%;
	border-width: 0;
	content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2236%22 viewBox=%220 0 36 36%22%3E%3Cpath fill=%22%2334A853%22 d=%22M16 16v14h4V20z%22/%3E%3Cpath fill=%22%234285F4%22 d=%22M30 16H20l-4 4h14z%22/%3E%3Cpath fill=%22%23FBBC05%22 d=%22M6 16v4h10l4-4z%22/%3E%3Cpath fill=%22%23EA4335%22 d=%22M20 16V6h-4v14z%22/%3E%3Cpath fill=%22none%22 d=%22M0 0h36v36H0z%22/%3E%3C/svg%3E");
	display: block;
	margin: 0 2px 0 4px;
	position: relative;
	height: 36px;
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: 1;
}

.google-bullet-button:not(.used):hover {
	background-color: #f1f3f4;
	box-shadow: 0 1px 3px 0 rgb(60 64 67 / 30%), 0 4px 8px 3px rgb(60 64 67 / 15%);
	outline: none;
}

.google-bullet-button.used {
	opacity: 0.5;
	pointer-events: none;
}

.war-container {
	line-height: 30px;
}
label {
	width: 120px;
	display: inline-block;
	text-align: right;
	margin-right: 10px;
}

.column1 {
	width: calc(65% - 40px);
	float: left;
	/* display: inline-block; */
	margin-right: 40px;
}

.column2 {
	width: calc(32% - 40px);
	float: right;
	/* display: inline-block; */
	/* margin-left: 40px; */
	border-left: thin solid rgba(0, 0, 0, 0.4);
	padding-left: 40px;
}

.body {
	font-size: 0.9em;
	line-height: 1.5em;
}
.centered.title {
	font-size: 1.2em;
	text-align: center;
	line-height: 1em;
}

input[type="text"] {
	width: 400px;
	font-size: 16px;
}
.success {
}

/* MANAGER */
.drive {
	/* line-height: 1.5em; */
	/* clear: both; */
	/* margin-bottom: 1.5em; */
	/* padding-bottom: 0.5em; */
	border-bottom: thin solid #92c6e0;
	padding-left: 25px;
	/* height: 1em; */
	/* overflow: hidden; */
	position: relative;
}

.drive.open {
	/* height: unset; */
	/* overflow: none; */
}

.drive:nth-child(even) {
	background-color: #edf5f9; /* Even-numbered items */
}

.drive:nth-child(odd) {
	background-color: #ffffff; /* Odd-numbered items */
}

details.drive summary {
	margin-left: -15px;
}
.domainUsersOnly {
	float: right;
	font-weight: normal;
}
.domainUsersOnly.true .value {
	color: red;
}
.domainUsersOnly.false .value {
	color: green;
}

.accordion-btn {
	position: absolute;
	cursor: pointer;
}
.listcontainer > .accordion-btn {
	left: 0;
	top: 6px;
	width: 25px;
	height: 30px;
}
.drive > .accordion-btn {
	left: 0;
	top: 0;
	width: 25px;
	height: 18px;
}

.drive.open .accordion-btn,
.listcontainer.open > .accordion-btn {
}
.accordion-btn .arrow {
	position: absolute;
	left: 7px;
	top: 5px;
	border-left: 6px solid #0076bd;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}
.drive.open .accordion-btn .arrow,
.listcontainer.open > .accordion-btn .arrow {
	border-bottom: unset;
	border-top: 6px solid #0076bd;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	left: 6px;
}

.drive > .id {
}
.drive > .name {
	/* display: block; */
	/* width: 100%; */
	font-weight: bold;
}

.permission {
	clear: both;
	display: block;
	height: 1.5em;
	line-height: 1.5em;
}

.permission > .email {
}
.delete {
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 3px;
	margin-right: 0.5em;
	border: none;
	float: right;
}
.delete.all {
	color: white;
	background-color: red;
}
.delete.all:hover {
	background-color: rgb(119, 0, 0);
}
.delete.one {
	color: red;
	background-color: transparent;
}
.delete.one:hover {
	color: white;
	background-color: red;
}

/* v2 hides the drive list in favor of 
a user list but we're keeping the drive list */
#drive_list {
	/* height: 0;  */
	/* overflow: hidden;  */
	width: 100%;
}

#user_list {
}

.drive_name {
	display: block;
	font-size: 11px;
	line-height: 20px;
	text-indent: 1.5em;
	border-top: thin solid #efefef;
	clear: both;
}

#user_list .user {
	border-bottom: thin solid gray;
	/* margin-bottom: 1em; */
	padding-bottom: 1em;
	/* padding-top: 1em; */
	padding-left: 1em;
}

#user_list .user:nth-child(even) {
	/* background-color: #f2f2f2; Even-numbered items */
}

#user_list .user:nth-child(odd) {
	/* background-color: #ffffff; Odd-numbered items */
}

#user_list .email {
	font-weight: bold;
	display: block;
	font-size: 1.1em;
	margin-bottom: 0;
	line-height: 2em;
	margin-top: 0.5em;
}

#user_list .label {
	display: block;
	width: 100%;
	font-style: italic;
	line-height: 1em;
	margin-bottom: 1em;
}

.freelance,
.war,
.deleted {
	display: none;
}
.show_freelance .freelance,
.show_war .war,
.show_deleted .deleted {
	display: block;
}

.listcontainer h3,
.listcontainer > summary {
	margin: 0;
	text-indent: 20px;
	line-height: 30px;
	/* background-color: #efefef;
  border: thin solid #ccc; */
}
.checkboxcontainer {
	margin: 0;
	text-indent: 15px;
}

.listcontainer {
	/* height: 30px; */
	/* overflow: hidden; */
	margin-bottom: 1.5em;
	width: 100%;
	opacity: 0;
	position: relative;
	background-color: #edf5f9;
	border: thin solid #0076bd;
}
body.loaded .listcontainer {
	opacity: 1;
}
.listcontainer.open {
	/* height: unset; */
	/* overflow: unset; */
}

body.manager #progress_inner {
	/* width: 300px; */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
body.manager #slider {
	width: 300px !important;
}
body.manager .buttons-and-feedback {
	margin-left: 0px;
	margin-bottom: 1em;
}
body.manager #progress_pane {
	text-align: center;
}

body.manager .listcontainer {
	opacity: 1;
}

body.manager .has_shared_files {
	border: thin solid red;
}

body.manager details.files {
	display: none;
	border-bottom: 1px solid red;
	border-top: 1px solid red;
	padding-bottom: 2px;
	margin-bottom: 3px;
}
body.manager details.has_shared_files details.files {
	display: block;
}

body.manager .has_shared_files:after {
	content: "*";
	position: absolute;
	right: -15px;
	top: 5px;
	font-size: 20px;
	color: red;
}

body.manager .anyoneWithLink {
	clear: both;
	display: block;
	height: 1.5em;
	line-height: 1.5em;
	overflow: hidden;
}

body.manager .anyoneWithLink a {
	margin-right: 10px;
}

body.manager .modifiedTime {
	font-weight: normal;
	text-align: center;
}

body.manager .sort {
	font-weight: normal;
	text-align: center;
}

body.manager .sortlink {
	color: green;
	text-decoration: underline;
	cursor: pointer;
}

body.manager .sortoptions {
	white-space: nowrap;
}

body.manager .listcontainer > summary {
	text-indent: 10px;
	font-weight: bold;
	background-color: #c8ddff;
	line-height: 16px;
	padding-bottom: 6px;
}

body.manager .drivename {
	text-indent: 0;
}

body.manager .shared {
	color: red;
	font-size: 0.8em;
	text-align: center;
}

body.manager .unshared {
	color: green;
	font-size: 0.8em;
	text-align: center;
}

body.manager summary {
	line-height: 1em;
	padding: 6px 0 3px 0;
}

.inline {
	display: inline-block;
	width: calc(100% - 15px);
}
.inline.top {
	width: calc(100% - 25px);
}

.gridcontainer {
	display: grid;
	grid-template-columns: 53% 16% 12% 19%; /*repeat(3, 1fr)*/
	align-items: start;
}

.gridcontainer.top {
	grid-template-columns: 51% 19% 10% 20%; /*repeat(3, 1fr)*/
}

.griditem {
	/* padding: 10px; */
	box-sizing: border-box; /* Ensure padding is included in the width */
}
.drivename.griditem {
	overflow: hidden; /* Hide overflow */
	white-space: nowrap; /* Prevent text from wrapping */
	text-overflow: ellipsis; /* Show ellipsis for overflow text */
}
.modifiedTime {
}

.shared {
}

.loader {
	text-align: center;
}

details.drive .getfiles {
}

details.drive.loaded .getfiles,
details.drive.loading .getfiles {
	display: none;
}

details.drive:not(.loading) .loading {
	display: none;
}

details.drive.loading .loading {
	display: block;
}

details.drive:not(.loaded) .loaded {
	display: none;
}

details.drive.loaded .loaded {
	display: block;
	font-weight: normal;
}

.loading img {
	width: 16px;
}

.all.loading img {
	width: 16px;
	vertical-align: top;
}

.drivefiles_count {
	font-weight: normal;
	margin-right: 5px;
}

details#drive_list .getfiles.all {
}

details#drive_list.loaded .getfiles.all,
details#drive_list.loading .getfiles.all {
	display: none;
}

details#drive_list:not(.loading) .loading.all {
	display: none;
}

details#drive_list.loading .loading.all {
	display: block;
}

details#drive_list:not(.loaded) .loaded.all {
	display: none;
}

details#drive_list.loaded .loaded.all {
	display: block;
}

#drive_list.loading button.getfiles {
	opacity: 0.3;
	pointer-events: none;
}

body.manager .column1 {
	width: calc(68% - 20px);
	float: left;
	/* display: inline-block; */
	margin-right: 0px;
}

body.manager .column2 {
	width: calc(32%);
	float: right;
	border-left: none;
	padding-left: 0px;
}

.tooltip-container {
	position: absolute;
	background-color: black;
	color: white;
	padding: 5px;
	border-radius: 5px;
	white-space: nowrap;
	visibility: hidden;
	z-index: 1000;
	pointer-events: none; /* Prevents tooltip from capturing mouse events */
}