.arenda-page {  }

.tab-btn {
  display: none;
	position: absolute;
}

.arenda-page h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.tab-btn + label {
  display: inline-block;
	margin: 0 0 -1px;
	padding: 8px 25px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	border: 0px solid #ddd;
	border-width: 1px 1px 1px 1px;
	background: #f1f1f1;
	border-radius: 3px 3px 0 0;
  cursor: pointer;
}

.tab-btn:checked + label {
  color: #555;
	border-top: 1px solid #39a7e7;
	border-bottom: 1px solid #fff;
	background: #fff;
}

.tab--single {
  display: none;
	padding: 15px;
	background: #fff;
	border: 1px solid #ddd;
}

.tab--single p {
  margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
}

#change-tab-1:checked ~ #tab-1,
#change-tab-2:checked ~ #tab-2,
#change-tab-3:checked ~ #tab-3,
#change-tab-4:checked ~ #tab-4,
#change-tab-5:checked ~ #tab-5 {
  display: block;
}

#change-tab-1 fieldset {
  border: 1px solid #ddd;
}


.services-check-list .service {
  margin-bottom: 10px;
  margin-right: 15px;
  display: inline-block;
  width: 100%;
}

.services-check-list .service label {
  padding-left: 20px;
  user-select: none;
}

.phone-table,
.sms-table,
.table {
  width: 100%;
  border: 1px solid #ddd;
}

.phone-table th,
.phone-table td,
.sms-table th,
.sms-table td,
.table th,
.table td {
  padding: 3px 5px;
  text-align: left;
  border: 1px solid #ddd;
}

.phone-table tr td:last-child button {
  display: inline-block;
  margin: 3px 3px 3px 0px;
}

.sub-box .close-sub-row {
  float: right;
  background: #ddd;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: none;
  outline: none;
  display: block !important;
  margin: 0 !important;
  color: #c7c7c7;
  cursor: pointer;
}

.sub-box td > div {
  clear: both;
}

