.role-card-padding {
  padding: 1.5rem 0;
  color:#6e84a3;
}
.permissions-list-row{
  height:100vh;
  overflow-y: scroll;
  margin-top:1rem
}

.pad-1 {
  padding-left: 1.5rem;
}
.list-group-item.list-roles.active-role {
  background: rgba(39, 55, 101, 0.1);
}
.list-roles.move-text-center{
  padding-left: 1.5rem;
}

.permission-card {
  margin-top: 2.5rem;
  padding:0  2rem 0 1rem
}

.list-permission-wrapper{
  height: 400px;
  overflow-x: scroll;
  border: 1px solid rgba(39, 55, 101, 0.1);
}


.permission-card .list-group-item.list-roles {
  border: 0px solid rgba(39, 55, 101, 0.1);
  border-top:0;
  border-bottom:0;
  width:90%
}

.permission-card .list-group-item:last-child {
  border: 0px solid rgba(39, 55, 101, 0.1);
  border-top: 0;

}

.ui.fluid.dropdown {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
}

.select_wrap.list-permission-wrapper{
  background: #fff
}

.permission-card .list-group-flush {
  border: 1px solid rgba(39, 55, 101, 0.1);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.permission-card .header-cover {
  border-radius: 10px 10px 0px 0px;
  border-bottom: 0;
  height: 50px;
  background: rgba(39, 55, 101, 0.1);
  border: 1px solid rgba(39, 55, 101, 0.1);
}

.permission-card .align-items-center{
  padding:0 2rem
}
.permission-card .col.pad-1{
  padding:0.5rem .5rem;
  border-top: 0;
  border-left:0;
  border-right:0;
}


.pad-01 {
  padding: 0rem 2rem;
}

.description-list .list-group-item {
  padding: 1.2rem 0rem;
}

.description-list {
  padding-bottom: 0.7rem;
}

.list-group-item.list-roles.aa{
  cursor:pointer
}

/*********************************************
user
******************************************/

.pad-02-merchant{
  padding-left:2rem
}

.pad-03-merchant{
  padding-left:5rem
}
.pad-add-team{
  padding:1rem 10rem
}



/*********************************************
team table
******************************************/
.member-count-tbl{
   padding:0 1rem
}

.member-count-top{
    padding:1rem 2rem
}

 .member-count-tbl table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  
}

 .member-count-tbl td,  .member-count-tbl th {
  border: 1px solid rgba(39, 55, 101, 0.1);
  text-align: left;
  padding: 1rem;
  border-left:0;
   border-right:0;
   border-top:0
}



 .member-count-tbl tr:nth-last-child {
    border-bottom:0;
   color:red
} 

/********************************
for kyc document  upload
*********************************/
.previewImage {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.upload-btn1{
  color: #fff;
  background-color: #1a68d1;
  border-color: #1862c6;
width:30%;

}
.upload-btn1 input{
width:0;
padding: .5rem;
opacity:0
}

.upload-btn2{
  color: #1a68d1;
  background-color: #fff;
  border-color: #1862c6;
width:40%;

}
.upload-btn2 input{
width:0;
padding: .5rem;
opacity:0
}

/**********************************
notify-bar
**********************************/

.notify-bar{
  background: rgba(110,132,163, 0.4);
  padding:.5rem 1rem;
  color: #fff;
  text-align: center
 }

 /*********************************
 order checkbok
 ********************************/

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

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

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

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

/* When the checkbox is checked, add a blue background */
.contain input:checked ~ .checkmark-chk.is-checked {
  background-color: #f31544;
}

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

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

/* Style the checkmark/indicator */
.contain .checkmark-chk.is-checked:after {
  left: 9px;
  top: 2px;
  width: 7px;
  height: 20px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dotted-inactive{
  height:5px;
  width:5px;
  display: inline-block;
  background: red;
  border-radius: 50%;
  padding:0.3rem;
}


.dotted-active{
  height:5px;
  width:5px;
  display: inline-block;
  background: blue;
  border-radius: 50%;
  padding:0.3rem;
}



/****************************************

****************************************/

#tableanalysis table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
   position: relative;
}

#tableanalysis-div{
  overflow-x: scroll;
  padding-bottom: 0.6rem;
  height: 200px
  
}

#tableanalysis td,
#tableanalysis th{
  border: px soliåd #dddddd;
  text-align: left;
  padding: 4px 5px !important;
  font-size:14px;
  width:1%;
   white-space: nowrap;
  font-size: 0.8rem
  
}



#tableanalysis th {
   background: #ddd;
  text-align: left;
  font-weight: normal;
  opacity:1;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  z-index: 5;
  text-transform: capitalize
}
#tableanalysis .payment_count{
   padding: 3px 0px 0 40px !important;
}

#tableanalysis th {
  text-align: left;
  font-weight: normal;

}
#tableanalysis .payment_count{
   padding: 3px 0px 0 40px !important;
}

#tableanalysis td, #tableanalysis th {
  border: 1px solid #dddddd;
}

#tableanalysis tr:nth-child(even) {
  background-color: #dddddd;
}

.records-card-commission, .records-card-sm{
  height:170px;
 
}

.records-card-table, .records-card-commission1{
    height:300px;
}

.tablename{
    font-weight: normal;
padding: 1rem;
    padding: 8px 6px !important;
}

.progress-container {
  background-color: rgb(192, 192, 192);
  width: 100%;
 border-radius: 15px;
height:5px;
overflow: hidden;
 
}
#tableanalysis-div-footer{
  display:flex;
  justify-content: end;
  position:relative;
  margin-top:-1rem
  
}
#tableanalysis-footer{
  position:absolute;
  top:0
}

.progress-count {
  background-color: #2c7be5;
  color: white;
  padding: 2.5%;
  text-align: right;
  font-size: 0px;
  border-radius: 15px;
}

.payment-count-span{
 display: block;
  width:100px
}

.date-title{
  display:flex;
  justify-content: space-between
}
.date-title .row{
  width:50%;
  justify-content: end
}
.is-bottom.vue-custom-tooltip > .name-text{
position:relative;
  top:-1rem;
  text-transform: capitalize;
  }

@media screen and (max-width: 1500px) {
  
  .is-bottom.vue-custom-tooltip > .name-text{
position:relative;
  top:0rem;
  text-transform: capitalize;
  }
}

@media screen and (max-width: 1200px) {
.records-card-commission, .records-card-sm{
 font-size:12px
 
 }
 .is-bottom.vue-custom-tooltip > .name-text{
  font-size:14px
}
.name-text{
  font-size:14px
}
}

@media screen and (max-width: 996px) {
  .date-title{
  display:block;
  justify-content: space-between
}
  .date-title .row{
  width:100%;
  justify-content: end
}
}

@media screen and (max-width: 1300px) {
  .date-title .row{
  width:70%;
  justify-content: end
}
}

/********************************
quick links
*********************************/

.quicklink-icon-wrapper{
  display: inline-block;
  background: #6e84a3;;
  padding:2px 5px;
  border-radius: 4px;
  color:#fff
}


/*****************************

****************************/

.media-merchant-name{
  display: none;
}
@media screen and (max-width: 992px){
.media-merchant-name{
  display: block;
}
}