:root{
  --bodyForn: 'Inter', 'Tajawal', sans-serif;
  --headingColor:#000000;
  --bodyColor:#64626A;
  --orangeColor:#FF6846;
  --grayColor:#F9F9F9;
  --textShapeColor:#FFDEA7;
  --whiteColor:#fff;
}
body {
  font-family: var(--bodyForn);
  font-weight: 400; 
  color: var(--bodyColor);
  font-size: 16px;  
}
  
button {
  cursor: pointer; }

a:focus,
.button:focus {
  text-decoration: none;
  outline: none; }

a:focus,
a:hover {
  color: inherit;
  text-decoration: none; }

a,
button {
  color: inherit;
  outline: medium none; }

button:focus, input:focus, input:focus, textarea, textarea:focus {
  outline: 0; }

 
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bodyForn);
  color: var(--headingColor);
  margin-top: 0px; 
  font-weight: 500;
  text-transform: normal;
 }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit; }

h1 {
  font-size: 40px;
  font-weight: 500; }

h2 {
  font-size: 35px; }

h3 {
  font-size: 28px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

ul {
  margin: 0px;
  padding: 0px; }

li {
  list-style: none; }

 .padding{
   padding-right: 0;
 }
a, button{
   outline: none;
   border: none;
   text-decoration: none;
 }

 .container{
   max-width: 1140px;
 }
img{
  max-width: 100%;
}
.zIndex2{
  z-index: 2;
}
.zIndex3{
  z-index: 3;
}
.zIndex4{
  z-index: 4;
}
.zIndex5{
  z-index: 5;
}
.zIndex6{
  z-index: 6;
}
.zIndex7{
  z-index: 7;
}
.zIndex8{
  z-index: 9;
}





.theme-btn {
  padding: 13px 30px;
  background: #ff6846;
  display: block;
  width: max-content;
  margin: auto;
  position: relative;
  z-index: 2;
  color: #fff;
  border-radius: 5px;
  transition: .3s;
  border: 1px solid #ff6846;
}

.theme-btn:hover {
  background: #fff;
  color: #ff6846;
}

.theme-btn.inactive {
  color: #FF6846;
  border-color: #FF6846;
  background: #fff;
}
.theme-btn.inactive:hover {
  color: #fff;
  border-color: #FF6846;
  background: #FF6846;
}

.theme-btn-small {
    padding: 0px;
    background: #ff6846;
    color: #fff;
    border-radius: 5px;
    transition: .3s;
    border: 1px solid #ff6846;
}

.theme-btn-small:hover {
    background: #fff;
    color: #ff6846;
}

.theme-btn-small.inactive {
    color: #FF6846;
    border-color: #FF6846;
    background: #fff;
}

.theme-btn-small.inactive:hover {
    color: #fff;
    border-color: #FF6846;
    background: #FF6846;
}

/* default-css END 
================================== */
 


.header-area {
  position: relative;
  top: 0;
  left: 0;
  padding: 30px 0;
  width: 100%;
  z-index: 99;
  background: #F9F9F9;
  border-bottom: 3px solid #8585850a;
  transition: .3s;
}
.header-area.stickyHeader {
  position: fixed;
  padding: 15px 0;
}
.menu-area nav ul li {
  list-style: none;
  display: inline-block;
  margin-left: 20px;
}

.menu-area nav ul li a {
  font-size: 16px; 
  display: inline-block;
  position: relative;
}
.menu-area nav ul li a.theme-btn {
  background: white;
  display: inline-block;
  padding: 0 50px;
  height: 48px;
  color: var(--orangeColor);
  line-height: 48px;
  border-radius: 30px;
  border: 2px solid white;
  transition: .3s;
}

.checkout {
    font-family: 'Inter', 'Tajawal', sans-serif;
}

.checkout p {
    color: #000;
    font-weight: 400;
    font-size: 16px;
}

.checkout h1 {
    color: #64626A;
    font-weight: 400;
    font-size: 16px;
    padding-bottom: 10px;
}

.checkout h1 span {
    color: #64626A;
    font-weight: 400;
    font-size: 16px;
}

.right-menus ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.right-menus ul li {
  display: block;
  margin-left: 15px;
  position: relative;
} 
.right-menus ul li a {
  display: block;
  width: max-content;
  height: max-content;
  position: relative;
}
.right-menus ul li a.active {
  padding: 10px;
  background: var(--orangeColor);
  border-radius: 5px;
  color: #fff;
}
a.active-products-none:after {
    content: "";
}
a.active-products:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  animation-name: red;
  top: 2px;
  right: -4px;
  background: #ff6846;
  border-radius: 50%;
}
.right-menus ul li ul {
  position: absolute;
  top: 50px;
  right: -80px;
  z-index: 9;
  width: 300px;
  background: #F8F8F8;
  box-shadow: 0 30px 80px #0000001c;
  border-radius: 10px; /* 30px */
  display: block;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.right-menus ul li:hover ul {
  opacity: 1;
  visibility: visible;
}
.right-menus ul li ul li {
  margin: 0;
  background: #fff;
  padding:15px 30px;
  padding-top: 20px;
}
.right-menus ul li ul img.upArr {
  position: absolute;
  top: -20px;
  right: 75px;
}
.first-child {
    border-radius: 10px 10px 0 0px; /* 28px 28px 0 0px */
}
.right-menus ul li ul li p{
  margin-bottom: 5px;
  color: red;
}
.right-menus ul li ul li h1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 22px;
  margin-bottom: 0;
}
.right-menus ul li ul li h1 img{
  cursor: pointer;
}
.right-menus ul li ul a.theme-btn {
  display: block;
  width: 80%;
  margin: 27px auto;
  text-align: center;
  padding: 8px;
}
.menu-area nav ul li a.active-btn {
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--orangeColor);
  border-radius: 3px;
  transition: .3s;
}

