/* POP UP LOGIN BOX START */

.lightTheme .xButton {
	float: right; 
	cursor: pointer;
	fill: #2e2215;
	stroke: #2e2215;
}
.lightTheme .xButton:hover {
	float: right; 
	cursor: pointer;
	fill: #bd8241;
	stroke: #bd8241;
}
.lightTheme .HideableLoginBox{
    max-width: 320px;
	height: 204px;
	background-color: #d9b997;
	padding: 10px;
	border-radius: 6px;
	border:#2e2215 dashed 1px;
	position: absolute;
	left: calc(50% - 170px);
	top:10%;
    font-family: 'Times New Roman', Times, serif;
}
.lightTheme #createAccountShow{
	display: inline;
}
.lightTheme .logoutButton{
	color: #d9b997;
	text-decoration: none;
}

.lightTheme .logoutButton:hover{
	background-color: #bd8241;
    color:#2e2215;
}
.lightTheme .LoginButton{
	display: inline;
    padding: 5px 10px 9px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
	font-family:'bree';
	font-size:16px;
	text-align: center;
	vertical-align: middle;
}

.lightTheme .loginRightSide {
    position: absolute;
    right: 10px;
}

.lightTheme .emailLoginText{
	width: 100%;
    padding: 6px;
	padding-left: 12px;
	min-height: 34px;
    font-size: 16px;
    border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
    border: none;
    background-color: bisque;
}

/* Scrollbar styles for light theme */
.lightTheme ::-webkit-scrollbar {
    width: 16px;
}

.lightTheme ::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: bisque; 
}

.lightTheme ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #2e2215;
}

.lightTheme ::-webkit-scrollbar-thumb:window-inactive {
    background: #2e2215;
}

/* POP UP LOGIN BOX END */

/* EMAIL HIDDEN BY DEFAULT - HOVER TO REVEAL */
.lightTheme .accountEmail {
    background-color: #2e2215; /* Same as text color - hidden */
    color: #2e2215;
    cursor: default;
    border-radius: 4px;
    padding: 0 4px;
}

.lightTheme .accountEmail:hover {
    background-color: #d9b997; /* Different from text - revealed */
    color: #2e2215;
}


.lightTheme .greenBack {
	background-color:#af9b82;
}
.lightTheme .greenBack:hover {
	background-color:#958370;
	color:#eed2b4;
}

.lightTheme .textColor{
	color: #2e2215;
}

.lightTheme .emailText{
	width: 70%;
    padding: 6px;
	padding-left: 12px;
	min-height: 34px;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    background-color: bisque;
}

.lightTheme .createvalue{
	width: 74%;
	font-family: 'Courier New', Courier, monospace;
}
.lightTheme .createbutton {
	width:25%;
	float:right; 
	margin:0px; 
	padding: 5px 16px;
}

.lightTheme .nameList{
	padding: 6px;
	font-size: 18px;
	display: inline;
	float:left;
	color:#2e2215 !important;
	font-family: 'Courier New', Courier, monospace;
}

.nameList:hover{
	cursor:pointer;
	font-weight: bold;
}

.lightTheme .docList {
	max-height: 500px;
	overflow-y: scroll;
}

.lightTheme #usracc:hover{
	background-color: #bd8241;
}

.lightTheme .removeX{
	cursor: pointer;
}

.lightTheme .removeX:hover{
	color: #2e2215;
	font-weight: bold;
}

.lightTheme .NamesListContainer {
    border: 1px dashed #2e2215;
    border-radius: 4px;
	margin: 2px;
	padding: 2px;
}

.lightTheme .SectionContainer {
    border-left: 3px solid #2e2215;
	margin: 16px 2px 16px 2px;
	padding: 8px;
}

.lightTheme #usracc{
	cursor: pointer;
	background-color: #2e2215;
	color:#d9b997;
	border-radius: 4px;
	font-size: 24px;
}

.lightTheme #showprj{
	border: 2px solid #2e2215;
	box-shadow: 4px 4px 2px #2e2215;
	border-radius: 4px;
	background-color: #d9b997;
	padding: 10px;
	width: 577px;
	min-height: 100px;
	position: absolute;
	margin: auto;
	top: 100px;
	left: calc(50% - 300px);
}

.lightTheme .flexCont {
	border-bottom:2px dashed #2e2215;   
	display: flex; 
	padding: 0px 5px 5px 0px;
	justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

#spacer{
	margin-bottom: 276px;
}

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

	#spacer{
		margin-bottom: 340px;
	}
	.lightTheme .createvalue{
		width: 55%;
	}
	.lightTheme .createbutton{
		width:43%;
		float:right; 
		margin:0px; 
		padding: 5px 10px;
	}
	.lightTheme #showprj{
	width: 90vw;
	min-height: 100px;
	position: absolute;
	margin: auto;
	top: 100px;
	left: calc(50% - 49vw);
}

.writeMenu{
    position: fixed;
    background-color: #2e2215;
}
}