/* Iran Yekan font import */
@import url(../fonts/IRANYekan/WebFonts/css/fontiran.css);

/* Dana Font */
@import url(../fonts/Dana/css/dana.css);

.apim-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
}
.apim-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid rgb(8, 165, 212);
  border-color:  rgb(8, 165, 212) transparent  rgb(8, 165, 212) transparent;
  animation: apim-dual-ring 1.2s linear infinite;
}
@keyframes apim-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.slideContentTitle span{
  background: #f05107;
  color: rgb(255, 255, 255);
}
.image-load-frame {
	background: #efefef;
    width: 100%;
    height: 145px;
    position: relative;
}
div.image-load-animation1 {
  width: 40px;
  height: 145px;
  background-color: #efefef;
  position: absolute;
  -webkit-animation-name: image-load-animation1; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: image-load-animation1;
  animation-duration: 2s;
  animation-iteration-count: 2;
}
div.image-load-animation2 {
  width: 40px;
  height: 145px;
  background-color: #efefef;
  position: absolute;
  -webkit-animation-name: image-load-animation2; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: image-load-animation2;
  animation-duration: 2s;
  animation-iteration-count: 2;
}

/* Standard syntax */
@keyframes image-load-animation1 {
  0%   {background-color:#efefef; left:0px; top:0px;}
  70%  {background-color:#e3e3e3; left:160px; top:0px;}
  100% {background-color:#efefef; left:0px; top:0px;}
}
@keyframes image-load-animation2 {
  0%   {background-color:#efefef; left:100px; top:0px;}
  75%  {background-color:#e3e3e3; left:160px; top:0px;}
  100% {background-color:#efefef; left:0px; top:0px;}
}
body {
  margin: 0;
  height: 100%;
}
a {
  text-decoration: none;
}
/* Hiding models section in swagger console */
.wrapper section.models {
    display: none;
}

/* Static style for graphql-explorer library */
.graphiql-explorer-root {
    max-height: 750px;
    overflow-y: scroll;
}

.react-tooltip-lite {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(66, 89, 129, 0.3);
  padding: 20px !important;
}

.calendarContainer *, .datepicker-input {
  font-family: 'iranyekan' !important;
  font-size: 11px;
}

#gear1, #gear2 {
  color: #888;
  display: block;
  float: left;
  position: absolute;
  transform: none;
}
          
#gear1 {
  top: 34px;
  color: #00AECD;
}
          
#gear2 {
  left: 54px;
  color: #F48138;
}

.spinnerWrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50px, -50px);
  direction: ltr;
}

.spin {
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}

.spin-back {
  -webkit-animation:spin-back 4s linear infinite;
  -moz-animation:spin-back 4s linear infinite;
  animation:spin-back 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spin-back { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin-back { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin-back { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

.spinnerHolder {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ffffffb1;
  z-index: 10000000
}