/*LOGO*/
.logo-custom{
    width: 80%;
    position: inherit;
}

.logo-custom-40pc{
    width: 40%;
    position: inherit;
}

.logo-custom-full{
    position: inherit;
}


.cell-align{
    text-align: center;
}

/*css loading classes*/

.loader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  width: 70px;
  height: 70px;
  -webkit-animation: spin .9s linear infinite; /* Safari */
  animation: spin .9s linear infinite;
}
/*.carousel{
  width:90%;
  margin-left: 5%;
}*/

.carousel-control.left {
/*   border-bottom-left-radius: 10%;
   border-top-left-radius: 10%;*/
    /*border-bottom-left-radius: 10%;
    border-top-left-radius: 10%;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,left,left,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to left,rgba(0,0,0,.0001) 0,rgb(248, 248, 248) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);*/
    background-image: url('/media/graphics/search_africa_small.png');
    background-repeat: repeat-x;
    size:100%;

}
.carousel-control.right {
  /*  border-bottom-right-radius: 10%;
   border-top-right-radius: 10%;*/
/*right: 0; 
    left: auto;*/
  /* background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to right,rgba(74, 133, 188, 0) 0,rgb(255, 255, 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);*/
     background-image: url('/media/graphics/search_africa_small.png');
      background-repeat: repeat-x;
        size:100%;
   
}

.color_down{

    background-image: -webkit-linear-gradient(right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,right,right,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(47, 89, 242, 0.09) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}

.color_down_right{
  right: 0;
    left: auto;
      background-image: -webkit-linear-gradient(top,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(top,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,top,top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to top,rgba(0,0,0,.0001) 0,rgba(47, 89, 242, 0.09) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}

.color_down_left{
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(top,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,top,top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to top,rgba(0,0,0,.0001) 0,rgba(47, 89, 242, 0.09) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-y;
}

#gray_it{
   -webkit-filter: blur(10px);filter: blur(10px);
   /* -webkit-filter: grayscale(200%);  Safari 6.0 - 9.0 
    filter: grayscale(200%);*/
    background-color: grey;


}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*PP?*/
#ppBody {
    font-size:11pt;
    width:100%;
    margin:0 auto;
    text-align:justify;
}

#ppHeader {
    /*font-family: verdana;*/
    font-size:21pt;
    width:100%;
    margin:0 auto;
}

.ppConsistencies {
    display:none;
}


/*3 PIECE LAYOUT*/
html, body {
    font-family: 'Abril Fatface', serif;
    margin:0;
    padding:0;
    height:100%;
    background-color: #e9e9e9;
/*    background-image: url('/media/graphics/searching_africa.png');
*/   /* background-size: 100%;*/
}

#wrapper {
    min-height:100%;
    position:relative;
    background-color: #e9e9e9;
    border: 0;
    padding: 0;
}

#header {
    background:#ededed;
    padding:5-px;
}

#content {
    padding-bottom: 70px; /* Height of the footer element */
}

#footer {
     position: fixed;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}


/*UPLOADS*/
.fileinput-custom{
    opacity: 0;
    position:absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
}



/*GLYPH ICONS*/


.fa.fa-arrow-circle-o-up{
    font-size: 100px;
    color: gray;
}

.fa.fa-arrow-circle-o-up:hover{
    color: #337ab7;
}

/*PROGRESS BAR*/

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

.progress, .progress-bar{
    height: 28px;
}
.progress-bar{
    padding: 4px;
}



/*LANGUAGE BADGES*/
.label-as-badge {
    border-radius: 1em;
}



/*COLOURS*/
.salangblue{
    color: #337ab7;
}

.tableheading{
    color: rgba(0, 0, 0, 0.70);
}



/*LEADERBOARD STARS*/

.gold {
    color: #D9D919;
}

.silver {
    color: grey;
}

.bronze {
    color: #A67D3D;
}

.whiteStar{
    color: white;
}



/*COLOUMNS*/
.side-col{
    background-color: #f5f5f5 !important;
    height: 100%;
    border: 0;
}


