@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Customize the label (the container) */
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom radio button */
.checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* The container */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkbox-checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkbox-checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkbox-checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkbox-checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.login-page {
  background: #fff;
}

.login-box, .register-box {
  width: 450px !important;
  margin:5% auto !important;
}

.login-box b {

  font-size:18px !important;
  color: #008455;
  font-weight: 600;
}

.content-wrapper, .main-footer, .main-header {

  margin-left:0 !important;
}

aside {
  display:  none !important;
}

.logo-link {

  padding: 0px;
}

nav {
  height: 65px;
}

.link-settting {
  font-size: 14px;
  display: block;
}

.icon-settings {
  font-size: 18px;

}

label {
  font-weight:400 !important;
  font-size: small;
}




td.details-control {
    background: url("../../../assets/images/open-icon.png") no-repeat center center;
    cursor: pointer;
    background-size:30px; 
}
tr.shown td.details-control {
    background:url("../../../assets/images/close-icon.png") no-repeat center center;
    background-size:30px; 
}

/*Filter List Style*/
.filter-button {
  padding: 10px;
}
.filter-list {
  position: absolute;
  z-index: 10000;margin-left: -258px; 
} 
.filter-list > ul {
  list-style: none;
  background: black;
  height: 100vh;
  position: fixed;
  margin: 0;
  padding: 0;
}

.filter-list > ul > li {
    
}
.filter-list > ul > li > input {
  margin-left: 20px;
}
.filter-list  span{
  color:#fff;
    padding:  20px;
}
.list-header {
  padding:10px 0px;
  font-size: larger; 
  border-bottom: 2px solid #fff; 
}
.filter-list-first-child {
    margin-top: 40px;  
}
.hide-filter-list {
    margin-left: -258px; 
    transition: 1s ease-in; 
}
.show-filter-list {
     margin-left: 0px; 
    transition: 1s ease-out; 
}
.push-wrapper {
    margin-left: 258px; 
    transition: 1s ease-out; 
}.push-wrapper-back {
     margin-left: 0px; 
    transition: 1s ease-in; 
}
/* filter form inputs*/
#filterInputs {
  padding: 0;
}

#filterInputs > div {
  float: left;
}

.edit-icon-style {
  font-size: 12px;
  padding:0.05rem .2rem;
}

table {
  font-size: 14px;
}


.dropzone-container{
 margin: 0 auto;
 width: 50%;
}

.dropzone-content{
 padding: 5px;
 margin: 0 auto;
}
.dropzone-content span{
 width: 250px;
}

.dz-message{
 text-align: center;
 font-size: 28px;
}
.processing-steps{
	min-height: 100px;
}


.form-steps {
  list-style-type: none;
    width: 100%;
    display: inline-block;
}

.form-steps {
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-basis: content;
    flex-grow: 1;
    padding-left: 0;
    flex-flow: row wrap;
}

li.step-icon {
    text-align: center;
    display: inline-block;
    border: 1px solid #eee;
    margin-right: 15px;
    border-radius: 15px;
    position: relative;
    width: 23.5%;
    height: 165px;
    background: #eee;
    margin-bottom: 35px;
    vertical-align: top;
}

li.step-icon a {
    display: block;
    padding: 35px 15px 15px 15px;
    min-height: 140px;
    color: #333;
    font-weight: bold;
    width: 80%;
    margin: auto;
}

li.step-icon:hover {
    background: #28a745;
}

li.step-icon:hover a,
li.step-icon:hover a i {
    color: #fff;
}

li.step-icon .step {
    background: #fff;
    color: #333;
    border: 1px solid #333;
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    font-size: 15px;
    line-height: 30px;
    margin: auto;
}

.step-icon i {
    display: block;
    font-size: 30px;
    color: #333;
    margin-bottom: 10px;
}

.step_complete {
	background: #28a745 !important;
}