.menu-area nav ul li a.active-btn:hover {
  background: var(--orangeColor);
  color: #fff;
  border-color: var(--orangeColor);
}
.scrolling {
  position: absolute;
  width: 0%;
  height: 3px;
  background: red;
  bottom: -3px;
}
a.logo {
  display: inline-block;
  width: max-content;
}
.logo-area {
  display: flex;
  align-items: center;
}







/* humbergar */
.bar {
  width: 35px;
  height: 25px;
  display: none;
  margin-right: 30px;
}
.bar a {
  width: 35px;
  height: 25px;
  float: right;
  position: relative;
} 
.bar a span {
  width: 100%;
  height: 3px;
  background: #000;
  display: block;
  position: relative;
  top: 11px;
  border-radius: 30px;
  transition: .3s;
} 
.bar a span:before {left: 0;content: "";position: absolute;width: 100%;height: 100%;background: #000;bottom: 10px;border-radius: 30px;transition: .3s;} 
.bar a span:after {left: 0;content: "";position: absolute;width: 100%;height: 100%;background: #000;bottom: -10px;border-radius: 30px;transition: .3s;}
 
/* humbarger END */
 

/* mobile-menu START */
.mobile-menu {
  position: fixed;
  width: 320px;
  height: 100vh;
  background: #ffffff;
  z-index: 99;
  box-shadow: 0px 0px 9px -1px #737373;
  top: 0;
  left: 0;
  transition: .3s;
  margin-left: -400px;
  padding-left: 40px;
  padding-top: 100px;
}
.siteBar{
  margin-left: 0; 
} 
.mobile-menu  nav ul li {
  list-style: none;
  display: block;
}

.mobile-menu nav ul li a { 
  font-size: 16px;
  line-height: 40px;
  transition: .3s;
}  
.mobile-menu a.theme-btn {
  margin-top: 60px;
  margin-left: 0;
} 
.mobile-menu a.theme-btn {
  margin-top: 60px;
  margin-left: 0;
  height: 45px;
  line-height: 45px;
}
.mobile-menu .user a {
    display: block;
    width: 100%;
    padding: 0; 
    line-height: 40px;
    font-size: 16px;
}

.mobile-menu .user {
    display: block;
}

.mobile-menu .user a:hover {
    background: none;
    opacity: .5;
}
.mobile-menu a.bars {
  position: absolute;
  right: 20px;
  top: 15px;
  width: 40px;
  height: 40px;
  background: #ff4900;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  box-shadow: 0px 0px 17px -2px #0000004a;
}





/* Header section END &&& Hero-area STARTED*/






.hero-area { 
  padding-top: 100px;
  background: #f9f9f9;
}

.hero-wrp {
  text-align: center;
}

.hero-wrp h1 {
    font-size: 60px;
    margin-bottom: 25px;
    font-family: 'Libre Baskerville', 'Tajawal';
}

.hero-wrp p {
    font-size: 20px;
}

.hero-btn  a.theme-btn {
  margin: auto;
  z-index: 2;
  padding-right: 100px;
  padding-left: 100px;

} 
.hero-btn img {
  margin-bottom: -115px;
} 

span.withshape {
  display: inline-block;
  position: relative; 
}

span.withshape:before {
  content: "";
  position: absolute;
  width: 115%;
  height: 60%;
  background: #FFDEA7;
  top: 6px;
  right: -35px;
  z-index: -1;
}
span.withshape.softblue:before {
  background: #c0eef5 !important;
}
span.withshape.softgreen:before {
  background: #b7eadb !important;
} 
.hero-bottom {
  position: relative;
  z-index: 2;
  padding-bottom: 50px; 
  padding-top: 100px;
}
.hero-bottom img {
  width: 90%;
}
.hero-bottom img.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  object-position: top;
}


/* Hero section END &&& Development-area START*/


 
.development-area {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}

.section-title {
  text-align: center;
  padding-bottom: 60px;
}

.section-title h1 {
    font-size: 48px;
    font-family: 'Libre Baskerville', 'Tajawal';
}

.section-title h2 {
    font-size: 60px;
    font-family: 'Libre Baskerville', 'Tajawal';
}

.section-title p {
    font-size: 20px;
}

ul#pills-tab li {
  width: 33.3%;
}

