@font-face { font-family: Exo; src: url('../fonts/Exo-Medium.ttf'); } 
 @font-face { font-family: Exo; font-weight: 500; src: url('../fonts/Exo-Medium.ttf');}
 @font-face { font-family: Roboto; src: url('../fonts/Roboto-Medium.ttf'); } 
 @font-face { font-family: Roboto; font-weight: 500; src: url('../fonts/Roboto-Medium.ttf');}

.title {
    font-family: Exo;
    font-weight: 700;
    color: #000;
}

.sub-title {
    font-family: Exo;
    font-weight: 500;
    color: #000;
}

.epic-box {
    background: #fff;
    border: 1px solid #d4d3d3;
    width: 94%;
    height: 575px;
    padding: 6rem 27rem;
    border-radius: 8px;
    overflow-y: scroll;
}

.sign {
	margin-top: 5%;
}

.sign-check {
    padding-left: 1.8rem;
    float: left;
    margin: 1% 0;
    color: #b7b7b7;
    font-size: 14px;
    font-weight: 500;
    font-family: Roboto;
}

.sign-forgot {
    float: right;
    margin: 1% 0;
    padding-right: 1.1rem;
    color: #b7b7b7;
    font-size: 14px;
    font-weight: 500;
    font-family: Roboto;
}

.sign-group {
    margin-bottom: 1.1rem;
}

.mb-3 .sign-btn {
    position: relative;
    margin-top: 5%;
    width: 100%;
    padding: 11px;
    font-size: 1.2em;
    background: #ff3b3d;
    font-family: Exo;
    font-weight: 500;
}

.dialog {
    font-size: 13px;
    font-weight: 500;
    color: #b3b2b2;
    font-family: Roboto;
}

.epicscroll::-webkit-scrollbar
{
	width: 4px;
}

.epicscroll::-webkit-scrollbar-thumb
{
	background-color: #afaeae;
}

.myscroll::-webkit-scrollbar
{
	width: 4px;
}

.myscroll::-webkit-scrollbar-thumb
{
	background-color: #afaeae;
}

.epic-btn {
    height: 55px;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    font-family: Exo;
    position: absolute;
    width: 85%;
}

.navbar-brand span {
    font-family: Exo;
    font-size: 30px;
    color: #000;
    position: relative;
    top: 3px;
    left: 15px;
    font-weight: 800;
}

.sidenav .nav-text {
    font-size: 15px;
    font-family: Exo;
    color: #2f2f2f;
    font-weight: 600;
}

li.epic-nav {
    padding: 8px 0;
    border-bottom: 1px solid #efefef !important;
}

li.epic-subnav {
    padding: 2px 0;
}

i.epic-toggle {
    font-size: 18px;
    color: #000;
    padding: 0px 20px 0 0px;
    border-right: 1px solid #d6d1d1;
}

.epic-menu {
    height: 490px;
    overflow-y: scroll;
    padding-top: 35px;
    background: #fff;
    border-radius: 0 12px 0 0;
}

.sidenav .epic-subnav .nav-text {
    font-size: 13px;
}

li.nav-header {
    background: #efefef;
}

div#pageTitle {
    font-family: Exo;
    font-weight: 500;
    color: #d4d4d4;
}

.home-opt {
    text-align: center;
}

span.userName {
    font-family: Exo;
    font-size: 17px;
    font-weight: 500;
    margin: 0 8px;
    color: #505050;
}

.clone {
    border: 2px solid #d2cfcf;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
}

.clone-btn {
    height: 40px;
    width: 40px;
    background: #ff3b3d;
    color: #fff !important;
    border-radius: 100%;
    text-align: center;
    line-height: 39px;
    font-size: 24px;
    float: right;
    position: relative;
    right: 25px;
    top: 30px;
}

div#content-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.sidenav.modal-dialog.dk.dark {
    position: fixed;
}

div#content-main {
    margin-top: 5rem;
}


input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  border: 1.5px solid #ff3b3d;
}

