* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}
:root {
	--bg: rgba(64,64,64,1);
    --white: rgba(255,255,255,1);
	--dark: rgba(33,37,41,1);	
    --grey: rgba(150,150,150,1);
	--grey1: rgba(230,230,230,1);
    --gold: rgba(212,175,55,1);
	--beige: rgba(217,197,124,1);
	--red: rgba(255,0,0,1);
	--blue: rgba(2, 117, 244,1);
	--green: rgba(47,182,47,1);
	--cyan: rgba(51,255,255,1);
	--orange: rgba(255,136,77,1);
	--purple: rgba(204,51,255,1);
	--pink: rgba(255,153,204,1);
}

.c-green {color: var(--green);}
.c-red {color: var(--red);}
.c-blue {color: var(--blue);}
.c-white {color: var(--white);}
.c-gold {color: var(--gold);}
.c-orange {color: var(--orange);}
.c-grey {color: var(--grey);}
.c-grey1 {color: var(--grey1);}
.c-cyan {color: var(--cyan);}
.c-purple {color: var(--purple);}
.c-pink {color: var(--pink);}
.c-beige {color: var(--beige);}

.txtleft {text-align: left; vertical-align: middle;}
.txtcenter{text-align: center; vertical-align: middle;}
.txtright {text-align: right; vertical-align: middle;}

.classthead {
	color: var(--beige);
	text-align: center;
	vertical-align: middle;
	font-size: 0.7em;
	font-weight: bold;
}

html,body {
	margin: 0;
	padding: 0;
	background: var(--dark) !important;
	color: var(--white);
}

#header {
	background-color: var(--dark);
	text-align: center;
	vertical-align: middle;
	font-size: 1.2em;
	font-weight: bold;
	color: var(--white);
}

#info {
	text-align: center;
	vertical-align: middle;
	font-size: 1em;
	font-weight: bold;
	color: var(--beige);
}

#footer {
	background-color: transparent;
	text-align: center;
	vertical-align: middle;
	font-size: 1.4em;
	font-weight: bold;
	color: var(--beige);
}

a {cursor: pointer;text-decoration: none;}

#nav .nav-link {
	font-size: 1em;
	font-weight: bold;
	border: 0px solid var(--beige);
	border-radius: 20px;
	margin: 1px;
	width:auto;
}

#nav .nav-link:hover {color: var(--beige);}

.nav-tabs {color: var(--white);}

.nav-tabs .nav-link {
	color: var(--white);
	border: 1px solid var(--white);
}

.tab-pane {
	color: var(--white);
	background-color: var(--dark);
	border: 1px solid var(--white);
	text-align: center;
	padding: 5px;
}

.table-fit {
    width: 1px;
}

.classfrm {
	background-color: var(--dark);
}

.col-form-label {
	font-size: 0.7em;
	font-weight: bold;
	color: var(--white);
}

.classcaption {
    color: var(--white);
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	padding: 10px;
}

.classbtn {
	background-color: var(--beige);
	color: var(--dark);
	border: 2px solid var(--beige);	
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.classbtn:hover{
	background-color: var(--dark);
	color: var(--beige);
	border: 2px solid var(--beige);
}

.MyAlert {
  padding: 10px;
  color: var(--white);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--dark);	  
  width: 98%;
}

.ech {background-color: var(--red);}
.suc {background-color: var(--green);}
.att {background-color: var(--blue);}
.MyCaution {
	background-color: var(--red);
	color: var(--white);
	border: 0px solid var(--red);
	font-size: 1em;
	text-align: center;
	margin-left: auto;
	margin-right: 25px;
	margin-bottom: 15px;	
}

.closebtn {
  margin-left: 15px;
  color: var(--white);
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {color: var(--dark);}

.table .search {
  background-color: transparent;
  color: var(--grey);
  font-size: 0.7em;  
  font-weight: bold;
  width: 100%;
  padding: 0px; /*top right bottom left  */
  border: 0px solid var(--bg);
  text-align: center;
}

.layout {
   table-layout: fixed;
}

.sal {
	background-color: transparent;
	text-align: right;
	font-size: 0.6em;
}

.img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50vw;
}

.fsize {
	font-size: 0.7em;
}

.mycard{
	height: 50vh;
}