ul#pills-tab li button {
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  position: relative;
  padding-right: 20px;
  border-top: 2px solid #D1D0D6;
  padding-top: 25px;
  transition: .3s;
}

ul#pills-tab li button.active {
  border-color: #FA6402;
  padding-left: 30px;
}

ul#pills-tab {
  margin-bottom: 30px;
}

ul#pills-tab li button.active:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid black;
  border-right: 2px solid black;
  transform: rotate(45deg);
  top: 33px;
  left: 0;
}
.development-area img.shape-top {
  position: absolute;
  top: 1%;
  left: 15%;
  z-index: -1;
}
.development-area img.shape-bottom {
  position: absolute;
  bottom: 0;
  right: 15%;
}






/* Plan-area END &&& Development-area STARTED*/





.pricing-area {
  padding: 70px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.pricing-area img.shape-top {
  position: absolute;
  top: -65px;
  left: 25%;
  z-index: -1;
}
.pricing-area img.shape-bottom-traingle {
  position: absolute;
  top: 8.5%;
  right: -48%;
  z-index: -2;
  width: 90%;
}
.pricing-area img.shape-bottom {
  position: absolute;
  top: 20px;
  left: -53%;
  width: 100%;
  z-index: -2;
}
.pricing-area img.shape-bottom-dots {
  position: absolute;
  top: 27%;
  right: 18%;
  z-index: -1;
}
.pricing-area img.shape-bottom-right {
    position: absolute;
    top: 29%;
    left: 19%;
    height: 200px;
}
.all-plans.monthly{
  display: none;
}

.plane-option.monthly .all-plans.monthly{
  display: flex;
}
.plane-option.monthly .all-plans.annually{
  display: none;
}
.all-plans {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid #D1D0D6;
  position: relative;
  z-index: 2;
  border-radius: 5px;
}

.single-plan {
  background: #fff;
  width: 25%;
  text-align: center;
  padding: 40px 20px;
  border-right: 1px solid #D1D0D6;
}

.single-plan h5 {
  font-size: 25px;
  margin-bottom: 60px;
}

.single-plan h5 small {
  display: block;
  font-size: 16px;
  margin-top: 5px;
  color: #64626A;
}

.single-plan  h3 {
  font-size: 36px;
  font-weight: bold;
  font-family: 'Libre Baskerville', 'Tajawal';
}

.single-plan h5 {
    font-size: 24px;
    font-weight: normal;
}

.single-plan  p {
  margin-bottom: 20px;
}

.single-plan  a {text-decoration: underline;color: #3B3A40;}

.single-plan a.theme-btn {
  text-decoration: none;
  color: #fff;
  margin-top: 80px;
}

.single-plan a.theme-btn:hover {
  color: #000;
} 
ul.planChange {
  display: flex;
  width: max-content;
  margin: auto;
  margin-bottom: 60px;
  align-items: center;
  justify-content: center;
}

ul.planChange li {
  color: #3B3A40;
}

ul.planChange li span {
    display: block;
    font-size: 86%;
    text-align: center;
    color: #FF6846;
    font-family: 'Libre Baskerville', 'Tajawal';
}

 button.plan-change-btn {
  display: block;
  width: 88px;
  height: 48px;
  background-color: #FF6846;
  margin: 0 25px;
  border-radius: 150px;
  position: relative;
}

button.plan-change-btn-ar {
    display: block;
    width: 88px;
    height: 48px;
    background-color: #FF6846;
    margin: 0 25px;
    border-radius: 150px;
    position: relative;
}

button.plan-change-btn:after {
  content: "";
  position: absolute;
  width: 60%;
  height: 100%;
  background: white;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: scale(.8);
  transition: .3s;
}
button.plan-change-btn-ar:after {
    content: "";
    position: absolute;
    width: 60%;
    height: 100%;
    background: white;
    border-radius: 50%;
    top: 0;
    right: 0;
    transform: scale(.8);
    transition: .3s;
}
.plane-option.monthly button.plan-change-btn:after {
    left: 35px;
}
.plane-option.monthly button.plan-change-btn-ar:after {
    right: 35px;
}
p.bellow-text {
  text-align: center;
  margin-top: 60px;
  font-size: 18px;
}
.data-table {
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
  margin-bottom: 60px;
}

table thead {
  background: #F9F9F9;
}

table tr td,table tr th {
  padding: 13px 20px;
  color: black;
}

table tr th {
  color: #8E8C95;
  font-weight: 400;
}
.custom-order {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 20px;
  background: #F9F9F9;
  flex-wrap: wrap;
}

.custom-order h5 {
  font-size: 22px;
  margin: 0;
}

.custom-order p {
  margin: 0 40px;
}

.custom-order a.theme-btn {
  margin: 0;
}
table tr td:first-child , 
table tr th:first-child{    
  width: 350px;
}
.section-title.inner-section {
  margin-top: 40px;
}


 












/* Plann section END &&& === Success-team-area && It-area === STARTED*/


 
.It-area {
  background: #F9F9F9;
  clip-path: polygon(100% 12%,0% 0%,0% 100%,100% 100%);
  position: relative;
  padding-top: 300px; 
  overflow: hidden;
}
.It-area img.shape {
  position: absolute;
  top: 6%;
  left: 13%;
  z-index: -1;
}
.it-section-title
{
    margin-top: -30px;
}
.it-section-title h1 {
    font-size: 60px;
    font-family: 'Libre Baskerville', 'Tajawal';
}
.it-section-title p {
    font-size: 20px;
}
.It-area img.shape2 {
  position: absolute;
  right: 10%;
  top: 15%;
  z-index: -1;
}
.It-area img.roundShape {
  position: absolute;
  top: 43%;
  right: 15%;
  z-index: 1;
}
.It-area img.bottomShape {
  position: absolute;
  bottom: 3%;
  left: 18%;
  z-index: -1;
} 
.alltheblks {
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}
 
.it-blk {
  padding: 50px;
  background: #fff;
  max-width: 100%;
  text-align: center;
  border-radius: 40px;
  border: 15px solid #78787808;
  margin-top: 20px;
}

.it-blk img {
  height: 40px;
  margin-bottom: 30px;
}

.it-blk  h5 {
  margin-bottom: 10px;
}

.it-blk p {
  margin: 0;
  font-size: 14px;
}



/* Success-area STARTED */
 

.success-team-area {
  padding: 100px 0;
  background: #fff;
}
.experiences h1 span.withshape {
    z-index: 2;
    font-size: 80px;
    font-family: 'Libre Baskerville', 'Tajawal';
}
.roundText {
  position: relative;
  z-index: 2;
  padding-left: 50px;
  height: 500px;
  display: flex;
  align-items: center;
}
.roundText:before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  background: #F9F9F9;
  border-radius: 50%;
  top: 50%;
  left: 30px;
  z-index: -1;
  transform: translateY(-50%);
}

.roundText:after {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border: 1px dashed #F9CDD6;
  border-radius: 50%;
  top: 50%; 
  left: 30px;
  z-index: -1;
  transform: translateY(-50%) scale(1.1);
  /* animation: rounding 10s infinite; */
}

@keyframes rounding{
  0%{
    transform: translateY(-50%) scale(1.1) rotate(0deg);
  }
  100%{
    transform: translateY(-50%) scale(1.1) rotate(360deg);
  }
}

.roundText h1 {
    margin: 0;
    font-family: 'Libre Baskerville', 'Tajawal';
    font-size: 60px;
}
 
.roundText h1 span {
  position: relative;
  z-index: 2;
}
.roundText h1 span.withshape:before {
  background: #F9CDD6;
}
.success-wrp {
  position: relative;
  z-index: 2;
  padding-right: 60px;
}

.success-wrp img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}