.parsley-errors-list {
  color: #ff3b3d;
  text-align: left;
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 12px;
  line-height: 2em;
  font-weight: 100;
  opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

p.sign-msg {
    color: #ff3b3d;
    font-size: 12px;
    line-height: 2em;
    font-weight: 100;
    text-align: left;
}

.spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1003;
    overflow: hidden;
}

.loader {
    position: fixed;
    top: 51%;
    left: 47%;
    margin-top: -5%;
}
/*===============================================================================================================*/
/*============================================== Responsive Design ==============================================*/
/*===============================================================================================================*/



@media (max-width: 1024px) {

.epic-box {
    padding: 6% 22% !important;
    width: 93% !important;
    height: 575px !important;
}

.loader {
    position: fixed;
    top: 46%;
    left: 45%;
    margin-top: -5%;
}

}

@media (max-width: 768px) {

.epic-box {
    padding: 6% 18% !important;
    width: 93% !important;
    height: 540px !important;
}

}

@media (max-width: 640px) {

.epic-box {
	padding: 7% 1% !important;
    width: 92% !important;
    height: 475px !important;
}
    
.loader {
    position: fixed;
    top: 46%;
    left: 44%;
    margin-top: -5%;
}

}

@media (max-width: 575px) {

body {
    background-color: #ffffff !important;
}

.epic-box {
	border: none !important;
	padding: 15% 1% !important;
	width: 96% !important;
	height: 540px !important;
}
    
.loader {
    position: fixed !important;
    top: 42% !important;
    left: 40% !important;
    margin-top: -5% !important;
}

}

a.export-btn {
    background: #ff3b3d;
    padding: 3px 8px;
    color: #fff;
    border: 2px solid #f76b6b;
    float: right;
    position: absolute;
    right: 5em;
    top: 27em;
}


a.download-btn {
    background: #ff3b3d;
    padding: 3px 8px;
    color: #fff;
    border: 2px solid #f76b6b;
    float: right;
    position: relative;
    right: 10em;
}

a.pay-download-btn {
    background: #ff3b3d;
    padding: 3px 8px;
    color: #fff;
    border: 2px solid #f76b6b;
    float: right;
    position: absolute;
    right: 4em;
    top: 8.5em;
}

a.my-btn.clone2 {
    background: #ff3b3d;
    color: #fff;
    padding: 5px 10px;
    border: 2px solid #fb6969;
    position: relative;
    float: right;
    top: 2.6em;
    right: 15em;
}

tr.total {
    background: #ffd3d3;
}

tr.total td {
    padding: 5px;
}

a.print {
    background: #ff3b3d;
    padding: 3px 8px;
    color: #fff !important;
    border: 2px solid #f76b6b;
    float: right;
    position: absolute;
    right: 13.5em;
    top: 8.5em;
}

.checkboxes{
    border: 1px solid #e9ecef;
    border-radius: 3px;
    background: #e9ecef;
    padding: 11px 15px 9px;
    font-size: 12px;
    margin: 5px;
}

.checkboxes input{
    position: relative;
    top: 2px;
}

.checkboxes:hover {
    box-shadow: 1px 2px 10px #1b1b1b59;
}

.select2-container--default .select2-selection--single {
    border: 2px solid #a6d5fa !important;    
     border-radius: 5px !important;
}

.select2-container .select2-selection--single {
    height: 50px !important;
}

.select2-container--default .select2-selection {
    border-color: rgb(166, 213, 250)!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    font-size: 15px !important;
    padding-left: 15px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 13px !important;
    right: 8px !important;
}

a#recalculate img {
    background: #fff;
    height: 50px;
    width: 50px;
    position: relative;
    top: 29px;
    right: 10px;
    padding: 5px;
    border-radius: 50%;
}

a#recalculate img:hover {
    box-shadow: inset 0px 5px 16px #00000033;
}

img.loader-red {
    position: relative;
    top: 28px;
    right: 17px;
    display: none;
}

.grand_total {
    margin-top: 35px;
    text-align: right;
}

.grand_total p {
    margin: 0;
}

span.select2-selection.select2-selection--multiple {
    min-height: 50px !important;
    border: 2px solid #a6d5fa !important;
}