:root {
  --white: #ffffff;
  --grayLight10: #ddd; /* border tables */
  --grayLight20: #efefef;
  --grayLight25: #e4e4e4;
  --grayLight30: #f9f9f9;
  --grayLight40: #eaeaea; /* border (in) table */
  --grayLight50: #d2d2d1;
  --graylight60: #d0cece;
  --grayBlack: #4e4c4c;
  --grayBlack40: #656565;
  --grayBlack45: #6d6d6d;
  --grayBlack50: #989898;
  --green10: #86ce7e;
  --green20: #21b859;
  --green25: #61bf84;
  --green30: #3d9040;
  --red10: #f9706b;
  --red: #e85151;
  --red30: #da231b;
  --pink: #e64176;
  --pink10: #b93560;
  --orangeLight: #ef9f7a;
  --orange: #fd532e;
  --orange5: #ff679a;
  --orange10: #f78c75;
  --orange20: #f97233;
  --yellow: #fd9a2e;
  --blue: #67adc8;
  --darkBlue: #3792b5;
  --darkBlue10: #115797;
  --purpule: #602075;
  --purpule10: #8045b5;
}

body {
  font-family: "samantelFont" !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "samantelFont" !important;
}

a:active {
  outline: none;
  border: none;
}
button:focus {
  outline: 0;
}

hr {
  /* border:none !important; */
  border-top: 1px solid var(--grayLight10);
  border-bottom: 1px solid var(--grayLight10);
  border-left: none !important;
  border-right: none !important;
}

input[type="number"]:focus {
  border: 1px solid rgb(199, 127, 163);
  box-shadow: 0 0 3px rgb(199, 127, 163);
}
input[type="text"]:focus {
  border: 1px solid rgb(199, 127, 163);
  box-shadow: 0 0 3px rgb(199, 127, 163);
}
input[type="tel"]:focus {
  border: 1px solid rgb(199, 127, 163);
  box-shadow: 0 0 3px rgb(199, 127, 163);
}

/***********************step progressbar****************************/

.stepwizard-step p {
  margin-top: 10px;
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}

.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: var(--graylight60);
  right: 0;
  z-order: 0;
}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
  width: calc(100% / 5);
  float: right;
}

.btn-circle {
  width: 60px;
  height: 60px;
  text-align: center;
  padding: 13px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 50%;
  margin-top: -15px;
  background-color: #eeeeee;
}

default:active:focus,
.btn-default:active:hover,
.btn-default.focus,
.btn-default:focus {
  background-color: var(--orange);
  color: var(--white);
}

.m-btn-disabled,
.m-btn-disabled:hover {
  font-size: 1.2em;
  color: var(--grayLight10);
  pointer-events: none;
  padding: 0;
}

/*-------------------------------------------------------------------------------*/

.m-btn-passed,
.m-btn-passed:hover {
  background-color: var(--green20) !important;
  padding: 0;
}
.m-btn-passed:after {
  content: "\002714";
  color: #ffffff !important;
  font-size: 2em;
}

.m-btn-passed .fa-user-o {
  display: none;
}

.m-btn-passed .fa-check-square-o {
  display: none;
}

.m-btn-passed .fa-upload {
  display: none;
}

.m-btn-passed .fa-car {
  display: none;
}

.m-btn-passed .fa-car {
  display: none;
}

.m-btn-passed .fa-hourglass-end {
  display: none;
}

.m-btn-active,
.m-btn-active:hover {
  color: var(--white);
  animation-name: stretch;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
  padding: 0;
}

@keyframes stretch {
  0% {
    background: #ff679a;
  }
  30% {
    background: #f180a5;
  }
  50% {
    background: #f59fbb;
  }
  80% {
    background: #f7c2d3;
  }
  100% {
    background: var(--grayLight10);
  }
}

/***********************step progressbar****************************/
.m-rtl-label {
  direction: rtl;
  text-align: right;
  display: block;
}

.max-width-container {
  max-width: 800px;
  padding-top: 50px;
  padding-bottom: 100px;
}

.m-rtl-form {
  text-align: right;
}

.showListNumberMpdal {
  float: left;
  margin-top: -25px;
  font-size: 21px;
  cursor: pointer;
  transition: all 0.2s;
}

.showListNumberMpdal:hover {
  color: #707070;
  transition: all 0.2s;
}

.ListNumberMpdalPanel {
  text-align: right;
}

.ListNumberMpdalPanel .modal-header button {
  float: left;
}

#iranianForm .form-group label,
#notIranianForm .form-group label,
#organizationForm .form-group label {
  direction: rtl;
  font-weight: bold;
  display: block;
  width: 100%;
  text-align: right;
  position: relative;
  padding: 0 12px;
}

.selectNumber {
  color: #ff679a;
  font-weight: bold;
}

.selectNumber:hover {
  opacity: 0.6;
  color: #ff679a;
}

#iranianForm button,
#notIranianForm button,
#organizationForm button,
.btn-samantel {
  background-color: #ff679a;
  border-color: #ff679a;
  transition: all 0.4s;
  margin-bottom: 20px;
  padding: 7px;
}

#iranianForm button,
#notIranianForm button,
#organizationForm button {
  float: left;
}

#ir-back-step-1 {
  float: right;
}

#ir-go-step-3 {
  float: left;
}

#iranianForm > form,
#notIranianForm > form,
#organizationForm > form {
  max-width: 100%;
}

#notIranianForm > form,
#organizationForm > form {
  border: none !important;
}

#iranianForm button:hover,
#notIranianForm button:hover,
#organizationForm button:hover,
.btn-samantel:hover,
.btn-samantel:focus {
  background-color: rgb(248, 114, 87);
  border-color: rgb(248, 114, 87);
  transition: all 0.4s;
}

.m-preview-header {
  text-align: center;
  background: #eeeeee;
  color: #767676;
  font-weight: bold;
  line-height: 35px;
  border-bottom: 1px solid var(--grayLight10);
}

.m-preview-panel {
  border: 1px solid var(--grayLight10);
  border-radius: 3px;
  padding: 0;
  max-width: 100%;
}

.m-preview-content {
  padding: 20px 15px;
  text-align: center;
}

.numberStatePanel {
  float: left;
  font-size: 12px;
  direction: rtl;
  width: 100%;
  text-align: center;
  color: #ff2d00;
  margin-top: -8px;
}

.numberSelectPanel {
  margin-right: -28px;
  float: right;
  font-weight: bold;
  display: none;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

#userNumberSelected {
  line-height: 34px;
  font-size: 12px;
  min-width: 175px;
  padding-left: 15px;
  border: none !important;
  box-shadow: none !important;
  background: #e2e2e2;
  border-radius: 30px;
  margin-bottom: 4px;
}

.m-preview-content table {
  width: 100%;
  text-align: right;
  direction: rtl;
  border: none;
}

.m-preview-content table td {
  width: 33.3%;
  float: right;
  height: 50px;
  border: none;
}

.m-goNext-step-BTN {
  color: white !important;
  font-size: 12px;
}

.m-goNext-step-BTN:hover {
  box-shadow: 0 0 7px 0 rgb(248, 114, 87);
  border-color: rgb(248, 114, 87) !important;
}

.m-goPre-step-BTN {
  color: white !important;
  font-size: 1em;
}

.m-goPre-step-BTN:hover {
  box-shadow: 0 0 7px 0 rgb(248, 114, 87);
  border-color: rgb(248, 114, 87) !important;
}

