/*
  Stylesheet: Post Development Stylesheet

  Add your custom CSS styles styles here
  to prevent override when compiling the 
  main stylesheet
*/

 :lang(ar), :lang(ur), :lang(fa), :lang(he), :lang(ps) {
   .burger-container{
     right: calc(98vw - 50px);
   }
 }


 .sticky-container{
   z-index: 20;
 }

 #language{
   top: 80px!important;
   display: flex;
   flex-wrap: wrap;
   max-height: calc(100vh - 10%);
   overflow-x: scroll;
 }

 #language div:not(.arrow-up){
   flex: 0 0 50%;
   padding: 5px 0;
   font-size: 13px;
 }

 .arrow-up{
   right: 27px!important;
 }

.first-section header h1 span{padding-right:5px}

.dark-theme .form-section-header{border-bottom: 1px solid #25292E;}
.dark-theme [type="color"], .dark-theme [type="date"], .dark-theme [type="datetime"], .dark-theme [type="datetime-local"], .dark-theme [type="email"], .dark-theme  [type="month"], .dark-theme [type="number"], .dark-theme [type="password"], .dark-theme [type="search"], .dark-theme [type="tel"], .dark-theme [type="text"], .dark-theme [type="time"], .dark-theme [type="url"], .dark-theme [type="week"], .dark-theme textarea{background:#25292E; border:1px solid #1a1c20}
.dark-theme [type="color"]:focus, .dark-theme [type="date"]:focus, .dark-theme [type="datetime"]:focus, .dark-theme [type="datetime-local"]:focus, .dark-theme [type="email"]:focus, .dark-theme [type="month"]:focus, .dark-theme [type="number"]:focus, .dark-theme [type="password"]:focus, .dark-theme [type="search"]:focus, .dark-theme [type="tel"]:focus, .dark-theme [type="text"]:focus, .dark-theme [type="time"]:focus, .dark-theme [type="url"]:focus, .dark-theme [type="week"]:focus, .dark-theme textarea:focus{box-shadow:0 0 5px rgba(76, 87, 228, 0.5)}

.select2-container--open {
    z-index: 9999
}

textarea.select2-search__field{
   resize: none;
}
.select2-selection--multiple{
    overflow: hidden !important;
    height: auto !important;
}


.fileUpload {
  position: relative;
  overflow: hidden;
  border: 2px dashed #5fd080;
  background: rgba(95, 208, 128, 0.05);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  padding: 2.5rem 1.25rem;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opactiy=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -khtml-opacity: 0;
  -moz-opacity: 0;
  height: 100%;
}


.newCardElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.newCardElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.newCardElement--invalid {
  border-color: #fa755a;
}

.newCardElement--webkit-autofill {
  background-color: #fefde5 !important;}/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.newCardElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.newCardElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.newCardElement--invalid {
  border-color: #fa755a;
}

.newCardElement--webkit-autofill {
  background-color: #fefde5 !important;
}

/* MOBILE NAV */
.burger-container {
  position: absolute;
  top: 17px;
  right: 10px;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.burger-container:hover {
  opacity: 0.7;
}
.burger-container.active .burger-top {
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
      -ms-transform: translateY(10px) translateX(0) rotate(45deg);
          transform: translateY(10px) translateX(0) rotate(45deg);
  background: #fff;
}
.burger-container.active .burger-middle {
  opacity: 0;
  background: #fff;
}
.burger-container.active .burger-bottom {
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
      -ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
          transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #fff;
}
.burger-container span {
  background: #2B2D42;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  cursor: pointer;
  border-radius: 3px;
}
.burger-container span:nth-of-type(2) {
  top: 10px;
}
.burger-container span:nth-of-type(3) {
  top: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  -webkit-transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  -o-transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  z-index: 50;
}
.overlay:before {
  content: "";
  background: #3D73E8;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  -webkit-transition: left 0.35s ease;
  -o-transition: left 0.35s ease;
  transition: left 0.35s ease;
}
.overlay:after {
  content: "";
  background: #3D73E8;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.overlay.open {
  opacity: 0.98;
  visibility: visible;
  height: 100%;
}
.overlay.open:before {
  left: 0;
}
.overlay.open:after {
  right: 0;
}
.overlay.open li.animated {
  -webkit-animation: fadeInRight 0.5s ease forwards;
          animation: fadeInRight 0.5s ease forwards;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.overlay.open li.animated:nth-of-type(2) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
.overlay.open li.animated:nth-of-type(3) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
.overlay.open li.animated:nth-of-type(4) {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.overlay.open li.animated:nth-of-type(5) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 38px;
  text-align: center;
  z-index: 100;
}
.overlay nav .dropdown-pane {
  background-color: #fefefe;
  border-radius: 0 20px 20px 20px;
  padding: 10px;
  width: 310px;
}
.overlay nav .dropdown-pane ul {
  width: 100%;
}
.overlay nav .dropdown-pane li {
  text-align: left;
  opacity: 1;
  border-bottom: 0px solid rgba(254, 254, 254, 0);
}
.overlay nav .dropdown-pane li a {
  color: #2B2D42;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: 20%;
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  font-weight: var(--font-weight-9);
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}

.callout p {
   margin-bottom: 1rem;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}