/*--------------------------------------- Popup ---------------------------------------*/

#openPopup {
 text-decoration: none;
 cursor: pointer;
}

.popup-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
 z-index: 9999;
}

.popup-box {
 background: #fff;
 width: 80%;
 padding: 20px;
 margin: 60px auto 0;
 border-radius: 10px;
 position: relative;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
 max-height: 600px;
 overflow: hidden;
}

.popup-box h2 {
 font-size: 18px;
 text-align: center;
 margin: 20px 0;
}

.close-popup {
 position: absolute;
 top: 10px;
 right: 15px;
 cursor: pointer;
 font-size: 24px;
 font-weight: bold;
}

/*--------------------------------------- Selectize ---------------------------------------*/

.recognitions .form-group label {
 font-weight: 700;
 font-size: 16px !important;
 line-height: 20px;
 text-align: center;
 color: #000;
 margin: 24px 0 10px;
 width: 100%;
}

.recognitions .selectize-control {
 position: relative;
 width: 20%;
 background: #f7f7f7;
 border-radius: 10px;
 padding: 10px 20px;
 margin: 0 auto 50px;
 cursor: pointer;
}

.recognitions .selectize-control.single .selectize-input:after {
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid #000;
 content: "";
 top: 40%;
 right: 15px;
 position: absolute;
}

.recognitions .selectize-input {
 border: none;
 font-weight: 600;
 font-size: 16px;
 line-height: 22px;
 color: #000;
}

.recognitions .selectize-dropdown .optgroup-header,
.recognitions .selectize-dropdown [data-selectable]:hover {
 background: #337ab7;
 color: #fff;
}

.selectize-dropdown-content {
 max-height: 180px;
 overflow-y: auto;
 background: #fff;
 border: 1px solid #d0d0d0;
}

.selectize-dropdown {
 position: absolute;
 z-index: 10;
 margin-top: -1px;
 color: #000;
 box-shadow: none !important;
}

.selectize-dropdown [data-selectable] {
 padding: 9px 8px;
 cursor: pointer;
 font-size: 16px;
 overflow: hidden;
}

/* Mobile selectize */
@media only screen and (max-width: 767px) {
 .recognitions .selectize-control {
  margin: 0 15% 20px;
  width: 70%;
 }
}

/*--------------------------------------- Table Common - 3 Column ---------------------------------------*/

.table-common-three-coloum h5 {
 font-weight: 700;
 font-size: 24px;
 color: #000;
}

.table-common-three-coloum .recharge_online {
 max-height: 330px;
 overflow-y: auto;
 overflow-x: hidden;
}
.table-common-three-coloum .recharge_online table {
 margin: 0 0 30px 0;
}

.table-common-three-coloum .recharge_online thead th {
 padding-bottom: 16px;
 font-weight: 700;
 font-size: 16px;
 color: #000;
}

.table-common-three-coloum .recharge_online table tbody td p {
 font-weight: 400;
 font-size: 16px;
 line-height: 22px;
 color: #000;
 margin: 15px 0;
}

.table-common-three-coloum .recharge_online table tbody td p a {
 color: #000;
}

.table-common-three-coloum .recharge_online table tbody td p a:hover {
 color: #cc000a;
}

.table-common-three-coloum .recharge_online tbody td:nth-child(2) {
 border-left: none;
 padding-left: 0;
 width: 18%;
}

.table-common-three-coloum .recharge_online tbody td:last-child {
 padding-left: 0;
 width: 10%;
}

.table-common-three-coloum .recharge_online tbody td span {
 display: none;
}

/* Popup inside table */
.table-common-three-coloum .popup {
 width: 500px;
 background: #fff;
 position: absolute;
 top: 20%;
 left: 30%;
 border: 1px solid #ccc;
 border-radius: 20px;
 padding: 30px;
 box-shadow: 0 0 10px 5px rgba(214, 207, 214, 1);
}

.table-common-three-coloum .popup p {
 font-weight: 400;
 font-size: 16px;
 line-height: 24px;
 color: #192a3e !important;
}

.table-common-three-coloum .popup a {
 background: #e40000;
 border-radius: 5px;
 padding: 5px 10px;
 font-size: 16px;
 color: #fff !important;
}

.table-common-three-coloum .popup-close {
 background: none !important;
 text-align: right !important;
 width: 100%;
 margin: -10px 0 10px;
}

/*--------------------------------------- Mobile Rules ---------------------------------------*/

/* Show labels */
@media only screen and (max-width: 767px) {
 .table-common-three-coloum .recharge_online tbody td span {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #000;
  margin-bottom: 5px;
 }
}

/* Correct mobile width rules */
@media only screen and (max-width: 767px) {
 .table-common-three-coloum .recharge_online{max-height: 260px;}
 .popup-box{max-height: 550px;}
.table-common-three-coloum .recharge_online table tbody td p{font-size:13px; margin:0 0 10px 0;}
 /* First TD = 100% width */
 .table-common-three-coloum .recharge_online tbody tr.data-rows td:nth-child(1) {
  width: 100% !important;
  display: block;
  padding: 15px 0 0 0;
 }

 /* Second TD = 50% width */
 .table-common-three-coloum .recharge_online tbody tr.data-rows td:nth-child(2) {
  width: 50% !important;
  display: inline-block;
  vertical-align: top;
  padding: 0 0 5px 0;
 }

 /* Third TD = 50% width */
 .table-common-three-coloum .recharge_online tbody tr.data-rows td:nth-child(3) {
  width: 50% !important;
  display: inline-block;
  vertical-align: top;
  padding: 0 0 5px 0;
  text-align: right;
 }

  .table-common-three-coloum .recharge_online tbody tr.data-rows td:nth-child(3) img {width:70%;}
 .table-common-three-coloum .popup {
  width: 90%;
  left: 5%;
 }

 .table-common-three-coloum h5 {
  font-size: 20px;
 }
}

/*--------------------------------------- Misc ---------------------------------------*/

.border-bottom {
 border-bottom: 1px solid #d4d4d4 !important;
}