#changeModel {
  margin-left: 15px;
}

.selectNumberHeader {
  width: 100%;
  height: 100px;
  background: var(--orange5);
  background-image: url(../img/light.png);
  background-size: contain;
  background-position-x: 36%;
  background-repeat: no-repeat;
}
.selectNumberHeaderTitle {
  color: var(--white);
  font-size: 1.5em;
  padding: 33px 16% 33px 0;
}

.selectNumberHeader > div {
  margin: 0px auto;
  width: 100%;
  max-width: 1200px;
}

.selectNumberHeader a {
  float: left;
  border: 2px solid #f7f7f7;
  color: #f7f7f7;
  padding: 8px 27px;
  border-radius: 30px;
  margin-top: 30px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-left: 7%;
  text-decoration: none !important;
  font-size: 16px;
}

.selectNumberHeader a:hover {
  background-color: rgba(247, 247, 247, 0.51);
  border-color: rgba(247, 247, 247, 0.51);
  color: #646464;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.selectNumberHeader span {
  color: white;
  float: right;
  margin-right: 10%;
  line-height: 100px;
  font-size: 19px;
}

.selectNumberHeader label {
  color: white;
  font-size: 30px;
  line-height: 100px;
}

label {
  font-weight: bold !important;
}

.simTypeSectionPabel {
  max-width: 500px;
  text-align: center;
}

.simTypeSection {
  width: 50%;
  float: right;
}

.simTypeSection img {
  width: 50px;
  margin-bottom: 10px;
}

.simTypeSection label {
  position: relative;
  top: -4px;
  margin-right: 5px;
}

.simTypeSection input {
  display: inline;
}

.upload-section-left {
  float: left;
  display: block;
  width: 160px;
}

.upload-section-left label {
  font-size: 40px;
  background: #dedede;
  border: 1px solid #6a6767;
  border-radius: 2px;
  width: 77px;
  line-height: 77px;
  cursor: pointer;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.upload-section-left label:hover {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: #bababa;
}

.upload-section-left label i {
  position: relative;
  top: 5px;
}

.upload-section-right {
  float: right;
  display: block;
  width: calc(100% - 160px);
}

.upload-section-right li {
  float: right;
  clear: both;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 7px;
}

.upload-section .m-goPre-step-BTN {
  float: right;
  margin-top: 20px;
  margin-bottom: 0;
}

.upload-section .m-goNext-step-BTN {
  float: left;
  margin-top: 20px;
  margin-bottom: 0;
}

.getProductMethodInputPanel {
  width: 33.3%;
  display: block;
  float: right;
}

.getProductMethodInputPanel input[type="radio"] {
  display: block;
  width: 10px;
  margin-left: calc(50% - 10px);
}

.getProductMethodInputPanel img {
  width: 130px;
}

.getProductMethodInputPanel i {
  font-size: 50px;
  color: #f25d3f;
  top: 15px;
  position: relative;
}

.getProductMethodInputPanel label {
  display: block;
  font-size: 13px;
}

.getProductMethodInputContent {
  direction: rtl;
  float: right;
  padding: 30px;
  font-weight: bold;
}

.getProductMethodPaymentMehtod {
  clear: both;
}

.getProductMethodPaymentMehtod p {
  font-weight: bold;
  font-size: 17px;
  text-align: right;
  direction: rtl;
  margin-right: 20px;
}

.getProductMethod .m-preview-content {
  padding-top: 40px;
  padding-bottom: 30px;
  font-size: 14px;
}

.finalMessagePanel {
  width: 100%;
  max-width: 500px;
  border: 1px solid #c4c4c4;
  text-align: center;
  padding: 30px 50px;
  border-radius: 2px;
  background: #eeeeee;
  margin: 0 auto;
}

.finalMessagePanel p {
  font-size: 25px;
  direction: rtl;
  line-height: 60px;
}

.finalMessagePanel a {
  background: #f25d3f;
  color: white;
  padding: 7px 30px;
  border-radius: 30px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.finalMessagePanel a:hover {
  color: white;
  background: #ca553e;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.main-header {
  background-color: white !important;
  border-color: white !important;
}

.main-navigation .nav > li > a,
.main-navigation .nav > li > a:hover {
  color: #3b0b01;
}

.getProductMethod .m-goNext-step-BTN,
.checkFinalFactor .m-goNext-step-BTN {
  float: left;
  margin-bottom: -10px;
  margin-right: 5px;
}

.m-table-numberResult .noneShow {
  display: none;
}

#showRuleLink {
  font-weight: bold;
  cursor: pointer;
  font-size: 11px;
  color: rgb(242, 93, 63);
  position: relative;
  top: 3px;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#showRuleLink:hover {
  color: #707070;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#ruleModal h4 {
  font-family: "samantelFont";
  font-weight: bold;
}

#ruleModal .modal-body {
  text-align: right;
  direction: rtl;
  font-size: 15px;
  line-height: 35px;
  color: black;
  max-height: 70vh;
  overflow-y: scroll;
}

#ruleModal {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}

#ruleModal .modal-dialog {
  width: 100%;
}

.samantel-message-panel {
  color: white;
  padding: 5px;
  width: 90%;
  max-width: 700px;
  left: calc(50% - 350px);
  position: fixed;
  bottom: 100px;
  border-radius: 5px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: none;
  direction: rtl;
}

.samantel-message-panel i {
  cursor: pointer;
  float: right;
  margin-right: 5px;
}

.samantel-message-panel i:hover {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #c8c8c8;
}

.samantel-message-panel p {
  clear: both;
  float: right;
  font-size: 15px;
  display: block;
  width: 100%;
}

.success-samantel-message-panel {
  background: #147d14;
  box-shadow: 0 0 13px 0 #094a09;
}

.error-samantel-message-panel {
  background: red;
  box-shadow: 0 0 13px 0 red;
}
.warning-samantel-message-panel {
  background: #ff8f00;
  box-shadow: 0 0 13px 0 #ff6f00;
}

.loginSamantelLogo {
  display: block;
  width: 100px;
  height: 100px;
  background-color: var(--orange5);
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 10px 0 var(--grayBlack45);
  position: relative;
  background-image: url(../img/samanLogo.png);
  background-size: 90px;
  background-repeat: no-repeat;
  background-position: 5px 25px;
}

#samantelUserLoginForm {
  border: 10px solid var(--orange5);
  margin-top: -50px;
  padding: 70px 40px 40px 40px;
  border-radius: 4px;
}

#samantelUserLoginForm > p {
  color: var(--orange20);
  font-size: 25px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

#samantelUserLoginForm label {
  color: white;
  display: none;
}

#samantelUserLoginForm input {
  height: 50px;
  font-size: 15px;
  border-radius: 3px;
  text-align: center;
}

#samantelUserLoginForm button,
#samantelUserLoginForm a {
  background: var(--orange5);
  color: var(--white);
  border: none;
  border-radius: 3px;
  line-height: 37px;
  width: calc(50% - 10px);
  font-size: 18px;
  font-weight: bold;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#samantelUserLoginForm button:hover,
#samantelUserLoginForm a:hover {
  background-color: #c7c7c7;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#samantelUserLoginForm button {
  margin-left: 15px;
}

#uploadForm input[type="submit"] {
  background-color: #fd532e;
}

