@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

@font-face {
    font-family: dinot;
    src:url(../../fonts/dinot.woff);
}

@font-face {
    font-family: dinot-light;
    src: url(../../fonts/dinot-light.woff);
}

@font-face {
    font-family: dinot-reg;
    src: url(../../fonts/dinot-reg.woff);
}

@font-face {
    src: url(../../fonts/fontawesome-webfont.woff);
}

/*body {
	background:rgba(16, 17, 189, 1) url("../img/bg.png") repeat scroll 0 0;
	background-repeat:repeat;}
*/

body {
background:#f4f4f4;
     font-family: "Plus Jakarta Sans", sans-serif;
}

body:before {
    background: #E04700;
    content: '';
    position: absolute;
    height: 100vh;
    /* z-index: 999; */
    width: 100%;
    opacity: 0.12;
    filter: blur(150px);
    top: 0;
    bottom: 0;
}


#logo {
	margin-top:4em;
margin-left:2em;
	}
	
#logo  .container{ padding:0px;}

#logo .main-heading span{color:#fff}
	
#main{
	padding-bottom:3.1em;
    padding-top:3.1em;
}
	
#m-login, #ra-login {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px #8888887a;
}
	
#m-login h2, #ra-login h2 {
    background: #dd2723;
    margin: 0px -15px;
    padding: 15px 40px;
    font-weight: normal !important;
    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: bold !important;
    font-size: 20px;
}
	
#m-login form, #ra-login form {
	padding:20px 20px 20px 20px;}
	
#m-login form label, #ra-login form label {
    font-size: 15px;
    min-width: 135px;
    font-weight: normal;
    color: #333;
    font-weight: 600;
    margin-bottom: 7px;
}
	
#m-login form input, #ra-login form input {
    border: 0 none;
    border-radius: 5px;
    box-shadow: none;
    height: 60px;
    padding: 4px 1.5em;
    width: 100%;
    font-weight:600;
    background: #f2ebeb;
}

#m-login form input:hover, #ra-login form input:hover{
	box-shadow:0px 0px 5px #666;
}

#m-login form input:focus, #ra-login form input:focus{
	box-shadow:0px 0px 5px #666;
}

#m-login form button, #ra-login form button {
    background:#dd2723;
    font-size: 18px;
    box-shadow: none;
    border: 0px;
    border-radius: 5px;
    color: #fff;
    margin-right: 1.5em;
    padding: 10px 40px 10px 40px;
    margin-top: 36px;
    border-radius: 30px;
    padding: 15px 40px;
    transition: all 0.4s;
}
#m-login form button:hover,
#ra-login form button:hover {
    background: #000;
     transition: all 0.4s;
    transform: translateY(-5px);
}


.header-bottom {
    background: #a40000;
    padding: 50px;
    margin-bottom:0px;
}

.page-header {
    padding: 5px 0;
   background: #000000;
    margin: 0;
}
	
#m-login form .fgt-pass, #ra-login form .fgt-pass{
	font-size:16px;
	}

#m-login form a, #ra-login form a{
	color:#333;
	}

.error {color:red;}
	
footer .copyright{
	font-size:16px;
	}
	
footer a{
	font-size:16px;
	color:#333;
	}
	
/*==================------------------------Research Associate Dashboard----------------============================*/	
#main.rad-main, #main.md-main{
	margin-bottom:0px
	}
#logo .logout button{
	background:#333;
	font-size:18px;
	box-shadow:none;
	border:0px;

	color:#fff;
	border-radius: 30px;
	padding:10px 30px;
	}
	
section#logo.rad-logo, section#logo.md-logo {
	margin-bottom:30px;
	}
	
	
.right-content {
    display: flex;
    justify-content: space-between;
}	

#logo .logout button {
    background: #333;
    font-size: 12px;
    box-shadow: none;
    border: 0px;
    color: #fff;
    border-radius: 30px;
    padding: 10px 23px;
    margin-right: 22px;
}

.logout .rad-top-search input {
    display: inline-block;
    vertical-align: middle;
    width: 250px;
    margin-right: 21px;
    height: 45px;
    border-radius: 20px;
    border: 0;
    padding: 20px;
}
	
	
.main-heading h2{
	color:#fff;
	font-weight:bold;
	}
