body {font-family: 'Poppins', sans-serif;}


.main-head-section {background-image:url(../images/background/bg-graphic.jpg); background-repeat:no-repeat;  position:relative;}
.head-logo {padding-left: 30px; font-weight: 400;}

.head-logo a {text-decoration: none; color:#fff;}
.head-nav {display: flex; display: -ms-flexbox; list-style: none; -ms-flex-pack: end; justify-content: flex-end; padding-top:6px;}

.head-nav li:first-child {padding-right:10px;}
.head-nav li a {color:#fff !important; text-decoration: none; text-transform: capitalize; font-size:1.2rem; padding:1px;}

.banner-content {text-align:center; margin-top:7%; margin-bottom:40px;  transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all;}
.banner-content h1 {font-weight: bolder; color: #fff;  font-size: 4rem; letter-spacing: 2px; text-shadow: 0 4px 3px rgba(0,0,0,0.4); margin-bottom:28px;}

.banner-content h1 span {color:#22279c;}
.banner-content p {color: #fff; font-weight: 500; font-size: 1.4rem; margin-bottom: 0; line-height:42px;}

.head-thumbnail {background-color: #1f249c; box-shadow: 0px 0px 16px rgba(0,0,0,0.4); border: 1px solid #1f249c;  border-radius: 4px;}
.thumbnail-head { background-color:#1f249c; text-align:center; padding: 8px 0;}

.thumbnail-head h4 {color:#fff; margin-bottom:0; font-weight:500;}
.thumbnail-head h4 i {font-size:2rem; vertical-align: middle;}

.thumbnail-body img {width:100%;}

.thumbnail-footer {padding:10px 16px; min-height:76px;}
.thumbnail-footer p {color:#fff; margin-bottom:0; font-size:1.2rem;} 

.banner-foot-content { text-align:center; margin-top:10%; padding-bottom:30px;}
.banner-foot-content p {margin-bottom: 0; color: #fff; font-size: 1.2rem; text-transform: uppercase;}

.head-nav li:last-child a {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0ac0f8+0,0364e7+100 */
background: rgb(10,192,248); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(10,192,248,1) 0%, rgba(3,100,231,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(10,192,248,1) 0%,rgba(3,100,231,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(10,192,248,1) 0%,rgba(3,100,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ac0f8', endColorstr='#0364e7',GradientType=1 ); /* IE6-9 */ padding-left: 28px !important; padding-right: 28px !important;
}

.header-section {padding-top:30px;}
.head-logo a:hover {text-decoration:none; color:#fff;}

/*shrink nav start*/
#navbar {overflow: hidden; }
#navbar a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}

#navbar a:hover {background-color: #ddd; color: black;}
#navbar a.active {background-color: #4CAF50; color: white;}

.content {padding: 16px;}
.sticky {position: fixed; top: 30px; max-width: 940px; left: 50%; transform: translate(-50%,0); z-index: 1025; width: 100%; }

.sticky + .content {padding-top: 60px;}
.sticky .thumbnail-head h4 {transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all;}

.header-nav {transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all; width:100%; z-index:1024; max-width:94%; margin:auto; padding:10px 14px 16px;} 
.navbar-dark .navbar-brand {color:#fff; font-size: 3rem; font-weight: 500;}

.shrinkNav .header-nav { background-color:rgba(0,0,0,0.3); padding-top:6px !important; padding-bottom:6px !important;} 
.thumbnail-row {display:flex; display:-ms-flexbox; flex-wrap:wrap; margin-left:-15px; margin-right:-15px;}

.thumbnail-col  {-ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; padding-left:15px; padding-right:15px;}
.shrinkNav .onscroll-none {opacity:0; }

.shrinkNav .thumbnail-body, .shrinkNav .thumbnail-footer {opacity:0; transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all;}
.shrinkNav .thumbnail-head, .shrinkNav .head-thumbnail {background-color:transparent; border:none; box-shadow:none;} 

.shrinkNav .thumbnail-head h4 {font-weight: 500; font-size: 14px; text-transform: uppercase; transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all; position:relative; z-index:1026;}
.shrinkNav .thumbnail-head h4 i {font-size: 1.2rem; vertical-align: middle;}

.shrinkNormal .thumbnail-body, .shrinkNormal .thumbnail-footer {opacity:1; transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all;}
.shrinkNormal.onscroll-none {opacity:1;  transition: .7s all; -moz-transition: .7s all;	-webkit-transition: .7s all; -o-transition: .7s all;} 

.arrows {width: 60px; height: 72px; position: absolute;	left: 50%; margin-left: -30px; bottom: 20px;}
.arrows path {stroke: #2994D1; fill: transparent; stroke-width: 1px; animation: arrow 2s infinite; -webkit-animation: arrow 2s infinite; }

@keyframes arrow {0% {opacity:0} 40% {opacity:1} 80% {opacity:0} 100% {opacity:0}}
@-webkit-keyframes arrow /*Safari and Chrome*/ {0% {opacity:0} 40% {opacity:1} 80% {opacity:0} 100% {opacity:0}}

.arrows path.a1 {animation-delay:-1s; -webkit-animation-delay:-1s; /* Safari 和 Chrome */}
.arrows path.a2 {animation-delay:-0.5s;	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */}

.arrows path.a3 {animation-delay:0s; -webkit-animation-delay:0s; /* Safari 和 Chrome */}
.shrinkNav .arrows, .shrinkNav .triangle {display:none;}

.triangle { content: '';  width: 0;  height: 0;  border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #1d65f5;  bottom:0;  margin: auto; left: 1px; right: 0; z-index: 10; transition: all 0.3s; margin-bottom:10px;}
header {position:relative; padding-bottom:60px;}

.home-line-svg {height:3390px;}
.circle-svg {width: 14px; height: 14px; top: -7px; left: -7px; z-index: 2; overflow: visible; position: absolute; will-change: transform; background-size: contain;}
.last-bg-a a {background:none !important; padding:0;}

.circle-user {background-color:#fff; width: 26px; height: 26px; display: inline-block; text-align: center; border-radius: 50%; margin-right: 5px; vertical-align: middle;}
.circle-user i {color:#283492;}

.form-nav li:first-child {padding-right:0;}
.page-head-row {background-color:#1821bb;}

.postHeader {padding-bottom:0;}
.page-head-nav {padding:12px 0;}

.page-head-nav ul {padding-left:0; display:flex; flex-wrap:wrap; display:-ms-flexbox; list-style:none; margin-bottom:0;}


.page-head-nav ul li a {color:#fff; text-decoration:none; display: block; padding: 8px 12px;}
.page-head-nav ul li a:hover {color:#fff; text-decoration:none;} 

.page-head-form {padding-top:13px; padding-left: 30px;}
.page-head-form input {max-width:290px; margin:0 10px;}

.page-head-form .btn {background-color:#fff; border-radius:0;}
.page-head-form .form-control { border-radius:1px; background-color:transparent; color:#fff;}

.vr-tab-section .nav.nav-tabs {display: block; border-bottom:0;}
.vr-tab-section .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem;}

.vr-tab-section .nav-tabs .nav-link.active {color:#fff; background-color: #2d3291 !important; border-color:transparent !important; border-radius:0;}
.vr-tab-section .nav-tabs .nav-link {font-size: 1rem; padding: 8px 5px; font-weight: 300;}

.vr-tab-section .tab-content>.active { display: block;}
.vr-tab-section .nav.nav-tabs {display: block; border-bottom: 0; }

.vr-tab-section .nav-link i {display:none;}
.vr-tab-section .nav-link.active i {display:block; float:right; padding-top:5px;}

.vr-tab-section .nav-link {color:#212121;}
.vr-tab-section {margin-top:34px; margin-bottom:20px;}

.vr-tab-section .nav-item:first-child .nav-link {border-radius:0 0 5px 5px;}

.flex-ul {list-style:none; display:flex; display:-ms-flexbox; flex-wrap:wrap; padding-left:0; margin-left:-10px; margin-right:-10px;}
.post-head ul li:first-child {/*-ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;*/ padding-left:10px; padding-right:10px;}

.post-head ul li:first-child img {width: 60px; height:60px; border-radius: 50%; border: 1px solid #ddd; }
.post-head ul li:last-child { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%;  max-width: 83.333333%;  padding-left:10px; padding-right:10px;}

.post-head ul li h1 {font-size: 1rem; margin-top: 5px; font-weight: 400; margin-bottom: 0;}
.post-head ul li p {margin-bottom:0;}

.post-head ul li h5 {font-size: 15px; margin-top: 4px; font-weight: 400; color: rgba(0,0,0,.6);}

.post-head ul li h1 a {color:rgba(0,0,0,.8)}
.post-head ul li h1 a:last-child {
  font-size: 16px;
  color: rgba(0,0,0,.8);}

.xs-small-text-p, .xs-small-text-p a {color:rgba(0,0,0,.6); font-size:0.8rem; font-weight:200;}
.post-body .body-img img {width:100%;}

.tab-content h2 {font-size: 1rem; margin-top: 8px; font-weight: 400; margin-bottom: 8px;}

.post-body-content p {font-weight:200;}

.response-section ul li:first-child { -ms-flex: 0 0 30%; flex: 0 0 30%;  max-width: 30%; padding-right:10px; padding-left:10px;}
.response-section ul li:last-child {  -ms-flex: 0 0 70%;  flex: 0 0 70;  max-width: 70%; padding-left:10px; padding-right:10px; font-size:14px;}

.response-section ul li img {width:50px; height:50px; border-radius:50%; border: 1px solid #ddd;}

.card-content p {font-weight:200; color:#333333; line-height:20px; font-size:15px;}
.card-content img {width:100%;}

.social-section {display:flex; display:-ms-flexbox; flex-wrap:wrap; padding-left:0; list-style:none;  -ms-flex-pack: end; justify-content: flex-end;}

.social-section li {margin:0 4px;}
.social-section li a {background-color:#363635; color:#fff; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #363635; display: flex; justify-content: center; align-items: center;}

.social-section li a:hover {background-color:#fff; color:#363635;}

.vr-tab-section .nav-tabs li a:hover {background-color:#2d3291; color:#fff; border-radius:0;}
.tab-title h3 {font-size:1.4rem;}

.tab-title {margin-bottom:30px;}

.take-part-section {text-align:center;}
.tab-title h3 span {display:block;}

.take-part-section p {font-weight:400; font-size:1.2rem;}

.upload-btn-wrapper {position: relative; overflow: hidden; display:block;}
.upload-btn-wrapper .btn {padding:4px 12px; border-radius: 8px; font-size: 16px; margin-top:12px; margin-left: auto; display: block; margin-right: 30px;}

.upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; right: 0; width: 100%;}
.step-two-section {background-color:#8ab2f0; padding: 28px 15px; margin-bottom:16px; margin-top:40px;}

.imagePreview {width: 100%;  height: 130px; background-position: center center; background:url(../images/subpage/images.jpeg); background-color:#fff;  background-size: cover; background-repeat:no-repeat; display: inline-block; box-shadow:0px -3px 6px 2px rgba(0,0,0,0.2);}
.imgUp .btn-primary {display:block; border-radius:0px; box-shadow:0px 4px 6px 2px rgba(0,0,0,0.2); margin-top:-5px; background-color:#2d3290; border-color:#2d3290;}

.imgUp .del {position:absolute; top:0px; right:15px; width:30px; height:30px; text-align:center; line-height:30px; background-color:rgba(255,255,255,0.6); cursor:pointer;}

.imgAdd {width:30px; height:30px; border-radius:50%; background-color:#4bd7ef; color:#fff; box-shadow:0px 0px 2px 1px rgba(0,0,0,0.2); text-align:center; line-height:30px; margin-top:0px; cursor:pointer; font-size:15px;}
.two-textarea-section .form-control::placeholder {font-size: 14px; font-weight: 200; text-align:center;}

.two-textarea-section {margin-bottom:20px;}
.take-part-section label {font-weight: 200;}

.postHeader .main-head-section {background-image: url(../images/background/subpage.jpg); background-size: 100%; background-position: center;}

.step-two-sectio-relative {position:relative; margin-bottom: 8px; align-items: center; -ms-flex-align: center}
.imgUp .btn-primary {position:absolute; bottom: 10px; right: 110%; border-radius: 6px; padding: 2px 15px 6px; cursor: pointer;}

.border-box { max-width: 250px; width:100%; border: 1px solid #000; padding: 8px; line-height:0;} 
.align-centyer-label {margin-top:15px;}

.align-center {align-items: center;}
.mr-custom-mb {margin-bottom:40px;}

.btn-label {margin:8px 30px;}
.btn-row-foot {margin-top:20px; }

.btn-row-foot .btn-primary {background-color:#2d3290; border-color:#2d3290;}
.page-head-row .form-control::placeholder {color:#fff;}

.pdr-none {padding-right:0;}
.card-body-row {border-color: #000; border-radius: 0;}

.card-body-row .card-body p {line-height: 14px; margin-bottom: 8px; margin-top: 2px;}
.card-body-row .card-body p span {font-size: 10px; display: block;}

.card-body-row .card-body {padding:2px 10px 10px;}
.vr-tab-section #myTab li:not(:first-child) a.active {border-radius:0;}

.card-content div img {border:1px solid #000;}
.profile-pic-circle img {width: 180px; height: 180px; border-radius: 50%; border: 1px solid;}

.tab-content input.form-control, .tab-content select.form-control {border-radius:0; height:calc(1.9em + .75rem + 2px);}
.btn-primary {background-color:#2d3291; border-color:#2d3291; }

.btn-primary:hover {background-color:#2d3291; border-color:#2d3291; }
.profile-section .btn-primary {padding: 8px 30px; margin-top: 10px;}

.mr-left-head {padding-left:10px;}

.result-section .input-group .btn-outline-secondary {border-color: #ced4da; border-left:none; border-radius:0 20px 20px 0;}
.result-section .input-group .form-control {border-right:none; border-radius:20px 0 0 20px;}

.form-control::placeholder {color: #8c8e8c; opacity: 1; font-weight: 300;}
.result-section .input-group .btn-outline-secondary:hover {background-color:#fff; color:#6c757d;}

.card-section-img img {width:100%;}
.result-card-section .card {padding:10px; margin-bottom:10px;}

.card-head-content h3 {font-size: 22px; margin-bottom: 0;}

.card-head-content p {color:#a3a3a3; font-weight: 300; font-size: 14px; margin-bottom:4px;}
.card-head-content span {color:#000;}

.card-head-content span:last-child {color:#e02232;}
.card-head-content .post-date p {text-align: right; color:#a3a3a3; font-weight: 300; font-size: 14px;}

.card-section-body-content p {font-weight: 300; margin-bottom:6px;}
.card-section-body-content p a {color:#000; font-weight:500; font-size:13px;}
.card-section-body-content .btn-default {border: 1px solid #000; padding: 3px 18px; border-radius: 12px; margin-top: 0;}

.card-section-body-content .btn-default:hover {color:#fff; background-color:#2d3291; border-color:#2d3291;}
.footer-subpage {border-top: 1px solid rgba(222,222,222,0.8); padding-top: 8px; margin-top: 30px;}

.footer-subpage .content p {font-weight: 300; text-align: center; color:#5c5e5c; font-style: italic;}
.footer-subpage .flex-ul li a {width:30px; height:30px; border-radius:50%; background-color:#2d3291; color:#fff; display:block; text-align:center; border:1px solid #2d3291;}

.footer-subpage .flex-ul li a i {padding-top:7px;}
.footer-subpage .flex-ul li:not(:last-child) {margin-right:6px;}

.footer-subpage .flex-ul {justify-content: flex-end;}
.footer-subpage .flex-ul li a:hover {border-color:#2d3291; background-color:#fff; color:#2d3291;}

.footer-tall {border-top: 1px solid #f3f3fb; background:#f3f3fb; position: relative; padding:50px 0 40px;}
.footer-main-title {font-size:1.8rem; font-weight: 300; margin-bottom: 42px;  border-bottom: 1px solid  rgba(222,222,222,1); padding-bottom: 22px;}

.footer-col-subtitle {font-size:1.4rem; font-weight: 400; margin-bottom: 10px;}
.footer-subcontent p {font-size:1rem; line-height: 21px; font-weight: 300; color: #505050; margin-bottom: 18px;}

.footer-tall ul li {margin: 0; font-size: 14px;}
.footer-link ul li {line-height: 28px; list-style:none;}

.footer-link ul {padding-left:0;}
.footer-link ul li a {color: #505050;}

footer .btn-primary {color: #fff; background-color: #2d3290; border-color: #2d3290; border-radius:0;}
.footer-form .btn-primary {padding: 5px 20px; font-size:0.9rem; margin-top: 8px;}

.footer-subcontent ul {display: flex !important; display: -ms-flexbox; flex-wrap: wrap; list-style:none; padding-left:0;}
.footer-subcontent ul li {margin-right: 12px !important; }

.footer-subcontent ul li a {display: block; width: 30px; height: 30px; border-radius: 50px; background-color: #d6d6d6; text-align: center;  color: #505050;}
.footer-subcontent ul li a i {padding-top: 8px;}

.footer-subcontent ul li a:hover {background-color: #505050; color: #fff;}
.footer-bottom-link {border-top: 1px solid rgba(222,222,222,1); padding-top: 30px; margin-top: 20px;}

.footer-bottom-link ul {display: flex !important; display: -ms-flexbox; flex-wrap: wrap; margin-left: auto; -ms-flex-pack: end !important; justify-content: flex-end !important;  margin-bottom: 0; list-style:none; padding-left:0;}
.footer-bottom-link ul li::after {content: ''; position: absolute; width: 1px; height: 10px; background-color:  #505050; right: 0; top: 6px;}

.footer-bottom-link ul li {padding: 0 12px; position: relative !important;}
.footer-bottom-link ul li a {color: #505050;}

.footer-bottom-link ul li:last-child::after {content: initial !important;}
footer .form-control::placeholder {font-size:0.9rem;}

.custom-modal {max-width:600px;}
.custom-modal .post-body-content h2 {font-size: 1.2rem; margin-top: 0; font-weight: 400;}

.custom-modal .post-body-row p.text-right {margin-bottom:0;}
.custom-modal .social-section {margin-top:20px;}

.input-group.date .form-control {font-weight: 300; font-size: 15px; color:#8c8e8c;}
.vr-step-form-section select.form-control {font-weight: 300; font-size: 15px; color:#8c8e8c;}

.morecontent span {display: none;  -webkit-transition: 1s;  transition: 1s;}
.morelink { display:inline-block; font-weight:300;  -webkit-transition: 1s; transition: 1s; color:#333333;}

.morecontent { -webkit-transition: 1s; transition: 1s;}
.info-img {-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4)); filter:drop-shadow(2px 2px 1px rgba(0,0,0,0.4))}

.modal-flex {display:flex; display:-ms-flexbox; flex-wrap:wrap; justify-content: center; border: 3px solid #ed7d31; padding: 12px 0;}
.modal-flex span {display:block; border:2px solid #42719b; margin:10px 6px; padding: 10px 8px;}

@media (min-width:320px) and (max-width:767px) {
.modal-flex span {max-width:100%; flex:0 0 100%; -ms-flex:0 0 100%;}
.modal-flex {padding:12px 10px;}	
}

.take-part-section button.takep-btn { color: #fff; -moz-border-radius: 4px; background-color:#2d3290; -webkit-border-radius: 4px; border-radius: 4px; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s;
    -ms-transition: all .3s; transition: all .3s;}

.take-part-section button.btn:hover {opacity: 0.6; color: #fff;}
.take-part-section button.btn:active {outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}

.take-part-section button.btn:focus {outline: 0; opacity: 0.6; background: #2d3290; color: #fff;}
.take-part-section button.btn:active:focus,button.btn.active:focus {outline: 0; opacity: 0.6; background: #2d3290;color: #fff;}

.take-part-section .btn-link-1 {display: inline-block; height: 50px; margin: 0 5px; padding: 16px 20px 0 20px; background: #2d3290; font-size: 16px; font-weight: 300; line-height: 16px; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px;
    border-radius: 4px;}

.take-part-section .btn-link-1:hover,.take-part-section .btn-link-1:focus,.take-part-section .btn-link-1:active {outline: 0; opacity: 0.6; color: #fff;}
.btn-link-2 {display: inline-block; height: 50px; margin: 0 5px; padding: 15px 20px 0 20px; background: rgba(0, 0, 0, 0.3); border: 1px solid #fff; font-size: 16px; font-weight: 300; line-height: 16px; color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

.take-part-section .btn-link-2:hover,.take-part-section .btn-link-2:focus,.take-part-section .btn-link-2:active,.take-part-section .btn-link-2:active:focus {outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff;}

.take-part-section .form-top {overflow: hidden; padding: 0 25px 15px 25px; background: #2d3290; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; text-align: left; color: #fff; transition: opacity .3s ease-in-out;}
.take-part-section .form-top h3 {color: #fff;}

.take-part-section .form-bottom {transition: all .4s ease-in-out;}

.take-part-section form .form-bottom button.btn {min-width: 105px;}
.take-part-section form .form-bottom .input-error {border-color: #d03e3e; color: #d03e3e;}

.take-part-section form.registration-form fieldset {display: none;}	
.card-body .view-more-section {text-align: center; margin-top: 10px;}

.card-body .view-more-section a {font-weight:300;}
.response-section .card-body {padding-bottom:10px; padding-top:0; min-height: 280px;} 

.flex-row-tr {display:flex; display:-ms-flexbox; flex-wrap:wrap; -ms-flex-pack: end;  justify-content: flex-end}
.post-body-row span.more {color:#333333; font-weight: 200;}

.response-section h2 {text-align:center; margin-bottom:24px; margin-top:18px;}
.response-section .card {border-color:rgba(0,0,0,.2); border-radius:0; margin-bottom:16px; border-radius: 3px;}

.dropzone .title {margin-right: auto; margin-left: auto; text-align: center}

.dropzone .info {margin-top: 11%}
.dropzone p {margin: 0%; text-align: center; width: 100%}

.dropzone .input {height: 100%; left: 0; outline: 0; opacity: 0; position: absolute; top: 0; width: 100%}
.dropzone .status {border-radius: 5px; text-align: center;width: 50%; margin-left: auto; margin-right: auto}

.dropzone .image-url {width: 50%}
.dropzone.dropzone-dragging {border-color: #000}

.loading-modal {background-color: rgba(255, 255, 255, .8); display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%}
.loading-table {margin-left: auto; margin-right: auto; margin-top: 15%; margin-bottom: 15%}

.dropzone .img {width: 100%}
.dropzone {height: 200px; position: relative; margin-right: auto; margin-left: auto; max-width: 50%}

.dropzone {border: 1px solid #eee !important; height: 140px !important; position: relative; margin-right: auto; margin-left: auto; max-width: 100% !important; background: #f0eeee !important; }
.uploadfuzone { background: #f0eeee !important; margin-top: 0px; color: #fff}

.fuzone {position: relative; background: #f9f9f9; transition: all 0.3s linear; margin-bottom: 10px; margin-top: 5px; display: inline-block; width: 100%; min-height: 150px; margin-top: 20px;
    float: left; cursor: pointer}

.fuzone .fu-text {text-align: center; margin: 32px 0; font-size: 12px; color: #98AAB8; position: relative}
.fuzone .fu-text i {font-size: 54px; width: 100%; padding-bottom: 10px; transition: all 0.3s linear}

.dropzone .status {border-radius: 5px; text-align: center; width: 50%; margin-left: auto; margin-right: auto}
.dropzone .imgur-upload {width: 202px; height: 150px; }

.imgur-link {color: #fff}
.post-container {margin-bottom:0;}

.page-head-nav .dropdown-menu a {color:#333333; border-bottom:1px solid #ddd; font-weight:300; font-size:16px;}
.page-head-nav .dropdown-menu a:hover {color:#333333; }

.page-head-nav .dropdown-menu {padding-top:0; padding-bottom:0;}
.page-head-nav .dropdown-menu a:last-child {border-bottom:none;}

.page-head-nav .dropdown-menu:before {position: absolute; content: ''; border-top: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; display: inline-block; top: -8px; left: 12px;}
.dashboard-col {border:1px solid rgba(0,0,0,0.6); margin-bottom:30px;}

.dashboard-col p {text-align:center; margin-bottom:0; padding:64px 0 56px;}
.dashboard-col p span {display:block; font-weight:bold; margin-top:10px;}

@media (min-width:1024px) {
.flex-col-2 {-ms-flex: 0 0 11.666667% !important; flex: 0 0 11.666667% !important; max-width: 11.666667% !important;}	
.flex-col-10 {-ms-flex: 0 0 88.333333% !important; flex: 0 0 88.333333%  !important; max-width: 88.333333%  !important;}
}

.comment-section {text-align:right; margin-top:30px;}
.comment-section .col-sm-12 .btn-danger {margin-right:10px;}

.comment-section .dropdown-menu {right: 0; left: auto !important; min-width: 600px; transform: translate3d(0,33px,0) !important; padding-bottom:15px; top:16px !important;}
.comment-textarea {padding:0 8px;}

.comment-upload-btn { color:#2d3290; border:1px solid #2d3290; margin-top:0; margin-top: 0 !important; margin-right: 30px !important;}
.comment-row-bt {display:flex; display:-ms-flexbox;}

.comment-row-bt .btn {padding:6px 24px;}
.comment-section .dropdown-menu:before {content: ''; position: absolute; border-bottom: 10px solid #ddd; border-top: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; top: -11px; right: 24px;}

.nav-desktop-none {display:none;} 
.tab-content .tab-pane .post-container:last-child {margin-bottom:0;}

.post-head .card-body-row .card-body p {text-align:center;}
.post-head .card-body-row .card-body p span {margin-top:3px;}

.page-nation .pagination { -ms-flex-pack: end; justify-content: flex-end;}
.page-nation .page-item.active .page-link {background-color:#2d3290; border-color:#2d3290;}

.page-nation .page-link {color: #2d3290; }


@media screen and (min-width: 300px) and (max-width: 700px) {
.dropzone {max-width: 80%}
.dropzone .info {margin-top: 30%}

.dropzone .status {width: 80%}
.dropzone .image-url {width: 80%}

.dropzone .loading-table {margin-left: auto;  margin-right: auto; margin-top: 50%; margin-bottom: 50% }
}

.image-preview-section {position:relative;}
.snippet_image_div {position:absolute; top:0; left:0; right:0;}

.snippet_image_div img {max-width:100%;}
.preview-btn-a {background-color:transparent !important; color:#2d3290;}

.preview-btn-a:hover {color:#2d3290;}
.page-head-nav ul li a.active {font-weight:600;}

.page-head-form select option { color: black; }
.page-head-form select option:first-child{color: black;}

.nav-left-pdl-none {padding-left:0;}
.post-body-row {margin-bottom:20px;}

.multimedia-section {max-width: 150px; margin: auto; margin-bottom:14px; margin-top:24px;}
.brand-block {height:80px;}

.brand-block img {height:100%; margin-left:auto; margin-right:auto; display:block;}
.field-content p {color:#fff; margin-bottom:0;}

.signup-form-conent {position:relative;}
.field-content {position: absolute; right: 50px; bottom: -30px; z-index: 2;}

.signup-container .signup-content {max-width: 58.333333%; margin:auto;}
.without-background i {background-color:transparent;}

#color-text-dropdown .dropdown-menu a {color: #434343 !important; padding: 6px 10px; font-size: 14px; display: block; border-bottom: 1px solid rgba(222,222,222,0.4);}
#color-text-dropdown .dropdown-toggle::after {content: initial;}

.notification-circle {width: 20px; height: 20px; border-radius: 50%; position: absolute; background-color: #2d3291; text-align: center; font-size: 12px; padding-top: 1px; top: -11px; left: 20px;}
#color-text-dropdown .dropdown-toggle {position:relative;}

#color-text-dropdown .dropdown-menu a:last-child {border-bottom:none;}
#color-text-dropdown .dropdown-menu {padding-top:0; padding-bottom:0; top:35px;}

#color-text-dropdown .dropdown-menu:before {position: absolute; content: ''; border-top: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; display: inline-block; top: -8px; left: 12px;}

.open-not a {position:relative;}
.open-not .notification-circle {background-color:#5489ef; right: 0; left: auto; top: -2px;}

@media (min-width:320px) and (max-width:767px) {
.header-nav ul li a {display:inline-block;}	
.header-nav ul li {text-align:center;}
.open-not .notification-circle {right:-10px;}
.notification-circle {background-color:#5489ef; top:-2px;}
#color-text-dropdown .dropdown-menu::before {content:initial;}
}

.file {visibility: hidden; position: absolute;}
.custom-imageup-section {max-width:300px;}

.custom-imageup-section #preview {width:100%; height:300px; display:block;}
.custom-imageup-section .btn {margin-top:0;}

.form-border {border-bottom: 2px solid #ddd; padding-bottom: 10px;}
.col-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px}

.icount-col-8, .icount-col-4 {width:100%; position:relative; padding-left:15px; padding-right:15px;}

@media (min-width:767px) {
.icount-col-4 {max-width:35%; flex:0 0 35%; -ms-flex:0 0 35%;}
.icount-col-8 {max-width:65%; flex:0 0 65%; -ms-flex:0 0 65%;}	
}


/* new css */

.note-col p {font-size:15px; font-weight:200;}
.img-dimesion .modal-header {padding:0; border-bottom:none;}

.img-dimesion .modal-header .close {margin-right:-10px;}
.img-dimesion .modal-body {padding-top:0;}

.img-dimesion .modal-body p {font-size: 15px; font-weight: 200; text-align: center; margin-top: 12px; line-height: 14px; margin-bottom: 0;}

/* API HEAD */
.api-head {background-color:#1821bb; padding:26px 15px; border-bottom:1px solid #060b5c;}
.api-brand-section {text-align: center; background-color: #2c7db7; padding: 16px; border-bottom:12px solid #60b1db;}

.api-brand-section img {width:120px;}
.api-brand-section h6 {color: #fff; margin-bottom: 0; margin-top: 8px;}

.api-form-section {margin-top:32px; border: 1px solid #ddd;}
.api-form-body {padding:0 15px;}

.api-form-body .btn-default {background-color:#ddd;}
#datetimepicker1 .form-control {height:38px;}

.custom-slider-row .slider {-webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;}
.custom-slider-row .slider:hover {opacity: 1;}

.custom-slider-row .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}
.custom-slider-row .slider::-moz-range-thumb {width: 25px; height: 25px; border-radius: 50%; background:#1821bb; cursor: pointer;}

.custom-slider-row .slider1 {-webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;}
.custom-slider-row .slider1:hover {opacity: 1;}

.custom-slider-row .slider1::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}
.custom-slider-row .slider1::-moz-range-thumb {width: 25px; height: 25px; border-radius: 50%; background:#1821bb; cursor: pointer;}

.api-custom-table-radio .table thead th, .table tbody td {font-weight: normal; text-align: center; font-size: 13px;}
.api-custom-table-radio .table tbody tr td:first-child {text-align:left;}

.api-custom-table-radio .table thead th:not(:first-child), .table tbody td:not(:first-child) {max-width: 100px; vertical-align: middle;}
.api-custom-table-radio .custom-control-label::after, .api-custom-table-radio .custom-control-label::before {left:0}

.api-signup-body .form-group .table .custom-control {min-height: 10px;}
.location-icon-text .form-control {background-image: url(../images/stepimage/Location.png); background-repeat: no-repeat; height: 47px; background-size: 24px; padding-top: 12px;
  padding-left: 42px; background-position: 3% 50%;}

.calendar-icon-text .form-control {background-image: url(../images/sidebar/new/Events.png); background-repeat: no-repeat; height: 47px; background-size: 24px; padding-top: 12px;
  padding-left: 42px; background-position: 3% 50%;}  

.edit-text-iconarea .form-control {background-image: url(../images/stepimage/Edit.png); background-repeat: no-repeat; background-size: 24px; background-position: 8px 4px; padding-left: 42px;}  
.edit-text-iconarea .form-control::placeholder {text-align: left;}

.cc-selector input {margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.cc-selector-2 input {position: absolute; z-index: 999;}

.imgone { background-image: url(../images/choose-img/img-1.png);}
.imgtwo {background-image: url(../images/choose-img/img-2.png);}

.imgthree {background-image: url(../images/choose-img/img-3.png);}

.cc-selector-2 input:active +.drinkcard-cc,.cc-selector input:active +.drinkcard-cc {opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc,.cc-selector input:checked +.drinkcard-cc { -webkit-filter: none; -moz-filter: none; filter: none;}

.drinkcard-cc { cursor: pointer; background-size: contain; background-repeat: no-repeat; display: inline-block; width: 250px; height: 170px; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in; -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); -moz-filter: brightness(1.8) grayscale(1) opacity(.7); filter: brightness(1.8) grayscale(1) opacity(.7); position: static !important;}

.drinkcard-cc:hover {-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); filter: brightness(1.2) grayscale(.5) opacity(.9);}

.star-rating-col h1[alt="Simple"] {color: white;}
.star-rating-col a[href], .star-rating-col a[href]:hover {color: grey; font-size: 0.5em; text-decoration: none}

.cc-selector {margin:6px 0 10px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.step-question-flex {margin-bottom:20px;}

.api-signup-body .actions ul li:first-child {margin-left:0;}
.pr-counter {font-size: 12px; color: rgba(0, 0, 0, 0.6); max-width: 43px; padding-left: 10px; width:100%;}
.counter-anchor {font-size: 12px; color:rgba(0, 0, 0, 0.6);}
.dflexalign {display:flex; align-items: center;}

.progress {width:100%;}

@keyframes zoomstars {
  0% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}


.category-btn .btn {border: 1px solid #ced4da; font-weight: 300; font-size: 15px; color: #8c8e8c; text-align: left; padding: 10px;}
.category-btn { max-width: 408px; width: 100%;}
.category-btn .dropdown-item a {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding-left: 5px; padding-right: 5px;}
.d-flex {margin-left: -5px; margin-right: -5px;}

.category-btn .dropdown-toggle::after {position: absolute; right: 10px; top: 50%;  transform: translate(0,-50%);}
.categories-title h6 {color: rgba(0, 0, 0, 0.8); font-weight: 300; font-size: 14px; line-height: 18px; margin-bottom: 12px;}
.categories-title h6 small {display: block; color: rgba(0, 0, 0, 0.5); font-size: 12px; font-weight: 300;}
.subcategorybtn {max-width: 592px; width: 100%;}
.subcategorybtn .dropdown-item a { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; padding-left: 5px; padding-right: 5px;}
.left-inputarea .form-control::placeholder {text-align: left;}
.left-inputarea .form-control {border-radius: 3px !important;}

@media (min-width:320px) and (max-width:480px) {
.api-signup-body .actions ul li {margin-left:0 !important;}	
.step-view-result .btn {width:70px !important;}

.sm-pt-0 #signup-form-p-0 {padding-top:10px !important;}

}

.starrating > input {display: none;} 
.starrating > label:before { content: "\f006"; /* Star */ margin:2px 20px 0 0; font-size: 22px; font-family: FontAwesome; display: inline-block; }

.starrating > label {color: #222222; position: static !important;}

.starrating > input:checked ~ label { color: #ffca08 ; } 
.starrating > input:hover ~ label { color: #ffca08 ;  } 

.risingstar > label:after {font-family: FontAwesome; content: "\f006"; /* Star */ display: none; position: absolute; margin:2px 20px 0 0; font-size: 22px; top: 0;}
.risingstar > input:checked + label:after {  animation: 0.7s zoomstars; display: block;}

.justify-content-st {justify-content:start}




/* Company/Brand/MLA/Govt page profile Sign Up Form Start here*/
@font-face {font-family: "Muli-Bold"; src: url("../fonts/muli/Muli-Bold.ttf"); }
@font-face { font-family: "Poppins-Regular"; src: url("../fonts/poppins/Poppins-Regular.ttf"); }

@font-face {font-family: "Poppins-SemiBold"; src: url("../fonts/poppins/Poppins-SemiBold.ttf"); }
.company-signup-container .wizard > .steps .current-info, .company-signup-container .wizard > .steps .number {display: none; }
.company-signup-container .image-holder {width: 41.07%; align-self: flex-end; }

.company-signup-container .form-header {text-align: center; margin-bottom:28px;}

.company-signup-container .form-header a {font-family: "Poppins-Regular"; color: #fff; display: inline-block; padding: 5px 15px; border-radius: 5px; background: #e4bd37; }

.company-signup-container h3 {color:#fff;}
.company-signup-container p {color:#fff;}

.company-signup-container .wizard > .steps ul {content: ""; width: 60%; height: 12px; background: rgba(255, 255, 255, 0.3); border-radius: 6px; position: absolute; left: 50%; bottom: -69px; transform: translateX(-50%); }
.company-signup-container .wizard > .steps ul:before {content: '\f26b'; position: absolute;font-size: 20px; font-family: Material-Design-Iconic-Font; bottom: 20px;  left: 29.4%; transition: all 0.5s ease; }

.company-signup-container .wizard > .steps ul:after {content: "";  width: 33.33%;  height: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; position: absolute; top: 0; left: 0; transition: all 0.5s ease; }
  .company-signup-container .wizard > .steps ul.step-2:before {left: 62.5%; transition: all 0.5s ease; }
  
.company-signup-container .wizard > .steps ul.step-2:after {width: 66.67%; transition: all 0.5s ease; }
.company-signup-container .wizard > .steps ul.step-3:before {left: 96%; transition: all 0.5s ease; }

.company-signup-container .wizard > .steps ul.step-3:after { width: 100%; transition: all 0.5s ease; }
.company-signup-container .form-row {display: flex; margin-bottom: 29px; align-items: center; }

.company-signup-container .form-row:last-child {margin-bottom: 0; }
.company-signup-container .form-row label {width: 34.9%; margin-right: 40px; }

.company-signup-container .form-row .form-holder {width: 65.1%; }
.company-signup-container .form-holder {position: relative; }

.company-signup-container .form-holder i {position: absolute; bottom: 7px; right: 20px; font-size: 25px; }
.company-signup-container .form-control {height: 50px; border: 1px solid rgba(255, 255, 255, 0.4); background: none; border-radius:0; width: 100%; padding: 0 18px; background: rgba(255, 255, 255, 0.2); color: #fff; }
  
.company-signup-container .form-control:focus {box-shadow: 0px 0px 7px 0px rgba(255, 255, 255, 0.7); border: 1px solid #ceebf7; }
.company-signup-container .form-control::-webkit-input-placeholder {color: #fff;}

.company-signup-container .form-control::-moz-placeholder {color: #fff;}
.company-signup-container .form-control:-ms-input-placeholder {color: #fff;}

.company-signup-container .form-control:-moz-placeholder {color: #fff;}
.company-signup-container .option {color: #999; }

.company-signup-container .actions ul {display: flex; margin-top: 0; justify-content: space-between; }
.company-signup-container .actions li a {padding: 0; border: none; width: 100px; letter-spacing: 1.3px; align-items: center; background:#0c8af8; font-family: "Muli-Bold"; cursor: pointer;
  position: relative; color: #fff; border-radius: 27px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);  -webkit-transition-duration: 0.3s; transition-duration: 0.3s; border:1px solid #fff; text-align: center; padding: 6px 26px;}

.company-signup-container .actions li a:hover {background: #0c8af8; text-decoration:none;}
/* .company-signup-container .actions li a:hover:before {-webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s;  animation-duration: 1s;
      -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
 */	  
.company-signup-container .actions li[aria-disabled="true"] a {opacity: 0; transition: all 0.3s; }
.company-signup-container .actions li:first-child a {width: 136px; background: #fff; color: #666; font-family: "Muli-Bold";}

/* .company-signup-container .actions li:first-child a:before { content: '\f2ea'; left: 32px; font-size: 18px; } */
.company-signup-container .actions li:first-child a:hover { background: #e5e5e5; }

.company-signup-container .actions li:last-child a {width: 154px; }

@-webkit-keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px); }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px); }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px); }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px); }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px); }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px); }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
.company-signup-container .checkbox-circle {display: flex; justify-content: space-between; }
.company-signup-container .checkbox-circle label {cursor: pointer; display: inline-block; padding-left: 23px; position: relative; margin-right: 0; width: auto; }

.company-signup-container .checkbox-circle input {position: absolute; opacity: 0; cursor: pointer; }
.company-signup-container .checkbox-circle input:checked ~ .checkmark:after {display: block; }

.company-signup-container .checkbox-circle .checkmark {position: absolute; top: 4px; left: 0; height: 15px; width: 15px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); }
.company-signup-container .checkbox-circle .checkmark:after { content: ""; top: 3px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; position: absolute; display: none; }


@media (max-width: 1500px) {
.company-signup-container form { /* padding-top: 90px; padding-bottom: 97px;*/ align-self: flex-start; } 
.company-signup-container .wrapper {height: auto; } 
}

@media (max-width: 1199px) {
.company-signup-container .wrapper {height: 100vh; width: auto; }
.company-signup-container .image-holder { align-self: center; }

.company-signup-container .image-holder img { transform: translateY(40px); }
.company-signup-container form {padding-top: 0; padding-bottom: 0; padding-left: 50px; padding-right: 50px; align-self: center; } }


@media (max-width: 991px) {
.company-signup-container .wrapper {justify-content: center; }
.company-signup-container .image-holder {display: none; }

.company-signup-container form {width: auto; } }

@media (max-width: 767px) {
.company-signup-container body { height: auto; }
.company-signup-container .wrapper { height: auto; padding: 30px 20px; }

.company-signup-container #wizard {border: none; display: flex; flex-direction: column; background: none; }
.company-signup-container form, #wizard {padding: 0; }

.company-signup-container h3 { margin-bottom: 30px; }
.company-signup-container .form-row { display: block; }

.company-signup-container .form-row label {margin-bottom: 29px; display: block; }
.company-signup-container .form-row label, .form-row .form-holder { width: 100%; }

.company-signup-container .checkbox-circle {display: block; }
.company-signup-container .wizard > .steps {order: 3; margin-top: 60px; margin-bottom: 20px; }

.company-signup-container .wizard > .steps ul {position: static; transform: translateX(0); width: 100%; }
.company-signup-container .actions ul {flex-direction: column; align-items: flex-end; margin-top: 0; }

.company-signup-container .actions li a {height: 44px; }
.company-signup-container .actions li a:before { top: 13px; }

.company-signup-container .actions li:first-child a {margin-bottom: 20px; } }

.bg-section {background-image: url(../images/background/bg-graphic.jpg); background-repeat: no-repeat; background-size: cover;}
.company-signup-container ul {padding: 0; margin: 0; list-style: none; }

.steps.clearfix {display:none;}
.company-signup-container label {color:#fff; font-size:18px;}

.pdr-28 {padding-right:28px;}
.company-signup-container .form-check-input {margin-top:8px;}

.company-signup-container .content {padding:0;}
.company-sub-btn {padding: 16px 112px !important; margin-bottom: 30px; margin-top: 30px; border: 1px solid #fff !important;}

.company-signup-container .form-group {margin-bottom:0;} 
.company-signup-container .form-group .col-md-6 {margin-bottom:15px;}

/* Company/Brand/MLA/Govt page profile Sign Up Form End here*/

.vr-tab-section .nav-tabs .nav-link img {height:24px;}
.vr-tab-section .nav-item {margin-bottom:8px;}

.step-image-row img {height: 50px; margin-right: 10px;}

.step-image-row img:last-child {margin-right:0;}
.vr-step-form-section button.dropdown-toggle {color:#8c8e8c; font-weight: 300; font-size: 15px; height:calc(1.9em + .75rem + 2px); border-radius:0;}

.vr-step-form-section button.dropdown-toggle:hover {color:#8c8e8c; background-color:#fff !important;}
.vr-step-form-section button.dropdown-toggle:focus {color:#8c8e8c; background-color:#fff !important; opacity:1 !important; outline:none !important;}

.likedislike-section a {margin-right:5px; display:inline-block; text-decoration:none;}
.likedislike-section a:last-child {margin-right:0;}

.likenone {display:none;}
.likeblock {display:block;}

.agree {background-image: url('../images/likeicon/agdeas.png'); background-repeat: no-repeat; width: 30px; height: 33px;}
.desagree {background-image: url('../images/likeicon/agdeas.png'); background-repeat: no-repeat; width: 30px; height: 33px; background-position: bottom;}

.curiousicon {background-image: url('../images/likeicon/curiousdecu.png'); background-repeat: no-repeat; width: 30px; height: 33px;}
.curiousiconde {background-image: url('../images/likeicon/curiousdecu.png'); background-repeat: no-repeat; width: 30px; height: 33px; background-position: bottom;}

.insighticon {background-image: url('../images/likeicon/insightout.png'); background-repeat: no-repeat; width: 30px; height: 33px;}
.insighticonde {background-image: url('../images/likeicon/insightout.png'); background-repeat: no-repeat; width: 30px; height: 33px; background-position: bottom;}

.usefulicon {background-image: url('../images/likeicon/usefulunle.png'); background-repeat: no-repeat; width: 30px; height: 33px;}
.usefuliconde {background-image: url('../images/likeicon/usefulunle.png'); background-repeat: no-repeat; width: 30px; height: 33px; background-position: bottom;}


/* message chat box css */

#frame {width: 100%; min-width: 360px; max-width: 1000px; height: 92vh; min-height: 300px; max-height: 720px; background: #E6EAEA;}

@media screen and (max-width: 360px) {
#frame {width: 100%;  height: 100vh; }
}

#frame #sidepanel {float: left; min-width: 280px; max-width: 340px; width: 40%; height: 100%; background: #2c3e50; color: #f5f5f5; overflow: hidden; position: relative;}

@media screen and (max-width: 735px) {
#frame #sidepanel {width: 58px;  min-width: 58px; }
}

#frame #sidepanel #profile {width: 80%; margin: 25px auto;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile {width: 100%; margin: 0 auto; padding: 5px 0 0 0; background: #32465a;}
}

#frame #sidepanel #profile.expanded .wrap {height: 210px; line-height: initial;}
#frame #sidepanel #profile.expanded .wrap p {margin-top: 20px;}

#frame #sidepanel #profile.expanded .wrap i.expand-button {-moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipH; -ms-filter: "FlipH";}
#frame #sidepanel #profile .wrap {height: 60px; line-height: 60px; overflow: hidden; -moz-transition: 0.3s height ease; -o-transition: 0.3s height ease; -webkit-transition: 0.3s height ease; transition: 0.3s height ease;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap {height: 55px;}
}

#frame #sidepanel #profile .wrap img {width: 50px; border-radius: 50%; padding: 3px; border: 2px solid #e74c3c; height: auto; float: left; cursor: pointer; -moz-transition: 0.3s border ease; -o-transition: 0.3s border ease;
  -webkit-transition: 0.3s border ease; transition: 0.3s border ease;}
  
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap img {width: 40px; margin-left: 4px; }
}

#frame #sidepanel #profile .wrap img.online {border: 2px solid #2ecc71;}
#frame #sidepanel #profile .wrap img.away { border: 2px solid #f1c40f;}

#frame #sidepanel #profile .wrap img.busy {border: 2px solid #e74c3c;}
#frame #sidepanel #profile .wrap img.offline {border: 2px solid #95a5a6;}

#frame #sidepanel #profile .wrap p {float: left; margin-left: 15px;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap p {display: none;}
}

#frame #sidepanel #profile .wrap i.expand-button {float: right; margin-top: 23px; font-size: 0.8em; cursor: pointer; color: #435f7a;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap i.expand-button { display: none; }
}

#frame #sidepanel #profile .wrap #status-options {position: absolute; opacity: 0; visibility: hidden; width: 150px; margin: 70px 0 0 0; border-radius: 6px; z-index: 99; line-height: initial; background: #435f7a;
  -moz-transition: 0.3s all ease; -o-transition: 0.3s all ease; -webkit-transition: 0.3s all ease; transition: 0.3s all ease;}
  
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options { width: 58px;  margin-top: 57px; }
}

#frame #sidepanel #profile .wrap #status-options.active {opacity: 1; visibility: visible; margin: 75px 0 0 0;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options.active { margin-top: 62px; }
}

#frame #sidepanel #profile .wrap #status-options:before {content: ''; position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #435f7a;
  margin: -8px 0 0 24px;}
  
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options:before { margin-left: 23px; }
}

#frame #sidepanel #profile .wrap #status-options ul {overflow: hidden; border-radius: 6px;}
#frame #sidepanel #profile .wrap #status-options ul li {padding: 15px 0 30px 18px; display: block; cursor: pointer;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li { padding: 15px 0 35px 22px; }
}

#frame #sidepanel #profile .wrap #status-options ul li:hover {background: #496886;}
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {position: absolute; width: 10px; height: 10px; border-radius: 50%; margin: 5px 0 0 0;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {width: 14px; height: 14px;}
}

#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {content: ''; position: absolute; width: 14px; height: 14px; margin: -3px 0 0 -3px; background: transparent; border-radius: 50%;
  z-index: 0;}
  
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {height: 18px; width: 18px;}
}

#frame #sidepanel #profile .wrap #status-options ul li p {padding-left: 12px;}

@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li p {display: none; }
}

#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {background: #2ecc71;}
#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {border: 1px solid #2ecc71;}

#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {background: #f1c40f;}
#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {border: 1px solid #f1c40f;}

#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {background: #e74c3c;}
#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {border: 1px solid #e74c3c;}

#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {background: #95a5a6;}
#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {border: 1px solid #95a5a6;}

#frame #sidepanel #profile .wrap #expanded {padding: 100px 0 0 0; display: block; line-height: initial !important;}
#frame #sidepanel #profile .wrap #expanded label {float: left; clear: both; margin: 0 8px 5px 0; padding: 5px 0;}

#frame #sidepanel #profile .wrap #expanded input {border: none; margin-bottom: 6px; background: #32465a; border-radius: 3px; color: #f5f5f5; padding: 7px; width: calc(100% - 43px);}
#frame #sidepanel #profile .wrap #expanded input:focus {outline: none; background: #435f7a;}

#frame #sidepanel #search {border-top: 1px solid #32465a; border-bottom: 1px solid #32465a; font-weight: 300;}

@media screen and (max-width: 735px) {
#frame #sidepanel #search {display: none; }
}

#frame #sidepanel #search label {position: absolute; margin: 10px 0 0 20px;}
#frame #sidepanel #search input {font-family: "proxima-nova",  "Source Sans Pro", sans-serif; padding: 10px 0 10px 46px; width: calc(100% - 25px); border: none; background: #32465a; color: #f5f5f5;}

#frame #sidepanel #search input:focus {outline: none; background: #435f7a;}
#frame #sidepanel #search input::-webkit-input-placeholder {color: #f5f5f5;}

#frame #sidepanel #search input::-moz-placeholder {color: #f5f5f5;}
#frame #sidepanel #search input:-ms-input-placeholder {color: #f5f5f5;}

#frame #sidepanel #search input:-moz-placeholder {color: #f5f5f5;}
#frame #sidepanel #contacts {height: calc(100% - 177px); overflow-y: scroll; overflow-x: hidden;}

@media screen and (max-width: 735px) {
#frame #sidepanel #contacts {height: calc(100% - 149px); overflow-y: scroll; overflow-x: hidden;}
#frame #sidepanel #contacts::-webkit-scrollbar {display: none; }
}

#frame #sidepanel #contacts.expanded {height: calc(100% - 334px);}
#frame #sidepanel #contacts::-webkit-scrollbar {width: 8px;background: #2c3e50;}

#frame #sidepanel #contacts::-webkit-scrollbar-thumb {background-color: #243140;}
#frame #sidepanel #contacts ul li.contact {position: relative; padding: 10px 0 15px 0; font-size: 0.9em; cursor: pointer;}

@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact {padding: 6px 0 46px 8px; }
}

#frame #sidepanel #contacts ul li.contact:hover {background: #32465a;}
#frame #sidepanel #contacts ul li.contact.active {background: #32465a; border-right: 5px solid #435f7a;}

#frame #sidepanel #contacts ul li.contact.active span.contact-status {border: 2px solid #32465a !important;}
#frame #sidepanel #contacts ul li.contact .wrap {width: 88%; margin: 0 auto; position: relative;}

@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact .wrap { width: 100%; }
}
#frame #sidepanel #contacts ul li.contact .wrap span {position: absolute; left: 0; margin: -2px 0 0 -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #2c3e50; background: #95a5a6;}
#frame #sidepanel #contacts ul li.contact .wrap span.online {background: #2ecc71;}

#frame #sidepanel #contacts ul li.contact .wrap span.away {background: #f1c40f;}
#frame #sidepanel #contacts ul li.contact .wrap span.busy {background: #e74c3c;}

#frame #sidepanel #contacts ul li.contact .wrap img {width: 40px; border-radius: 50%; float: left; margin-right: 10px;}

@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact .wrap img { margin-right: 0px;}
}

#frame #sidepanel #contacts ul li.contact .wrap .meta {padding: 5px 0 0 0;}

@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact .wrap .meta {display: none;}
}

#frame #sidepanel #contacts ul li.contact .wrap .meta .name {font-weight: 600;}
#frame #sidepanel #contacts ul li.contact .wrap .meta .preview {margin: 5px 0 0 0; padding: 0 0 1px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -moz-transition: 1s all ease;
  -o-transition: 1s all ease; -webkit-transition: 1s all ease; transition: 1s all ease;}
  
#frame #sidepanel #contacts ul li.contact .wrap .meta .preview span {position: initial; border-radius: initial; background: none; border: none; padding: 0 2px 0 0; margin: 0 0 0 1px; opacity: .5;}
#frame #sidepanel #bottom-bar {position: absolute; width: 100%; bottom: 0;}

#frame #sidepanel #bottom-bar button {float: left; border: none; width: 50%; padding: 10px 0; background: #32465a; color: #f5f5f5; cursor: pointer; font-size: 0.85em; }

@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button {float: none; width: 100%; padding: 15px 0; }
}
#frame #sidepanel #bottom-bar button:focus { outline: none;}
#frame #sidepanel #bottom-bar button:nth-child(1) { border-right: 1px solid #2c3e50;}

@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button:nth-child(1) { border-right: none; border-bottom: 1px solid #2c3e50; }
}

#frame #sidepanel #bottom-bar button:hover {background: #435f7a;}
#frame #sidepanel #bottom-bar button i {margin-right: 3px;font-size: 1em;}

@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button i {font-size: 1.3em;}
}

@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button span {display: none;}
}

#frame .content {float: right; width: 60%; height: 100%; overflow: hidden; position: relative; padding:0;}
@media screen and (max-width: 735px) {
#frame .content { width: calc(100% - 58px); min-width: 300px !important; }
}

@media screen and (min-width: 900px) {
#frame .content { width: calc(100% - 340px);}
}

#frame .content .contact-profile {width: 100%; height: 60px; line-height: 60px; background: #f5f5f5;}
#frame .content .contact-profile img {width: 40px; border-radius: 50%; float: left; margin: 9px 12px 0 9px;}

#frame .content .contact-profile p {float: left;}
#frame .content .contact-profile .social-media {float: right;}

#frame .content .contact-profile .social-media i {margin-left: 14px; cursor: pointer;}
#frame .content .contact-profile .social-media i:nth-last-child(1) {margin-right: 20px;}

#frame .content .contact-profile .social-media i:hover {color: #435f7a;}
#frame .content .messages_chat {height: auto; min-height: calc(100% - 93px); max-height: calc(100% - 93px); overflow-y: scroll; overflow-x: hidden;}

@media screen and (max-width: 735px) {
#frame .content .messages_chat { max-height: calc(100% - 105px); }
}

#frame .content .messages_chat::-webkit-scrollbar {width: 8px; background: transparent;}
#frame .content .messages_chat::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.3);}

#frame .content .messages_chat ul li {display: inline-block; clear: both; float: left; margin: 15px 15px 5px 15px; width: calc(100% - 25px); font-size: 0.9em;}
#frame .content .messages_chat ul li:nth-last-child(1) {margin-bottom: 20px;}

#frame .content .messages_chat ul li.sent img {margin: 6px 8px 0 0;}
#frame .content .messages_chat ul li.sent p {background: #435f7a; color: #f5f5f5;}

#frame .content .messages_chat ul li.replies img {float: right; margin: 6px 0 0 8px;}
#frame .content .messages_chat ul li.replies p {background: #f5f5f5; float: right;}

#frame .content .messages_chat ul li img {width: 22px; border-radius: 50%; float: left;}
#frame .content .messages_chat ul li p {display: inline-block; padding: 10px 15px; border-radius: 20px; max-width: 205px; line-height: 130%;}

@media screen and (min-width: 735px) {
#frame .content .messages_chat ul li p {max-width: 300px;}
}

#frame .content .message-input {position: absolute; bottom: 0; width: 100%; z-index: 99; padding:10px 0 6px; background-color:#E6EAEA;}
#frame .content .message-input .wrap { position: relative;}

#frame .content .message-input .wrap input {float: left; border: none; width: calc(100% - 90px); padding: 11px 32px 10px 8px; font-size: 0.8em; color: #32465a; height:48px;}

@media screen and (max-width: 735px) {
#frame .content .message-input .wrap input {padding: 15px 32px 16px 8px; }
}

#frame .content .message-input .wrap input:focus {outline: none;}
#frame .content .message-input .wrap .attachment {position: absolute;right: 60px; z-index: 4; margin-top: 10px; font-size: 1.1em; color: #435f7a; opacity: .5; cursor: pointer;}

@media screen and (max-width: 735px) {
#frame .content .message-input .wrap .attachment { margin-top: 17px; right: 65px; }
}

#frame .content .message-input .wrap .attachment:hover {opacity: 1;}
#frame .content .message-input .wrap button {float: right; border: none; width: 50px; padding: 12px 0; cursor: pointer; background: #32465a; color: #f5f5f5;}

@media screen and (max-width: 735px) {
#frame .content .message-input .wrap button {padding: 16px 0; }
}

#frame .content .message-input .wrap button:hover {background: #435f7a;}
#frame .content .message-input .wrap button:focus {outline: none;}

#contacts ul {list-style:none; padding-left:0;}
.contact .wrap .meta p {margin-bottom:0;} 

.contact .wrap .meta p:last-child {font-size:0.8em;} 

@media (min-width:768px) {
  .cus-col-10 {max-width: 80%;
                flex: 0 0 80%;
                -ms-flex:0 0 80%;
  }
  .cus-col-2 {
                max-width: 20%;
                flex: 0 0 20%;
                -ms-flex:0 0 20%;

  }
}