.textRightField {
  text-align: right;
  direction: ltr;
}

.notFoundBTN {
  background-color: rgb(242, 93, 63);
  border-color: rgb(242, 93, 63);
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  margin-bottom: 20px;
  color: white;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 4px;
}

.notFoundBTN:hover {
  color: white;
  background-color: rgb(207, 87, 63);
  border-color: rgb(207, 87, 63);
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.m404Message {
  font-size: 70px;
  margin-bottom: 0px;
  color: #f25d3f;
  text-shadow: 0 0 7px;
}

#myModal .m-panel-numberResult {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.oldNumberSection {
  margin-top: -10px;
  display: none;
}

.oldNumberSection td,
.oldNumberSection {
  border: none;
  text-align: left;
}

.oldNumberSection td label {
  margin-right: 5px;
  cursor: pointer;
}

.oldNumberSection td label span {
  margin: 0 5px;
}

.oldNumberSection td label:hover {
  color: #f25d3f;
}

.colorGreenBTN {
  font-size: 14px;
  margin: 0;
  padding: 8px;
  background-color: var(--green20) !important;
  border-color: var(--green20) !important;
}

.colorGreenBTN:hover {
  background-color: var(--green25) !important;
  border-color: var(--green25) !important;
  box-shadow: none !important;
}

.colorGraynBTN {
  background-color: var(--grayLight25) !important;
  border: 1px solid var(--grayLight25) !important;
  color: var(--grayBlack40) !important;
  padding: 6px;
  font-size: 12px;
}

.colorGraynBTN:hover {
  background-color: var(--grayLight50) !important;
  border: 1px solid var(--grayLight25) !important;
  box-shadow: none !important;
}

@font-face {
  font-family: "mFont";
  src: url("../fonts/Vazir-FD.woff") format("woff");
}

#registerNewUserSection {
  background-color: rgb(168, 169, 173);
  color: white;
  padding: 70px 0;
}

#registerNewUserSection img {
  width: 300px;
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-filter: drop-shadow(0px 0px 10px #484848);
  filter: drop-shadow(0px 0px 10px #484848);
}

#registerNewUserSection a {
  color: white;
  border: 2px solid white;
  padding: 7px 50px;
  font-size: 18px;
  border-radius: 30px;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#registerNewUserSection a:hover {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: rgba(255, 255, 255, 0.52);
  color: gray;
  border-color: gray;
}

.mRowSectionPanel {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.mRowSectionPanel > .mRowSectionContent,
#secondPage > .mRowSectionContent {
  max-width: 1300px;
  margin: 0 auto;
}

.mRowSectionPanel > .mRowSectionContent > div {
  width: 50%;
  float: right;
}

.mRowSectionPanel > .mRowSectionContent > div form {
  max-width: 450px;
  margin: 0 auto;
}

.mRowSectionPanel > .mRowSectionContent > div p {
  font-size: 17px;
  margin-top: 7px;
  margin-bottom: 15px;
}

#searchByNumberSection {
  background: linear-gradient(
    45deg,
    rgba(133, 204, 136, 1) 0%,
    rgba(180, 195, 119, 1) 25%,
    rgba(255, 182, 92, 1) 74%,
    rgba(249, 153, 75, 1) 90%,
    rgba(240, 114, 51, 1) 100%,
    rgba(240, 114, 51, 1) 10%
  );
  color: white;
  padding: 50px 0;
  overflow: hidden;
  padding-bottom: 30px;
}

#searchByNumberSection img {
  width: 250px;
  -webkit-filter: drop-shadow(0px 0px 10px #484848);
  filter: drop-shadow(0px 0px 10px #484848);
}

#searchByNumberForm {
  background: var(--white);
  padding: 0;
  border-radius: 6px;
  box-shadow: 0 0 10px 0 var(--grayBlack45);
  height: 300px;
}

#searchByNumberForm label {
  font-size: 20px;
  width: 70px;
}

#searchByNumberForm input[type="text"] {
  width: calc(100% - 70px);
  border-radius: 4px;
  line-height: 45px;
  height: 45px;
  padding-left: 20px;
  font-size: 18px;
  border: 1px solid var(--grayLight10);
  color: var(--grayBlack40);
}

#searchByNumberForm input[type="submit"] {
  background-color: var(--orange20);
  color: var(--white);
  font-size: 17px;
  line-height: 28px;
  display: block;
  width: 100%;
  margin-left: 0;
  margin-top: 65px;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  border-radius: 22px;
}

#searchByNumberForm input[type="submit"]:hover {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0.8;
}

#searchByPersonalInfoSection {
  background-color: rgb(59, 11, 1);
  padding: 70px 0 0 0;
  color: white;
  overflow: hidden;
}

#searchByPersonalInfoSection img {
  width: 350px;
}

#searchByPaymentSection {
  background-color: rgb(0, 173, 110);
  padding: 70px 0 0 0;
  color: white;
}

#searchByPaymentSection img {
  width: 350px;
  -webkit-filter: drop-shadow(0px 0px 10px #484848);
  filter: drop-shadow(0px 0px 10px #484848);
}

#searchByPersonalInfoSection p,
#searchByPaymentSection p {
  margin-top: 100px;
}

#searchByPersonalInfoForm,
#searchByPaymentForm {
  background: var(--white);
  padding: 0;
  border-radius: 7px;
  box-shadow: 0 0 10px 0 var(--grayBlack45);
  height: 300px;
}

#searchByPaymentForm {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.32);
}

#searchByPersonalInfoForm input[type="text"],
#searchByPaymentForm input[type="text"] {
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
  border-radius: 4px;
  line-height: 45px;
  height: 45px;
  padding-left: 20px;
  font-size: 18px;
  border: 1px solid var(--grayLight10);
  color: var(--grayBlack40);
}

#searchByPersonalInfoForm input[type="submit"],
#searchByPaymentForm input[type="submit"] {
  background-color: var(--orange20);
  color: var(--white);
  font-size: 17px;
  line-height: 28px;
  display: block;
  width: 100%;
  margin-left: 0px;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  border-radius: 22px;
}

#searchByPersonalInfoForm input[type="submit"]:hover,
#searchByPaymentForm input[type="submit"]:hover {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0.8;
}

.m-width-50 {
  width: calc(50% - 5px) !important;
  margin-bottom: -25px;
  float: right;
}

.m-width-50:first-child {
  margin-left: 5px !important;
  margin-right: 0 !important;
}

.m-width-50:last-child {
  margin-right: 5px !important;
  margin-left: 0 !important;
}

.m-width-30 {
  width: 32% !important;
  margin-left: 1% !important;
  margin-right: 1% !important;
  float: right;
}

.m-width-30:first-child {
  margin-left: 1% !important;
  margin-right: 0 !important;
}

.m-width-30:last-child {
  margin-right: 1% !important;
  margin-left: 0 !important;
}

.requiredMark {
  color: var(--red);
  font-size: 16px;
  position: absolute;
  top: 0;
  right: 0;
}

select {
  direction: rtl;
}

.m-main-content {
  display: none;
}

.m-main-spinner {
  text-align: center;
  font-size: 25px;
  width: 130px;
  height: 100px;
  margin-left: calc(50vw - 65px);
  margin-top: calc(50vh - 50px);
  position: absolute;
  display: block;
}

#myModal .modal-content {
  border-radius: 0 !important;
}