#rad-box.box1, #rad-box.box2, #md-box.box1, #md-box.box2 {
    margin-bottom: 5em;
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-left: 0px;
    margin-right: 0px;
    border: 1px solid #fff;
    box-shadow: 1px 6px 5px -1px rgba(122, 114, 114, 0.75);
    -webkit-box-shadow: 1px 6px 5px -1px rgba(122, 114, 114, 0.75);
    -moz-box-shadow: 1px 6px 5px -1px rgba(122,114,114,0.75);
    max-width: 550px;
    margin: 8px 15px 33px;
}	

#md-box .quality-btn-edit, #md-box .quality-btn-sbmt{margin-top:3em;}


#rad-box.box3, #rad-box.box4, #md-box.box3, #md-box.box4{
	margin-bottom:1em;
	background:#fff;
	padding:20px;
 max-width: 550px;
	margin-left:0px;
	 margin: 0px 15px 20px;
	
	}
#rad-box.box1, #rad-box.box2{
	/*width:48%;*/
min-height:650px;
border:1px solid #fff;
	}	
#rad-box.box3, #rad-box.box4{
	/*width:48%;*/
min-height:530px;
border:1px solid #fff;
	}
.box select, td select {
    background: #F4F4F4 none repeat scroll 0 0;
    border: 0 none;
    padding: 5px 10px;
    width: 100%;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#pro-tbl td {
    border: 1px solid #ddd;
    text-align: center;
}


#pro-tbl label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 12px;
}

#pro-tbl input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
    height: 15px;
}



td .progress {
	min-width:280px;
	}
	
select.minimal {
  background-image:url(../img/select-arrow-down.png);
  background-position:
    calc(100% - 20px) calc(1em + -1px),
    calc(100% - 15px) calc(1em + -1px),
    calc(100% - 2.5em) 0.5em;
  background-repeat: no-repeat;
}


select.minimal:focus {
  background-image:url(../img/select-arrow-up.png);
  background-position:
    calc(100% - 20px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-repeat: no-repeat;
  outline: 0;
}	
#rad-box .box-title, #md-box .box-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    background: #ab0800;
    border-radius: 50px;
}
.breadcrumb > li {
    display: inline-block;
    color: #fff;
}
	
#rad-box .icon-ra-dashboard-large, #md-box .icon-manager-dashboard-large {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dddddd+0,666666+100 */
background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(145deg,  rgba(102,102,102,1) 20%, rgba(221,221,221,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(145deg,  rgba(102,102,102,1) 20%,rgba(221,221,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient1(45deg,  rgba(102,102,102,1) 20%,rgba(221,221,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#666666',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border: 3px solid #999;
    border-radius: 50%;
    display: inline-flex;
    padding: 35px;
    vertical-align: middle;
	margin-right:25px;
}


#rad-box .icon-ra-dashboard-small, #md-box .icon-manager-dashboard-small {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dddddd+0,666666+100 */
background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(145deg,  rgba(102,102,102,1) 20%, rgba(221,221,221,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(145deg,  rgba(102,102,102,1) 20%,rgba(221,221,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient1(45deg,  rgba(102,102,102,1) 20%,rgba(221,221,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#666666',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border: 3px solid #999;
    border-radius: 50%;
    display: inline-flex;
    padding: 10px;
    vertical-align: middle;
	margin-right:25px;
}


#rad-box .text-feild, #md-box .text-feild{
	font-size:16px;
color:#000;
	}


#rad-box .text-feild input, #md-box .text-feild input, #rad-box .text-feild select, #md-box .text-feild select{
color:#333;
	}

#rad-box .box, #md-box .box {
    margin-top: 2em;
    display: flex;
    padding-bottom:20px;
    align-items: center;
    border-bottom: 1px dashed #ddd;
}
	
#md-box .box input {
    width: 100%;
    border: 1px solid #ddd;
    padding: 5px 10px;
    height: 60px;
    background: #f4f4f4;
}


#md-box .ms-choice {
    display: block;
    width: 100%;
   height: 60px;
   
    background-color: #f4f4f4;
}

#md-box .ms-choice > span {
    position: absolute;
    top: 12px;
    
    padding-left: 12px;
    font-size: 16px;
}

#md-box input[type="checkbox"] {
    height: 15px !important;
}

.ms-choice {
    background-image: url(../img/select-arrow-down.png);
    background-position: calc(100% - 20px) calc(2em
26px
 + -1px), calc(100% - 15px) calc(2em + -1px), calc(100% - 2.5em) 0.5em;
    background-repeat: no-repeat!important;
}






#md-box .ms-choice > span.placeholder {
    color: #000;
}
	
#md-box .box textarea {
    width: 100%;
    border: 0px;
    padding: 5px 10px;
    background: #f4f4f4;
    height: 100px;
}
	
#md-box .box .input-cmnt {
	margin-left:8px;
	font-size:16px;
color:#fff;
	}

