/* Start Preloader */
 #loader-body {
   /* background: linear-gradient(180deg,#2C3A47,#3c6382);
   width: 100%;
   height:100vh; */
 }
 #loader-body .circle {
   position: absolute;
   top: calc(50% - 53px);
   left: calc(50% - 53px);
   transform: translate(-50%, -50%);
   width: 150px;
   height: 150px;
   border: 3px solid transparent;
   border-bottom: 3px solid #e00700;
   border-top: 3px solid #e00700;
   border-radius: 50%;
   animation: animate 6s linear infinite;
 }

 #loader-body .circle:before {
   content: "";
   position: absolute;
   top: 10px;
   right: 10px;
   bottom: 10px;
   left: 10px;
   border: 3px solid transparent;
   border-bottom: 3px solid #e00700;
   border-top: 3px solid #e00700;
   border-radius: 50%;
   animation: animate 3s linear infinite;
 }

 #loader-body .circle:after {
   content: "";
   position: absolute;
   top: 24px;
   right: 24px;
   bottom: 24px;
   left: 24px;
   border: 3px solid transparent;
   border-bottom: 3px solid #e00700;
   border-top: 3px solid #e00700;
   border-radius: 50%;
   animation: animate 4s linear infinite;
 }
 @keyframes animate
  {
    0%
    {
      transform: rotate(0deg);
    }

    25%
    {
      transform: rotate(90deg);
    }

    50%
    {
      transform: rotate(-180deg);
    }

    75%
    {
      transform: rotate(45deg);
    }

    100%
    {
      transform: rotate(360deg);
    }
  }
/* End Preloader */

/* Start login_page */
.tooltip-arrow,
.blue-tooltip + .tooltip > .tooltip-inner {background-color: #e00700;}
.blue-tooltip + .tooltip.top > .tooltip-arrow {background-color: #FFF;}
.login-error-msg {
  color: #f27474;
  font-size: 15px;
}

.login-success-msg {
  color: #a5dd86;
  font-size: 15px;
}
.login-info-msg {
  color: #3fc3ee;
  font-size: 15px;
}
.login-warning-msg {
  color: #fabba8;
  font-size: 15px;
}

.nav-rtl {
    padding-left:40px;
    padding-right:5px;
 }

.nav-rtl li {
 float:right;
 }

.tab-content {
  margin-top: 20px;
}

.box {
		height: auto;
    padding: 27px;
    background-color: rgba(0,0,0,.05);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.3);
    border-radius: 5px;
}
.box-center {right: 25% !important;}
.box .inputBox {
    position: relative;
}

.box .inputBox input {
    width: 100%;
    padding: 10px 2px;
    font-size: 16px;
    color: #2C3A47;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #e00700;
    outline: none;
    background: transparent;
    text-align: left;
}

.box .inputBox label {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #2C3A47;
    pointer-events: none;
    transition: .5s;
}

.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label {
    top: -20px;
    right: 0;
    color: #e00700;
    font-size: 12px;
}

.box input[type="submit"] {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
		font-weight: bold;
    background: #e00700;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

/* End login_page */

/* start signup form */

.custom_color {
  background-color: #e00700 !important;
  color: #FFF;
}
.active_tab1
{
background-color:#e00700;
color:#FFF;
font-weight: 600;
cursor: pointer;
}
.inactive_tab1
{
background-color: #FFF;
color: #333;
cursor: not-allowed;
}
.has-error
{
/* border-color:#cc0000; */
background-color:#ed4c6745;
}
.has-success {
  /* border-color: #e00700; */
  background-color: #97d05859;
}
.signup-form  .custom-label {
  position: relative;
  left: 50px;
  display: block;
  float: right;
  margin-right: 10px;
}
.signup-form .email, .phone {
  left: 10px !important;
}
.signup-form input {
  padding-right: 45px;
}

.signup-form .custom-icon {
  position: relative;
  float: right;
  top: -45px;
  height: 45px;
  width: 40px;
  line-height: 2.4em;
  z-index: 9999;
}
.signup-form .addon-diff-color {
  background-color: #e00700;
  color: #FFF;
  border: 1px solid #e00700;
}

#contact_details .imgcaptcha {
  position: relative  !important;
  float: left         !important;
  margin-bottom: 35px !important;
  margin-right: 80px  !important;
  border-radius: 15px !important;
}
#contact_details .reloadCaptcha {
  top: 30px;
  right: 10px;
  font-size: 21px;
  color: #e00700;
  cursor: pointer;
}
/* End signup form */