#myModal .modal-header {
  background: var(--orange5) !important;
  color: var(--white) !important;
}

#myModal .modal-header label {
  font-weight: normal !important;
}

#myModal .modal-header .close {
  opacity: 1 !important;
  color: white !important;
  text-shadow: none !important;
}

#advancedTextInput input[type="radio"] {
  margin-left: 5px !important;
  margin-top: 2px !important;
  margin-bottom: 8px;
}

#changeModel {
  margin-left: 6px;
  position: relative;
  top: 2px;
}

#userNumberSelectedForm button[type="submit"] {
  font-size: 12px !important;
  border-radius: 30px !important;
  background-color: #ff2d00 !important;
  border-color: #ff2d00 !important;
}

#userNumberSelectedForm button[type="submit"]:hover {
  background-color: #ff679a !important;
  border-color: #ff679a !important;
  opacity: 0.8;
}

#userNumberState {
  position: relative;
  top: 3px;
}

#advancedTextInput .checkbox-inline,
#advancedTextInput .radio-inline {
  padding-right: 20px !important;
}

.upload-section-right-image {
  clear: both;
}

.upload-section-right-image > img {
  width: calc(50% - 4px);
  float: right;
  border: 1px solid #e2e2e2;
  border-radius: 2px;
  margin: 2px;
  display: none;
  box-shadow: 0 0 5px 0 #eeeeee;
}

.upload-section-right-image > div {
  width: calc(50% - 4px);
  float: right;
  border: 1px solid #e2e2e2;
  border-radius: 2px;
  margin: 2px;
  box-shadow: 0 0 7px 0 #eeeeee;
  padding: 20px 0;
}

#pdfBox1,
#pdfBox2 {
  display: none;
  overflow: hidden;
}

.upload-section-right-image > div > p {
  margin: 0;
  margin-top: 15px;
  font-size: 13px;
  font-weight: bold;
  color: #fd532e;
  direction: rtl;
}

.upload-section-right-image > div > p > span {
  font-size: 15px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  display: block;
}

#numberSearchBoxPanel,
#numberSearchBoxPanelDetails {
  background: #efefef;
  text-align: center;
  padding: 30px 0;
  display: none;
}

#numberSearchBoxPanel {
  height: 588px;
}

#numberSearchBoxPanel tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#numberSearchBoxPanel tbody {
  display: block;
  height: 400px;
  overflow: auto;
}

#numberSearchBoxPanel table,
#numberSearchBoxPanelDetails #contentPanel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  direction: rtl;
}

#contentPanel {
  border: 1px solid #d2d2d2;
  border-top: none;
}

#numberSearchBoxPanel table thead tr:first-child {
  background: rgb(252, 79, 0) !important;
  color: white !important;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

#numberSearchBoxPanelDetails .tableHeader {
  background: rgb(252, 79, 0) !important;
  color: white !important;
  line-height: 40px;
  height: 40px;
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  direction: rtl;
}

#numberSearchBoxPanel table tbody tr {
  border-right: 1px solid #e5e5e5 !important;
  border-left: 1px solid #e5e5e5 !important;
}

#numberSearchBoxPanel table tbody tr:last-child {
  border-bottom: 1px solid #e5e5e5 !important;
}

#numberSearchBoxPanel table {
  border: none !important;
}

#numberSearchBoxPanel table td {
  border: none;
  line-height: 30px;
  font-size: 16px;
}

#numberSearchBoxPanel table td a {
  font-size: 12px;
}

#numberSearchBoxPanel table tr:nth-child(even) {
  background: rgba(255, 240, 233, 0.98);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#numberSearchBoxPanel table tr:nth-child(odd) {
  background: white;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#numberSearchBoxPanel table tr:hover {
  background: rgba(0, 0, 0, 0.08);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.showCountOfField,
.bacKToSearchBox,
.bacKToDetailsBox {
  width: 100%;
  height: 40px;
  color: #383838;
  font-size: 25px;
  text-align: left;
  margin-bottom: 10px;
  margin: auto;
  max-width: 1200px;
}

.showCountOfField i {
  margin-right: 10px;
}

.bacKToSearchBox span,
.bacKToDetailsBox span {
  margin-left: 7px;
}

.bacKToSearchBox i,
.bacKToDetailsBox i {
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}

.bacKToDetailsBox i {
  position: relative;
  left: 15px;
}

.bacKToSearchBox i:hover,
.bacKToDetailsBox i:hover {
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: rgb(242, 93, 63);
}

.mRadioGroup {
  float: right;
  width: calc(50% - 10px) !important;
  padding-right: 20px;
  margin-top: 7px !important;
  margin-bottom: 10px;
}

.mRadioGroup input {
  margin-left: 0 !important;
  margin-right: -20px;
}

#notIranianForm .form-group label:first-child,
#notIranianForm .form-group input,
#notIranianForm .form-group textarea,
#notIranianForm .form-group select {
  text-align: left;
  direction: ltr;
}

#notIranianForm .requiredMark {
  right: auto;
  left: -10px;
}

#notIranianForm .m-width-50:last-child {
  margin-left: 5px !important;
  margin-right: 0 !important;
}

#notIranianForm .m-width-50 {
  width: calc(50% - 5px) !important;
  margin-bottom: -25px;
  float: left;
}

#notIranianForm .mRadioGroup {
  float: left;
  text-align: left !important;
  direction: ltr !important;
  padding-right: 0 !important;
}

#notIranianForm .mRadioGroup input {
  margin-right: 0 !important;
  margin-left: -20px !important;
  position: relative;
  top: 2px;
  left: -5px;
}

#notIranianForm button[type="submit"] {
  margin-right: 0;
  margin-top: 15px;
}

#notIranianForm input,
#notIranianForm select {
  font-family: Tahoma;
}

.mOrderState {
  font-weight: bold;
}

.mOrderState span {
  color: orange;
}

.centerservice h4 {
  font-family: samantelFont;
  font-weight: bold;
  font-size: 17px;
}

.centerservice p {
  text-align: justify;
  direction: rtl;
  font-size: 14px;
}

.centerservice a {
  display: block;
  width: 50%;
  float: right;
  padding: 0 10%;
}

.centerservice a img {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.centerservice a:hover img {
  opacity: 0.8;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.portfolioSection,
.LinkSection {
  display: none !important;
}

#topHeaderBeforeMenu {
  width: 100%;
  background: rgb(252, 79, 0);
}

#topHeaderBeforeMenu a i,
#topHeaderBeforeMenu a {
  color: white !important;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#topHeaderBeforeMenu a i:hover,
#topHeaderBeforeMenu a:hover {
  color: #c4c4c4 !important;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#LanguageIcon,
#UserIcon,
#MarkerIcon,
#AreaIcon,
#MenuIcon,
#PersonalIcon,
#CommercialIcon {
  color: white !important;
  line-height: 40px;
  font-size: 12px;
}

#LanguageIcon i,
#UserIcon i,
#MarkerIcon i,
#AreaIcon i,
#MenuIcon i,
#PersonalIcon i,
#CommercialIcon i {
  font-size: 20px;
  position: relative;
  top: 2px;
}

#LanguageIcon,
#UserIcon,
#MarkerIcon,
#AreaIcon {
  float: left;
  margin-right: 15px;
}

#MenuIcon,
#PersonalIcon,
#CommercialIcon {
  float: right;
  margin-left: 15px;
}