/*LAYOUT COLOURS*/


.col-none{
    background-color: #f5f5f5 !important;
}

.col-orange-strong{
    background-color: #ff8d00;
}

.col-orange-faded{
    background-color: #ffcb5f;
    height: 100%;
    border: 0;
}

.col-yellow-strong{
    background-color: #fffe35;
}

.col-yellow-faded{
    background-color: #ffff8f;
}

.align-center{
    align-content: center !important;
    alignment: center !important;
    text-align: center !important;
}


/*FOOTER*/
.grey-bg{
    background-color: gray;
}

.copyright{
    text-align: center;
    color: white;
}

.footer-table{
    width: 100%;
    background-color: gray;
    border: 0px;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.footer-cust{
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

.footer-logo{
    width: 15%;
    height: 25%;
}

/*rating class*/

.rating{
  color: #a9a9a9;
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

ul.rating {
  display: inline-block;

}

.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.rating .filled {
  color: #D9D919;
}

/*Spinner class*/


.progressCirculardemoBasicUsage body {
  padding: 20px; }

.progressCirculardemoBasicUsage h4 {
  margin: 10px 0; }

.progressCirculardemoBasicUsage md-progress-circular {
  margin-bottom: 20px; }

.progressCirculardemoBasicUsage #loaders > md-switch {
  margin: 0;
  margin-left: 10px;
  margin-top: -10px; }

.progressCirculardemoBasicUsage #loaders > h5 {
  margin-top: 0; }

.progressCirculardemoBasicUsage #loaders > p {
  margin-right: 20px;
  margin-bottom: 24px; }

.progressCirculardemoBasicUsage p.small {
  font-size: 0.8em;
  margin-top: -18px; }

.progressCirculardemoBasicUsage hr {
  width: 100%;
  margin-top: 20px;
  border-color: rgba(221, 221, 177, 0.1); }

.progressCirculardemoBasicUsage p.small > code {
  font-size: 0.8em; }

.progressCirculardemoBasicUsage .visible {
  border-color: rgba(221, 221, 177, 0); }

/*GENERAL LAYOUT PROPERTIES*/
.fill {
    min-height: 100%;
    height: 100%;
}

.inline{
    display: inline-block;
}


/*MARGINS AND PADDING*/
.adv_pad{
    padding-left: 5px;
}

.no-padLR{
    padding-right: 0;
    padding-left: 0;
}

.paddingR1{
    padding-right: 1%;
}

.marginBT5px{
    margin-bottom: 5px;
    margin-top: 5px
}

.nobordernopad{
    border: 0px;
    padding: 0px;
}

.row-margin-2perc{
    margin-bottom: 2%;
}

.row-margin-5perc{
    margin-bottom: 5%;
}

.no-padmar-top{
    padding-top: 0px;
    margin-top: 0px;
}

