/*=========================================================================
    Reset
===========================================================================*/

html,
body{
    /*min-height: 100vh;*/
    /*position: relative;*/
}

body{
    color: #000;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #f8f8f8;
    /*padding-left: 100px;*/
}
a{
    color: #000000;
}
a:hover, a:focus, .active > a, .open > a, .c-primary,
.btn:hover, .btn:focus, .btn.focus{
    color: #36accf;
    text-decoration: none;
}
img{
    max-width: 100%;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}

h3{
    font-size: 20px;
}

/* Form */
.form-control{
    height: 40px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    border: 1px solid #e6e6e6;
    outline: none !important;
    box-shadow:         none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow:    none !important;
    -ms-box-shadow:     none !important;
    -o-box-shadow:      none !important;    
}
.input-lg{
    height: 52px;
}
.form-group label{
    margin-bottom: 20px;
    color: #84939c;
    font-weight: 500;
    display: block;
}

/* Button */
.btn{
    font-size: 15px;
    line-height: 1.33857143;
    padding: 9px 25px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    outline:  none !important;
    border-radius: 0px;
    -webkit-border-radius: 0px;
}
.btn-primary{
    color: #FFF;
    background-color: #36accf;
    border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover{
    color: #FFF;
    background-color: #258EAD;
    border-color: transparent;
}

.btn-grey{
    color: #000;
    background-color: #efefef;
    border-color: transparent;
}
.btn-grey:hover,
.btn-grey:focus,
.btn-grey:active,
.btn-grey:active:focus,
.btn-grey:active:hover{
    color: #000;
    background-color: #CECCCC;
    border-color: transparent;
}

.btn-white{
    color: #84939c;
    background-color: #FFF;
    border-color: #ddd;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white:active:focus,
.btn-white:active:hover{
    color: #FFF;
    background-color: #36accf;
    border-color: #00799c;
}

.btn-black{
    color: #FFF;
    background-color: #192138;
    border-color: transparent;
}
.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black:active:focus,
.btn-black:active:hover{
    color: #FFF;
    background-color: #0F1425;
    border-color: transparent;
}


/* Button Size */
.btn-sm{
    padding: 5px 25px;
}
.btn-lg{
    padding: 15px 25px;
}

/*=========================================================================
    Header
===========================================================================*/

/* Navbar Header */
.navbar-header{
    float: left;    
}
.navbar-brand{
    float: none;
    height: 70px;
    overflow: hidden;
    display: block;
    padding: 20px 15px;
    font-size: 16px;
}
.navbar-brand > img{
    max-width: 40px;
}
.navbar-brand > span{
    font-size: 25px;
    font-weight: 500;    
}
.navbar-brand > span,
.navbar-brand > img{
    vertical-align:middle;
    display: inline-block;
    color: #36ACCF;
    margin: 0 3px;
}

.navbar-toggle{
    padding: 9px 10px;
    margin-top: 21px;
    /*margin-left: 30px;*/
    margin-bottom: 21px;
    display: block;
    float: left;
    margin-right: 0px;
}
.navbar-toggle .icon-bar{
    background-color: #FFF;
}
.navbar-toggle .icon-bar + .icon-bar{
    margin-top: 6px;
}

/* Navbar */
.navbar{
    margin-bottom: 0px;
    /*height: 100%;*/
    /*padding: 0 5%;*/
    background-color: #FFF;
}

.navbar-fixed-top.fixed{
    background-color: #0F1425 !important;
    background-color: rgba(15, 20, 37, 0.45) !important;
}

/* Navbar Search */
.navbar-search{
    padding: 15px 0px;
    text-align: right;
}
.navbar-search .form-control{
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 1px solid #e6e6e6;
}

.mini-container{
    max-width: 1000px;
    margin: 0 auto;
}

/*=========================================================================
    Table
===========================================================================*/

.table-custom{
    margin-bottom: 0px;
}

.table-custom > thead > tr > th,
.table-custom > tbody > tr > th,
.table-custom > tfoot > tr > th,
.table-custom > thead > tr > td,
.table-custom > tbody > tr > td,
.table-custom > tfoot > tr > td{vertical-align: middle;padding: 15px;font-size: 16px;}


.table-custom > thead > tr > th{
    color: #84939c;
    font-weight: 500;
}

.thead-bg > thead > tr > th{
    border-bottom-width: 0px;
}
.thead-bg tr > th{
    background-color: #f9fbff;
    color: #84939c;
    font-weight: 500;
}

/* Table List View */
.table-listview > thead > tr > th{
    font-size: 14px;
}
.table-listview > tbody > tr > td,
.table-listview > thead > tr > th{
    text-align: right;
    padding: 24px 20px;
}
.table-listview > thead > tr > th{
    padding: 15px 20px;
}
.table-listview > thead > tr > th,
.thead-bg > thead > tr > th{
    border-bottom-width: 0px;
}
.table-listview > tbody > tr > td{
    font-size: 16px;
    white-space: nowrap;
}
.table-listview > tbody > tr > td:first-child{
    border-left: 5px solid #01a03a;
}
.table-listview > tbody > tr > td:first-child.cancle-border{
    border-left-color: #ed0000;
}
.table-listview > thead > tr > th:first-child,
.table-listview > tbody > tr > td:first-child{
    text-align: left;
}

.table-link{
    color: #3fb3d6;
    font-weight: 500;
}

/*=========================================================================
    Validate Step
===========================================================================*/

.grey{
    color: #949494;
}
label.grey{
    color: #84939c;
    font-weight: 500;
    margin-bottom: 0px;
}

.check{
    color: #009535 !important;
}
.cancle{
    color: #ed0000 !important;
}
.warn{
    color: #f8b310 !important;
}
.info,
.info-table{
    color: #f8b310 !important;
    /*background-color: transparent !important*/
}
.dup{
    color: #9068be !important;
}

.white-bg{
    background-color: #FFF;
    border: 1px solid #ddd;    
}

/* Header Tagline */
.header-tagline{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1001;
    text-align: center;
    padding: 30px;
    background-color: #FFF;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
    -webit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
    -ms-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
    -o-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);    
}
.header-tagline h2{
    font-weight: 500;
    margin: 0px;
}
.header-tagline p{
    font-size: 16px;
    margin: 30px 0px;
}
.header-tagline .btn{
    margin: 0 5px;
    min-width: 183px;
}

.validate-section{
    margin-top: 50px;
    margin-bottom: 50px;
    /*padding: 0 5%;*/
    position: relative;
}
.drag-section{
    margin-top: 40px;
}
.drag-content > p i{
    font-size: 20px;
    vertical-align: middle;
    padding-right: 5px;
}
.drag-content{
    border: 2px dashed #e1e1e1;
    background-color: #f9fbff;
    padding: 20px;
}
.drag-content p{
    color: #84939c;
    margin-bottom: 0px;
    padding: 80px 0px;
    font-size: 16px;
    font-weight: 500;
}
.drag-content > p a{
    color: #36accf;
    text-decoration: underline;
}
.validate-section .alert{
    position: absolute;
    top: 0;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: #000;
    background-color: rgba(0,0,0,0.80);
    color: #FFF;
    font-size: 18px;
    text-align: center;
    border-color: transparent;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.20);
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.20);
    max-width: 800px;
    margin: 0 auto;
    padding: 15px;
}