/* start forget user */
.foruser-form  .custom-label {
  position: relative;
  left: 50px;
  display: block;
  float: right;
  margin-right: 10px;
}

.foruser-form input {
  padding-right: 45px;
}

.foruser-form .custom-icon {
  position: relative;
  float: right;
  top: -45px;
  height: 45px;
  width: 40px;
  line-height: 2.4em;
  z-index: 9999;
}
.foruser-form .addon-diff-color {
  background-color: #e00700;
  color: #FFF;
  border: 1px solid #e00700;
}
.foruser-form .imgcaptcha {
  border-radius: 15px !important;
  margin-top: 10px    !important;
  margin-right: 8px   !important;
}

/* end forget user */

/* start forget pass */
.forpass-form  .custom-label {
  position: relative;
  left: 50px;
  display: block;
  float: right;
  margin-right: 10px;
}

.forpass-form input {
  padding-right: 45px;
}

.forpass-form .custom-icon {
  position: relative;
  float: right;
  top: -45px;
  height: 45px;
  width: 40px;
  line-height: 2.4em;
  z-index: 9999;
}
.forpass-form .addon-diff-color {
  background-color: #e00700;
  color: #FFF;
  border: 1px solid #e00700;
}
.forpass-form .imgcaptcha {
  border-radius: 15px !important;
  margin-top: 10px    !important;
  margin-right: 8px   !important;
}

/* end forget pass */

/* Start Main Page */

/* Accordion Menu */
#customer-main-body {
list-style: none;
min-height:400px;
}

#customer-main-body .middle {
  text-decoration: none;
}
#customer-main-body .middle .menu {
  width: 220px;
  border-radius: 8px;
  overflow: hidden;
}
#customer-main-body .middle .menu .item {
  border-top: 1px solid #0984e3;
  overflow: hidden;
}
#customer-main-body .middle .menu .item .menu-btn {
  position: relative;
  display: block;
  padding: 16px 20px;
  background: #e00700;
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
}
#customer-main-body .middle .menu .item .menu-btn:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #e00700;
  right: 20px;
  bottom: -7px;
  transform: rotate(45deg);
}
#customer-main-body .middle .menu .item .menu-btn .fa {
  margin-right: 10px;
}
#customer-main-body .middle .menu .item .small-menu {
  background: #333;
  overflow: hidden;
  transition: max-height: 2s;
  max-height: 0;
}
#customer-main-body .middle .menu .item .small-menu span {
  display: block;
  padding: 16px 20px;
  color: #FFF;
  font-size: 12px;
  text-decoration: none;
  position: relative;
  margin: 4px 0;
  cursor: pointer;
}
#customer-main-body .middle .menu .item .small-menu span:hover {
  color: #e00700;
}
#customer-main-body .middle .menu .item .small-menu span:active {
  background: #34495e;
  font-size: 13px;
}
#customer-main-body .middle .menu .item .small-menu span:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 100%;
  background: #e00700;
  right: 0;
  top: 0;
  transition: 0.3s;
  opacity: 0;
}
#customer-main-body .middle .menu .item .small-menu span:hover:after {
  opacity: 1;
}


/* Main Panel */
.typed-cursor.typed-cursor--blink {opacity: 0 !important;}
.easypiechart {
	position: relative;
	text-align: center;
	width: 120px;
	height: 120px;
	margin: 20px auto 10px auto;
}

.easypiechart .percent {
	display: block;
	position: absolute;
	font-size: 26px;
	top: 38px;
	width: 120px;
}