h1.logo img {
  width: 130px;
}

h1.logo {
  float: right;
}

.main-navigation .nav > li {
  border: none;
}

.main-navigation .nav > li > a {
  position: relative;
  top: 5px;
  font-weight: bold !important;
  color: #464646 !important;
}

#menu-item-search {
  float: left;
  margin-left: -60px;
  position: relative;
  width: 200px;
  height: 40px;
  top: 20px;
}

.main-navigation .nav #menu-item-search a {
  display: none;
}

.main-navigation .nav #menu-item-search > ul {
  top: 0;
  left: 0 !important;
  right: 0 !important;
  border: none;
}

.main-navigation .nav #menu-item-search > ul form input[type="text"] {
  width: calc(100% - 30px);
  right: 0;
  left: 30px;
  position: absolute;
  background: white;
  border-color: #464646;
  border-radius: 13px;
  height: 30px;
  border-width: 2px;
}

.main-navigation .nav #menu-item-search > ul form button {
  position: absolute;
  left: 0;
  color: #464646;
  font-size: 20px;
}

#menu-item-search .dropdown-menu {
  display: block !important;
}

.main-navigation .nav {
  width: calc(100% - 150px);
}

.site-branding {
  position: relative;
  top: 15px;
  z-index: 1;
}

.site-branding a {
  padding-left: 10px;
  font-weight: bold;
  color: #464646 !important;
}

.site-branding a i {
  font-weight: normal;
  position: relative;
  left: -10px;
  color: #464646;
  font-size: 20px;
}

.main-navigation .nav > li.current-menu-parent > a {
  color: #fc4f00 !important;
}

.main-header {
  box-shadow: 0 0 5px 0px grey;
  z-index: 5;
  position: relative;
  margin-bottom: -15px;
}

.callCenterSection {
  text-align: center;
  background-size: cover;
}

.callCenterSection p {
  color: white !important;
  text-align: center !important;
  font-weight: normal;
  font-size: 20px;
  line-height: 50px;
}

.callCenterSection a {
  border: 1px solid white;
  padding: 4px 25px;
  font-size: 15px;
  color: white;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  font-weight: normal;
}

.callCenterSection a:hover {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: rgba(255, 255, 255, 0.3);
}

.bannerSection {
  position: relative !important;
  z-index: 0 !important;
}

.main-navigation .nav .dropdown-menu {
  z-index: 999;
}

article.post-normal h1.post-title {
  text-align: right;
  font-size: 26px;
}

.entry-content {
  text-align: justify;
  margin-top: 17px;
  direction: rtl;
  font-weight: bold;
  font-size: 15px;
}

.entry-content p {
  line-height: 30px;
}

.single .post-image {
  max-width: 600px;
  margin-left: calc(50% - 300px);
}

.tabs-container p {
  line-height: 30px !important;
}

.contentSection2 {
  min-height: calc(100vh - 500px);
}

.samanFooter2 {
  background: rgb(66, 66, 66);
  color: white;
  text-align: right;
  direction: rtl;
}

.footreRightContent {
  width: 300px;
  display: block;
  float: right;
  text-align: right;
}

.footreLeftContent {
  width: calc(100% - 305px);
  display: block;
  float: left;
}

.footerSocialLink {
  text-align: right;
  padding: 20px 0;
}

.footerSocialLink a {
  margin: 5px 0px 5px 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: white;
}

.footerSocialLink a:hover {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #fc4f00;
}

.footerSocialLink a i {
  font-size: 30px;
}

.footreRightContent img {
  max-width: 250px;
  margin: 25px auto;
}

.linksGroup {
  float: right;
  padding-top: 75px;
  padding-right: 15%;
}

.linksGroup p {
  color: white;
  font-size: 18px;
}

.linksGroup a {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: white;
  float: right;
  clear: both;
  font-size: 13px;
  line-height: 25px;
}

.linksGroup a:hover {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #d4d4d4;
  margin-right: 5px;
}

.imgFooter {
  margin-top: 45px;
}

.footerAddress {
  text-align: right;
}

.footerBk2 {
  text-align: center;
  direction: rtl;
  background: rgb(49, 47, 48);
  color: white;
  font-weight: normal;
  padding: 12px 0;
  font-size: 12px;
}

.footerBk2 a {
  color: #ff7c40;
}

.footerBk3 {
  text-align: center;
  direction: rtl;
  background: rgb(35, 31, 32);
  color: white;
  font-weight: normal;
  padding: 12px 0;
  font-size: 12px;
}

.main-navigation .nav #menu-item-search > ul {
  border: none !important;
  box-shadow: none !important;
}

.callInfo,
.mailInfo,
.addressInfo {
  direction: rtl;
  line-height: 30px;
  font-size: 14px;
}

.callInfo span,
.mailInfo span,
.addressInfo span {
  color: rgb(255, 255, 255) !important;
}

.callInfo a,
.mailInfo a,
.addressInfo a {
  color: rgb(255, 255, 255) !important;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-weight: normal !important;
}

.callInfo span,
.mailInfo span,
.addressInfo span {
  font-weight: normal !important;
}

.callInfo a:hover,
.mailInfo a:hover,
.addressInfo a:hover {
  color: rgb(181, 181, 181);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#menu-menu2 > li > a::after {
  content: "\f0dd" !important;
  font-family: FontAwesome !important;
  position: relative !important;
  left: -4px !important;
  font-size: 10px;
}

.main-navigation .nav #menu-item-search > ul {
  left: -10px !important;
  top: -10px !important;
}

#samanMenu {
  position: relative;
  z-index: 999;
}

.chargeFrom .control-label,
.chargeFrom .form-group > div {
  float: right !important;
  direction: rtl;
  text-align: right;
}

.chargeFrom .col-sm-offset-4 {
  margin-left: 0 !important;
  margin-right: 33.333333% !important;
}

.chargeFrom input,
.chargeFrom select {
  text-align: left !important;
  direction: ltr !important;
  border: 1px solid #dddd;
  border-radius: 1px;
}

.myMaterialSelectPanel select {
  border-radius: 1px !important;
  box-shadow: none !important;
  width: calc(100% - 60px) !important;
  border: 1px solid #dddd !important;
  float: right;
  background: #ffffff;
}

.myMaterialSelectPanel span {
  width: 60px;
  display: block;
  float: right;
  clear: none;
  line-height: 25px;
  text-align: left;
  position: relative;
  top: 10px;
  font-weight: bold;
}

#AreaIcon img {
  position: relative;
  top: 7px;
  width: 21px;
}

.chargeFrom .checkbox {
  padding-right: 25px;
}

.chargeFrom .checkbox input[type="checkbox"] {
  position: relative;
  right: -25px;
  top: 2px;
}

.chargeFrom img {
  width: 120px;
}

.chargeFrom button {
  float: left;
  background-color: #ff679a;
  border: none;
  color: white;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100px;
}

.chargeFrom button:hover,
.previewChargeFactor a:hover {
  color: white;
  background-color: #ff679a;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.9;
}

.previewChargeFactor p {
  background-color: rgb(255, 62, 0);
  color: white;
  line-height: 40px;
  font-size: 16px;
}

.previewChargeFactor span {
  font-size: 15px;
  direction: rtl;
  margin: 12px;
  line-height: 30px;
}

.previewChargeFactor {
  direction: rtl;
}

