/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.ribbon-wrapper-red {
  width: 85px;
  height: 80px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  left: -3px;
  z-index:9999;
}
.ribbon-wrapper-green {
    width: 55px;
    height: 55px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 298;
    border-radius: 5px;
}
.ribbon-wrapper-blue {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    left: -3px;
    z-index:9999;
  }

.ribbon-red {
    font: bold 12px Sans-Serif;
    color: #fff;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    left: -29px;
    top: 15px;
    width: 120px;
    background-color: #ea181e;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ea181e), to(#b90005));
    background-image: -webkit-linear-gradient(top, #ea181e, #b90005);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #fff;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green {
    font: bold 11px Sans-Serif;
    text-align: center;
    text-shadow: rgb(255 255 255 / 50%) 0px 1px 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 20px 0 5px;
    left: -39px;
    top: -10px;
    width: 100px;
    text-shadow: 1px 1px 3px #000;
    background: #3bb310;
    background: linear-gradient(0deg, #3bb310 0%, #a8ff1a 100%);
    color: #fff;
    box-shadow: 1px 1px 3px #00000090;
}

.ribbon-blue {
    font: bold 12px Sans-Serif;
    color: #fff;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    left: -29px;
    top: 15px;
    width: 120px;
    background-color: #0066c9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0066c9), to(#035bb1));
    background-image: -webkit-linear-gradient(top, #0066c9, #035bb1);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #fff;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-red:before,
.ribbon-red:after{
  content: "";
  border-top: 3px solid #b90005;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:after,
.ribbon-green:after{
  content: "";
  border-top: 3px solid #6e8900;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-blue:after,
.ribbon-blue:after{
  content: "";
  border-top: 3px solid #035bb1;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}


.ribbon-red:before{
  left: 0;
}
.ribbon-green:before{
  right: 0;
}
.ribbon-blue:before{
    left:0;
}

.ribbon-red:after{
  right: 0;
}
.ribbon-green:after{
  left: 0;
}
.ribbon-blue:after{
    right:0;
}


/** end ribbon **/

.button-promo {
    width:150px;
    bottom: 0px!important;
    left: 20px!important;
    position: absolute;
}

.button-promo img {
    width:20px!important;
    float:left;
    border-radius: 0!important;
    margin-right:10px;
}
/**
.promo-watch::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:inline-block;
  background: linear-gradient(to top, black, 50%, transparent);
  z-index: 0;
}

**/

.btn-file input[type=file] {
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    opacity: 0;
    background: none;
    cursor: inherit;
    display: block;
}
.ma-box
{
    padding: 30px;
    font-size: 14px;
    font-weight: 200;
    background: #1D293C 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 15px #000000B3;

}

.ma-box .tab-nav { padding: 0 0px!important; }

.ma-box.boxshadow {
    transition: box-shadow 0.4s ease-in-out;
    background-color: #1D293C!important;
    /* max-width: 460px; */
    padding: 0px 0px!important;
    border-radius: 15px;
}
/* .ma-box.boxshadow:hover {
    box-shadow: 0 0 10px rgba(35, 173, 255, 1);
} */

.ma-box.language {
    border: 1px solid #4E4E4E!important;
    transition: box-shadow 0.4s ease-in-out;
    background-color: #000!important;
    width: 400px!important;
    padding: 0px 0px!important;
}
.ma-box.language:hover {
    box-shadow: 0 0 10px rgba(35, 173, 255, 1);
}

.ma-box.system-popup {
    border: 1px solid #4E4E4E!important;
    transition: box-shadow 0.4s ease-in-out;
    background-color: #000!important;
    max-width: 360px;
    padding: 30px 20px!important;
}

.ma-box.system-popup:hover {
    box-shadow: 0 0 10px rgba(35, 173, 255, 1);
}



.ma-pay {
    margin: 0px 0px;
    display: inline-block;
    font-size: 14px;
}

.ma-box .form-msg {
    color: #0066C9;
    font-size: 12px;
    line-height: 13px;
    display: block;
    margin-top: 5px;
    margin-bottom: 0;
}

.ma-box .form-msg .alert {
    color:#BB0003;
    font-size:12px;
}

a.ma-pay img {
    border-radius: 10px;
    display: block;
    position: relative;
}

.ma-bank {
    margin: 0px 0px;
    display: inline-block;
    font-size: 14px;
    color: #fff;
}

a.ma-bank img {
    border-radius: 10px;
    display: block;
    position: relative;
}


a.ma-allin {
    margin: 8px 0px;
    border-radius: 11px;
    border: 1px solid #535353;
    display: block;
    position: relative;
    font-size: 12px;
    font-weight: bold;
}

a.ma-allin:hover {
    border: 1px solid inherit;

}
a.ma-allin div.allintxt {
    text-align: center;
    background-color: #5F5F5F;
    color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
a.ma-allin:hover div.allintxt {
    text-align: center;
    background-color: #007bff;
    color: #fff;
}

a.ma-allin span {
    text-align: center;
    display: block;
}

.ma-menu {
    font-size:14px;
    font-weight: 500;
    text-transform: uppercase;
}
.ma-menu li::before {
    content: none!important;
}
.ma-menu li {
    padding: 4px 4px;
}

.ma-menu a.ma-menulink {
    border: 1px solid #fff;
    display:inline-block;
    width:100%;
    font-size: 12px;
    font-weight: lighter;
    height: 75px;
    line-height: 75px;
    display: inline-flex;
}
.ma-menu .ma-menulink img {
    width: 50px;
    margin-right: 15px;
}

.ma-menu a.ma-menulink:hover {
    color: #0066c9!important;
}

.ma-menu a.ma-menulink.active {
     color: #0066c9!important;
     background-color: #0E131C;
     box-shadow: 4px 0px 0px #0066c9 inset;
}

.ma-menu a.ma-menulink p{
    margin-bottom: 0;
}

.sidebar-widgets-wrap .widget {
    padding-top:10px;
    padding-bottom:15px!important;
}

.btn-restore img { width:25px; }
.btn-refresh img { width:25px; }

/***** ***/
.ma-profile {
    line-height:18px;
}

.ma-badge {
    height: 36px;
    margin-right: 10px;
    padding-left: 12px;
    position: relative;
    float: left;
}

.ma-profile span{
    font-size:11px;
    display:block;
    position: relative;
}

.ma-profile .ma-menu .ma-menulink img {
    width: 50px;
    margin-right: 15px;
}

/***** ***/

.wallet-box {
    color: #fff;
}

.wallet-currency {
    color: #fff;
    font-size: 25px;
    display: inline-block;
}

.wallet-amount {
    width:70%;
    display: inline-block;
    text-align: right;
    float: right;
    line-height: 36px;
    color: #fff;
    font-size: 34px!important;
    font-weight: 600!important;
}
.wallet-top {
    line-height: 22px;
    padding: 14px 5px;
    color: #fff!important;
    font-weight: 400!important;
    font-size: 0.8125rem!important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif!important;
}

.wallet-top i {
    color: #0066c9;
    margin-right: 0px!important;
    font-size: 1.1em!important;
}

.btn-refresh, .btn-restore {
    width:48.5%;
    margin-right: 2px;
    margin-top: 10px;
}

.btn-refresh {
    float: right;
    margin-right: 0;
}

.table.ma-table {
    margin-top: 10px;
    border-collapse: separate;
    border-spacing: 0;
}

.table.ma-table th, .table.ma-table td {
    padding: 9px 8px!important;
    color: #CFCFCF;
    vertical-align: middle;
}

.table.ma-table td {
    padding: 12px 8px!important;
}

.table.ma-table thead {
    background: none;
}

.table.ma-table thead th{
    font-size: 14px;
    color: #cfcfcf;
    font-weight: lighter;
}

.table.ma-table th:first-child {
    border-radius: 5px 0 0 5px;
    border-left: 2px solid #0066C9;
}

.table.ma-table th{
    border-top: 2px solid #0066C9;
    border-bottom: 2px solid #0066C9;
}

.table.ma-table th:last-child {
    border-radius: 0 5px 5px 0;
    border-right: 2px solid #0066C9;
}


a.trash-msg i {
    color:#fff;
    background-color: #3B3B3B;
    padding: 2px 8px;
    border-radius: 4px 4px;
    float: right;
}
a.trash-msg:hover i {
    color:#fff!important;
    background-color: #820002;
}


.table.wallettable { margin-top: 10px; }
.table.wallettable th, .table.wallettable td {
    padding: 4px 4px!important;

}
.table.wallettable thead { background-color: #3A3A3A;
}

.button-orangish.button-small {
    padding: 2px 10px;
}

.read {
	background-color: #9bd177;
	border-radius: 3px;
	padding: 3px 8px;
	color: white;
	width: 120px;
	display: inline-block;
	text-align: center;
}

.read:hover {
	background-color: #b0f284;
}

.unread  {
	background-color: #d6140f;
	border-radius: 3px;
	padding: 3px 8px;
	color: white;
	width: 120px;
	display: inline-block;
	text-align: center;
}

.unread:hover  {
	background-color: #ff6662;
}

.unread-text {
    font-weight: bolder !important;
    color: #ffffff !important;
    cursor: pointer;
}

.approve, .reward-claimed, .reward-1 {
    background: transparent linear-gradient(90deg, #0081FF 0%, #2187EB 100%) 0% 0% no-repeat padding-box;
    width: 114px;
    height: 43px;
    font-size: 12px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    line-height: 43px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    border: none;
}

.approve:hover, .reward-claimed:hover, .reward-1:hover {
    background: transparent linear-gradient(90deg, #0081FF 0%, #2187EB 100%) 0% 0% no-repeat padding-box;
}

.reject {
  background-color: #d6140f;
	border-radius: 3px;
	padding: 3px 8px;
	color: white;
	width: 120px;
	display: inline-block;
	text-align: center;
}

.reject:hover {
	background-color: #a10c07;
}

.reward-expired, .reward-2 {
    background: #CFCFCF;
    width: 114px;
    height: 43px;
    font-size: 14px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    line-height: 43px;
    color: #000;
    font-family: "Poppins", sans-serif;
    border: none;
}
.reward-expired:hover, .reward-2:hover {
    background: #CFCFCF;
}

.other, .reward-pending, .reward-0 {
    background-color: #cac703;
	border-radius: 3px;
	padding: 3px 8px;
	color: white;
	width: 120px;
	display: inline-block;
	text-align: center;
}

.other:hover, .reward-pending:hover, .reward-0:hover {
	background-color: #aaa708;
}

.ma-box .btn-outline-secondary:not(:disabled):not(.disabled):active,
.ma-box .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .ma-box .btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #1088f3;
    border-color: #1088f3;
}

.ma-box .btn-outline-secondary:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: #6caae1;
    border-color: #6caae1;
}

.form-control[readonly]:-ms-input-placeholder { color: #cecece!important; }
.form-control[readonly]::-webkit-input-placeholder { color: #cecece!important; }

.form-control:disabled, .form-control[readonly] {
    background-color: #374A65!important;
    padding: 10px 20px 10px 15px;
    border-radius: 5px;
    color: #fff;
    font-size: .75rem;
    height: 43px;
    line-height: 2;
    border: none;
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 29%);
}


.bell-notification {
  padding: 17px 15px;
}

.important-notice {
    border: 2px solid #0066C9;
    border-radius: 5px;
    padding: 10px;
}

.important-notice h5{
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #0066C9;
}

.important-notice p, .important-notice ol{
    color: #CFCFCF;
    margin-bottom: 0;
    font-size: 0.8rem;
}
.important-notice ol {
  margin-left: 17px;
  list-style-position: outside;
}

.important-notice h5 .mat-icon{
    font-size: 1.4rem;
    width: auto;
    margin-right: 5px;
}

/***************** BANK STATUS ****************/
.bank-status-box {
    text-align: right;
    font-size: 12px;
    letter-spacing: 0px;
    color: #CFCFCF;
    opacity: 1;
    border: 2px solid #0066c9;
    border-radius: 5px;
    padding: 5px 8px;
    text-transform: capitalize;
    background: none;
}

.bank-status-box:hover {
    background: #0066c9;
}

.btn-bank-status {
    font-size: 0.8rem!important;
    padding: 2px 6px;
    margin-top: 4px;
}

.bank-status p{
    color: #fff;
    margin-bottom: 0;
    font-size: 0.7rem;
}

.bank-status-name{
    font-weight: 700;
    margin-bottom: 3px!important;
    color: #0066C9 !important;
}

.dropdown-bankstatus {
    width: 300px;
}

.dark .dropdown-bankstatus {
    background: #0E131C 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    border-color: #0E131C;
}

.promotion-modal h4{
    padding-bottom: 0;
    margin-bottom: 0;
    letter-spacing: normal;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 24px;
}

.promotion-modal p{
    letter-spacing: normal;
    margin-bottom: 10px;
}

.promotion-modal .ma-box {
    letter-spacing: normal;
}

.promotion-modal table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}

/* .promotion-modal table tr:first-child td {
    border: #0066c9 1px solid;
    background-color: black;
}*/

.promotion-modal .promotion-details table th{
    background: none;
    border: 2px solid #0066C9;
    font-weight: normal;
    font-size: 14px;
    line-height: 26px;
    height: 43px;
}

.promotion-modal .promotion-details table th:first-child {
    border-radius: 5px 0 0 5px;
    border-left: 2px solid #0066C9;
}

.promotion-modal .promotion-details table th:last-child {
    border-radius: 0 5px 5px 0;
    border-right: 2px solid #0066C9;
}

.promotion-modal .promotion-details table td{
    border: none;
    background-color: #374a65;
}

.promotion-modal .promotion-details p a{
    color: #007bff;
}

.promotion-modal .promotion-details p strong{
    color: #007bff;
}

.spinner-border-md {
	width: 1.4rem;
    height: 1.4rem;
    border-width: 0.2rem;
    margin-left: 5px;
    margin-bottom: 5px;
}

.disabled {
    filter: grayscale(1);
}

.maintain-time img{
    float: left;
    height: 70px;
}

.maintain-time p{
    float: left;
    padding-left: 1.0rem;
    margin-top: 15px;
    line-height: 1.3!important;
}

.maintenance-icon{
    height: 80px;
    margin-top: 22px;
}

.maintenance-modal{
    font-size: 14px !important;
    text-align: center;
    color: #fff;
    padding: 20px 30px !important;
}

.maintenance-modal button{
    border: 0;
    border-radius: .25em;
    color: #fff;
}

.portal-sidepanel {
    background: #1d293c 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 15px #000000b3;
    border-radius: 15px;
  }

  .portal-container .col-lg-9 {
    flex: 0 0 76%;
    max-width: 76%;
  }

  .portal-container .col-lg-3 {
    flex: 0 0 24%;
    max-width: 24%;
  }

  .portal-container .ma-box {
    border-radius: 15px;
  }

  .portal-container .portal-sidepanel,
  .col-lg-9 {
    height: 100%;
    min-height: 740px;
  }

.postcontent {
    height: auto;
  }

  .rmb-me-box {
    display: inline-flex;
    width: 100%;
    align-items: center;
  }

  .rmb-me-text {
      color: #c9c9c9 !important;
  }

  .add-button {
    width: 10vw !important;
  }

  .verify-button {
    position: absolute;
    top: 5px;
    right: 20px;
    box-shadow: none !important;
    text-align: center;
    width: 30%;
    height: 33px !important;
    align-items: center;
  }

  .verify-button:disabled {
    filter: grayscale(1);
  }

  .filter-button {
    height: 35px !important;
    margin-top: 5px;
    text-transform: capitalize !important;
    font-weight: lighter;
  }

  .bank-img {
    width: 130px;
    border-radius: 5px;
    margin: 5px 10px 5px 0;
  }

  .selected-bank {
    box-shadow: 0 0 5px #1c86ee;
    border: 1px solid #0066c9;
  }

  table.bank-option {
    margin-bottom: 10px !important;
  }

  .bank-option th {
    min-width: 130px;
  }

  @-webkit-keyframes refresh-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
  }

  @keyframes refresh-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
  }

  .refresh-spin{
    animation: refresh-spin .4s linear;
  }

  .px-7 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }

  .tooltip-class .tooltip-inner {
    font-size: 14px;
  }