﻿
* {margin:0;padding:0;box-sizing:border-box;}
a{text-decoration:none !important;}
img {max-width:100%;vertical-align:middle;}
div:after {content:'';display:block;clear:both;}
body {font-family: 'Poppins', sans-serif !important;font-size:14px;}
/* Profile Registration page */
.form_container {
    width: 85%;
min-width: 1000px;
min-height: 80vh;
margin: 0 auto;
padding: 20px;
}
.profilereg-card {
    border:none !important;-webkit-box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
border: solid 1px #dde4eb;
border-radius: 0px;
margin-bottom:1rem;
}
.profilereg-card-title {
  margin-bottom: .75rem;

}
.wrapper {
  height: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
  background-color: #eff3f9;
}
.progresstable td {
  vertical-align: middle !important;
  font-size: 14px;
}.profilereg-card {
  border: none !important;
  -webkit-box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
  box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
  border: solid 1px #dde4eb;
  border-radius: 0px;
  margin-bottom: 1rem;
}
 .progresstable_4 td {width:25%;}
 .progresstable input[type="text"], .progresstable input[type="date"], .progresstable input[type="email"], .progresstable select, textarea {
  width: 100%;
  border: 1px solid #ddd;background-color: transparent;
  padding: 5px 10px;
}.progresstable input[type="text"]:focus, .progresstable input[type="text"]:hover, .progresstable input[type="date"]:focus, .progresstable input[type="date"]:hover, .progresstable input[type="email"]:focus, .progresstable input[type="email"]:hover, .progresstable select:focus, .progresstable select:hover {
  outline: none;
  box-shadow: 0 0 4px #ddd;
  border: 1px solid #c3cffb;
}
#heading {
    text-transform: uppercase;
    color: #7fd0ef;
    font-weight: normal
}

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

/*#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}*/

.profilereg-card {
    text-align: left
}

#msform fieldset:not(:first-of-type) {
    display: none
}

/*#msform input,
#msform textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #7fd0ef;
    outline-width: 0
}*/

#msform .action-button {
        min-width: 100px;
    background: #7fd0ef;
    font-weight: 500;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 7px 0px;
    margin: 0px 10px 10px 0px;

}

#msform .action-button:hover,
#msform .action-button:focus {
    background-color: #311B92
}

#msform .action-button-previous {
    background: #616161;
    min-width: 100px;
    font-weight: 500;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 7px 0px;
    margin: 0 10px 10px 0px;
   
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    background-color: #000000
}
#msform .action-button-save {
     min-width: 100px;
    background: #3ab78f;
    font-weight: 500;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 7px 0px;
    margin: 0 10px 10px 0px;
    
}
    #msform .action-button-save:hover,
      #msform .action-button-save:focus {
        background-color: #2b9f7a
    }
    #msform .action-button-savenext {

    background: #d98a39;
    font-weight: 500;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 7px 10px;
    margin: 0 10px 10px 0px;
    
}
    #msform .action-button-savenext:hover,
      #msform .action-button-savenext:focus {
        background-color: #cb7b2a
    }
      #msform .action-button-addnew {

   background: #ffe460;
    font-weight: 500;
    color: #0a0a0a;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 7px 10px;
    margin: 0 10px 10px 0px;
    
}
    #msform .action-button-addnew:hover,
      #msform .action-button-addnew:focus {
        background-color: #e7cd4d
    }
.card {
    z-index: 0;
    border: none;
    position: relative
}

.fs-title {
    font-size: 25px;
    color: #7fd0ef;
    margin-bottom: 15px;
    font-weight: normal;
    text-align: left
}

.green-text {
    color: #3dbd2e;
    font-weight: normal
}

.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right
}

.fieldlabels {
    color: gray;
    text-align: left
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}

#progressbar .active {
    color: #7fd0ef;background-color:transparent !important;
}

#progressbar li {
    list-style-type: none;
    font-size: 14px;
    width:16%;
    float: left;text-align:center;
    position: relative;
    font-weight: 400
}
#progressbar strong {
  font-weight: 500 !important;
  color: lightgrey;
}
#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f2c0"
}

#progressbar #other:before {
    font-family: FontAwesome;
    content: "\f2bc"
}

#progressbar #educational:before {
    font-family: FontAwesome;
    content: "\f19d"
}
#progressbar #work:before {
    font-family: FontAwesome;
    content: "\f0f2"
}
#progressbar #upload:before {
    font-family: FontAwesome;
    content: "\f093"
}
#progressbar #fee:before {
    font-family: FontAwesome;
    content: "\f093"
}
    #progressbar strong {
        font-weight:500 !important;color:lightgrey;
    }
    #progressbar a{
        color:lightgrey;
    }
  .active a strong{
        color:#000 !important; 
    }
#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 66px;
    top: 25px;
    z-index: -1
}
#upload:after {display:none !important;}
#progressbar li.active:before,
#progressbar li.active:after {
    background: #7fd0ef
}

.progress {
    height: 20px
}

.progress-bar {
    background-color: #7fd0ef
}

