/**********
 * This is the css file specificaly used for the writing tool application (mathDrawing)
 ****************************************************************************/

/* THIS MAY BE USEFULL IF CAPTCHA IS NOT READABLE
/*.grecaptcha-badge{
position:fixed;
top:0px;
left:0px;
}*/

.roboto{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

#app {
  position:fixed;
  display:flex;
  flex-direction:row;
  width:100%;
  left:0vh;
  top:var(--header-height);
  /*height:calc(100vh - var(--header-height) - var(--footer-height));*/
}

#menuAndDrawingSpace{
  position:relative;
  width:75%;
  /*height:calc(100vh - var(--header-height) - var(--footer-height));*/
}

#right-side{
  position:fixed;
  width:25%;
  display:flex;
  flex-direction:column;
  top:var(--header-height);
  right:0vh;
  height:calc(100vh - var(--header-height) - var(--footer-height));
}

#thePage{
  position:relative;
  /*Width and height are computed in javascript. DON'T PUT THEM HERE*/
  background-color:rgb(254,254,254);  
  background-color:white;
  /* border-color:black;
  border:solid;
  border-width:1px; */
  overflow:scroll;
}

#myCanvas{
  background-color:white;
/*  border-color:black;
  border:solid;
  border-width:1px;*/
}

#selectedSubject {
  height:44px; /*THIS IS FROM math button HEIGHT */
  width:90%;
  padding-left:10%;
  background-color:rgb(204,204,204);
  margin-left:2px;
  /*margin-bottom:2px; /*#math-button margin-bottom*/
  margin-top:22px; /*#drawing-menu margin + .mathButton MARGIN*/
  margin-bottom: 14px; /*colorPickerHeight (in variables.js) + margin of .mathButton*/
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-style: normal;
  font-size:1.4em;
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
}

#subjectText{
	height:34px;
}

#right-form {
  /*Width and height are computed in javascript. DON'T PUT THEM HERE*/
  background-color:rgb(200,200,255);
  padding-top:50px;
  margin-left:2px; /*same as #forBackButton */
  /*margin-top:1px;*/
  background-color:rgb(200,200,255);
}

#forBackButton{
  height:100%;
  width:100%;
  background-color:rgb(200,200,255);
  margin-left:2px; /*SAME AS #right-form*/
}

.rightMenu {
  width:100%;
  display:flex;
  flex-direction:column;
}

.subjectButton, #back-button {
  padding-top:5px;
  padding-bottom:5px;
  margin-top:0.5em;
  margin-bottom:0.5em;
  background-color:rgb(230,230,230);
  color:rgb(15,15,15);  
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
  font-size:0.75em;
}

.subjectButton {
	margin-left:10%;
	padding-left:10%;
	width:80%;
}

#back-button {
	 margin-left:50%;
	 padding-left:10%;
	 width:40%;
	 margin-bottom:50px;
}

input {
  padding-bottom:5px;
  padding-left:20px;
  color:rgb(15,15,15);
  width:100%;
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
}

label {
  padding-bottom:0px;
  margin-bottom:1px;
}

.triangleMesure {
  padding-left:10px;
  padding-bottom:10px;
}

.mathButton {
  background-color:rgb(200,200,255);
  width:13.5%;
  height:44px;
  border-radius:20px;
}

.buttonImg {
  margin-top:4px;
  margin-left:2%;
  height:30px;
}

#thePage p{
  padding-left:12px;
}

.info{
  padding-left:15px;
}

#color-picker, #mathMenu{
  width:100%;
  display:flex;
  flex-direction:row;
  margin-left:2px;
  margin-right:10px;
}

#mathMenu{
	height:44px;
	margin:2px;
}

#color-picker{
	height:15px;
	z-index:1;
}

#drawing-menu {
  display:flex;
  margin-top:20px; /*THIS MUST BE IN PIXELS BECAUSE OF USE IT TO DEFINE DRAWING POSITION IN JAVASCRIPT*/
  width:100%;
  height:59px;/*THIS MUST BE IN PIXELS BECAUSE OF USE IT TO DEFINE DRAWING POSITION IN JAVASCRIPT*/
  flex-direction:column;
}

/*
#black {
  border-color:white;
  background-color:#000000;
  left:0px;
}*/

#room-code-to-enter, #room-code-to-share {
  border-width:5px;
  padding:7px;
  border-style:solid;
  font-size:1em;
  text-align:center;
  color:white;
  background-color:black;
  width:400px;
  height:200px;
}

#room-code-to-enter, #room-code-to-share {
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

#info-enter-code {
  padding:5px;
}

#student-submit-button{
  width:180px;
}

#student-text-field{
  width:180px;
}

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

	.enter-app_link
	{
		font-size:1.5em;
	}

}*/