.success-wrp p {
  margin: 0;
}
.all-experiences {
  display: flex;
  justify-content: space-between;
  margin: 50px
}

.experiences {
  text-align: center;
  margin-top: 30px;
}

.experiences p {
  margin-top: 5px;
}
.experiences h1 span.withshape::before {
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: 0;
  height: 40%;
}
.news-lattter {
  padding: 50px;
  background: #F9F9F9;
}

.newslattter-wrp p {
  margin: 0;
}

form.newslatterform {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
form.newslatterform input {
    margin: 0;
    height: 50px;
    margin-right: 20px;
}

form.newslatterform-ar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
form.newslatterform-ar input {
    margin: 0;
    height: 50px;
    margin-left: 20px;
}
.experiences h1 {
  font-size: 60px;
}



/* === Success-team-area && It-area === END &&& Contact-area STARTED */


 


.contact-area {
  padding: 70px 0;
  position: relative;
}

.contact-wrp h2 {
    font-size: 52px;
    font-family: 'Libre Baskerville', 'Tajawal';
}
.contact-wrp a.theme-btn {
  margin: 0;
  display: inline-block;
  margin-right: 15px;
  margin-top: 30px;
}
.companys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 70px;
}

.companys img {
  margin-top: 30px;
}
.contact-form {
  width: 100%;
  background: #fff;
  box-shadow: 0 30px 80px #0000001c;
  padding: 35px 30px;
  border-radius: 20px;
}