.validate-section .alert .material-icons{
    color: #01a03a;
    vertical-align: middle;
    margin-right: 5px;
}

.validate-section .alert-danger .material-icons{
    color: #f44236;
    vertical-align: middle;
    margin-right: 5px;
}

.validate-steps ul{
    max-width: 960px;
    margin: 0 auto;
    padding: 0px;
    list-style: none;
}

.validate-steps > .steps > ul > li
{
    float: left;
    width: 25%;
    position: relative;
    text-align: center;
}
.validate-steps > .steps > ul > li .done-icon{
    line-height: 54px;
}
.validate-steps > .steps > ul > li .done-icon,
.validate-steps > .steps > ul > li.done .step-number{
    display: none;
}
.validate-steps > .steps > ul > li.done .done-icon{
    display: block;
}
.validate-steps > .steps > ul > li > a{
    color: #d2d2d2;
    font-size: 16px;
}
.validate-steps > .steps > ul > li.current > a,
.validate-steps > .steps > ul > li.disabled > a{
    pointer-events: none;
    cursor: default;
}

.validate-steps > .steps > ul > li:before{
    left: 0;
}
.validate-steps > .steps > ul > li:after{
    right: 0;
}
.validate-steps > .steps > ul > li:before,
.validate-steps > .steps > ul > li:after{
    content: "";
    border-bottom: 1px solid #d2d2d2;
    display: block;
    top: 30%;
    position: absolute;
    width: 50%;
    color: #d2d2d2;
}
.validate-steps > .steps > ul > li.first:before,
.validate-steps > .steps > ul > li.last:after{
    display: none;
}