#easypiechart-blue .percent { color: #30a5ff;}
#easypiechart-teal .percent { color: #1ebfae;}
#easypiechart-orange .percent { color: #ffa502;}
#easypiechart-orange1 .percent { color: #ffa801;}
#easypiechart-orange2 .percent { color: #fa8231;}
#easypiechart-yellow .percent { color: #ffd32a;}
#easypiechart-yellow1 .percent { color: #eada23;}
#easypiechart-yellow2 .percent { color: #fed330;}
#easypiechart-yellow3 .percent { color: #f7b731;}
#easypiechart-red .percent { color: #ef4040;}
#easypiechart-red1 .percent { color: #eb2f06;}
#easypiechart-red2 .percent { color: #d63031;}
#easypiechart-green .percent { color: #19e707;}
#easypiechart-lightgreen .percent { color: #2ed573;}
#easypiechart-purple .percent { color: #f368e0;}
#easypiechart-green1 .percent { color: #b8e994;}
#easypiechart-green2 .percent { color: #78e08f;}
#easypiechart-full .percent { color: #19e707;}
#easypiechart-quorter .percent { color: #2ed573;}
#easypiechart-half .percent { color: #ffd32a;}
#easypiechart-3quorter .percent { color: #ffa502;}
#easypiechart-empty .percent { color: #f9243f;}

#customer-main-body .fixed {height: auto;}
#customer-main-body .alternate .card-panel {
  padding: 25px 5px;
  border-radius: 5px;
  box-shadow: 0 7px 5px rgba(0,0,0,.3);
  /* background: linear-gradient(180deg,#e00700,#333); */
}
#customer-main-body .alternate h4 {
  text-shadow: 1px 1px 1px;
}
#customer-main-body .alternate .fa {
  font-size: 20px;
  color: #8395a7;
}
#customer-main-body .alternate .days {
  position: relative;
  top: -25px;
  color: #8395a7;
}
#customer-main-body .alternate .percent {
  font-size: 40px;
  line-height: 1em;
}

#dataTables-Usage_length, #dataTables-Speed_length, #dataTables-Extra_length {
   font-size: 10px !important;
 }
#dataTables-Usage_paginate, #dataTables-Speed_paginate, #dataTables-Extra_paginate {
   display: inherit !important;
   margin: -60px 0 !important;
   float: left;
 }
 #dataTables-Speed thead, #dataTables-Extra thead {
  background: #e00700;
  color: #FFF;
 }
 #customer-main-body .PreviousIssue .nav-tabs {
   border-bottom: 0px !important;
 }
 .extra {
   border: 1px solid #CCC !important;
 }