.previewChargeFactor a {
  background-color: rgb(255, 62, 0);
  color: white;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 7px 25px;
  border-radius: 4px;
}

/*-----footer form-----*/

#footerFormDiv {
  display: none !important;
}
/*-----footer form-----*/

#menu-item-search form {
  margin-top: 10px;
}

#searchSign {
  display: none;
  font-size: 17px;
  position: absolute;
  top: 8px;
  right: 8px;
}

#pMessageOnModal {
  margin-bottom: 0px;
  text-align: right;
  padding: 8px 0;
  background: rgb(141, 141, 141);
  margin-top: -1px;
  color: white;
  font-size: 13px;
  direction: rtl;
  padding-right: 8%;
}

.bacKToSearchBox .fa-user-plus {
  float: right;
  margin-left: 20px;
}

.bacKToSearchBox .fa-pencil-square-o {
  float: right;
  position: relative;
  top: 2px;
}

#secondPage .form-group {
  width: calc(50% - 20px);
  margin-right: 10px;
  margin-left: 10px;
  float: right;
  clear: none;
}

#secondPage .m-width-50 > label:first-child {
  float: right;
  display: block;
  width: 100%;
  text-align: right;
}

#secondPage .m-width-50 {
  text-align: right;
  direction: rtl;
}

#secondPage {
  padding: 50px 0;
}

.mDocPreview {
  height: 300px;
  overflow-y: hidden;
  border: 1px solid #bfbfbf;
  background: #f3f3f3;
  border-radius: 3px;
  padding: 5px;
  position: relative;
}

.pdfBox img {
  float: none !important;
  margin: 10px auto !important;
}

#addNewCustomer {
  float: right;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: none;
}

#addNewCustomer:hover {
  color: #fe5e11;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#lastRowInEditMode {
  width: calc(100% - 20px) !important;
}

.deleteUserDoc {
  color: rgba(255, 0, 0, 0.69);
  position: absolute;
  top: 35px;
  right: 10px;
  cursor: pointer;
  font-size: 30px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.deleteUserDoc:hover {
  color: red;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.addUserDoc {
  float: left;
  font-size: 22px;
  position: relative;
  top: 5px;
  left: 10px;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.addUserDoc:hover {
  color: #a4a4a4;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#imageModal iframe {
  width: 100%;
  height: calc(100vh - 200px);
}

#AuthenticationCustomer,
#addICCID,
#putShahkar {
  float: right;
  direction: rtl;
  border-bottom: 2px solid dimgrey;
  line-height: 0;
  margin-right: 15px;
  position: relative;
}

#addICCID,
#putShahkar {
  display: none;
}

#AuthenticationCustomer span,
#addICCID span,
#putShahkar span {
  font-size: 13px;
  position: relative;
  top: -4px;
  font-weight: bold;
}

#AuthenticationCustomer #AuthenticationSpinner,
#putShahkar #putShahkarSpinner {
  display: none;
  position: absolute;
  top: 4px;
  left: -30px;
  font-size: 20px;
}

#userPaymentStatusTitle,
.userPaymentStatusText {
  font-weight: bold;
  font-size: 17px;
}

.userPaymentStatusText {
  cursor: pointer;
}

.formSearchSpinnerSign {
  position: relative;
}

.formSearchSpinnerSign i {
  position: absolute;
  top: 15px;
  right: 10px;
  font-size: 20px;
  display: none;
}

.ICCID-table {
  text-align: center;
  direction: rtl;
}

.ICCID-table thead tr {
  background: #ff6a00;
  color: white;
  font-size: 15px;
}

.ICCID-table tbody tr {
  font-size: 16px;
  font-weight: bold;
}

.selectICCID {
  font-size: 13px;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.selectICCID:hover {
  color: #ff6a00;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.DocPreviewInDetails {
  display: inline-table;
  margin: 5px;
  width: calc(33.3% - 10px) !important;
}

.DocPreviewInDetails img {
  height: 160px !important;
  cursor: pointer;
}

.saveToDbSign {
  float: right;
}

.saveToDbSign span {
  font-size: 12px;
  font-weight: bold;
  margin-right: 15px;
}

.saveToDbSign i {
  margin-right: 25px;
}

#PrintPage {
  float: right;
  margin-left: 10px;
}

.saveDataBeforeSubmite,
.saveDocBeforeSubmite {
  text-align: left;
  float: left;
}

.saveDataBeforeSubmite span,
.saveDocBeforeSubmite span {
  font-size: 11px;
  font-weight: bold;
  color: green;
  display: none;
  line-height: 35px;
}

.saveDataBeforeSubmite i,
.saveDocBeforeSubmite i {
  font-size: 25px;
  display: none;
}

#headerLinkAnimation {
  display: none !important;
}

#changePassModal form label {
  text-align: right;
  direction: rtl;
  width: 100%;
}

#changePassModal form input {
  text-align: center;
  direction: ltr;
}

#changePassModal form button {
  background: #fc4f00;
  color: white;
  border: none !important;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#changePassModal form button:hover {
  background: rgba(252, 79, 0, 0.77);
  color: white;
  border: none !important;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#adminUserName {
  color: white;
  position: absolute;
  top: 15px;
  right: 7%;
  border-radius: 3px;
  padding: 5px 15px;
  z-index: 9;
  line-height: 25px;
  direction: rtl;
}

.modalChargeParent,
.modalChargeParent:hover {
  padding: 0;
  background: white;
  border-color: white;
  box-shadow: 0 0 8px 0 rgba(128, 128, 128, 0.6);
  border: 1px solid rgba(183, 183, 183, 0.6) !important;
  margin: 0 20px;
  border-radius: 0 0 4px 4px;
  outline: none !important;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: calc(33.3% - 45px);
}

.modalChargeParent:hover {
  box-shadow: 0 0 12px 0 rgba(128, 128, 128, 0.85);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.modalChargeParent img {
  display: block;
  width: 100%;
}

.modalChargeParent span {
  background: white;
  display: block;
  color: rgb(0, 110, 255);
  font-weight: bold;
  line-height: 55px;
  border-radius: 0 0 4px 4px;
  width: calc(100% - 0px);
}
#modal-index {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.253);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  display: none;
}
#modal-index #close {
  position: absolute;
  top: 25px;
  right: 25px;
  text-align: center;
}
#modal-index #close img {
  height: 20px;
  width: 20px;
}
#modal-index #modal-index-inside {
  width: 300px;
}

#notIranianForm option {
  font-family: Tahoma;
}

.footerBk3 a {
  color: #b5b5b5;
}

.getProductMethod-completePaymentData .form-group > label {
  float: right;
  text-align: right;
  direction: rtl;
}

.getProductMethod-completePaymentData {
  clear: both;
  max-width: 650px;
  margin: 0 auto;
  padding-top: 30px;
}

.getProductMethod-completePaymentData input,
.getProductMethod-completePaymentData select,
.getProductMethod-completePaymentData option {
  text-align: center;
  text-align-last: center;
}

#timer {
  position: absolute;
  left: 25px;
  font-size: 25px;
  top: 30px;
  display: none;
}

#TimerModal p {
  margin-top: 40px;
  margin-bottom: 40px;
  font-size: 20px;
}

#TimerModal a {
  margin-bottom: 20px;
}

timerLabel {
  color: white;
  font-size: 13px;
  position: relative;
  top: -15px;
}

timer {
  color: white;
  font-size: 30px;
}