.payment_complete {
  background: grey !important;
}

.payment_complete a,
.payment_complete i, 
.step_complete i,
.step_complete a  {
  color: #fff !important;
}

li.step-icon.step_complete .step {
    background: green;
    color: #fff;
    border-color: green;
}

.flag-names .step_complete,
.flag-names .payment_complete {
    color: #fff;
    padding: 15px;
    margin: 15px;
    display: inline-block;
    margin-bottom: 45px;
    border-radius: 10px;
}

input[type=text].form-control, input[type=text].form-control:focus,
input[type=number].form-control, input[type=number].form-control:focus {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none;
    font-weight: 400;
    font-family: 'Roboto Mono', monospace;
}

.col-form-label {
    padding-bottom: 0 !important;
    vertical-align: bottom;
    align-items: baseline;
    align-content: baseline;
    line-height: 1.2;
    max-height: 100%;
}

.multiline {
    line-height: 4ch;
    background-image: linear-gradient(transparent, transparent calc(4ch - 1px), #E7EFF8 0px);
    background-size: 100% 4ch;
    border: 0;
    padding: 0;
    margin: 10px 0;
}

.multiline:focus {
  box-shadow: none;
}

.input-group-append {
  margin-left: 0;
}

.input-group-text {
      background: transparent;
    border-top: 0;
    border-right: 0;
    border-left: 1px solid #ccc;
}


.w-5 {
  width: 5% !important;
}

.w-10 {
  width: 10% !important;
}

.w-20 {
  width: 20% !important;
}

.w-30 {
  width: 30% !important;
}

.w-40 {
  width: 40% !important;
}

.w-50 {
  width: 50% !important;
}

.w-70 {
  width: 70% !important;
}

.w-100 {
  width: 100% !important;
}


li.step-icon.fee {
    height: 90px;
}

li.step-icon.fee a {
    max-height: fit-content;
    min-height: fit-content;
    line-height: 1.2
}

.card-title {
  color: #333;
    text-transform: uppercase;
}

.file-view-wrap {
    background: #fff;
    display: block;
    margin: auto;
    padding: 50px;
}

.file-logo {
    display: block;
    max-width: 100px;
    margin: auto;
    height: auto;
    margin-bottom: 10px;
}

.file-header {
    border-bottom: 1px solid #eee;
}

.file-field {
    padding: 10px;
    margin: 10px;
    border: 1px solid #eee;
}

.file-field .data {
    margin-left: 15px;
    font-weight: 600;
}

table.transactions {
    padding: 15px;
    background: #eee;
}

.table.transactions thead th {
    border-top: 0;
}

.scanned-copy {
    max-width: 200px;
    border-radius: 15px;
    height: 300px;
    width: auto;
    margin: 15px;
    border: 2px solid #ddd;
}

.sub-form{
    padding: 20px;
    border: 2px solid #eee;
        background: #faf8f8;
    border-radius: 5px;
    margin-top: 15px;
}

.navbar-light {
  background: #fff !important;
  border-bottom: 1pxsolid #ddd;
}

.btn-info {
    background-color: #5ac35a;
    border-color: #5ac35a;
}

.logo {
    width: auto;
    height: 40px;
    display: block;
}

.navbar-light .navbar-nav .nav-link {
    text-transform: uppercase;
    font-weight: bold;
}

tr.allotted {
    background: #eee;
}

.allottee_avatar_upload_form {
      padding: 10px;
    background: #eee;
    margin-top:  15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.allottee_avatar_upload {
  border-bottom: 1px solid #333;width: 100%;padding: 5px;margin-bottom: 15px;
}

.delete-img {
  position: absolute;
    font-size: 20px;
    color: red;
}


#printHeader {
    width: 100%;
    display: block;
}

#printHeader img.logo {
    height: auto;
    display: block;
}

#printHeader .title {
    padding: 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.print-logo {
      height: 100px;
    margin: auto;
}