/* End Main Page */
.btn-login {background-color: #e00700;border-color: #e00700;color: #FFF;}
.panel-myAccount{border-color: #C4C7C8;}
.panel-myAccount-info{border-color: #eef4f7; border-radius: 10px;}
.myAccount-list{font-size: 16px;font-weight: bold;}
.data-span{padding-right: 5px;font-weight: normal;}
.myAccount-body{background-color: #F3F3F3;}
.myAccount-heading{margin-bottom: 25px;}
/* .data-section-container{background-color: #eaeaea;border: 1px solid #eaeaea;border-radius: 10px;} */
.td-label{padding: 7px;}
.myAccount-inputText{padding: 7px;border: 1px solid #e1e1e1;background-color: #efefef;color: #6c7171;width: 75%;border-radius: 3px;}
.form-input{padding: 7px;border: 1px solid #e00700;background-color: #FFF;color: #888;border-radius: 5px;text-align: left;}
.text-dark{padding-top: 5px;padding-bottom: 5px;}
.pass-btn{width: 32%;}
.online-dot{width: 12px;height: 12px;border-radius: 50%;background-color: #07ea07;display:block;position: relative;top: 25px;right: 5px;}
.offline-dot{width: 12px;height: 12px;border-radius: 50%;background-color: #FF0000;display:block;position: relative;top: 25px;right: 5px;}
.usage-history{text-align: right;}
.myAccount-form{float: right;}
.myAccount-form-input{width: 50%;}
.selectSpeed{background-color: #FFF;border: 1px solid #CCC;border-radius: 4px;color: #555;height: 45px;padding: 7px 8px;width: 50%;outline: none;margin: 0;}
/* new css */
.asterisx{color: red;}
.payment-logo a img {margin-top: 15px;}
.extra-quota-card{ background-image: linear-gradient(to right top, #777bd7, #6b84de, #5d8de4, #4e95e9, #3e9ded, #3a9fee, #36a0ee, #31a2ef, #3a9eee, #439aec, #4b96ea, #5392e8);
  color: #FFF;border-top-left-radius: 45px;padding: 10px 0 0 0;margin-bottom: 25px;box-shadow: 0 1px 1px 0 rgba(0,0,0,.05),0 1px 3px 0 rgba(0,0,0,.25);transition: box-shadow 0.3s;}
.extra-quota-card:hover{box-shadow: 0 2px 3px rgba(0,0,0,.1),0 5px 10px rgba(0,0,0,.25);z-index: 1;}
.extra-quota-card a:hover{text-decoration: none;}
.quota-card-price{font-size: 48px;line-height: 52px;}
.quota-card-price small {font-size: 17px;}
.select-quota{height: 40px;background-color: #515151;padding: 10px;color: #FFF;}
.select-quota:hover{background-color: #333;}
/* End new css */
/* start of media query */
@media (max-width:991px) {
  .box {padding: 4px;font-size: 9px;}
  .box-center {right: 0 !important;}
  .mobile-panel-body{padding-left: 2px;padding-right: 2px;}
  .signup-mobile-container{padding-right: 1px;padding-left: 1px;}
  .mobile-main-container-signup{padding-left: 1px;padding-right: 1px;}
  .mobile-signup-form-control{font-size: 10px;}
  .foruser-form .imgcaptcha {margin-left: 30px!important;margin-top: -20px!important;}
  .btn-lg {font-size: 12px;margin-left: 0;}
  .btn-info {margin-top: 0;}
  .fa-calendar-check-o {font-size: 20px;}
  .myAccount-body{background-color: #E2E2E2;}
  .mobile-data-usage{padding-left: 2px;padding-right: 2px;}
  .myAccount-list{padding-right: 1px;padding-left: 1px;}
  .td-label{padding: 0;font-size: 10px;}
  .custom-now {font-size: 10px;}
  .myAccount-inputText{width: 100%;}
  .form-input{width: 100%;}
  .pass-btn{width: 100%;}
  #dataTables-Usage_paginate, #dataTables-Speed_paginate, #dataTables-Extra_paginate{width: 210px;margin: -55px 0;font-size: 10px;}
  .mobile-panel-body-myAccount{padding: 2px;}
  .myAccount-form-input{width: 95%;margin-right: 10px;}
  .selectSpeed{width: 95%;margin-right: 10px !important;font-size: 11px}
  .notes {font-size: 10px;}
  .table {font-size: 10px;}
  .control-label {font-size: 10px;}
  .ways {font-size: 11px;}
  #customer-main-body .fixed {height: auto;}
  #customer-main-body .alternate .usage-percent {font-size: 16px;}
  #contact_details .imgcaptcha {margin-right: 12px !important;}
  .online-text {font-size: 14px;}
}
.square-buttons-colored {
    display: flex;
    justify-content: center;
    gap: 40px; /* ← هنا */
    margin-top: 5px;
    flex-wrap: wrap;
}

.square-buttons-colored button {
    width: 90px;
    height: 90px;
    border: none;
    border-radius: 10px;
    font-family: 'Droid Arabic Kufi', sans-serif; /* ← هنا */
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.square-buttons-colored button span {
    font-size: 12px;
    margin-top: 11px;
}

/* ألوان مميزة لكل زر */
.btn-line {
    background-color: #0097b2;
}
.btn-line:hover {
    background-color: #0097b2;
}

.btn-edit {
    background-color: #00827f;
}
.btn-edit:hover {
    background-color: #00827f;
}

.btn-print {
    background-color: #ed352f;
    color: #000;
}
.btn-print:hover {
    background-color: #ed352f;
}