@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}
::-webkit-scrollbar{
    display: none;
}
body{
	padding: 20px;
	background: white;
}
small{
    font-size: smaller;
    font-weight: 700;
}
span{
    color: red;
}
input[type=date]{
	padding:3px;
	margin-bottom: 5%;
}
#upload-btn{
    background-color: #111;
    color:#fff;
    border-radius: 3px;
    display: block;
    padding: 0 10px;
    width: 20%;
    height: 30px;
	cursor:pointer;
}
.box{
    width:60%;
    margin:auto;
    border:1px solid #111;
    box-shadow:0 1px 4px 5px #111;
    border-radius: 4px;
   background: linear-gradient(to right, #56ccf2, #2f80ed);
	color:#111;
	justify-content: space-evenly;
}
.box .form-title{
    background-color: #111;
    color: #fff;
    padding: 20px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.box .input-holder{
    display: flex;
    height: auto;
    padding: 3%;
    text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
}
.box .input-holder label{
    width: 30%;
    margin:auto;
    padding: 10px;
    text-align: left;
	font-weight:bold;
}
.box .input-holder .inputs{
    width: 70%;
    margin: 3px auto;
    padding: 5px 10px;
    display: inline-flex;
    float:right;
    position: relative;
}
.box .input-holder .inputs input{
    width: 100%;
    margin: auto;
	border-radius: 4px;
	outline:none;
	box-shadow:none;
}
.box .input-holder .inputs input[type=email],input[type=text],input[type=phone]{
    padding: 5px;
}
.box .input-holder .inputs input[type=file]{
    text-align: left;
}
.box .input-holder .inputs input[type=submit]{
    background-color: #111;
    color:#fff;
    border-radius: 3px;
    display: block;
    padding: 5px;
    width: 20%;
    margin: auto;
    height: 30px;
    margin-top: 0;
	cursor:pointer;
}
.box .input-holder .inputs #markup{
    padding: 8px;
    border:none;
    outline: none;
    resize:none;
    width: 100%;
    text-align: center;
    font-size: smaller;
	margin-top: 0;
    margin-bottom: 0;
    background: transparent;
	border-top: 1px solid #111;
	border-bottom:1px solid #111;
	letter-spacing: 1px;
	font-weight:bold;
}
.box .input-holder .inputs #markup:hover{
    border:none;
    outline: none;
	border-top: 1px solid #111;
	border-bottom:1px solid #111;
}
.box .input-holder .inputs #notes{
    position: absolute;
    display: block;
    width: 100%;
    margin-top: 6%;
	margin-bottom: 3%;
    font-size: smaller;
	float:left;
	text-align:left;
	padding: 5px;
	letter-spacing: 0.5px;
}
#tc{
	margin-top: 3%;
	margin-bottom: 0;
	padding: 20px;
	letter-spacing: 1px;
}
input[type=checkbox]{
	text-align:left;
	float:left;
}
.tc-modal{
	position:fixed;
	top:0;
	left:-110%;
	width:100%;
	height:100%;
	 background: linear-gradient(to right, #c31432, #240b36);
	color:#fff;
	z-index: -1;
	padding:10px;
	transition: 2500ms ease;
	border:none;
	outline:none;
	box-shadow:0 1px 4px 5px #111;
}
.tc-modal .modal-content{
	display: grid;
	place-items:center;
	height:100%;
}
.tc-modal .modal-content h2,ol,p{
	width: 60%;
	margin:auto;
	padding:10px;
}
.tc-modal .modal-content ol{
	text-align:left;
}
.tc-modal .modal-content hr{
	width: 60%;
	margin:auto;
}
.tc-modal .modal-content .modal-close-btn{
	background-color: #111;
    color:#fff;
    border-radius: 3px;
    padding: 0 10px;
	cursor:pointer;
	position: relative;
	width: 20%;
	height:30px;
	margin:auto;
}
.tc-modal .modal-content ol li{
	width:100%;
	margin:auto;
	padding:10px;
	text-align: justify;
}
.tc-modal-link{
	text-decoration:none;
	color: red;
	cursor:pointer;
}
#title{
    background-color: #111;
    border: none;
    color: #fff;
    text-align: center;
    margin-right: 2%;
    font-size: large;
}
#title:focus{
    border: none;
    outline: none;
}
#myCanvas{
	width:100%;
	height:100%;
}
#sd,#ed{
	display:none;
	margin-bottom: 5%;
	margin-top: 5%;
}
#sd #notes,#ed #notes{
	margin-bottom: 6%;
	margin-top: 6%;
	padding: 3px;
}
@media only screen and (max-width:768px){
	.box{
		width:90%;
		margin: auto;
	}
	h2{
		font-size: small;
	}
	.box .input-holder .inputs,
	.box .input-holder .inputs input,input[type=submit]{
		width: 100%;
		margin: auto;
		display: block;
	}
	.box .input-holder .inputs input[type=file]{
		width:100%;
		margin:auto;
		float:left;
	}
	#upload-btn{
		width: 100%;
		margin: auto;
		float:right;
	}
	.box .input-holder .inputs label{
		width:100%;
		margin:auto;
		display:block;
	}
	.box .input-holder .inputs #notes{
		position: relative;
		margin-top:1%;
		margin-bottom: 3%;
	}
	#we select{
		width:100%;
		margin:auto;
		display:block;
		text-align:center;
	}
	#sd,#ed{
		width:90%;
		margin:auto;
		padding:3px;
	}
	#tc h2{
		font-size: normal;
	}
}