/*html, .body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}*/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
.body {
	line-height: 1;
	
	background-image: linear-gradient(to right top, #c580b7, #a983c1, #8a87c5, #6989c2, #4a8ab9);
	    background-repeat: no-repeat;
	font-family: 'Lato', sans-serif;
	color:#000d1f;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a { color:#4bac4c; text-decoration:none; transition: background-color 0.4s ease 0s, border 0s ease 0s, color 0.4s ease 0s, opacity 0.4s ease-in-out 0s;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

button{cursor: pointer;font-family: 'Lato', sans-serif;}
label{color: #343537;}


/*template 1 css starting*/

.feedback_form_container{max-width: 1000px;margin: 0 auto;}
.feedback_block{width: 100%;box-sizing: border-box; display: table;padding: 0px;padding-bottom: 0px;background-color: #3c4e90;border-radius: 5px;margin-bottom: 40px;}
.header_title{width: 100%;padding: 25px 0px;text-align: center;}
.header_title h1{font-size:30px;color: #fff;line-height: 36px;}

.feedback_block .left_side_bar{width: 60%;float: right;box-sizing: border-box;
    padding: 30px; padding-left: 38px; ;background-color: #fff;    border-bottom-right-radius: 5px; border-top-right-radius: 5px;}

.feedback_block .left_side_bar h2{font-size: 20px;color: #1787e0;font-weight: bold;padding: 10px 0px}
.left_side_bar .information_detail{width: 100%;padding: 15px 0px	}
.left_side_bar .information_detail ul{}
.left_side_bar .information_detail ul li{width: 49.6%;display: inline-block;padding: 5px 10px;padding-left: 0px;padding-bottom: 10px;box-sizing: border-box;}
.left_side_bar .information_detail label{font-size: 14px; color: #343537;display: block;padding-bottom: 10px;}
.left_side_bar .information_detail input{width: 100%;height: 40px;outline: 0;box-sizing: border-box;padding-left: 10px;color: #726e6e;font-weight: 300;font-size: 14px;border-radius: 5px;    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);border: 0;}
.left_side_bar .information_detail input:focus{border: 1px solid #1e8ae0;    transition: all 0.4s ease;}
.left_side_bar .information_detail input::placeholder{color: #726e6e;font-weight: 300;font-size: 14px;}

.ratings { width: 100%;color: #343537 }

.ratings .store_rating{width: 100%;padding: 10px 0px;}

.ratings .store_rating p{font-size: 16px;font-weight: 600;padding-bottom: 10px}
.ratings .store_rating img{max-width: 100%;}
.ratings .service_rating{width: 100%;padding: 10px 0px}
.ratings .service_rating p{font-size: 16px;font-weight: 600;padding-bottom: 10px;}
.ratings .service_rating img{max-width: 100%;}
.left_side_bar .comment{width: 100%;margin-bottom: 20px;clear: both;}
.left_side_bar .comment span{font-weight:600;font-size: 16px;color: #343537;padding-bottom: 15px;display: block;}
.left_side_bar .comment textarea{width: 100%;box-sizing: border-box;padding-left: 10px;padding-top: 10px; color: #726e6e;font-size: 14px;font-weight: 400;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.20);outline: 0;border-radius: 5px;border: 1px solid transparent}

.left_side_bar .comment textarea:focus{border-color: #1e8ae0;transform: translateY(0px);}
.left .comment textarea::placeholder{color: #726e6e;font-weight: 300}

.left_side_bar .submit_btn{padding: 20px 0px;width: 100%;clear: both;}
.left_side_bar .submit_btn a{color: #fff;background-color: #1787e0;padding: 15px 60px;border-radius: 50px;text-transform: capitalize;}
.left_side_bar .submit_btn a:hover{background-color: #135f9b} 

.feedback_block .right_side_bar{width: 40%;float: left;box-sizing: border-box;padding: 20px 20px;}
/*	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);}*/
.feedback_block .right_img {width: 100%;height: 565px;display: table-cell;vertical-align: middle;}
.feedback_block .right_img img{max-width: 100%;}

.custom-select {
  position: relative;
	
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

/*
.select-selected {
  background-color: DodgerBlue;
}
*/

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  background-image:url(../images/down-arrow2.png);
  background-position: center;	
  background-repeat: no-repeat;background-size: 14px;	
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  top: 14px;
}

/*style the items (options), including the selected item:*/
.select-selected {
    width: 100%;
    height: 40px;
    outline: 0;
    box-sizing: border-box;
    padding-left: 10px;
    color: #726e6e;
    font-weight: 300;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    user-select: none;
    line-height: 38px;
	 background-color: #fff;
	border: 1px solid transparent;
}

.select-items div{width: 100%;height: 40px;box-sizing: border-box;
    padding-left: 10px;color: #726e6e;font-weight: 300;font-size: 14px;line-height: 38px;}



/*style items (options):*/
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
	background-color: #fff;
	    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover {
 background-color: rgba(213, 200, 200, 0.1);
}



/*template 1 css responsive starting*/

@media (min-width:200px) and (max-width:750px){
	.feedback_form_container{width: 100%;}
	.feedback_form_container .feedback_block{padding: 10px 15px;}
   .header_title h1{font-size: 20px;line-height: 30px;}
   .header_title 	br{display: none}
	
	.feedback_block .left_side_bar{float: none;width: 100%;padding: 10px;margin-bottom: 25px;border-radius: 0;}
	.feedback_block .left_side_bar h2{font-size: 16px;line-height: 24px}
	.left_side_bar .information_detail{padding: 10px 0px;}
	.left_side_bar .information_detail ul li{width: 100%;}
	
	.left_side_bar .comment{margin-bottom: 15px;}
	.left_side_bar .submit_btn{padding: 15px 0px}
	
	.feedback_block .right_side_bar{width: 100%;float: none;padding: 10px;}
	.left_side_bar .submit_btn a{font-size: 14px;padding: 12px 40px}
	
	.feedback_block .right_img{height: auto;text-align: center;}
	
	.feedback_block .right_img img{max-width: 100%;}
	
	
}

@media (min-width:500px) and (max-width:750px){
		.header_title h1{font-size: 24px;line-height: 33px;}
	    .feedback_block .left_side_bar h2{font-size: 18px;line-height: 24px}
	
	.left_side_bar .loyalty_submit_btn{padding-top: 0px;}
}

@media (min-width:751px) and (max-width:999px){
	.feedback_block .left_side_bar h2{line-height: 26px;}
	.feedback_block .left_side_bar{width: 52%;padding: 20px;}
	.left_side_bar .information_detail ul li{width: 100%}
	.feedback_block .right_side_bar{width: 46%}
	.feedback_block .right_img{height: 754px;}
}

@media (min-width:846px) and (max-width:999px){
	.feedback_block .right_img{height: 728px;}
}




/*template 2 loyalty-program css starting*/



.loyality_block{width: 100%;  background-color: #504fc9;}
.loyalty_find{width: 100%;padding: 10px 0px;box-sizing: border-box;}
.loyalty_find ul{}
.loyalty_find ul li{width: 49%;display: inline-block;vertical-align: top;margin-bottom: 15px;}
.loyalty_find .left_find-us{width: 100%;}
.loyalty_find .left_find-us h4{font-size: 16px;display: block;padding-bottom: 10px;line-height: 22px;}

.loyalty_find .right_privacy{width: 100%;}
.loyalty_find .right_privacy h4{font-size: 16px;display: block;padding-bottom: 10px;line-height: 22px;}
.right_privacy .line_height{line-height: 22px;}

.radio_btn_container {display: block;position: relative;padding-left: 25px;margin-bottom: 10px;cursor: pointer;font-size: 16px;
  -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;line-height: 18px;}

.radio_btn_container input {position: absolute;opacity: 0; cursor: pointer;}

.loyalty_find .checkmark {position: absolute;top: 0;left: 0;height: 16px;width: 16px;background-color: #fff;border-radius: 50%;}

.radio_btn_container input:checked ~ .checkmark {background-color: #2196F3;}

.loyalty_find .checkmark:after { content: "";position: absolute;display: none;}

.radio_btn_container input:checked ~ .checkmark:after { display: block;}

.loyality_radio_btn{font-size: 14px;}

.radio_btn_container .checkmark:after {top: 5px;left: 5px;width: 6px;height: 6px;border-radius: 50%;background: white;}

.right_loyality_bar{width: 40%;float: left;padding: 20px;box-sizing: border-box;}

.right_loyality_bar .right_img{height: 512px;}

.left_side_bar .loyalty_submit_btn{width: 50%;float: right;}




/*template 2 loyalty-program css responsive starting*/

@media (min-width:200px) and (max-width:750px){
	
	.loyality_block .left_side_bar{display: table;}
	.loyalty_find ul li{padding-bottom: 10px;}
	
	.loyality_radio_btn{font-size: 13px;margin-bottom: 8px;}
	.loyalty_find .right_privacy{}
	.loyalty_find .left_find-us h4{font-size: 14px}
	.loyalty_find .right_privacy h4{font-size: 14px;}
	
	
	.loyalty_find .loyalty_checkmark{width: 15px;height: 15px}
	.loyalty_find .loyalty_checkmark:after{top: 5px;left: 5px;width: 5px;height: 5px; shape-margin: 5px;}
	
	.right_loyality_bar{width: 100%;float: none;padding: 0;}
	.right_loyality_bar .right_img{height: auto;}
	.right_loyality_bar .right_img img{max-width: 100%;}
	
	.right_privacy .line_height{line-height:17px}
}

@media (min-width:751px) and (max-width:999px){
	
	.right_loyality_bar{width: 48%;}
	.loyalty_find .left_find-us h4 , .loyalty_find .right_privacy h4{font-size: 16px;}
	
	.loyality_radio_btn{font-size: 14px;}
	
	.loyalty_find .loyalty_checkmark{width: 15px;height: 15px}
	.loyalty_find .loyalty_checkmark:after{top: 5px;left: 5px;width: 5px;height: 5px; shape-margin: 5px;}
	
}







/* template 3 drap and drop template css*/

.drag_and_drop_container{width: 100%;box-sizing: border-box;background-color: #fff;margin-bottom: 40px;display: table;padding: 30px;}
.drag_and_drop_container .form_creator{width: 100%;color: #343537;margin-bottom: 20px;}
.drag_and_drop_container .form_creator h5{font-size: 18px;margin-bottom: 15px;}
.drag_and_drop_container .form_creator ul{padding: 10px 0px;}
.drag_and_drop_container .form_creator ul li{display: inline-block;padding-right: 10px;position: relative;}
.drag_and_drop_container .form_creator ul li a{font-size: 14px; color: #343537;background-color: #f1f1f1;padding: 8px 24px;border-radius: 6px;}
.drag_and_drop_container .form_creator ul li span{font-size: 12px; position: absolute;right: 16px;top: 2px; cursor: pointer;}
.drag_and_drop_container .form_creator ul li button{color: #fff;background-color: #1787e0;padding: 8px 28px;border-radius: 6px;text-align: center;outline: 0;border: none;font-size: 14px;cursor: pointer;}

/*left_drag_drop*/
.drag_and_drop_container .left_drag_drop{width: 42%;float: left;}
.drag_and_drop_container .right_drag_drop{width: 55%;float: right;}
.right_drag_drop label{ font-size: 13px; color: #343537;font-weight: 600;display: inline-block}
.right_drag_drop input{width: 50%;height: 34px;padding-left: 10px;box-sizing: border-box;font-size: 14px}
.right_drag_drop p{font-size: 14px;padding: 10px 0px;}
.right_drag_drop .drag_drop_area{width: auto;min-height: 200px;display: flex;border: 2px dotted #827f7f;margin:25px 0px;justify-content: center;align-items: center;box-sizing: border-box;}
.right_drag_drop .drag_drop_area span{}


/* Style the tab */
.field_tab {width: 26%;float: left;overflow: hidden;border-right: 1px solid #ededed;background-color: #fff;}

/* Style the buttons inside the tab */
.field_tab button {width: 100%; background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 14px 20px;transition: 0.3s;font-size: 16px;padding-left: 10px;text-align: left;}

/* Change background color of buttons on hover */
.field_tab button:hover {background-color: #f3f6ff;border-right: 1px solid #1787e0;color: #1787e0;}

/* Create an active/current tablink class */
.field_tab button.active {background-color: #f3f6ff;border-right: 1px solid #1787e0;}

/* Style the tab content */
.tabcontent {width: 71%;float: right;display: none;padding: 10px 10px;border: 1px solid #ededed;box-sizing: border-box;}


.left_drag_drop .tabcontent ul{padding: 10px 0px;}

.left_drag_drop .tabcontent ul li{padding: 10px;box-sizing: border-box;background-color: #f3f6ff;
    margin-bottom: 10px;cursor: pointer;}

.left_drag_drop .tabcontent a{padding: 14px 50px;font-size: 16px;background-color: #1787e0; color: #fff; border-radius: 50px;
    text-transform: capitalize;display: inline-block;}
.left_drag_drop .tabcontent a:hover{background-color: #135f9b;}

.left_drag_drop .tabcontent ul label{font-size: 14px;display: inline-block;padding-bottom: 10px;color: #343537;}

.left_drag_drop .tabcontent ul input{width: 100%;padding: 10px;box-sizing: border-box;    border-radius: 5px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);border: 0;outline: 0;font-size: 14px;background-color: #fff;}

.left_drag_drop .tabcontent ul textarea{width: 100%;box-sizing: border-box;border-radius: 5px;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);border: 0; outline: 0;    font-size: 14px;padding-left: 10px;padding-top: 10px;}

.left_drag_drop .tabcontent ul .checkbox_option{float: left;margin-right: 10px;padding-top: 10px;}

.left_drag_drop .tabcontent ul .checkbox1{width: 16px;height: 15px;box-shadow: none;}

.left_drag_drop .tabcontent ul span{font-size: 12px;}

.left_drag_drop .tabcontent ul select{width: 100%;height: 30px;border: 0;outline: 0;background-color: #fff;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding-left: 10px;background-image: url(../images/down-arrow2.png);    background-position: 95% 12px;background-size: 12px;background-repeat: no-repeat;}

.left_drag_drop .tabcontent ul .listbox_option{height: 90px;background: none;}

.left_drag_drop .tabcontent ul .listbox_option option{padding: 5px 5px;padding-left: 0px; }

.left_drag_drop .tabcontent ul img{max-width: 90%;}
.left_drag_drop .tabcontent ul li h6{font-size:13px; }
.left_drag_drop .tabcontent ul li h3{font-size: 15px;line-height: 22px;}
.left_drag_drop .tabcontent ul li h2{font-size: 17px;line-height: 23px;}
.left_drag_drop .tabcontent ul li h1{font-size: 24px;}



/*pop_up drag drop css*/

.pop_up_container{max-width: 350px;margin: 0 auto;box-sizing: border-box;}
.pop_up_element{width: 100%;background-color: #fff;padding: 10px; box-sizing: border-box;}
.pop_up_element .header_popup{background-color: #1787e0;padding: 10px;}
.pop_up_element .header_popup label{font-size: 16px;color: #fff;display: inline-block;}
.pop_up_element .header_popup a{float: right;width: 10px;    background-color: transparent;padding: 0px;
}
.pop_up_element .header_popup img{max-width: 100%;}

.pop_up_element ul{padding: 10px;}
.pop_up_element ul li{margin-bottom: 15px;}
.pop_up_element ul li label{font-size: 16px;display: block;padding-bottom: 10px;}
.pop_up_element ul li input{width: 100%;padding: 10px;box-sizing: border-box;    border-radius: 5px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);border: 0;outline: 0;font-size: 14px;background-color: #fff;}

.pop_up_element ul li select{width: 100%;height: 40px;border: 0;outline: 0;background-color: #fff;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding-left: 10px;background-image: url(../images/down-arrow2.png); background-position: 95% 18px;background-size: 12px;background-repeat: no-repeat;    border-radius: 5px;font-size: 14px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);}

.pop_up_element ul li .checkbox_option{display: inline-block;}
.pop_up_element ul li .checkbox1{width: 16px;height: 15px;box-shadow: none;}

.pop_up_element ul li a{box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);padding: 10px 18px;display: inline-block;color: #343537;background: none;margin: 0;border: 1px solid transparent}

.pop_up_element ul li a:hover{border: 1px solid #1787e0}


.pop_up_element  a{padding: 14px 50px;font-size: 15px;background-color: #1787e0;color: #fff;border-radius: 50px;text-transform: capitalize;display: inline-block;margin: 0px 10px}

/*editing_button*/


.editing_button{width: 100%;}
.editing_button ul{text-align: end;}
.editing_button ul li{display: inline;border-left: 1px solid #ededed;}
.editing_button ul li a{}
.editing_button ul li img{max-width: 100%;vertical-align: middle;}

.editing_button ul li a:hover{background-color: #FFFFFF}





/*template 3 order-request css starting*/

.left_side_bar .information_detail .order_req_type{width: 100%;}
.order_req_attach_btn{width: 100%;padding: 10px 0px;box-sizing: border-box;padding-bottom: 20px;}
.order_req_attach_btn span{color: #343537;font-size: 14px;margin-right: 10px;vertical-align: middle}
.order_req_attach_btn input{width: auto;outline: 0;padding-left: 2px;}

.custom-file-input::-webkit-file-upload-button {visibility: hidden;}

.custom-file-input::before {content: 'Choose file';display: inline-block;color: #726e6e;font-size: 14px;
  border-radius: 5px;padding: 5px 12px;outline: 0;white-space: nowrap;-webkit-user-select: none;cursor: pointer;
  font-weight: 400;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.20);}

.custom-file-input:focus {
  border-color: #1e8ae0;
    transform: translateY(0px);}

.order_req_attach_btn input[type='file'] {color: transparent;}



/*template 3 order-request responsive css starting*/


@media (min-width:200px) and (max-width:750px){
	.order_req_attach_btn span{display: block;padding-bottom: 10px;}
	.feedback_block .right_order_req{padding: 0px;}

}

@media (min-width:751px) and (max-width:999px){

.order_req_attach_btn input{width: 190px;}
	
}




/*template 4 booking reservation css starting*/

.feedback_block .booking_right_img{height: 463px;}


/*template 4 booking reservation responsive css starting*/

@media (min-width:200px) and (max-width:750px){
	.feedback_block .booking_right_img{height: auto;}
}





/*template 5 testimonal form css starting*/


.testimonal_service_rating{width: 100%;overflow: auto;margin-bottom: 0px;}
.testimonal_service_rating p{float: left;}
.testimonal_service_rating img{float: right;}
.loyalty_find .testimonail_radio_btn{width: 100%;}
/*template 5 testimonal form responsive css starting*/

@media (min-width:200px) and (max-width:750px){
	.testimonal_service_rating img{}
	.loyalty_find .testimonail_radio_btn{padding: 0}
}



/*custom_drag_drop css*/

.custom_drag_drop{width: 100%;box-sizing: border-box;background-color: #fff;display: table;padding: 20px;}
.custom_drag_drop .left_drag_items{width: 18%;float: left;    border: 1px solid #ededed;padding: 10px;box-sizing: border-box;text-align: center;}
.left_drag_items ul{}
.left_drag_items ul li{display: block;margin-bottom: 10px;border: 1px solid #000;}



.left_drag_items ul li:nth-of-type(1){border: 1px solid #376AD2;}
.left_drag_items ul li:nth-of-type(2){border: 1px solid #f076ae;}
.left_drag_items ul li:nth-of-type(3){border: 1px solid #fff821;}
.left_drag_items ul li:nth-of-type(4){border: 1px solid #195915;}

.left_drag_items ul li:last-child{margin-bottom: 0px;}

.left_drag_items .item_block{padding: 10px;box-sizing: border-box;}
.left_drag_items .item_block img{max-width: 100%}
.left_drag_items .item_block span{display: block;font-size: 16px;padding:0px;box-sizing: border-box;line-height: 23px;padding-bottom: 10px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

.custom_drag_drop .right_drag_area{width: 80%;float: right;box-sizing: border-box;}

.custom_drag_drop .right_drag_area .area_block{width: auto;min-height: 400px;display: flex;border: 2px dotted #827f7f;margin: 25px 0px;justify-content: center;align-items: center;box-sizing: border-box;margin-top: 0px;}

.custom_drag_drop .right_drag_area .area_block span{font-size: 16px;color: #000;}



/*contact us page css*/

.left_side_bar .information_detail .contact_us_fields{width: 100%}




/*Multiple_form_pages css*/



/*form styles*/
.steps {
    width:500px;
  margin: 50px auto;
  position: relative;
}

.steps fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 17px 41px -21px rgb(0, 0, 0);
  padding: 20px 30px;
  border-top: 9px solid #1787e0;
  box-sizing: border-box;
  
  margin: 0 10%;
 
}
/*Hide all except first fieldset*/
.steps fieldset:not(:first-of-type) {
  display: none;
}



/*buttons*/
.steps .action-button, .action-button {
     color: #fff;
    background-color: #1787e0;
    padding: 14px 50px;
    border-radius: 50px;
    text-transform: capitalize;
	font-size: 14px;
	outline: 0;
	
}

.steps .next, .steps .submit{
    float: right;
}

.steps .previous{
  float:left;
}

.steps .action-button:hover {
      background-color: #135f9b;
}





/*progressbar*/

#progressbar {
	display: inline-block;
  margin-bottom: 30px;
  counter-reset: step;
  width:100%;
  text-align: center;
}
#progressbar li {
	display: inline-block;
  list-style-type: none;
  color: rgb(51, 51, 51);
  text-transform: uppercase;
  font-size: 13px;
  width: 25%;
  position: relative;
	vertical-align: top;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 38px;
  height: 38px;
  line-height: 39px;
  display: block;
  font-size: 15px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 18px;
  z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none; 
}

#progressbar li.active:before,  #progressbar li.active:after{
  background: #1787e0;
  color: white;
}