input.ipt {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 3px 8px;
  outline: none;
  font-size: 16px;
  background: #f8f8f8;
  width: 100px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

input.ipt:hover,
input.ipt:focus {
  border-color: #39a7e7;
}
.bigdrop.select2-container .select2-results {max-height: 300px;}
.bigdrop .select2-results {max-height: 300px!important;}
.bigdrop .select2-results__options {min-height: 150px!important; max-height: 300px!important; overflow-y: auto;}



@media screen and (max-width:600px){
  .tab__my-naumbers{
    padding: 6px;
  }
  .tab__my-naumbers table{
    min-width: 100%;
  }
}

@media screen and (max-width:450px){
  .table-c-input td{
    width: max-content;
  }
  .input-title{
    width: 100%;
  }
  .input-title b{
    font-size: 12px;
  }
  .tabs .btn-primary{
    /* width: 15%; */
    width: 100%;
  }
  .apikey-users{
    width: 100%;
    /* width: 60%; */
  }
  .update-text{
    font-size: 12px;
    margin-left: -13px;
  }
  .table-rating{
    padding: 10px 0px;
  }
  .tble-container{
    width: 100%;
    max-width: 100%;
    height: max-content;
    overflow: auto;
  }
  .phone-table{
    min-width: 400px;
    height: 100%;
  }
  .phone-table th center{
    font-size: 12px;
  }
  .phone-table td center{
    font-size: 12px;
  }
}

@media screen and (max-width:380px){

  .tab__my-naumbers table th{
    font-size: 12px;
    padding: 1px 2px;
  }
  .tab__my-naumbers table td{
    font-size: 12px;
    padding: 1px 2px;
  }
}

@media screen and (max-width:320px){
  .tab__my-naumbers table .btn {
    padding: 2px 3px!important;
  }
  .tab__my-naumbers{
    width: 100%;
    overflow: auto;
  }
  .tab__my-naumbers table {
    width: 300px;
  }
}

.popup-opened {
  opacity: 1;
  z-index: 0;
  height: 90px;
  margin-top: -90px;
  padding: 10px 5px;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  opacity: 0;
  z-index: -1;
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0;
}





/*  */

.sms-block__sms{
  margin-top: 20px;
}
.sms-block__sms_head{
  display: flex;
  width: 100%;
  height: max-content;
  align-items: end;
  margin: 0px 0px 10px;
  justify-content: space-between;
}

.sms-block__sms_head h5{
  font-size: 16px;
  margin: 0px;

}

.sms-block__sms_head a{
  font-size: 14px;
  color: #4D00EE;
}

.sms-block__sms_body{
    max-height: 150px;
    overflow-x: hidden;
}

.sms-block__sms_body table{}
.sms-block__sms_body tbody{}
.sms-block__sms_body template{}


.sms-block__sms_body template tr{}
.sms-block__sms_body template td{}





.sms-block__other_sms{
  margin-top: 20px;
  padding-bottom: 5px;
}

.sms-block__other_sms__head{
  display: flex;
  width: 100%;
  height: max-content;
  align-items: end;
  margin: 0px 0px 10px;
  justify-content: space-between;
}

.sms-block__other_sms__head h5{
  font-size: 16px;
  margin: 0px;

}

.sms-block__other_sms__head span{
  width: max-content;
  height: max-content;
  position: relative;
  font-size: 14px;
  color: #4D00EE;
  padding-right: 20px;
  cursor: pointer;
}

.sms-block__other_sms__head span::before{
  content: '\25BC';
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  margin-top: 2px;
  font-size: 10px;
}

.openOtherSms .sms-block__other_sms__head span::before{
  content: '\25B2';
}

.openOtherSms .sms-block__other_sms__body{
    max-height: 150px;
    height: max-content;
    overflow: auto;
    width: 100%;
}

.sms-block__other_sms__body{
  height: 0px;
  overflow: hidden;
  width: 100%;
}



.sms-block__other_sms__body table{
  width: 100%;
  height: max-content;
}
.sms-block__other_sms__body tbody{}
.sms-block__other_sms__body template{}


.sms-block__other_sms__body tr{
  padding: 3px 5px;
  background-color: white;
}
.sms-block__other_sms__body td{
  position: relative;
}

.sms-block__other_sms__body td a{
  padding: 3px 12px;
  background: #39A7E7;
  border-radius: 2px;
  color: white;
  text-decoration: none;
  display: block;
  width: max-content;
  height: max-content;
  margin: 5px auto;
  cursor: pointer;
}

/* ------------------------------------------- */


.history_rent{
  width: 100%;
  height: max-content;
}

.history_rent__container{
  width: 100%;
  height: max-content;
  margin-top: 20px;
}

.history_rent__table_box{
  width: 100%;
  height: max-content;
  max-width: 100%;
  overflow: auto;
}

.history_rent__table_box table{
  width: 100%;
  min-width: 550px;
}

.history_rent__table_box td button{
  color: white!important;
}




.history_rent__table_box{
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: var(thin);
  scrollbar-color: var(#39a7e7) var(#aaaaaa3b);
}

.history_rent__table_box::-webkit-scrollbar-track {
  background-color: #aaaaaa3b;
  position: relative;
}

.history_rent__table_box::-webkit-scrollbar {height: 14px;}
.history_rent__table_box::-webkit-scrollbar-thumb {
  background: #39a7e7;
}
.history_rent__table_box:hover::-webkit-scrollbar-thumb {background: #27aaf7;}



.mobile_scroll_box{
  width: 100%;
  height: 10px;
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-top: -12px;
  position: relative;
}

.mobile_scroll_box div{
  width: 15px;
  height: 14px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: #39a7e7;
  padding-top: 2px;
  color: white;
}

.mobile_scroll_box__left{}
.mobile_scroll_box__right{}





.pagination_box{
  width: 100%;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}   

.history_rent__container small{
  display: block;
  width: max-content;
  height: max-content;
  margin-left: 5px;
}


.history_rent__pagination{
  width: max-content;
  max-width: 90%;
  display: flex;
}

.history_rent__pagination button{
  margin: 0px 5px;
}

.history_rent__pagination button:disabled{
  background-color: rgb(216, 216, 216);
  cursor: default;
}

.history_rent__pagination button:disabled:hover{
  background-color: rgb(216, 216, 216);
}



@media screen and (max-width: 600px){
  .mobile_scroll_box{
    display: flex;
  } 
}

@media screen and (max-width: 800px){
  .history_rent__table_box thead tr{
      font-size: 14px;
  }
  .history_rent__table_box table span{
      font-size: 12px;
  }
}

@media screen and (max-width: 400px){
  #tab-5{
    padding: 15px 5px;
  }
  .history_rent__table_box table{
    min-width: 380px;
  }
}





/* ------------------------------------------------ */

.actions {
  position: relative;
}
.polong_info_icon{
  position: absolute;
  right: 5px;
  top: 2px;
  width: 16px;
  height: 16px;
  line-height: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(57, 167, 231);
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

.rent_number_info{
 
}

.rent_number_info td{
  padding: 12px 8px;
  font-size: 16px;
  line-height: 20px;
  height: max-content;
  display: none;
}   

@media screen and ( max-width: 548px ){
  .polong_info_icon{
      top: 25px;
      right: 3px;
  }

  .rent_number_info td{
      padding: 16px 14px;
      font-size: 16px;
  }
}

@media screen and ( max-width:380px ){

  .tab__my-naumbers .rent_number_info td{
      padding: 8px 6px;
      font-size: 14px;
  }
}


/* display: table-cell; */


/* Multi rent */

.change-total .row {
  align-items: flex-start;
}

.change-total .mbm10 p .selects-service-row{
  margin-bottom: 6px;
}

.change-total .mbm10 p .selects-service-row:last-child {
  margin-bottom: 0px;
}

.available_numbers {
  margin-top: 6px;
  font-size: 12px;
  line-height: 14px;
}

.available_numbers b {
  margin-left: 4px;
}

.total_cost {
  margin-top: 4px;
  font-size: 14px;
}

.total_cost b {
  margin-left: 6px;
}

@media (max-width: 1200px) and (min-width: 550px){
  
  .available_numbers {
      font-size: 12px;
      line-height: 12px;
  }

  .available_numbers b {
      margin-left: 2px;
  }

  .total_cost {
      margin-top: 6px;
      font-size: 14px;
  }

  .total_cost b {
      margin-left: 4px;
  }

}






/* ------- CHANGE-------- */

.rent_bg {
  width: 100%;
  height: 100%;
  background-color: #00000000;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  z-index: 4;
  animation: bgBankClose 1s 1;
}

.rent_bg_show {
  background-color: #0000005d;
  display: block;
  animation: bgBankShow 1s 1;
}

@keyframes bgBankClose {
  0% { 
    background-color: #0000005d;
    display: block;
  } 
  100% {
    background-color: #00000000;
    display: none;
  }
}

@keyframes bgBankShow {
  0% { 
    background-color: #00000000;
  } 
  100% {
    background-color: #0000005d;
  }
}

.rent_search_number {
  width: max-content;
  margin: 12px auto;
  display: flex;
  align-items: center;
}
.rent_search_number h4{
  font-size: 16px;
  line-height: 16px;
  margin-right: 6px;
}
.rent_search_number form{
  display: flex;
  height: max-content;
  width: max-content;
}
.rent_search_number form input{
  width: 120px;
  height: 30px;
  font-size: 14px;
  text-align: center;
  border-radius: 5px 0px 0px 5px;
  outline: none;
}

.rent_search_number form button{
  border-radius: 0px 10px 10px 0px;
  margin: 0px!important;
}

.rent_my_number_find {
  position: relative;
  z-index: 5;
  background-color: white;
  outline: 2px solid #39a7e7;
}





.rent_search_number_history form button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64.36px;
  height: 30.09px;
}

.rent_search_number form button{
  border-radius: 0px 10px 10px 0px;
  font-size: 14px!important;
  margin: 0px!important;
  padding: 7px 10px!important;
}
.rent_search_number form button:disabled {
  background-color: var(#24658b);
}

.rent_search_number_history form button img {
  width: 16px;
}





.rent_select_operator {
  margin-right: auto;
  margin: 68px 5px 0px;
}

.rent_select_operator div {
  text-align: left;
}