.no-padmar-bot{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.paddingL5px{
    padding-left: 2px;
}


/*TEXT*/
.blacktext {
    color: black !important;
}



/*ELEMENTS*/
.verticalLineLeft{
    border-left: solid black;
}

.verticalLineRight{
    border-right: solid black;
}

[hidden] {
    display: none;
}

.lang-select-cust{
    float: right;
}

.column-custom-2{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.column-custom-1{
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

.div-stretch{
    height: 80vh;
}

select:required:invalid {
    color: gray;
}

option[value=""][disabled] {
    display: none;
}

option {
    color: black;
}

.form-group.required .control-label:after {
    content:"*";
    color:red;
}

.stats_ui_spread { 
    background: linear-gradient(to top, rgba(51, 122, 183, 0.9)  98%,#3b4045 2%);
    /*box-shadow: 0 0 4px 0 #000000;*/
    margin: 3%; 
    border-bottom-left-radius: 1%;
    border-bottom-right-radius: 1%
}

.stats_ui_spread a{
  color: #cccccc;
}

.stats_ui_spread a:hover{
  color: white;
  text-decoration: none;
}

.main_menu_ui_spread { 
    background-color: rgba(51, 122, 183, 0.87);
 /*   box-shadow: 0 0 4px 0 #000000;*/
    margin: 1%; 
    height:220px;
    border-bottom-left-radius: 1%;
    border-bottom-right-radius: 1%
}

.main_menu_ui_spread a{
  color: white;
}

.main_menu_ui_spread a:hover{
  color: white;
  text-decoration: none;
  box-shadow: 0 0 4px 0 #000000;
}

/* for tabs specifically the user stats tab*/
.header_backgroud_img{

  background: url('https://secure.gravatar.com/avatar/c2e712b6298997fc945c315a8721594b?d=mm')  no-repeat;
  height: 80px;

}

/*pagination style*/
.paginationclass{
margin: 15px 28px; 
 }
.paginationclass div{
   
    
}
.paginationclass span{
    margin:0px 15px;
    display:inline-block;
    padding:5px 0px;
    text-align:left;
    width:70px;
}
.pagination-controle li{
    display: inline-block;
    
}
.pagination-controle button{
    width: 63px;
    font-size: 12px;
    margin-left: 13px;
    cursor:pointer;
}
.pagination-div{
    margin-left:20px;
}



/*------>>> Animations <<<-----*/
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in;
  -moz-transition: opacity 0.25s ease-in;
  -o-transition: opacity 0.25s ease-in;
  -ms-transition: opacity 0.25s ease-in;
  transition: opacity 0.25s ease-in;
  transition-delay: 0.25s;
}
.fade.in{
  opacity: 1;
}
.animate-switch-container {
  position:relative;
  overflow: hidden;
  padding:20px;
 
}
.animate-switch{
  padding:10px;
  width: 100%;
}
.animate-switch.ng-animate {
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
  position:absolute;

}
/* hide leaving slide  */
/* show */
.animate-switch.ng-leave{
  right:0;
}
/* hide */
.forward .animate-switch.ng-leave.ng-leave-active{
  right:-100%;
}
.backward .animate-switch.ng-leave.ng-leave-active{
  right: 100%;
}
/* show entering slide  */
/* hide */
.forward .animate-switch.ng-enter {
  right:100%;
}
.backward .animate-switch.ng-enter {
  right:-100%;
}
/* show */
.animate-switch.ng-enter.ng-enter-active {
  right:0;
}


/*-----------------------------------*/
/*------>>> Validation <<<-----------*/
/*-----------------------------------*/

.form-validation input.ng-invalid-maxlength {
  border:2px solid #D9272D;
}


.length-error {
  color: #D9272D;
  display: block;
  font-size: 12px;
  opacity: .8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  line-height: 18px;
  padding: 10px 10px 5px 10px;
  margin: -25px 0 20px 0;
  background-color: #E3E3E3;
  border-radius: 0 0 5px 5px;
}

.input-error {
  border: 2px solid #D9272D;
}

/*-----------------------------------*/
/*------->>> FORM STYLES <<<---------*/
/*-----------------------------------*/

.note {
  display: block;
  font-size: 12px;
  opacity: .8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  line-height: 18px;
}

.note-input {
  padding: 10px 10px 5px 10px;
  margin: -25px 0 20px 0;
  background-color: #E3E3E3;
  border-radius: 0 0 5px 5px;
}

.note-input-error, .required-error-banner {
  background-color: rgba(217, 39, 45, 0.5);
}

/*-----------------------------------*/
/*----------->>> HELPERS <<<-------------*/
/*-----------------------------------*/

/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}


/*progress multi step registration*/

  .container_multi {
 
 
  }
  .progressbar_multi {
      counter-reset: step;
  }
  .progressbar_multi li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
  }
  .progressbar_multi li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar_multi li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar_multi li:first-child:after {
      content: none;
  }
  .progressbar_multi li.active {
      color: green;
  }
  .progressbar_multi li.active:before {
      border-color: #55b776;
  }
  .progressbar_multi li.active + li:after {
      background-color: #55b776;
  }