.contact-form h4 {
  font-size: 28px;
}

.contact-form p {
  margin-bottom: 25px;
}

label {
  display: block;
  width: 100%;
  margin-top: 20px;
  color: #000;
}
.h75{
  height: 75px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #D1D0D6;
  border-radius: 5px;
  margin-top: 5px;
}
textarea {
  height: 150px;
  margin-bottom: 30px;
}

.contact-form button {
  width: 100%;
}

.contact-wrp {
  margin-top: 80px;
}

.inp-grp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inp-grp label {
  width: 48%;
}
label sup{
  color: red;
}
.nice-select {
  position: relative;
  width: 100%;
  display: block;
  margin-top: 5px;
  border: 1px solid #D1D0D6;
}

.nice-select ul.list {
  width: 100%;
}

.nice-select span.current {
  color: #000;
  opacity: .68;
  font-size: 16px;
}
.contact-area img.triangle {
  transform: rotate(180deg);
  position: absolute;
  top: 0;
  z-index: -5;
  width: 75%;
  left: -7%;
}
.contact-area img.dotShape {
  position: absolute;
  right: 19%;
  top: 0;
  z-index: -1;
}
.contact-area img.lineShape {
  bottom: 18%;
  position: absolute;
  left: 15%;
  z-index: -1;
}
.contact-area img.shape {
  position: absolute;
  top: 0;
  left: 11%;
  z-index: -1;
}