.validate-steps > .steps > ul > li.done:before,
.validate-steps > .steps > ul > li.current:before,
.validate-steps > .steps > ul > li.done:after{
    border-color: #3fb3d6;
}

.validate-steps > .steps .number{
    font-size: 28px;
    width: 54px;
    height: 54px;
    border: 1px solid #d2d2d2;
    color: #d2d2d2;
    display: block;
    line-height: 54px;
    text-align: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    margin: 0 auto 15px;;
    background-color: #F8F8F8;
    position: relative;
    z-index: 1;
}


.validate-steps > .steps > ul > li.done > a,
.validate-steps > .steps > ul > li.current > a{
    color: #3fb3d6;
}
.validate-steps > .steps > ul > li.current > a > .number{
    border-color: #3fb3d6;
    color: #3fb3d6;
}
.validate-steps > .steps > ul > li.done > a > .number{
    background-color: #3fb3d6;
    color: #FFF;
    border-color: transparent;
}

.validate-steps > .validate-steps{
    margin-top: 25px;
}

.validate-section .step-content{
    position: relative;
}
.validate-section .step-content.white-bg{
    padding: 45px;
    width: 99.99%;
}
.validate-section .step-content .action{
    padding-top: 45px;
}
.validate-section .step-content .action .btn{
    max-width: 280px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}

/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
  background-color: #222;
}
.no-js #loader-wrapper {
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3fb3d6;
  -webkit-animation: spin 1.7s linear infinite;
          animation: spin 1.7s linear infinite;
  z-index: 11;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin-reverse .6s linear infinite;
          animation: spin-reverse .6s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