#md-box .box .mid-heading h3{	
 color:#333;
 font-size:22px;
 font-weight:bold;
}

.logout .rad-top-search {
	margin-bottom:15px;
	padding:0px
}

.logout .rad-top-search input{
	display:inline-block;
	vertical-align:middle;
}

.modal-dialog {
    width: 105%;
height:700px;
}

.modal-content {
width:30%;
left:33%}

.quality-radio label {
    display: inline-block;
    float: left;
    width: 80px;
}
.quality-radio input {
    display: block;
    float: left;
    width: 30px !important;
}

#divUTC {display:inline-block;padding-right:6px;}
	

#divUTC1 {display:inline-block;padding-right:6px;}


.yellow-bg {
background:#ffff66;
color:#000;
border:0px;
font-weight:bold;
text-align:center;}

.red-bg {
background:#ff5f5f;
color:#fff;
border:0px;
font-weight:bold;
text-align:center;}

.green-bg {
background:#08a700;
color:#fff;
border:0px;
font-weight:bold;
text-align:center;}

.blue-bg {
background:#28a6ff;
color:#fff;
border:0px;
font-weight:bold;
text-align:center;}

.red-bg-tr {
background:#ff5f5f;
color:#fff;
border:0px;
font-weight:bold;
}
	
/*==================------------------------Buttons Css----------------============================*/	

