.profile_wrapper .wrapper, .sidebar .bottom li, .prof_pic_section, .same_row, .gender_section div, .article,
.pesan_head .load, .pesan_head .action, .pesan_head, .pesan_content li, .pesan_content li a, .pesan_content .select_all span, 
.sender, .my_message, .other_message, .button_list, .button_list > span, .notif_head, .profile_notif_menu,
.profile_notif_list li a, .profile_notif_list li, .twocol, .track_table_head, .notif_profile_head{
	display: flex;display: -webkit-flex;}

.profile_wrapper{background: #f2f9fb;}
.profile_wrapper .wrapper{padding-top: 30px;padding-bottom: 100px;}
.sidebar{background: #fff;border: 1px solid	#dde6e4;border-radius: 5px;align-self: baseline;}
.sidebar .top, .sidebar .bottom ul{padding: 20px 30px;padding-bottom: 40px;}
.sidebar .top > img{border-radius: 200px;border: 1px solid #dadada;margin: auto;display: block;}
.sidebar .top > p{font-family: "ssI";font-size: 14px;color: #b9b9b9;text-align: center;}
.sidebar .top .icon-checked{margin-right: 5px;}
.sidebar .top .icon-checked:before{color: #7dd1d4;}
.sidebar .top .name{margin-bottom: 5px;text-align: center;}
.sidebar .top .cat{margin-top: 5px;margin-bottom: 10px;font-size: 14px;text-align: center;}

.profile_link_active{color: #3bc1c5 !important; font-family: "ssSB" !important;}
.sidebar .bottom{border-top: 1px solid	#dde6e4;}
.sidebar .bottom li{align-items: center;}
.sidebar .bottom li a{font-family: "ssR";font-size:16px;color: #333;padding: 10px 0;}
.sidebar .bottom li span{
	display: inline-block;
	width: 22px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 15px;
	text-align: center;
	background-position: center;
	}
.prof_people{background-image: url("../media/prof_people.png");}
.prof_article{background-image: url("../media/prof_article.png");}
.prof_message{background-image: url("../media/prof_message.png");}
.prof_notif{background-image: url("../media/prof_notif.png");}
.prof_track{background-image: url("../media/prof_track.png");}

.notif_num_profile{background: #f6364f;color: #fff;width: 25px !important;height: 25px !important;font-family: "ssR";
	font-size: 13px;margin-left: 10px;box-sizing: border-box;border-radius: 50px;display: flex !important;
    justify-content: center;align-items: center;}

.rightbar{background: #fff;flex-grow: 1;border-radius: 5px;border: 1px solid #dde6e4;}
label{font-size: 14px;color: #333;font-family: "ssSB";text-transform: uppercase;display: block;margin-bottom: 5px;}
input[type="text"], input[type="number"], input[type="email"],input[type="password"]{font-size: 15px;color: #407a7b;
	border: 1px solid #c8c8c8;outline: none;padding: 17px 14px;width: 100%;border-radius: 4px;box-sizing: border-box;}
form textarea{width: 100%;height: 150px;resize: none;outline: none;border-radius: 5px;border: 1px solid #c8c8c8;font-size: 16px;
	padding: 20px;box-sizing: border-box;}
/*================================== PROFILE SAYA =====================================*/
.rightbar > h2{margin: 0;margin-bottom: 40px;color: #3bc1c5;font-size: 24px;text-transform: uppercase;}
.check_val_password {margin-bottom:20px}
.profile_info li{margin-bottom: 30px;}

.prof_pic_section{align-items: center;}
.prof_pic_section p{font-family: "ssSB";font-size: 14px;margin-right: 30px;}
.prof_pic_section p span{font-family: "ssR"}
.prof_pic{position: relative;width: 85px;height: 85px;}
.prof_pic i{position: absolute;top: 10px;right: -5px;z-index: 1;color: #fff;background: #bd2438;border-radius: 50px;
    padding: 6px;font-size: 10px;cursor: pointer;}
.prof_pic span{border: 1px dashed #dde6e4;border-radius: 100px;width:85px;height:85px;position: absolute;top: -10px;left: -10px}
.prof_pic img{background: url("../media/default_add_userpic.png")no-repeat;position: absolute;width: 85px;height: 85px;
	border-radius: 100px;object-fit: cover;}
.prof_pic input{height: 85px;width: 85px;position: relative;opacity: 0;cursor: pointer;}
.same_row div{flex-grow: 1;}
.gender_section div{flex-grow: 0}
.gender_section label{margin-bottom: 16px;}
.radio_wrapper{margin-right: 10px !important}

.profile_addinfo{border-bottom: 1px solid #dde6e4;border-top: 1px solid #dde6e4;}
.profile_addinfo li{align-items: center;margin-bottom: 20px}
.profile_addinfo li:last-child{margin-bottom: 0;}

.profile_addinfo a{text-decoration: underline;color: #47c3c5;font-size: 18px;font-family: "ssR"}

input.next_form_button{width: 200px;font-size: 16px;font-family: "ssSB";color: #fff;text-transform: uppercase;
	border-radius: 100px;cursor: pointer;padding: 12px 0;border: 0;display: block;}
input.next_form_button:hover{box-shadow: 0 3px 15px 0 rgba(0,0,0,.25);
	-webkit-transition: box-shadow .2s ease,border .2s ease;
    transition: box-shadow .2s ease,border .2s ease;}

/*==================================== ARTICLE =========================================*/
.article{flex-wrap: wrap;justify-content: space-around;}
.article li{box-sizing: border-box;}
.article li img{width: 100%;}
.article_desc{padding:30px;box-sizing: border-box;}
.article_desc a{font-size: 22px;color: #333;font-family: "ssSB";text-decoration: underline;}
.article_desc p{font-size: 15px;line-height: 24px;color: #a6a6a6;margin-top: 30px;}

/*==================================== MESSAGE =========================================*/
.pesan_head{padding-bottom: 40px;border-bottom: 1px solid #dfdfdf}
.action_do{height: 43px;line-height: 0;font-family: "ssSB";font-size: 15px;width: 60px;text-align: center;background: #f7f7f7;
    margin-left: 10px;border-radius: 5px;border: 1px solid #c8c8c8;cursor: default;}
.action_do_active{background: #3bc1c5;color: #fff;cursor: pointer;}
.action_do_active:hover{background: #36acb0; }
.action{float: left;align-items: center;flex-grow: 1}
.action select{padding: 10px 14px;width: 165px;}
.load{float: right;}
.load p{color: #c8c8c8;font-size: 16px;white-space: nowrap;}
.load a{color: #61c7c6;font-family: "ssR";white-space: nowrap;}
.load p:first-child{color: #333;margin-right: 10px;}
.load .sep{display: inline-block;border-right: 1px solid #1e1e23;margin: 0 7px;}

.pesan_content ul{padding: 0 55px;}
.pesan_content li{padding: 30px 0;}
.pesan_content li a, .pesan_content li{align-items: center;}
.pesan_content li:nth-child(odd), .pesan_content_mob li:nth-child(odd){background: #f9f9f9;}
.pesan_content li a:hover .info > p{color: #3bc1c5;}
.pesan_table_head{background: #fff !important;}
.pesan_table_head h3{margin: 0;}

.pesan_content .select_all{width: 80px;display: flex;align-items: center;justify-content: center;position: relative;z-index: 1}
.pesan_content .select_all span, .select_all input{width: 15px;height: 15px;border: 1px solid #c8c8c8;box-sizing: border-box;
	cursor: pointer;}
.pesan_content .select_all span{align-items: center;justify-content: center;}
.pesan_content .select_all span i{font-size: 11px;font-weight: bold;}
.pesan_content .select_all span i:before{color: transparent;}
.pesan_content .select_all span i.checked:before{color: #000;}
.select_all input{position: absolute;margin: 0;opacity:0;}

.pesan_content .sender{width: 30%;margin-right: 30px;align-items: center;}
.pesan_content .sender_message{width: 45%;margin-right: 60px;font-size: 15px;}
.pesan_content .date{min-width: 15%;font-size: 14px;}
.date p{color: #a3aca0;}

.pesan_content_mob li{padding: 20px;}
.pesan_content_mob li .sender{margin-bottom: 20px;}
.pesan_content_mob li .sender_message{margin-bottom: 10px;}

.sender img{width: 60px;height: 60px;border-radius: 100px;object-fit: cover;margin-right: 15px;}
.info p{font-family: "ssSB"}
.info span{font-family: "ssR";font-size: 13px;}

/*==================================== MESSAGE DETAIL =========================================*/
.mess_detail_head{padding-bottom:30px;align-items: center;border-bottom: 1px solid #dfdfdf;}
.mess_detail_head img{width: 60px;height: 60px;object-fit: cover;border-radius: 100px;}
.mess_detail_head p{color: #b0b0b0;}
.mess_name{font-size: 16px;font-family: "ssSB";color: #333 !important;}
.chat_date{text-align: center;margin-bottom: 40px;}
.chat_date p{display: inline-block;padding: 10px 30px;background: #f1f1f1;border-radius: 8px;color: #989898;font-size: 14px;}

.chat_body{max-height: 500px;overflow-y: auto;}
.chat_body .time{font-family: "ssR";font-size: 14px;color: #a3aca0;margin-top:10px }
.my_message{align-items: flex-end;flex-direction: column;}
.my_message p{color: #fff;background: #4cb0e4;padding: 20px 25px;border-radius: 20px 0 20px 20px;font-size: 14px;
	box-sizing: border-box;}


.other_message{align-items: flex-start;flex-direction: column;}
.other_name{font-size: 16px;margin-bottom: 5px;}
.other_message p{color: #747474;background: #f1f1f1;padding: 20px 25px;border-radius: 0 20px 20px 20px;
	font-size: 14px;box-sizing: border-box;}
.keyboard{margin-top: 60px;}
.keyboard textarea{padding: 15px 20px;box-sizing: border-box;}
.keyboard a{color: #b0b0b0;text-transform: uppercase;font-size: 14px;text-align: center;padding: 10px 0;display: block;
    border: 1px solid #b0b0b0;border-radius: 100px;background: #fff;}
.keyboard a:hover{color: #989898;border: 1px solid #989898;}
.button_list{margin-top: 20px;align-items: center;}
.button_list div{flex-grow: 1;}
.button_list > span{background: #b4b4b4;color: #fff;font-family: "ssSB";font-size: 14px;text-transform: uppercase;
    border-radius: 100px;align-items: center;justify-content: center;cursor: pointer;padding: 10px 0;}
.button_list > input{background: #4cb0e4;color: #fff;text-transform: uppercase;font-family: "ssSB";font-size: 14px;border: 0;
	border-radius: 100px;cursor: pointer;padding: 10px 0}
.button_list > input:hover{background: #4196c2}

/*=========================================== NOTIFIKASI ================================================*/
.notif_head, .notif_menu, .notif_profile_head{align-items: center;}
.notif_profile_head{margin: 0 80px;padding-bottom: 40px;border-bottom: 1px solid #dfdfdf}
.notif_head{border-bottom: 1px solid #dfdfdf}
.notif_profile_head h2, .notif_head h2{margin: 0;color: #3bc1c5;font-size: 24px;flex-grow: 1;text-transform: uppercase;}

.profile_notif_menu{align-items: center;}
.profile_notif_menu .same_row_fix{align-items: center;}
.profile_notif_menu select{padding: 7px 15px;width: 150px}
.profile_notif_menu select::before{width: 12px}
.profile_notif_menu .mark_read_all_notif{font-size: 16px;color: #61c7c6;cursor: pointer;}
.profile_notif_menu h4{margin: 0;margin-right: 10px;white-space: nowrap;}

.profile_notif_list{align-items: center;}
.profile_notif_list li{padding: 30px;}
.profile_notif_list li:nth-child(even){background: #f9f9f9;}
.profile_notif_list li a{width: 100%;}
.profile_notif_list li a > p, .profile_notif_list li > p{flex-grow: 1;}
.profile_notif_list li a .icon_status_notif{display: flex;justify-content: center;width: 40px;margin-right: 20px;}
.notif_highlight{color: #5dc6c5;}

/*======================================== TRACK =============================================*/
.track_status{box-sizing: border-box;}
.track_wrapper h4{font-size: 15px;margin: 0}
.twocol{align-items: center;}
.narrowbottom{margin-bottom: 15px;}
.track_wrapper .sep{font-family: "ssSB";font-size: 14px;margin: 0 5px;}
.samewidth{width: 115px;}
.track_status{padding: 7px 10px;border: 1px solid #c8c8c8;border-radius: 5px;background: #fff6bf;margin: 20px 0}

.cityinfo{margin-bottom: 30px;}
.cityinfo p{text-transform: uppercase;font-family: "ssL";font-size: 18px;}
.upcase{text-transform: uppercase;}
.track_table_desk{width: 100%;}
.track_table_desk li{display: table-row;}
.track_table_desk .track_table_head{background: #ececec;border-radius: 5px;border: 1px solid #c8c8c8;}
.track_table_desk .track_table_head h4{border-bottom: 1px solid #c8c8c8;border-top: 1px solid #c8c8c8}
.track_table_desk .track_table_head h4:first-child{border-left: 1px solid #c8c8c8 !important;}
.track_table_desk .track_table_head h4:last-child{border-right: 1px solid #c8c8c8 !important;}
.track_table_desk .track_table_desk{display: table;width: 100%}
.track_table_desk .track_table_desk li{display: table-row;height: 40px}
.track_table_desk li h4, .track_table_desk li p{
	display: table-cell;vertical-align: middle;padding: 20px;border-bottom: 1px solid #dde6e4;}
.track_table_desk li h4:last-child, .track_table_desk li p:last-child{
	width: 145px;border-right: 1px solid #dde6e4;}
.track_table_desk li h4:first-child, .track_table_desk li p:first-child{
	border-left: 1px solid #dde6e4;}

.track_table_desk .track_table_row{height: 80px !important;}
.track_table_desk .track_table_row p{padding: 20px 20px;}

.track_table_mob .track_table_row span{font-size: 15px;font-family: "ssB";margin-right: 20px;margin-bottom: 5px;display: block;
	text-transform: uppercase;}
.track_table_mob .track_table_row p{margin-bottom: 10px}
.track_table_mob .track_table_row{border: 1px solid #dde6e4;padding:20px}


/*======================================== CHANGE INFO =============================================*/

.form_wrapper .group_choice, .step2_form{padding: 0}
.step2_form{margin: 0 40px;}
.step2_form ul{padding: 0}
.step2_form, .step2_condition > h4, .step2_condition > p{width: 100% !important;}
.step2{margin: 0 80px;}

.change_phone label{margin-bottom: 10px;}
.change_email input[type="submit"], .change_phone input[type="submit"], .change_password input[type="submit"]{margin-top: 40px;margin-right: 0;}
.check_email{font-size: 21px;line-height: 36px;text-align: center;}
.change_email, .phone_otp{margin: 0 80px;}

.otp{margin-top: 50px;text-align: center;}
.otp_form input[type="text"]{border: 0;border-bottom: 2px solid #d3d3d3;width: 45px;height: 45px;margin: 10px;outline: none;
    font-size: 35px;text-align: center;padding: 10px;box-sizing: border-box;font-family: "ssSB";color: #407a7b}
.otp_form .submit_otp{display: block;margin:40px auto;text-align: center;background: #ececec;color: #888;border: 0;
	border-radius: 100px;padding: 13px;width: 200px;cursor: pointer;text-transform: uppercase;font-family: "ssSB";font-size: 16px;}

.phone_otp h2{margin: 0;margin-bottom: 40px;color: #3bc1c5;font-size: 24px;text-align: center;text-transform: uppercase;}
.active_but{
	color: #fff !important;
	transition: all 0.2s;-webkit-transition: all 0.2s;
	background: rgb(124,204,175)!important;  /* Old browsers */
	background: -moz-linear-gradient(left, rgba(124,204,175,1) 2%, rgba(59,182,197,1) 51%)!important; /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(124,204,175,1) 2%,rgba(59,182,197,1) 51%)!important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(124,204,175,1) 2%,rgba(59,182,197,1) 51%)!important;
}
.profile_nav_dropdown{padding: 20px;border-bottom: 1px solid #dde6e4;}
.profile_nav_dropdown p{text-transform: uppercase;flex-grow: 1;}
.profile_nav_dropdown span{display: inline-block;width: 15px;height: 20px;vertical-align: middle;background-position: center;}
.ecard{
	width: 260px;
	height:146px;
	object-fit: contain;
	-webkit-box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.75);
}
@media (min-width: 0){
	.profile_wrapper .wrapper, .profile_addinfo li, .pesan_head, .mess_detail_head, .button_list, .profile_notif_menu,
	.notif_profile_head, .profile_notif_list li, .profile_notif_list li a, .cityinfo{flex-direction: column;}
	.sidebar{margin-right: 0;width: 100%;margin-bottom: 30px;}
	.rightbar > h2, form ul, .change_phone, .article{padding: 0 30px;}
	.same_row div:first-child{margin-right: 0;margin-bottom: 20px;}
	.profile_addinfo{padding: 40px 30px;}
	.profile_addinfo p{width: 100%;margin-right: 0;}
	.profile_addinfo label{width: 100%;}
	.profile_addinfo a{width: 100%;}
	.rightbar{padding: 30px 0;}
	input.next_form_button{float: auto;}
	.pesan_head{margin: 0 30px;height: auto;align-items: flex-start;}
	.action, .notif_profile_head h2{margin-bottom: 30px;}
	.mess_detail_head{margin: 0 30px;}
	.mess_detail_head p{margin-right: 0;}
	.mess_name{margin-left: 0;}
	.mess_detail_head img{margin: 20px 0}
	.keyboard, .chat_body, .track_wrapper{padding: 0 30px;}
	.my_message p, .other_message p{width: 90%;}
	.button_list > div, .button_list > span, .button_list > input{margin-bottom: 20px;}
	.button_list > div, .button_list > span, .button_list > input{width: 60%;}
	.keyboard a{width: 100%;}
	.del_textarea{display: none !important;}
	.button_list > span{margin-right: 0;}
	.profile_notif_menu .mark_read_all_notif{margin-right: 0;margin-bottom: 20px}
	.profile_notif_list{padding: 0 30px;padding-top: 20px;}
	.date p{margin-top: 20px;}
	.profile_notif_list li{border-bottom: 1px solid #dde6e4}
	.track_status{width: 100%;}
	.track_table_desk{display: none;}
	.track_table_mob{display: block;}
	.cityinfo div:last-child{width: 100%;}
	.twocolsamewidth{width: 100%;margin-bottom: 20px;}
	.icon_status_notif{margin-bottom: 20px;}
	.article li{width: 100%;padding-right: 0;}
	.mess_det_head_desk{display: none;}
	.mess_det_head_mob{display: flex;direction: -webkit-flex;}
	.sidebar .top > img{width: 100px; height: 100px;}
	.sidebar .bottom ul{display: none;}
}
@media (min-width: 640px){
	.profile_wrapper .wrapper, .pesan_head, .notif_profile_head{flex-direction: column;}
	.profile_addinfo li, .mess_detail_head, .button_list, .profile_notif_menu, .profile_notif_list li, .cityinfo, 
	.profile_notif_list li a{flex-direction: row;}
	.sidebar{margin-right: 0;width: 100%;margin-bottom: 30px;}
	.rightbar > h2, form ul, .change_phone,.change_password, .article{padding: 0 30px;}
	.same_row div:first-child{margin-right: 0;margin-bottom: 20px;}
	.profile_addinfo{padding: 40px 80px;}
	.profile_addinfo p{width: 100%;margin-right: 0;}
	.profile_addinfo label{width: 100%;margin-bottom: 0 !important;}
	.profile_addinfo a{width: 100%;}
	.rightbar{padding: 30px 0;}
	input.next_form_button{float: auto;}
	.pesan_head{margin: 0 30px;height: auto;align-items: flex-start;}
	.action, .notif_profile_head h2{margin-bottom: 30px;}
	.mess_detail_head{margin: 0 30px;}
	.mess_detail_head p{margin-right: 30px;}
	.mess_name{margin-left: 20px;}
	.mess_detail_head img{margin: 0}
	.keyboard, .chat_body, .track_wrapper{padding: 0 80px;}
	.my_message p, .other_message p{width: 70%;}
	.button_list > div, .button_list > span, .button_list > input{margin-bottom: 0;}
	.button_list > div, .button_list > span, .button_list > input{width: 300px;}
	.keyboard a{width: auto;margin-right: 20px}
	.del_textarea{display: none !important;}
	.button_list > span{margin-right: 20px;}
	.profile_notif_menu .mark_read_all_notif{margin-right: 40px;margin-bottom: 0}
	.profile_notif_list{padding: 0 50px;padding-top: 20px;}
	.date p{margin-top: 0;}
	.profile_notif_list li{border-bottom: 0}
	.track_status{width: 300px;}
	.track_table_desk{display: table;}
	.track_table_mob{display: none;}
	.cityinfo div:last-child{width: auto;}
	.twocolsamewidth{width: 200px;margin-bottom: 0;}
	.icon_status_notif{margin-bottom: 0;}
	.article li{width: 45%;padding-right: 0;}
	.mess_det_head_mob{display: none;}
	.mess_det_head_desk{display: flex;direction: -webkit-flex;}
	.sidebar .top > img{width: 160px; height: 160px;}
	.sidebar .bottom ul{display: none;}
}
@media (min-width: 1190px){
	.profile_wrapper .wrapper, .profile_addinfo li, .pesan_head, .mess_detail_head, .button_list, .profile_notif_menu,
	.notif_profile_head, .profile_notif_list li, .profile_notif_list li a, .cityinfo{flex-direction: row;}
	.sidebar{margin-right: 20px;width: 222px;margin-bottom: 0;}
	.rightbar > h2, form ul, .change_phone,.change_password, .article{padding: 0 80px;}
	.same_row div:first-child{margin-right: 30px;margin-bottom: 0;}
	.profile_addinfo{padding: 40px 80px;}
	.profile_addinfo p{width: 35%;margin-right: 40px;}
	.profile_addinfo label{width: 145px;margin-bottom: 0 !important;}
	.profile_addinfo a{width: 200px;}
	.rightbar{padding: 40px 0;}
	input.next_form_button{float: right;}
	.pesan_head{margin: 0 80px;height: 42px;align-items: center;}
	.action, .notif_profile_head h2{margin-bottom: 0}
	.mess_detail_head{margin: 0 80px;}
	.mess_detail_head p{margin-right: 30px;}
	.mess_name{margin-left: 20px;}
	.mess_detail_head img{margin: 0}
	.keyboard, .chat_body, .track_wrapper{padding: 0 80px;}
	.my_message p, .other_message p{width: 60%;}
	.button_list > div, .button_list > span, .button_list > input{margin-bottom: 0;}
	.button_list > div, .button_list > span, .button_list > input{width: 150px;}
	.keyboard a{width: 150px;}
	.del_textarea{display: flex;display: -webkit-flex !important}
	.button_list > span{margin-right: 20px;}
	.profile_notif_menu .mark_read_all_notif{margin-right: 40px;margin-bottom: 0}
	.profile_notif_list{padding: 0 50px;padding-top: 20px;}
	.date p{margin-top: 0;}
	.profile_notif_list li{border-bottom: 0}
	.track_status{width: 300px;}
	.track_table_desk{display: table;}
	.track_table_mob{display: none;}
	.cityinfo div:last-child{width: auto;}
	.twocolsamewidth{width: 200px;margin-bottom: 0;}
	.icon_status_notif{margin-bottom: 0;}
	.article li{width: 50%;padding-right: 40px;}
	.mess_det_head_mob{display: none;}
	.mess_det_head_desk{display: flex;direction: -webkit-flex;}
	.sidebar .top > img{width: 160px; height: 160px;}
	.sidebar .bottom ul{display: block;}
}
.mess_det_head_mob{flex-direction: row}
.mess_det_head_mob img{margin-right: 30px;}

button.register_button {width: 100%;}