@-moz-keyframes heartbeat-loader {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@-webkit-keyframes heartbeat-loader {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@keyframes heartbeat-loader {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
/* :not(:required) hides this rule from IE9 and below */
.heartbeat-loader:not(:required) {
  -moz-animation: heartbeat-loader 1300ms ease 0s infinite normal;
  -webkit-animation: heartbeat-loader 1300ms ease 0s infinite normal;
  animation: heartbeat-loader 1300ms ease 0s infinite normal;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 36px;
  height: 36px;
  -moz-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 15px auto;  
}
.heartbeat-loader:not(:required):after, .heartbeat-loader:not(:required):before {
  position: absolute;
  content: "";
  background: #e87;
}
.heartbeat-loader:not(:required):before {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-bottomleft: 12px;
  -webkit-border-bottom-left-radius: 12px;
  border-bottom-left-radius: 12px;
  top: 12px;
  left: 0;
  width: 36px;
  height: 24px;
}
.heartbeat-loader:not(:required):after {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-topright: 12px;
  -webkit-border-top-right-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
  left: 12px;
  width: 24px;
  height: 12px;
}


/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
          transition: all 0.3s 1s ease-out;
}

.loader-content{
    text-align: center;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #FFF;
    z-index: 1;
}
.loader{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -130px;
}
.loader p{
    font-size: 18px;
    color: #84939c;
}

.loading-data{
    min-height: 500px;
}
.loading {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: loading 1.1s infinite ease;
  animation: loading 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes loading {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #3fb3d6, 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.5), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.7), 1.8em -1.8em 0 0em #3fb3d6, 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.5), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.7), 2.5em 0em 0 0em #3fb3d6, 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.5), 2.5em 0em 0 0em rgba(63, 179, 214, 0.7), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.5), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.7), 0em 2.5em 0 0em #3fb3d6, -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.5), 0em 2.5em 0 0em rgba(63, 179, 214, 0.7), -1.8em 1.8em 0 0em #3fb3d6, -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.5), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.7), -2.6em 0em 0 0em #3fb3d6, -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.5), -2.6em 0em 0 0em rgba(63, 179, 214, 0.7), -1.8em -1.8em 0 0em #3fb3d6;
  }
}
@keyframes loading {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #3fb3d6, 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.5), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.7), 1.8em -1.8em 0 0em #3fb3d6, 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.5), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.7), 2.5em 0em 0 0em #3fb3d6, 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.5), 2.5em 0em 0 0em rgba(63, 179, 214, 0.7), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.5), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.7), 0em 2.5em 0 0em #3fb3d6, -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.2), -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.5), 0em 2.5em 0 0em rgba(63, 179, 214, 0.7), -1.8em 1.8em 0 0em #3fb3d6, -2.6em 0em 0 0em rgba(63, 179, 214, 0.2), -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.5), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.7), -2.6em 0em 0 0em #3fb3d6, -1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(63, 179, 214, 0.2), 1.8em -1.8em 0 0em rgba(63, 179, 214, 0.2), 2.5em 0em 0 0em rgba(63, 179, 214, 0.2), 1.75em 1.75em 0 0em rgba(63, 179, 214, 0.2), 0em 2.5em 0 0em rgba(63, 179, 214, 0.2), -1.8em 1.8em 0 0em rgba(63, 179, 214, 0.5), -2.6em 0em 0 0em rgba(63, 179, 214, 0.7), -1.8em -1.8em 0 0em #3fb3d6;
  }
}

.left-box-content{
    /*display: table;*/
    /*width: 100%;*/
    /*min-height: 812px;*/
}
.chart-file-name{
    font-size: 20px;    
}
.chart-file-name > .file-size{
    font-size: 16px;
    display: block;
}
.chart{
    display: table;
    vertical-align: middle; 
    width: 370px;
    height: 370px;
    margin: 0 auto;
    position: relative;
    /*top: 50%;*/
    /*position: absolute;*/
    /*margin-top: -185px;*/
    /*left: 0;*/
    /*right: 0;*/
}

.chart span{
    display: block;
    font-size: 2em;
    font-weight: normal;
}
.chart canvas{
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    margin: -185px auto 0px;
}

.chart .total-label-score{
    position: relative;
    z-index: 1;
    display: table-cell;
    vertical-align: middle;
    padding: 0 100px;
}
.chart .chart-score{
    padding: 10px 0px;
}
.chart .chart-score,
.chart .chart-score > .label{
    text-align: center;
}
.chart .chart-score > .label{
    color: inherit;
    padding: 0px;
    font-size: 18px;
    font-weight: normal;
}
.chart .chart-score > .chart-count-label{
    font-size: 80px;
    font-weight: 100;
    display: inline-block;
    vertical-align: top;
    line-height: normal;
}
.chart .chart-score > .chart-count-label .percent{
    display: inline-block;
    font-size: 30px;
    vertical-align: top;
}


.valid-file{
    text-align: center;
    float: left;
    width: 14.2857%;
    /*padding: 0px 15px;*/
}
.valid-file > img{
    max-width: 50px;
}
.valid-file label{
    font-weight: 300;
    /*font-size: 16px;*/
    display: block;
    margin-bottom: 0px;
    margin-top: 10px;
}

.step3 .white-bg,
.step4 .white-bg{
    margin-bottom: 30px;
    padding: 30px;
    position: relative;
}


.step3 .white-bg.right-box-content{
    padding: 20px;
    margin-bottom: 10px;
}
.right-box-content > *{
    display: block;
}
.right-box-content h4{
    margin-top: 0px;
    margin-bottom: 7px;
    font-weight: 300;
    color: #84939c;        
}
.right-box-content .total-count{
    font-size: 40px;
    font-weight: 100;
    padding: 0px 0px 0px;
}
.right-box-content a.view{
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid;
    color: #3fb3d6;
    display: inline-block;
    vertical-align: middle;
}
.right-box-content .progress{
    margin-top: 20px;
    margin-bottom: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0px;
}
.right-box-content .total-label-score{
    margin-top: 20px;
}

.discount{
    font-size: 18px;
    font-weight: 300;
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 100px solid transparent;
    position: absolute;
    right: 0;
    top: 0;    
}
.discount.success{
    border-top-color: #01a03a;
}
.discount.danger{
    border-top-color: #ed0000;
}
.discount span{
    position: absolute;
    color: #FFF;
    top: -80px;
    /* right: 12px; */
    right: 4px;
}
.progress-bar-danger{
    background-color: #ed0000;
}

.total-label-score .count{
    font-size: 28px;
    font-weight: 100;
    display: block;
}
.total-label-score .label{
    color: #000;
    font-size: 16px;
    font-weight: normal;
    padding: 0.733em 0;
    display: block;
    text-align: left;
     font-weight: 300; 
}

.validate-steps h2{
    margin-bottom: 30px;
    font-weight: 300;
}

.completed-files h2{
    text-align: center;
    border-bottom: 1px solid #36accf;
    /* margin-top: 0px; */
    font-size: 24px;
}
.completed-files h2 span{
    background-color: #f8f8f8;
    margin-bottom: -20px;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
}
.completed-files .white-bg{
    padding: 20px;
    /*min-height: 278px;*/
    border-left: 10px solid #01a03a;
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 10px;
}
.completed-files .white-bg.error{
    border-left-color: #ed0000;
}
.completed-files .headline{
    font-size: 20px;
}
.completed-files .white-bg .headline + .small{
    padding: 15px 0px;
}
.completed-files .small{
    /*font-size: 16px;*/
}
.completed-files .total-label-score{
    padding: 17px 20px;
    background-color: #F3F3F3;
    margin-left: -31px;
    border: 1px solid #ddd;
    border-left: none;
}

.job-details h3{
    margin-top: 0px;
    font-size: 26px;
    margin-bottom: 30px;
    color: #84939c;
}
.job-details .table{
    margin: 0 -5px;
}
.job-details .table tr th,
.job-details .table tr td{
    border-width: 0px;
    padding: 5px;
}
.job-details .table td a{
    color: #3fb3d6;
}

.dash-details-box{
    /*cursor: pointer;*/
    margin-bottom: 30px;
    padding: 20px;
    background-color: #FFF;
    border:1px solid #E1E1E1;
    border-bottom-width: 2px;
    border-top-width: 13px;
    border-top-color: transparent;
    position: relative;
    overflow: hidden;
}
.dash-details-box.green-bg{border-top-color: #ccdb38;}
.dash-details-box.orange-bg{border-top-color: #f8b310;}
.dash-details-box.light-blue-bg{border-top-color: #019587;}
.dash-details-box.dark-grey-bg{border-top-color: #607c8a;}
.dash-details-box.red-bg{border-top-color: #f44236;}
.dash-details-box.purple-bg{border-top-color: #6739b6;}
.dash-details-box.dark-black-bg{border-top-color: #363f46;}
.dash-details-box.brown-bg{border-top-color: #795549;}

.dash-details-box .icon{
    font-size: 20px;
    line-height: normal;
    vertical-align: middle;
    margin-right: 10px;
}
.dash-details-box .icon-hide{
    font-size: 120px;
    color: #84939c;
    position: absolute;
    bottom: -30%;
    right: -10%;
    line-height: 90px;
    opacity: 0.1;
}
.details-count{
    font-size: 30px;
    line-height: normal;
    text-align: right;
    display: block;
    padding: 15px 0px 0px;
    font-weight: 300;
}
.details-meta{
    font-size: 14px;
    font-weight: 500;
    color: #84939c;
}

.analysis-box{
    padding: 15px;
    color: #FFF;
    margin-bottom: 30px;
}
.analysis-box.blue{background-color: #5867c3;}
.analysis-box.light-blue{background-color: #00c5dc;}
.analysis-box.orange{background-color: #ffaa00;}
.analysis-box.red{background-color: #e62739;}
.analysis-box.dark-blue{background-color: #6739b6;}
.analysis-box.purple{background-color: #9068be;}
.analysis-box.green{background-color: #019587;}
.analysis-box.black{background-color: #363f46;}

.analysis-box .analysis-meta{
    font-size: 14px;
    font-weight: 500;
    opacity: .7;
}
.analysis-box .analysis-count{
    font-size: 30px;
    font-weight: 100;
    text-align: right;
    padding-top: 20px;
    opacity: .9;
}

.graph{
    height: 20px;
    position: relative;
    float: left;
    margin-top: 10px;    
}
.graph .graph-line{
    height: 100%;
    width: 5px;
    background-color: #FFF;
    opacity: 0.7;
    position: absolute;
    left: 0px;
    bottom: 0;
}
.graph .graph-line + .graph-line {
    left: 7px;
}
.graph .graph-line + .graph-line + .graph-line {
    left: 14px;
}
.graph .graph-line + .graph-line + .graph-line + .graph-line {
    left: 21px;
}

/*=========================================================================
    Landing Page Design
===========================================================================*/

.landing-page .navbar{
    background-color: transparent;
}
.navbar-links{
    margin-right: -15px;
    padding: 22px 0px;
    text-align: right;
}
.navbar-links ul{
    margin-bottom: 0px;
}
.navbar-links li a{
    font-size: 18px;
    color: #FFF;
    padding: 0 15px;
}

.top-banner{
    text-align: center;
    padding-top: 162px;
    height: 773px;
    background: -webkit-linear-gradient(57deg, rgba(4, 139, 173, 0.95) 0%, rgba(28, 177, 172, 0.95) 100%);
    background: -moz-linear-gradient(57deg, rgba(4, 139, 173, 0.95) 0%, rgba(28, 177, 172, 0.95) 100%);
    background: -ms-linear-gradient(57deg, rgba(4, 139, 173, 0.95) 0%, rgba(28, 177, 172, 0.95) 100%);
    background: -o-linear-gradient(57deg, rgba(4, 139, 173, 0.95) 0%, rgba(28, 177, 172, 0.95) 100%);
    background: linear-gradient(57deg, rgba(4, 139, 173, 0.95) 0%, rgba(28, 177, 172, 0.95) 100%);    
}
.top-banner h2{
    font-size: 60px;
    font-weight: 100;
    color: #FFF;
    margin-bottom: 20px;
}
.top-banner p{
    color: #FFF;
    font-size: 20px;
}

.top-banner .form-inline{
    margin-top: 50px;
}
.top-banner .form-control{
    color: #86c8d3;
    background-color: transparent !important;
    border-color: #86c8d3;
}

/* Webkit */
.top-banner .form-control::-webkit-input-placeholder { color: #86c8d3; }

/* Firefox 4-18 */
.top-banner .form-control:-moz-placeholder { color: #86c8d3; }

/* Firefox 19+ */
.top-banner .form-control::-moz-placeholder { color: #86c8d3; }

/* IE10+ */
.top-banner .form-control:-ms-input-placeholder { color: #86c8d3; }

.landin-banner{
    margin-top: -317px;
}

.about-section{
    padding: 100px 0px 170px;
}
.about-section h2{
    font-weight: 500;
    font-size: 42px;
    margin-bottom: 100px;
}
.about-section .box-icon{
    min-height: 99px;
    line-height: 99px;
}
.about-section .box-content h3{
    margin-top: 50px;
    margin-bottom: 30px;
}
.about-section .box-content p{
    font-size: 16px;
}

.footer{
    padding: 125px 0px;
    background-color: #e9e9e9;
}
.footer h2{
    font-weight: 300;
    font-size: 36px;
}
.footer > .container > *{
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px;
}

/*=========================================================================
    Progress Filp
===========================================================================*/
/* entire container, keeps perspective */
  .flip-container {
    perspective: 1000;
  }
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
  //  transform: rotateY(180deg);
  }

  .flip-container, .front, .back {
    width: 100%;
    height: 100%;
  }

  /* flip speed goes here */
  .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }

  /* hide back of pane during swap */
  .front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* front pane, placed above back */
  .front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
  }

  /* back, initially hidden pane */
  .back {
    transform: rotateY(180deg);
  }

  .vertical.flip-container {
    position: relative;
  }

  .vertical .back {
    transform: rotateX(-180deg);
  }

  .vertical.flip-container .flipper {
    transform-origin: 100% 250px; /* half of height */
  }

  .vertical.flip-container:hover .flipper {
   // transform: rotateX(360deg);
  }

  .flip-container.flip .flipper {
    transform: rotateX(-360deg);
  }

/*=========================================================================
    Abandon Job Slider Button
===========================================================================*/

  @keyframes fallDown {
    0%   { top: 0px;}
    100%   { top: 30%;}
  }
  @keyframes fliker {
    0%   { padding-left: 0px;}
    50%   { padding-left: 2.5px;}
    100%   { padding-left: 5px;}
  }

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

  @-webkit-keyframes fallDown {
    0%   { top: 0px;}
    100%   { top: 30%;}
  }
  @-webkit-keyframes fliker {
    0%   { padding-left: 0px;}
    50%   { padding-left: 2.5px;}
    100%   { padding-left: 5px;}
  }

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

  @-moz-keyframes fallDown {
    0%   { top: 0px;}
    100%   { top: 30%;}
  }
  @-moz-keyframes fliker {
    0%   { padding-left: 0px;}
    50%   { padding-left: 2.5px;}
    100%   { padding-left: 5px;}
  }

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

  @-ms-keyframes fallDown {
    0%   { top: 0px;}
    100%   { top: 30%;}
  }
  @-ms-keyframes fliker {
    0%   { padding-left: 0px;}
    50%   { padding-left: 2.5px;}
    100%   { padding-left: 5px;}
  }

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

  .spinEffect{
    animation: spin 0.5s 1 linear;
    -webkit-animation: spin 0.5s 1 linear;
    -moz-animation: spin 0.5s 1 linear;
    -ms-animation: spin 0.5s 1 linear;
  }

  .flikerEffect{
    animation-name: fliker;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction:alternate;
    animation-play-state:paused;
    -webkit-animation-name: fliker;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:paused;
    -moz-animation-name: fliker;
    -moz-animation-duration: 0.5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction:alternate;
    -moz-animation-play-state:paused;
    -ms-animation-name: fliker;
    -ms-animation-duration: 0.5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction:alternate;
    -ms-animation-play-state:paused;
  }

  .fallDownEffect{
    animation-name: fallDown;
    animation-duration: 2s;

    -webkit-animation-name: fallDown;
    -webkit-animation-duration: 2s;

    -moz-animation-name: fallDown;
    -moz-animation-duration: 2s;

    -ms-animation-name: fallDown;
    -ms-animation-duration: 2s;
  }


  .floating-box{
    position: fixed;
    top: 30%;
    left: -200px;
    z-index: 100;
  }
  .floating-box > .action-button{
    height:60px;
    width:55px;
    border-radius: 0px 60px 60px 0px;
    -moz-border-radius: 0px 60px 60px 0px;
    -webkit-border-radius: 0px 60px 60px 0px;
    -ms-border-radius: 0px 60px 60px 0px;
    background:#3fb3d6;
    position: absolute;
    left: 200px;
    padding-left: 0px;
    cursor: pointer;
    box-shadow: 2px 2px 3px 2px #a6a6a6;
    -webkit-box-shadow: 2px 2px 3px 2px #a6a6a6;
    -moz-box-shadow: 2px 2px 3px 2px #a6a6a6;
    -ms-box-shadow: 2px 2px 3px 2px #a6a6a6;

  }

  .floating-box > .action-button > .material-icons{
    font-size:52px;
    margin-top: 3px;
    color: #f6f6f6;
    text-align: center;
  }

  .effect:hover{
    color:#ffffff;
    animation-play-state:running;
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -ms-animation-play-state:running;
  }

  .floating-box .box-content{
    width: 200px;
    height: 59px;
    padding: 23px 10px;
    box-shadow: 0px 3px 3px 2px #a6a6a6;
    color: #84939c;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
  }

  .floating-box > .box-content > a{
    color : #337ab7;
  }
    
/*=========================================================================
    Animation
===========================================================================*/

a, .btn{
    transition:         color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
    -moz-transition:    color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
    -o-transition:      color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
    -ms-transition:     color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
}

/*=========================================================================
    Responsive Design
===========================================================================*/

@media (min-width: 1200px) {

}

@media (min-width: 768px) {
    
    /* Navbar */
    .navbar-nav{
        float: none;
    }
    .navbar-nav > li{
        float: none;
    }
    
    /* Navbar Search */
    .form-inline .form-control{
        max-width: 450px;
        width: 100%;
    }

}