/*----------------chat button css----------------*/

#onlineChatLink {
  position: fixed;
  background: #fc4f00;
  color: white;
  text-decoration: none;
  direction: rtl;
  text-align: center;
  border-radius: 50px;
  right: 20px;
  bottom: 20px;
  padding: 6px 10px;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.27), 0 0px 10px 0 rgba(0, 0, 0, 0.27);
  font-size: 12px;
  font-weight: normal;
  padding-left: 12px;
}

#onlineChatLink img {
  width: 17px;
  margin-right: -3px;
  margin-left: 10px;
}

/*----------------chat button css----------------*/
#discountCodeBox {
  float: left;
  width: calc(50% - 50px);
}

#formTypeParent {
  width: calc(50% - 50px);
  float: right;
}

#samantelUserBillForm,
#billContainerDetails,
#billAfterPaymentContainer,
#topupChargeFrom,
#netPackageFrom {
  border: none;
  border-radius: 4px;
  padding: 20px;
  background: #f7f7f7;
  box-shadow: 0 0 7px 0px #cccccc;
  margin-bottom: 20px;
}

.modalChargeParent:hover {
  box-shadow: 0 0 20px 0px #767575;
}

/*----------------------------------------package page---------------------------------------------*/
#adminAuthenticationBtn {
  float: right;
}

#adminAuthenticationBtn,
#adminICCIDBtn {
  border: 2px solid #fd532e;
  border-radius: 20px;
  display: inline-block;
  padding: 7px 20px;
  color: #fd532e;
  font-weight: bold;
  line-height: 23px;
  cursor: pointer;
}

#adminAuthenticationBtn i,
#adminICCIDBtn i {
  position: relative;
  right: -8px;
  font-size: 19px;
  color: #fd532e;
  display: none;
  line-height: 0;
}

.admin-iccid {
  text-align: right;
  direction: rtl;
  margin-right: 20px;
  font-size: 18px;
  font-weight: bold;
}
#adminAuthenticationBtn i {
  float: right;
  top: 10px;
  right: -15px;
}

.disableBox {
  position: relative;
  cursor: no-drop;
}
.disableBox div {
  background: #af37004f;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.disableBox:hover {
  box-shadow: 0 0 8px 0 rgba(128, 128, 128, 0.6);
}
.deactiveLink:hover {
  cursor: no-drop;
}
.activeLink:hover {
  cursor: pointer;
}
.package-item-box {
  position: relative;
}
.package-item-box a i {
  position: absolute;
  left: 12px;
  color: #484848;
  display: none;
}
#checkout_preview_table,
#checkout_preview_table td {
  text-align: right;
  border: none;
}

.addHoverEffect {
  box-shadow: 0px 0px 20px 0px hsl(0, 0%, 60%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.btn:focus {
  outline: none !important;
}

/*----------------------------------------End package page---------------------------------------------*/

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  margin: 0 !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

.btnClose {
  float: left;
  color: var(--grayBlack40);
  font-size: 40px;
  background: transparent;
  padding: 15px 0;
  margin: 0;
  line-height: 0;
}

.headTitle {
  float: right;
  display: inline-block;
  padding: 4px;
  margin: 0;
  font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border: 1px solid var(--grayLight20) !important;
  background: var(--grayBlack45) !important;
  border-radius: 3px !important;
}

.titleMenu {
  margin: 0 20px;
}

/***********Responsive**********/

@media only screen and (max-width: 1500px) and (min-width: 767px) {
  #numberSearchBoxPanel table,
  #numberSearchBoxPanelDetails #contentPanel,
  .showCountOfField,
  .bacKToSearchBox,
  .bacKToDetailsBox,
  #secondPage .m-preview-panel {
    max-width: 1000px;
  }
  #numberSearchBoxPanelDetails .tableHeader {
    max-width: 1000px;
    margin-left: auto !important;
  }
  .adminMainPanel {
    width: calc(100% - 50px) !important;
    min-height: 100vh;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 700px) {
  .modalChargeParent,
  .modalChargeParent:hover {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 1200px) {
  #iranianForm .form-group,
  #notIranianForm .form-group,
  #organizationForm .form-group {
    width: calc(48% - 50px);
    margin-left: 25px;
    margin-right: 25px;
    float: right;
  }
  .max-width-container {
    max-width: 1200px;
  }
  #iranianForm button,
  #notIranianForm button,
  #organizationForm button {
    margin-right: 25px;
    float: left;
    clear: both;
  }
  #notIranianForm .form-group {
    float: left !important;
  }
  .tableHeader {
    margin-left: calc(50% - 600px) !important;
  }
  .modalChargeParent {
    margin-bottom: 25px !important;
  }
}

@media only screen and (max-width: 1200px) {
  .m-preview-panel {
    max-width: 100%;
  }
  .m-preview-content table td {
    width: 50%;
  }
  .m-preview-content > .form-group {
    clear: both;
    float: right;
    width: 100%;
    margin-bottom: 15px !important;
  }
  .m-width-50,
  .m-width-30 {
    margin-bottom: 0;
  }
  #notIranianForm .m-width-50 {
    margin-bottom: 0;
  }
  h1.logo {
    width: 100%;
    text-align: center !important;
  }
  #menu-item-search {
    left: 38px;
    top: -41px;
  }
  .main-navigation .nav {
    width: 100%;
  }
  #numberSearchBoxPanel,
  #numberSearchBoxPanelDetails {
    width: calc(100% - 100px);
    margin: auto;
  }
  #timer {
    left: 10%;
  }
  #modal-index #modal-index-inside {
    width: 25%;
  }
}

@media only screen and (max-width: 1100px) {
  .linksGroup {
    padding-right: 5%;
  }
}

@media only screen and (max-width: 1000px) {
  .mRowSectionPanel > .mRowSectionContent > div p {
    font-size: 14px;
  }

  #searchByPersonalInfoForm input[type="text"],
  #searchByPaymentForm input[type="text"],
  #searchByNumberForm input[type="text"] {
    line-height: 40px;
    height: 40px;
    font-size: 15px;
  }

  #searchByPersonalInfoForm input[type="submit"],
  #searchByPaymentForm input[type="submit"],
  #searchByNumberForm input[type="submit"] {
    line-height: 19px;
    font-size: 15px;
  }

  #searchByNumberForm label {
    font-size: 17px;
    width: 50px;
  }

  #searchByNumberForm input[type="text"] {
    width: calc(100% - 50px);
  }

  #searchByNumberForm input[type="submit"] {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .site-branding {
    text-align: left !important;
  }
  .package-item {
    width: calc(50% - 25px);
  }
}

@media only screen and (max-width: 900px) {
  #ruleModal {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

  #ruleModal .modal-body {
    font-size: 14px;
    line-height: 30px;
  }
  #modal-index #modal-index-inside {
    width: 30%;
  }
}

@media only screen and (max-width: 800px) {
  #searchByPersonalInfoSection p,
  #searchByPaymentSection p {
    margin-top: 0;
  }
  .modalChargeParent,
  .modalChargeParent:hover {
    width: calc(50% - 45px);
    margin: 15px 20px;
  }
}