.fit-image {
    width: 100%;
    object-fit: cover
}
@media only screen and (max-width: 999px) {
    #progressbar li {
    width: 100%;
    float: left;
    margin-bottom:20px;
}
    #progressbar li:after {
    content: '';
  display:none;
}
}
.progresstable2 td {
    width: 50%;
}
.progresstable3 td {
    width:33.33%;
}
.table-td-desc {
    font-size: 13px;
}
.progresstable th {
    font-size: 14px;
    font-weight: 600;
}
.comp-card i {
   color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 0px;
    text-align: center;
   
    font-size: 14px;
    text-shadow: 0 6px 8px rgb(62 57 107 / 18%);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    line-height: 20px;
 
    margin: 0 1px;
}
    .comp-card i:hover {
        border-radius:10px;
    }
.bg-c-blue {
    background: #4099ff;
}
.bg-c-yellow {
    background: #ffb64d;
}

/* Profile Main Page */

.main-content {
	/*padding-top: 100px;
	padding-bottom: 100px;*/
}

.shadow {
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important;
}

.circle-icon {
	height: 50px;
	width: 50px;
	border-radius: 50px;
	border: 2px solid #8b50ff;
	background: #fff;
	color: #8b50ff;
	font-size: 22px;
}

.vertical-tab {
	z-index: 1;
}
.vertical-tab li.nav-item a {
	padding: 20px;
	width: 300px;
	height: 100%;
	border: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: #fff;
	color: #333;
	transition: all 0.3s;
}
.vertical-tab li.nav-item a.active {
    background: #d9e2e8;
	    /*background: #f2b8ff;
    background: -moz-linear-gradient(left,#f2b8ff 0%,#bda0f5 50%,#9fffef 100%);
    background: -webkit-linear-gradient(left,#f2b8ff 0%,#bda0f5 50%,#9fffef 100%);
    background: linear-gradient(to right,#f2b8ff 0%,#bda0f5 50%,#9fffef 100%);*/
	color: #000;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.vertical-tab li.nav-item a.active .circle-icon {
	border-color: #fff;
}

.tab-content {
	flex: 2;
	background: #fff;
}
.tab-content .tab-pane {
	overflow: hidden;
	position: relative;
}
.tab-content .wid-250 {
	width: 250px;
}
#myTab h5 {
    font-size:14px;
}
#myTabContent h3 {
    font-size:20px;padding:2rem 2rem 1rem !important;
}
#myTabContent ul {
    font-size: 14px;list-style-type:circle;padding:0 3rem!important;
}
#myTabContent ul {
   line-height:1.7;
}
/* Application Form */
.card-box {
    padding:10px 16px;
    min-height:200px;position:relative;z-index:1;
    border:0 !important;  /*background: #82009f;*/color:#fff;    background-image: linear-gradient(310deg,#b5b5b5,#ffffff);
    /*background: -moz-linear-gradient(left,#82009f 0%,#5d34af 50%,#00ceab 100%);
    background: -webkit-linear-gradient(left,#82009f 0%,#5d34af 50%,#00ceab 100%);
    background: linear-gradient(to right,#82009f 0%,#5d34af 50%,#00ceab 100%);*/
    box-shadow: 0 7px 14px 0 rgba(65,69,88,0.1),0 3px 6px 0 rgba(0,0,0,0.07);
}
    .card-box h6 {
        color:#000;font-size:18px;font-weight:500;
    }
.card-box .card-body {
    background-color:#fff;  position:absolute;
    left:16px;
    top:15px;
    width:100%;box-shadow: 0 7px 14px 0 rgba(65,69,88,0.1),0 3px 6px 0 rgba(0,0,0,0.07);
    height:100%; border-radius: 0.25rem;transition:.1s ease;
}
.card-box .card-body:hover {
    background-color:#fff;  position:absolute;
    left:0px;
    top:10px;transition:.1s ease;
    width:100%;box-shadow: 0 7px 14px 0 rgba(65,69,88,0.19),0 3px 6px 0 rgba(0,0,0,0.09);
    height:100%; border-radius:0 0 0.25rem 0.25rem;
}
.card-box .card-title {
    color:#000;font-size:15px;font-weight:600;
}
.cardtable td {
    font-size:14px;font-weight:500;border:0 !important;padding:0 !important;
}
.badge {
    display: inline-block;
    padding: 0.8em 0.4em  !important;
    font-size: 75%;
    font-weight: 600 !important;
}

/* BG Colors */
.bg-gradient-primary {
    background-image: linear-gradient(310deg,#7928ca,#ff0080);
}
.bg-gradient-info {
    background-image: linear-gradient(310deg,#2152ff,#21d4fd);
}
.bg-gradient-warning {
    background-image: linear-gradient(310deg,#f53939,#fbcf33);
}
.bg-gradient-danger {
    background-image: linear-gradient(310deg,#ea0606,#ff667c);
}
/* My Application Form */
.count-card {
    border:none !important;-webkit-box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
position:relative;z-index:0;
}
.counter-row {
    padding-bottom:20px;
}
.counter-head {
    color:#959595;
}
.count-card:after {
    content:'';
      width: 50%;
  height: 4px;
  background: #507bfc;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0px 0px 10px 10px;transition:.5s ease;
}
 
.count-card:before {
    content:'';
  width: 50%;
  height: 4px;
  background: #507bfc;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0px 0px 10px 10px;transition:.5s ease;
}
.count-card:hover:after{
      transform: translateX(-0%);
}
.count-card:hover:before{
      transform: translateX(-100%);
}

.card-backside {
position: absolute;
z-index: -5 !important;
width: 89%;
height: 100%;
top: -33px;
left: 8%;
background: rgba(255,255,255,.3);
transform: skewX(-1deg) rotate(6deg);
border-radius: .25rem;
}