/*----------------------Custome Syles---------------------*/

.container {
    width: 100%;
    margin-bottom: -10px;
    height: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
}
.Wrapper
{
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0 0 -50px;
}
.MainHeading {
    padding: 0px;
    margin: 0px;
    color: #2195D5;

    text-align: center;
    font-size: 33pt;

}
.HeaderRow {
     height: 7%;
     padding-left: 40px;
     padding-top: 3px;
}
.MainRow {
     height: 100%;
}
.Gridrow {
    height: 50%;
    padding-bottom: 10px;
}
.AngularjsContent {
      height: 100%;
}
.MainBlock {
    height: 100% !important;
}
.BlockStyle {
    background-color: #222222;

    height: 100%;
}

.BlockStylePopcorn {
    background-color: #222222;

    background-size: 200px;
    background-size: 100%;
    height: 100%;

}


.BlockStyleSubA {
    background-color: #222222;
    height: 40%;
}
.BlockStyleSubB {
    background-color: #222222;
    height: 60%;
}

/*------------------------Support Block Styling----------------------------*/
.CircleContainerA {

     z-index: 999;
    margin-top: 44px;
    height: 100%;
    margin-left: -36px;
}
.CircleA {

    /*width: 200px;
    height: 200px;*/
    width: 120px;
    height: 120px;
    /*margin: 40px;*/
    margin-bottom: 40px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: transparent;
    /*border: 11px solid #2195D5;*/
    padding-top: 12px;
    text-align: center;
}
.okTotal{
    border: 11px solid #2195D5;
}
.warningTotal{
/*#D25C11*/
border: 11px solid #EDA30C;
}
.errorTotal{
border: 11px solid #FC1111;
}


.ValidatorInfo {
    background-color: #337ab7;
}

.ValidatorDisabled {
    background-color: #adadad;
}

.ValidatorError {
    background-color: #FF0000;
}

.ValidatorErrorNoUSerlist {
    background-color: #fd693b;
    color:black;
}

.ValidatorWarning {
    background-color: #FFFF00;
}

.ValidatorOK {
    background-color: Green;
}

.ValidatorBlack,
.ValidatorBlack a,
.ValidatorBlack a span {
    background-color: black;
    color: white;
}

.CircleText {
    /*font-size: 80px;*/
    font-size: 55px;
    color: white;
}
.CircleHeading {
    margin-top: -30px;
    text-align: center;
    font-size: 18px;
    padding-left: 40px;
}
/*---------------------------SMS queue count Styling-------------------------------------------*/
.CircleB {
    width: 90px;
    height: 90px;
    margin-bottom: 13px;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
}
.okSMSQueue{
     border: 9px solid #4FB602;
}

.warningSMSQueue{
 border: 9px solid #EDA30C;
}

.errorSMSQueue{
border: 9px solid #FC1111;
}

.CircleTextB {
    font-size: 50px;
    color: white;
}


/*------------------Styles for the validation page------------------------------------*/

.error {
     background-color: rgb(228, 13, 13);
     padding-top: 20px;
     padding-bottom: 10px;
     margin-bottom: 1px;
     color: white;
 }
 .error a {
     color: white;
 }
 .error a:hover {
        color: #3825C4;
        text-decoration: none;
 }
 .warning {
     background-color: rgb(235, 235, 4);
     padding-bottom: 10px;
     padding-top: 20px;
     margin-bottom: 1px;
 }
  .warning a {
     color: black;
 }
 .warning a:hover {
        color: #3825C4;
        text-decoration: none;
 }

/*-------------News styles---------------------------------------------*/

.NewsDiv {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    background-color: #171717 ;
    color: #FFF;
    font-size: 30px;
    text-align: center
}


/*------------------Circle--------------------------------------------*/
.spinner {

    border-color:#000000 #4785F8;
    border-image:none;
    border-radius: 50% 50% 50% 50%;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-style:solid;
    border-width: 12px;
    width: 90px;
    height: 90px;
}




/*---------Eye-----------------------------------------------------------*/

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%);
}
.ball:after {
  content: "";
  position: absolute;
  top: 5%;
  left: 10%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 24, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(14%, rgba(255, 255, 255, 0.8)), color-stop(24%, rgba(255, 255, 255, 0)));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
}

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -moz-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -ms-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -o-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  -webkit-animation: move-eye-skew 5s ease-out infinite;
  -moz-animation: move-eye-skew 5s ease-out infinite;
  -o-animation: move-eye-skew 5s ease-out infinite;
  -ms-animation: move-eye-skew 5s ease-out infinite;
  animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
}
.iris:after {
  content: "";
  display: block;
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 18.75%;
  left: 18.75%;
  background: rgba(255, 255, 255, 0.2);
}

.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}


@-moz-keyframes move-eye-skew {
  0% {
    -moz-transform: none;
    transform: none; }

  20% {
    -moz-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

  25%, 44% {
    -moz-transform: none;
    transform: none; }

  50%, 60% {
    -moz-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

  66%, 100% {
    -moz-transform: none;
    transform: none; } }

@-webkit-keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
    transform: none; }

  20% {
    -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

  25%, 44% {
    -webkit-transform: none;
    transform: none; }

  50%, 60% {
    -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

  66%, 100% {
    -webkit-transform: none;
    transform: none; } }

@-o-keyframes move-eye-skew {
  0% {
    -o-transform: none;
    transform: none; }

  20% {
    -o-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

  25%, 44% {
    -o-transform: none;
    transform: none; }

  50%, 60% {
    -o-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

  66%, 100% {
    -o-transform: none;
    transform: none; } }

@-ms-keyframes move-eye-skew {
  0% {
    -ms-transform: none;
    transform: none; }

  20% {
    -ms-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

  25%, 44% {
    -ms-transform: none;
    transform: none; }

  50%, 60% {
    -ms-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

  66%, 100% {
    -ms-transform: none;
    transform: none; } }

@keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }

  20% {
    -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    -moz-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    -ms-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    -o-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

  25%, 44% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }

  50%, 60% {
    -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    -moz-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    -ms-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    -o-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

  66%, 100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; } }


/*Validator*/

.ValidatorInfo{
   background-color: #337ab7;
   color: black;
}

.ValidatorDisabled{
    background-color: #adadad;
    color: black;
}
.ValidatorError {
    background-color: #FF0000;
    color:white;

}