@media only screen and (max-width: 950px) {
  .mRowSectionPanel > .mRowSectionContent > div form {
    max-width: 95%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 650px) {
  .mRowSectionPanel {
    position: relative;
  }

  .mRowSectionPanel > .mRowSectionContent > div {
    display: block;
    width: 100%;
    z-index: 2;
    position: relative;
  }

  #searchByPersonalInfoForm,
  #searchByPaymentForm,
  #searchByNumberForm {
    padding: 40px 15px;
  }

  #registerNewUserSection {
    padding: 90px 0px;
  }

  #searchByNumberSection,
  #searchByPersonalInfoSection,
  #searchByPaymentSection {
    padding: 50px 0px;
  }

  .mRowSectionPanel > .mRowSectionContent > div p,
  #searchByPersonalInfoForm,
  #searchByPaymentForm {
    margin-top: 0;
  }
}

@media only screen and (max-width: 650px) and (max-height: 768px) {
  .single .post-image {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .selectNumberHeaderTitle {
    padding: 33px;
  }
  .samantel-message-panel {
    left: 5%;
  }
  .main-navigation .nav .dropdown-menu li:hover > a,
  .main-navigation .nav .dropdown-menu li:focus > a,
  .main-navigation .nav .dropdown-menu li.current-menu-item a,
  .main-navigation .nav .dropdown-menu li.current-menu-ancestor > a {
    background: transparent !important;
  }

  #menu-menu2 ul {
    width: 100%;
    position: initial;
    background: #f2f2f2;
    border: none;
  }

  #menu-menu2 ul ul {
    width: 100%;
    position: relative;
    background: #e7e7e7;
  }

  #userNumberSelectedForm input,
  #userNumberSelectedForm span,
  #userNumberSelectedForm button {
    width: 100%;
    display: block;
    margin-top: 2px;
    margin-bottom: 6px;
    text-align: center;
  }

  .numberSelectPanel {
    margin-right: 0;
  }
  .main-navigation .navbar-toggle .fa {
    color: black;
  }

  h1.logo img {
    margin-top: -15px;
  }

  .site-branding {
    position: relative;
    top: 30px;
    z-index: 0;
  }

  #main-menu-collapse {
    clear: both;
  }

  #menu-item-search {
    position: relative;
    top: 0;
    left: 40px;
  }

  .main-navigation .nav .dropdown-menu li:hover > a:hover {
    background: #cbcbcb;
  }
  .chargeFrom .control-label,
  .chargeFrom .form-group > div {
    float: none !important;
  }

  .chargeFrom .form-group {
    margin-bottom: 0px !important;
  }

  .chargeFrom .form-group label {
    margin-bottom: 5px !important;
    float: right !important;
  }

  .chargeFrom img {
    margin-right: calc(50% - 60px);
  }

  .titlePayment {
    margin: 30px 0 !important;
  }
  .imGpayment img {
    margin-top: 15px;
    margin-left: 15px;
  }
}

@media only screen and (max-width: 600px) {
  .stepwizard-row:before {
    top: 0;
  }

  .btn-circle {
    width: 30px;
    height: 30px;
    margin-bottom: 30px;
  }

  .stepwizard-step p {
    display: none;
  }

  .selectNumberHeader span,
  .selectNumberHeader label {
    margin-right: 0;
    font-size: 15px;
    line-height: 35px;
    display: block;
    float: right;
    width: 100%;
  }

  .selectNumberHeader a {
    display: block;
    width: 80%;
    margin: 5px 10%;
    line-height: 20px;
  }

  .selectNumberHeader {
    height: 150px;
    padding-top: 10px;
  }
  .m-preview-content table td {
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #eeeeee;
    padding-top: 15px;
  }

  .upload-section-right,
  .upload-section-left {
    width: 100% !important;
    margin-bottom: 10px;
  }

  .getProductMethodInputPanel {
    width: 100%;
  }

  .getProductMethodInputPanel label {
    display: block;
    width: calc(100% - 15px);
    float: left;
    margin-bottom: 10px;
    text-align: right;
    padding-right: 10px;
  }

  .getProductMethodInputPanel img {
    margin-bottom: 20px;
  }

  .finalMessagePanel p {
    font-size: 17px;
    direction: rtl;
    line-height: 40px;
  }

  .responsiveHalfWidth {
    width: 100% !important;
  }

  .noneBorder {
    border-bottom: none !important;
  }
  .centerservice a {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    float: none;
  }
  .packageContent {
    text-align: justify;
    font-size: 14px;
    line-height: 25px;
  }
}

@media only screen and (max-width: 650px) {
  #adminUserName {
    line-height: 13px;
    right: 2%;
  }
  #logoutAdminPanel {
    top: 8px;
    left: 8px;
  }
  #changePassword {
    line-height: 13px;
    left: calc(1% + 75px);
  }
}

@media only screen and (max-width: 750px) {
  .linksGroup,
  .footreRightContent,
  .footreLeftContent {
    padding: 0;
    width: 100%;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    max-width: 500px;
    margin: 0 auto;
    float: none;
  }

  .linksGroup a {
    float: none;
    display: block;
    width: 100%;
  }

  .linksGroup p {
    border-bottom: 1px solid white;
    margin-bottom: 10px;
  }

  .footreNamadContent .row .col-lg-6 {
    padding: 0;
  }
}

@media only screen and (max-width: 768px) {
  #searchSign {
    top: 27px;
  }

  #pMessageOnModal {
    font-size: 11px;
  }
}

@media only screen and (max-width: 700px) {
  .modalChargeParent {
    margin-bottom: 15px;
  }

  .modalChargeParent:hover {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 715px) {
  #modal-index #modal-index-inside span {
    font-size: 13px;
  }
}

@media only screen and (max-width: 500px) {
  #PersonalIcon,
  #CommercialIcon {
    width: 50%;
    margin: 0;
    text-align: center;
  }
  #PersonalIcon {
    clear: both;
  }
  #timer {
    right: 0;
    left: 0;
    top: 80px;
  }
  #TimerModal p {
    font-size: 15px !important;
  }
  #discountCodeBox,
  #formTypeParent {
    width: 100%;
    float: right;
  }

  .responsiveSpinner {
    position: absolute;
    top: 250px;
  }
  #pMessageOnModal {
    padding: 8px 7px;
  }
  .previewChargeFactor span {
    font-size: 14px;
    margin: 5px;
  }
  .modalChargeParent,
  .modalChargeParent:hover {
    width: 100%;
    max-width: 250px;
    margin: 10px auto;
  }
  #modal-index {
    height: auto;
  }
  #modal-index #modal-index-inside {
    width: 50%;
    margin-bottom: 28px;
  }
}

@media only screen and (max-width: 530px) {
  .package-item {
    width: calc(100% - 25px);
    max-width: 250px;
    margin: 10px auto;
    margin-left: 40px;
  }

  .package-item-panel {
    padding: 20px 0;
  }

  .headerPackage h2 {
    top: -32px;
    font-size: 19px;
  }
}

@media only screen and (max-width: 400px) {
  select {
    padding-right: 1px !important;
    padding-left: 0px !important;
  }
}

@media print {
  body * {
    -webkit-print-color-adjust: exact;
    visibility: hidden;
    height: 0;
  }

  .checkFinalFactor {
    visibility: visible;
    height: auto;
  }

  .max-width-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
  }

  .checkFinalFactor * {
    visibility: visible;
    height: auto;
  }

  .checkFinalFactor .m-goNext-step-BTN {
    visibility: hidden;
  }

  .checkFinalFactor label {
    font-weight: normal !important;
  }
}