@font-face {
	font-family: 'icomoon';
	src:url('../../fonts/icomoon/icomoon.eot');
	src:url('../../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../../fonts/icomoon/icomoon.woff') format('woff'),
		url('../../fonts/icomoon/icomoon.ttf') format('truetype'),
		url('../../fonts/icomoon/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* General button style (reset) */
.btn {
	border: none;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 3px 33px;
	display: inline-block;
	letter-spacing: 1px;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Pseudo elements for icons */
.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before
{
  font-family: 'Font Awesome 6 Free';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.icon-envelope:before {
	content: "\e000";
}

.icon-cart:before {
	content: "\e007";
}

.icon-cart-2:before {
	content: "\e008";
}

.icon-heart:before {
	content: "\e009";
}

.icon-phone:before {
background:url(../img/call-icon.png) no-repeat center center;
}

/* Filled heart */
.icon-heart:after,
.icon-heart-2:before {
	content: "\e00a";
}

.icon-star:before {
	content: "\e00b";
}

/* Filled star */
.icon-star:after,
.icon-star-2:before {
	content: "\e00c";
}

.icon-arrow-right:before {
	content: "\e00d";
}

.icon-arrow-left:before {
	content: "\e003";
}

.icon-phone:before {
  content: "";
}

.icon-truck:before {
	content: "\e00e";
}

.icon-remove:before {
	content: "\e00f";
}

.icon-cog:before {
	content: "\e010";
}

.icon-plus:before,
.icon-plus:after {
	content: "\e011";
}

.icon-minus:before {
	content: "\e012";
}

.bh-icon-smiley:before {
	content: "\e001";
}

.bh-icon-sad:before {
	content: "\e002";
}

.icon-file:before {
	content: "\e004";
}

.icon-remove-2:before {
	content: "\e005";
}



.btn:hover, .btn:focus, .btn.focus{
	color:#fff;}





/* next button color */
.btn-next-color {
	background: #3ada5e;
	border-radius:0px;

	padding:0.5em;
	color: #fff;
	font-size: 12px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.btn-next-color span {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;
	backface-visibility: hidden;
}

.btn-next-color:before {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 2.5;
	font-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-1:active:before {
	color: #fff;
}


/* edit button color */
.btn-edit-color {
	background: #FF0000;
	border-radius:0px;
	min-width:240px;
	padding:0.5em;
	color: #fff;
	font-size: 16px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.btn-edit-color span {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;
	backface-visibility: hidden;
}

.btn-edit-color:before {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 2.5;
	font-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-1:active:before {
	color: #fff;
}

/* Button 1 */
.btn-1 {
	background: #3ada5e;
	border-radius:5px;
	color: #fff;
	font-size: 16px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.btn-1 span {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;
	backface-visibility: hidden;
}

.btn-1:before {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 1.8;
	font-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-1:active:before {
	color: #fff;
}

/* Button 2 */



.btn-2 {
	background: #333;
	border-radius:0px;
	min-width:240px;
	padding:0.5em;
	color: #fff;
	font-size: 16px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.btn-2 span {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;
	backface-visibility: hidden;
}

.btn-2:before {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 2.5;
	font-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-1:active:before {
	color: #fff;
}

/* Button 5 */
.btn-5 {
	background: #823aa0;
	color: #fff;
	font-size: 16px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}


.btn-5 span {
    margin-right:10px;
	/*display: inline-block;*/
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;

	backface-visibility: hidden;
}

.btn-5:before {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 1.8;
	font-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	display:none;
}

.btn-5:active:before {
	color: #703b87;
}


/* Button 5b */
.btn-5b:hover span {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
}

.btn-5b:before {
	left: -100%;
	top: 0;
}

.btn-5b:hover:before {
	left: 0;
}

@-webkit-keyframes fadeOutText {
	0% { color: transparent; }
	80% { color: transparent; }
	100% { color: #fff; }
}

@-moz-keyframes fadeOutText {
	0% { color: transparent; }
	80% { color: transparent; }
	100% { color: #fff; }
}

@keyframes fadeOutText {
	0% { color: transparent; }
	80% { color: transparent; }
	100% { color: #fff; }
}

@-webkit-keyframes moveToRight {
	80% { -webkit-transform: translateX(250%); }
	81% { opacity: 1; -webkit-transform: translateX(250%); }
	82% { opacity: 0; -webkit-transform: translateX(250%); }
	83% { opacity: 0; -webkit-transform: translateX(-50%); }
	84% { opacity: 1; -webkit-transform: translateX(-50%);  }
	100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes moveToRight {
	80% { -moz-transform: translateX(250%); }
	81% { opacity: 1; -moz-transform: translateX(250%); }
	82% { opacity: 0; -moz-transform: translateX(250%); }
	83% { opacity: 0; -moz-transform: translateX(-50%); }
	84% { opacity: 1; -moz-transform: translateX(-50%);  }
	100% { -moz-transform: translateX(0%); }
}

@keyframes moveToRight {
	80% { transform: translateX(250%); }
	81% { opacity: 1; transform: translateX(250%); }
	82% { opacity: 0; transform: translateX(250%); }
	83% { opacity: 0; transform: translateX(-50%); }
	84% { opacity: 1; transform: translateX(-50%);  }
	100% { transform: translateX(0%); }
}


@-webkit-keyframes scaleUp {
	80% {
		opacity: 0;
		-webkit-transform: scale(2);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(2);
	}
}

@-moz-keyframes scaleUp {
	80% {
		opacity: 0;
		-moz-transform: scale(2);
	}
	100% {
		opacity: 0;
		-moz-transform: scale(2);
	}
}

@keyframes scaleUp {
	80% {
		opacity: 0;
		transform: scale(2);
	}
	100% {
		opacity: 0;
		transform: scale(2);
	}
}

/* Icon only style */
.btn-icon-only {
	font-size: 0;
	padding: 25px 30px;
}

.btn-icon-only:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 26px;
	line-height: 54px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}


@-webkit-keyframes fillToRight {
	to { 
		width: 100%;
	}
}

@-moz-keyframes fillToRight {
	to { 
		width: 100%;
	}
}

@keyframes fillToRight {
	to { 
		width: 100%;
	}
}


@-webkit-keyframes emptyBottom {
	to { 
		height: 100%;
	}
}

@-moz-keyframes emptyBottom {
	to { 
		height: 100%;
	}
}

@keyframes emptyBottom {
	to { 
		height: 100%;
	}
}


@-webkit-keyframes scaleFade {
	50% { 
		opacity: 1;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5);
	}
}

@-moz-keyframes scaleFade {
	50% { 
		opacity: 1;
		-moz-transform: scale(1);
	}
	100% {
		opacity: 0;
		-moz-transform: scale(2.5);
	}
}

@keyframes scaleFade {
	50% { 
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(2.5);
	}
}

@-webkit-keyframes dropDown {
	to { 
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes dropDown {
	to { 
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@keyframes dropDown {
	to { 
		opacity: 1;
		transform: scale(1);
	}
}

@-webkit-keyframes dropDownFade {
	50% { 
		opacity: 1;
		-webkit-transform: scale(1);
	}
	100% { 
		opacity: 0;
		-webkit-transform: scale(1.5);
	}
}

@-moz-keyframes dropDownFade {
	50% { 
		opacity: 1;
		-moz-transform: scale(1);
	}
	100% { 
		opacity: 0;
		-moz-transform: scale(1.5);
	}
}

@keyframes dropDownFade {

	50% { 
		opacity: 1;
		transform: scale(1);
	}
	100% { 
		opacity: 0;
		transform: scale(1.5);
	}
}



@-webkit-keyframes moveUp {
	0% {
		-webkit-transform: translateY(50%);
		opacity: 0;
	}
	100% { 
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes moveUp {
	0% {
		-moz-transform: translateY(50%);
		opacity: 0;
	}
	100% { 
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@keyframes moveUp {
	0% {
		transform: translateY(50%);
		opacity: 0;
	}
	100% { 
		opacity: 1;
		transform: translateY(0);
	}
}

.btn-error {
	-webkit-animation: shake 0.5s;
	-moz-animation: shake 0.5s;
	animation: shake 0.5s;
}

/* From Dan Eden's animate.css: http://daneden.me/animate/ */
@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.btn-error:before {
	content: "\e002";
}

.btn-error:after {
	content: "Error!";
	-webkit-animation: scaleFromUp 0.5s;
	-moz-animation: scaleFromUp 0.5s;
	animation: scaleFromUp 0.5s;
}

@-webkit-keyframes scaleFromUp {
	0% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100% { 
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes scaleFromUp {
	0% {
		-moz-transform: scale(0);
		opacity: 0;
	}
	100% { 
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@keyframes scaleFromUp {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	100% { 
		opacity: 1;
		transform: scale(1);
	}
}


@-webkit-keyframes openTrash {
	50% {
		-webkit-transform: rotate(-35deg);
	}
	100% { 
		-webkit-transform: rotate(0deg);
	}
}

@-moz-keyframes openTrash {
	50% {
		-moz-transform: rotate(-35deg);
	}
	100% { 
		-moz-transform: rotate(0deg);
	}
}

@keyframes openTrash {
	50% {
		transform: rotate(-35deg);
	}
	100% { 
		transform: rotate(0deg);
	}
}

/*==================------------------------Responsive Table----------------============================*/	
	/* 
	Generic Styling, for Desktops/Laptops 
	*/
	table { 
	margin-top:2em;
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Zebra striping */
	tr:nth-of-type(odd) { 
		/*background: #eee;*/ 
	}
	th { 
/*		background: #333; 
		color: white; 
		font-weight: bold; 
*/	}
	td, th { 
		padding: 10px; 
		font-size:16px;
		color:#000;
	}

td select, td input {
    color: #333;
    width: 100%;
    height: 60px;
    padding: 20px;
}
	
	.icon-approve {
	 background:url(../img/icon-approve.png) no-repeat center center;
	 width:16px;
	 height:15px;
	 display:inline-block;
	 margin-right:10px;
		}
	
		/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
#pro-tbl 	td:nth-of-type(1):before { content: "ID"; }
#pro-tbl		td:nth-of-type(2):before { content: "Total Sample"; }
#pro-tbl		td:nth-of-type(3):before { content: "Expiring Date"; }
#pro-tbl		td:nth-of-type(4):before { content: "Extend Date"; }
#pro-tbl		td:nth-of-type(5):before { content: "Reviews"; }
#pro-tbl		td:nth-of-type(6):before { content: "Status"; }


#per-tbl 	td:nth-of-type(1):before { content: "RA ID"; }
#per-tbl		td:nth-of-type(2):before { content: "Total Sample Used"; }
#per-tbl		td:nth-of-type(3):before { content: "Surveys Completed"; }
#per-tbl		td:nth-of-type(4):before { content: "Quality Flags"; }
#per-tbl		td:nth-of-type(5):before { content: "ID"; }
#per-tbl		td:nth-of-type(6):before { content: "Status"; }


	}
	
	
	


.green-bg-tr {
background:#228B22;
color:#fff;
border:0px;
font-weight:bold;
}	
	
.orange-bg-tr {
background:#FFA500;
color:#fff;
border:0px;
font-weight:bold;
}	
	
.purple-bg-tr {
background:#800080;
color:#fff;
border:0px;
font-weight:bold;
}	
	
	
.light_blue-bg-tr {
background:#00FFFF!important;
color:#fff;
border:0px;
font-weight:bold;
}	




.distribution_color {
color:#333;
}