/* Contact section END &&& Footer-area STARTED*/
  


.footer-area {
  padding: 100px 0;
  background: #F9F9F9;
}

.footer-logo {
    text-align: center; /* Mazen */
}

.footer-logo a {
    display: block;
    /*width: max-content;*/
    margin-bottom: 30px;
    text-align: center; /* Mazen */
}

.footer-logo p {
    margin: 0;
    font-size: 14px;
    text-align: center; /* Mazen */
}

.footer-menus {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-menus h4 {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 400;
}

.footer-menus ul li {
  display: block;
}

.footer-menus ul li a {
  display: block;
  margin-top: 7px;
  transition: .3s;
  font-size: 14px;
  font-weight: 400;
}

.footer-menus ul li a:hover {
  color: #ff6846;
}
 

/* DevExtreme */
.dx-widget {
    font-family: 'Inter', 'Tajawal';
}

.dx-tagbox .dx-texteditor-input {
    width: auto;
    padding: 10px;
    border: 1px solid #D1D0D6;
    border-radius: 10px;
    margin-top: 5px;
}

.dx-texteditor.dx-state-hover {
    border-color: #d4d4d9;
}

.dx-texteditor.dx-state-active.dx-editor-filled,
.dx-texteditor.dx-state-active.dx-editor-outlined,
.dx-texteditor.dx-state-active.dx-editor-underlined,
.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-focused.dx-editor-underlined {
    border-color: #d4d4d9;
}

.dx-tag {
    max-width: calc(100% - 1px);
    display: inline-block;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.dx-tag-container.dx-texteditor-input-container {
    padding: 0 4px 4px 0;
    outline: 0;
}

.dx-tag-content {
    position: relative;
    display: inline-block;
    min-width: 30px;
    text-align: center;
    cursor: pointer;
    margin: 4px 0 0 4px;
    padding: 8px 25px 4px 6px; /*3px 25px 4px 6px*/
    min-width: 40px;
    background-color: #eaeaea; /*ddd*/
    border-radius: 2px;
    color: #333; /*333*/
    height: 35px;
}

/* 
  Page END
*/

.swal-title {
    font-family: 'Inter', 'Tajawal', sans-serif;
}

.swal-text {
    font-family: 'Inter', 'Tajawal', sans-serif;
}

.swal-button--confirm, .sweet-alert button {
    padding: 7px 19px;
    border-radius: 2px;
    background: #FF6846;
    background-color: #FF6846;
    font-size: 14px;
    border: 1px solid #FF6846;
    font-family: 'Inter', 'Tajawal', sans-serif;
    color: #fff;
}

.swal-button--confirm:hover, .sweet-alert button:hover {
    padding: 7px 19px;
    border-radius: 2px;
    background: #fff;
    background-color: #fff;
    font-size: 14px;
    border: 1px solid #FF6846;
    font-family: 'Inter', 'Tajawal', sans-serif;
    color: #FF6846;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.swal-button--confirm:active, .sweet-alert button:active {
    padding: 7px 19px;
    border-radius: 2px;
    background: #fff;
    background-color: #fff;
    font-size: 14px;
    border: 1px solid #FF6846;
    font-family: 'Inter', 'Tajawal', sans-serif;
    color: #FF6846;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.swal-footer {
    background-color: rgb(245, 248, 250);
    margin-top: 32px;
    border-top: 1px solid #E9EEF1;
    overflow: hidden;
    font-family: 'Inter', 'Tajawal', sans-serif;
}

.popup-message {
    font-family: var(--bodyForn);
    font-weight: 400;
    color: var(--bodyColor);
    font-size: 16px;
    position: relative;
    text-align: center;
}

.popup-message-vertical {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.button-none {
    background: none;
    border: 0px;
}