@charset "UTF-8";
/*
Copyright (c) 2019
------------------------------------------------------------------
[Master Default Stylesheet]
-------------------------------------------------------------------
1. body
 .
 .
 .
50. footer
51. components
52. responsive
-------------------------------------------------------------------*/

/********************************************************************************************* 
1. body start
 *********************************************************************************************/
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
*, *::after, *::before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    font-family: 'Nunito', sans-serif;
    margin: 0;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#5a708c;
    font-size: 14px;
    line-height: 1.42857143;
	background-color: #0b101a;
}
body.auth_body{
    background-image:url('../images/auth_bg.jpg');
    background-size: 100%;
}
a,a:hover, a:focus{
    text-decoration: none;
}
a.active:before, a.active:after{
	opacity: 1 !important;
	visibility: visible !important;
}
a.active:after{
	width: 60% !important;
}
.container{
	max-width: 1550px;
}
/********************************************************************************************* 
1. body end
*********************************************************************************************/

/*********************************************************************************************
2. authentication start 
*********************************************************************************************/
.ml_auth_wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    text-align: center;
    padding: 30px 15px;
    background-image: url('../images/shapes_bg.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.ml_auth_wrapper::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}
.ml_auth_inner{
    display: inline-block;
    vertical-align: middle;
    max-width: 1170px;
    width: 100%;
    border-radius: 10px;
    margin: 0 auto;
    min-height: 483px;
    text-align: left;
    background-color: #ffffff;
    position: relative;
}
.ml_auth_inner > .ml_auth_content{
    max-width: 60%;
    padding: 80px 0px 50px;
}
.ml_auth_logo{
    display: flex;
    align-items: center;
}
.ml_auth_logo::before{
    content: "";
    width: 77px;
    height: 2px;
    background-color: #6859ff;
    margin-right: 15px;
}
.ml_auth_content_img img{
    max-width: 90%;
}
.ml_auth_inner > .ml_auth_box{
    position: absolute;
    top: -30px;
    right: 0;
    bottom: -30px;
    border-radius: 10px;
    max-width: 500px;
    background-color: #ae65ff;
    padding: 50px;
	overflow:hidden;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
	z-index:1;
}
.ml_auth_inner > .ml_auth_box:before, .ml_auth_inner > .ml_auth_box:after {
    content: "";
    height: 415px;
    width: 415px;
    position: absolute;
    top: -240px; 
    right: -200px;
    background-image: url('../images/login_shap.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}
.ml_auth_inner > .ml_auth_box:after{
	top: unset; 
    right: unset;
    left: -140px;
    bottom: -240px;
}
.ml_auth_box_inner{
    flex: 1;
}
.ml_auth_box_inner > h3{
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0;
    margin-bottom: 37px;
}
.ml_forgot_remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
	margin-bottom:37px;
}
.ml_forgot_remember > .ml_remember > .ml_checkbox > input[type="checkbox"]{
	position: absolute;
	left: -9999px;
}
.ml_forgot_remember > .ml_remember > .ml_checkbox > label{
	font-size:18px;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	padding-left: 30px;
}
.ml_forgot_remember > .ml_remember > .ml_checkbox > label:before{
	content: "";
	background-color: #ffffff;
	border-radius: 5px;
	padding:10px;
	position:absolute;
	left: 0;
	top: 50%;
    transform: translateY(-50%);
}
.ml_forgot_remember > .ml_remember > .ml_checkbox > label:after{
	content: "";
    display: block;
    position: absolute;
	opacity:0;
    top: -1px;
    left: 10px;
    width: 7px;
    height: 16px;
    border: solid #000;
    border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
	transition: all 0.1s ease-in-out;
}
.ml_checkbox > input[type="checkbox"]:checked + label:after{
	opacity:1;
}
.ml_forgot_remember > .ml_forgot > a{
	font-size:18px;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
}
.ml_auth_box_inner > .ml_input{
	margin-bottom:30px;
	position: relative;
}
.ml_auth_box_inner > .ml_input > .ml_form_control{
	min-height:50px;
	font-size: 16px;
	padding-right: 40px;
}
.ml_auth_box_inner > .ml_input > .ml_form_control::placeholder{
	font-weight: 500;
	color: #334250;
}
.ml_auth_box_inner > .ml_input > .ml_icon{
	position: absolute;
    top: 50%;
    right: 20px;
	cursor: pointer;
    transform: translateY(-50%);
}
.ml_auth_box_inner > .ml_input > .ml_icon > img{
    vertical-align: middle;
}
.ml_project_img_count {
    display: none;
}
.forgot_box,.ml_auth_box{
    text-align: center;
}
.forgot_box .back_btn,.ml_auth_box .back_btn{
    color: #ffffff;
}
.forgot_box .back_btn:hover,.ml_auth_box .back_btn:hover{
    color: #334250;
}
/*********************************************************************************************
2. authentication end
*********************************************************************************************/
/*********************************************************************************************
3. Header start
*********************************************************************************************/
.ml_main_wrapper .ml_header{
	background-color: #0f1520;
}
.ml_main_wrapper .upper_header {
    border-bottom: 1px solid #28354d;
}
.ml_main_wrapper .upper_header .ml_logo{
	padding:40px 0px;
}
.ml_main_wrapper .upper_header .ml_menu{
	padding:40px 0px 30px;
	text-align: right;
}
.upper_header .ml_menu ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}
.upper_header .ml_menu ul > li{
	display: inline-block;
    margin-right: 21px;
}
.upper_header .ml_menu ul > li > a{
	display: inline-block;
	position: relative;
	padding: 5px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}
.upper_header .ml_menu ul > li > a:after{
	content: "";
    position: absolute;
    top: 100%;
    left: 5px;
    display: inline-block;
    width: 0%;
    height: 2px;
	opacity: 0;
	visibility: hidden;
    background-color: #ae65ff;
	transition: all 0.3s ease-in-out;
}
.upper_header .ml_menu ul > li > a:before{
	content: "";
    position: absolute;
    top: 100%;
    right: 40%;
    display: inline-block;
    width: 3px;
    height: 2px;
	opacity: 0;
	visibility: hidden;
    background-color: #0f1520;
    z-index: 1;
	transition: all 0.3s ease-in-out;
}
.upper_header .ml_menu ul > li > a:hover,.upper_header .ml_menu ul > li > a.active{
	color: #ae65ff;
}
.upper_header .ml_menu ul > li > a:hover:before, .upper_header .ml_menu ul > li > a:hover:after{
	opacity: 1;
	visibility: visible;
}
.upper_header .ml_menu ul > li > a:hover:after{
	width: 60%;
}
.upper_header .ml_menu .nav_tc{
	display: inline-block;
    width: 40px;
    height: 40px;
    margin-left: 20px;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(45deg, #8545f5, #d311dc);
	vertical-align: middle;
	position: relative;
}
.upper_header .ml_menu .nav_tc img {
    position: absolute;
    top: 0;
    left: 0;
	border-radius: 100px;
	height: 40px;
    width: 40px;
}
.lower_header{
	padding: 30px 0px 21px;
}
.lower_header .ml_search {
    display: inline-block;
	position: relative;
    width: 100%;
    max-width: 300px;
}
.lower_header .ml_search > input{
	width: 100%;
	background:transparent;
	font-size: 15px;
	padding: 5px 0px;
	padding-left: 25px;
	color: #7589b1;
	border: none;
	outline: none;
}
.lower_header .ml_search > input::placeholder{
	color: #7589b1;
	font-weight: 700;
}
.lower_header .ml_search > .search_icon{
	position: absolute;
	display: inline-block;
	top:50%;
	left:0;
	transform: translateY(-50%);
}
.lower_header .ml_head_title{
	text-align:center;
}
.lower_header .ml_head_title h3{
	margin: 0;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 700;
	color:#ffffff;
	outline: none;
	display: inline-block;
}
.lower_header .ml_head_title span {
    margin-right: 10px;
    font-size: 16px;
    color: #a9a9a9;
    display: inline-block;
    transform: translateY(-2px);
}
.lower_header .ml_filter{
	position:relative;
	text-align: right;
}
.lower_header .ml_filter .nice-select{
	float: right;
    background-color: unset;
    border: none;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
    color: #7589b1;
}
.lower_header .ml_filter .nice-select .option:hover, .lower_header .ml_filter .nice-select .option.focus, .lower_header .ml_filter .nice-select .option.selected.focus{
	background-color: unset;
	color: #ae65ff;
}
.lower_header .ml_filter ul{
	position:absolute;
	top: calc(100% + 20px);
	right:0;
	padding:10px;
	margin: 0;
	list-style: none;
	text-align:left;
	background-color: #ffffff;
	border-radius: 10px; 
	box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.11);
	transform: translateX(0px) scale(0);
	z-index: 10;
	transition: all 0.1s ease-in-out;
}
.lower_header .ml_filter ul.filter_show{
	transform: translateX(0px) scale(1);
}
.lower_header .ml_filter ul > li{
	padding:5px 0px 0px;
	line-height: unset;
	min-height: unset;
}
.lower_header .ml_filter ul > li > a{
	text-transform: capitalize;
	font-size: 15px;
	font-weight: 600;
	color: #7589b1;
	transition: all 0.3s ease-in-out;
}
.lower_header .ml_filter ul > li > a:hover{
	color: #ae65ff;
}
.ml_share_block{
	text-align: right;
}
.ml_share_block.btn_show{
	display: block;
}
.share_btn{
	display: inline-block;
	min-width:150px;
	padding:10px 10px;
	text-align: center;
	text-transform: capitalize;
	border: 1px solid #ae65ff;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background-color: #ae65ff;
	border-radius: 30px;
	transition: all 0.3s ease-in-out;
}
.share_btn:hover{
	color: #ae65ff;
	background-color: transparent;
}
.share_btn span{
	vertical-align: text-bottom;
	margin-right: 2px;
}
.share_btn span svg path{
	fill: #ffffff;
	transition: all 0.3s ease-in-out;
}
.share_btn:hover span svg path{
	fill: #ae65ff;
}
/*********************************************************************************************
3. Header end
*********************************************************************************************/
/*********************************************************************************************
4. Dashboard Start
*********************************************************************************************/
.ml_dashboard_wrapper{
	padding-top: 62px;
}
.project_block{
	margin-bottom: 30px;
}
.project_block .project_block_upper {
    padding: 10px;
    padding-bottom: 0;
    background-color: #29354b;
    border-radius: 10px 10px 0px 0px;
	transition: all 0.3s ease-in-out;
}
.project_block .project_block_upper .project_image{
	position:relative;
	min-height: 250px;
    max-height: 250px;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
	background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.project_block .project_block_upper .project_image img{
	border-radius: 5px 5px 0px 0px;
	width: 100%;  
	height: 272px;
    object-fit: cover;
}
.project_block .project_block_upper .project_image .project_overlay{
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	border-radius: 10px 10px 0px 0px;
	background: rgba(255,255,255,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}
.project_block:hover .project_block_upper{
	background-color: transparent;
}
.project_block:hover .project_block_upper .project_image .project_overlay{
	opacity: 1;
	visibility: visible;
}
.project_overlay .project_option{
	position: absolute;
    top: 20px;
    width: 100%;
    text-align: right;
    padding-right: 30px;
}
.project_overlay .project_option .option_dots{
	cursor: pointer;
}
.project_overlay .project_option .option_dots svg path{
	fill:#556175;
}
.project_overlay .project_option ul{
	position: absolute;
    border-radius: 10px;
    top: calc(100% + 10px); 
    padding: 25px 20px;
    margin: 0;
    right: 20px;
    list-style: none;
    text-align: left;
    background-color: #ffffff;
    box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transition: all 0.1s ease-in-out;
}
.project_overlay .project_option ul.show_option{
	opacity: 1;
	visibility: visible;
}
.project_overlay .project_option ul:before{
	position: absolute;
    top: -8px;
    right: 11px;
    content: "";
    border-bottom: 8px solid #ffffff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.project_overlay .project_option ul > li{
	margin-bottom: 14px;
}
.project_overlay .project_option ul > li:last-child{
	margin-bottom: 0px;
}
.project_overlay .project_option ul > li > a{
	display: inline-block;
	position: relative;
	padding-left: 22px;
	color: #7589b1;
	font-size: 15px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}
.project_overlay .project_option ul > li > a > span > svg{
	position:absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.project_overlay .project_option ul > li > a > span > svg path{
	fill: #7589b1;
	transition: all 0.3s ease-in-out;
}
.project_overlay .project_option ul > li > a:hover{
	color: #ae65ff;
}
.project_overlay .project_option ul > li > a:hover > span > svg path{
	fill: #ae65ff;
}
.project_block_lower{
	padding: 37px 40px 39px 39px;
	background: #1b2537;
	border-radius: 0px 0px 10px 10px;
	display: flex;
	align-items: center;
	justify-content:space-between;
	transition: all 0.5s ease-in-out;
}
.project_block_lower .project_details h5{
	margin: 0;
    margin-bottom: 6px;
    font-size: 18px;
    max-width: 180px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 1.3px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project_block.inner_project .project_block_lower .project_details h5{
	font-size: 16px;
}
.project_block_lower .project_details h6{
	margin:0;
	font-size: 15px;
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 1px;
	color: #7589b1;
	transition: all 0.2s ease-in-out;
}
.project_block.inner_project .project_block_lower .project_details h6{
	font-size: 14px;
}
.project_block_lower .project_share .project_share_icon{
	width:40px;
	height: 40px;
	display:block;
	position: relative;
	cursor:pointer;
	border-radius: 50%;
	background: linear-gradient(to right, #d410dc, #7f4af8);
	transition: all 0.1s ease-in-out;
}
.project_block_lower .project_share .project_share_icon svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.1s ease-in-out;
}
.project_block_lower .project_share .project_share_icon svg path{
	fill: #ffffff;
}
.project_block:hover .project_block_lower{
	background: linear-gradient(to right, #734cfd, #9424f4);
}
.project_block:hover .project_block_lower .project_details h6{
	color: #e4e4e4;
}
.project_block:hover .project_block_lower .project_share .project_share_icon{
	background: #ffffff;
}
.project_block:hover .project_block_lower .project_share .project_share_icon svg path{
	fill: #8e2df6;
}
.project_block.inner_project .project_block_upper {
    padding: 10px 10px 0px;
}
.project_block.inner_project .project_block_upper .project_image{
	padding: 0px 0 10px;
	max-height: 200px;
	min-height: 199px;
	overflow: hidden;
}
.project_block.inner_project .project_block_upper .project_image img{
	width: 250px;
	height: auto;
	object-fit: contain;
}
.project_block.inner_project .project_block_upper .project_image .project_overlay{
	bottom: 0px;
}
.ml_google_notice {
    width: 100%;
    text-align: center;
    border: 1px solid #6859ff;
    background: rgba(104, 89, 255, 0.1);
    padding: 15px 15px;
    color: #ffffff;
	font-size: 16px;
	margin-bottom:50px;
}
.ml_google_notice a {
    color: #6859ff;
}
.no_project_found p {
    color: #ffffff;
    font-size: 30px;
}
.no_project_found {
    text-align: center;
    display: block;
    width: 100%;
}
.ml_google_setup {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    background: #192233;
    padding: 50px 10px;
}
.ml_google_setup h2 {
    color: #ffffff;
    font-size: 30px;
}
.ml_google_setup p {
    margin: 20px 0;
}
.ml_google_setup a.button {
    color: #ffffff;
    text-transform: capitalize;
    height: 40px;
    padding: 0 25px;
    border: 1px solid #6859ff;
    background: #6859ff;
    display: inline-block;
    line-height: 40px;
    border-radius: 100px;
    transition: all 0.3s;
}
.ml_google_setup a.button:hover {
    color: #6859ff;
    background: transparent;
}
.ml_google_setup img {
    margin: 20px 0;
}

.ml_google_setup h3 {
    font-size: 20px;
	color: #97a3bb;
}
.ml_google_setup h3 span {
    color: #ffffff;
}
/*********************************************************************************************
4. Dashboard End
*********************************************************************************************/
/*********************************************************************************************
5. Footer start
*********************************************************************************************/
.new_project_icon{
	display: inline-block;
	position:fixed;
	bottom:80px;
	right: 73px;
	cursor:pointer;
}
.new_project_icon > a {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    background: linear-gradient(to right, #d410dc, #7f4af8);
    transition: all 0.1s ease-in-out;
}
.ml_fea_hover {
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
	top: 0;
	transform:scale(0.2) rotate(40deg);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ml_fea_hover span {
    background: linear-gradient(to right, #d410dc, #7f4af8);
    display: inline-flex;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    position: absolute;
}
.ml_fea_hover span:first-child {
    top: -5px;
    left: 10px;
}
.ml_fea_hover span:nth-child(2) {
    top: 9px;
    right: 0;
}
.ml_fea_hover span:nth-child(3) {
    top: 0px;
    right: 9px;
    width: 3px;
    height: 3px;
    background-color: #ffe2b5;
}
.ml_fea_hover span:nth-child(4) {
    bottom: 8px;
    right: 2px;
}
.ml_fea_hover span:nth-child(5) {
    bottom: -11px;
    left: 36px;
}
.ml_fea_hover span:last-child {
    width: 3px;
    height: 3px;
    background-color: #ffe2b5;
    bottom: 9px;
    left: 3px;
}
.ml_fea_hover span:nth-child(6) {
    bottom: 18px;
    left: -4px;
}
.new_project_icon:hover .ml_fea_hover {
    transform: scale(1.3) rotate(0);
}
/*********************************************************************************************
5. Footer End
*********************************************************************************************/
/*********************************************************************************************
6. Create Project Popup Start
*********************************************************************************************/
.ml_cp_popup_wrapper, .ml_share_popup_wrapper, .ml_delete_popup_wrapper ,.ml_invite_popup_wrapper,.ml_setting_popup_wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0; 
    bottom: 0;
	opacity:0;
	visibility: hidden;
	overflow: auto;
	text-align: center;
	padding: 30px 0px;
	z-index:10;
	transition: all 0.3s ease-in-out;
}
.ml_cp_popup_wrapper{
	padding: 100px 0px;
}
.ml_cp_popup_wrapper.show_popup, .ml_share_popup_wrapper.show_popup, .ml_delete_popup_wrapper.show_popup,.ml_invite_popup_wrapper.show_popup,.ml_setting_popup_wrapper.show_popup{
	opacity:1;
	visibility: visible;
}
.ml_cp_popup_wrapper:before, .ml_share_popup_wrapper:before, .ml_delete_popup_wrapper:before,.ml_invite_popup_wrapper:before,.ml_setting_popup_wrapper:before{
	content: "";
    display: inline-block;
    vertical-align: middle;
	width: 1px;
	height: 100%;
}
.ml_cp_popup_wrapper:after, .ml_share_popup_wrapper:after, .ml_delete_popup_wrapper:after,.ml_invite_popup_wrapper:after,.ml_setting_popup_wrapper:after{
	content:"";
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background: rgba(0,0,0,0.7);
	filter:blur(5px);
	z-index: -2;
}
.ml_cp_popup_inner ,.ml_setting_popup .ml_setting_popup_inner{
    width: 100%;
    max-width: 1170px;
	position:relative;
	min-height: 600px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	border-radius: 10px 0px 0px 10px;
}
.ml_cp_popup_inner .cp_popup_image ,.ml_setting_popup .ml_setting_popup_inner .cp_popup_image{
	width: 60%;
	text-align: left;
	background: url('../images/cp_popup_bg.jpg') no-repeat left;
	padding: 126px 44px 83px;
	border-radius: 10px 0px 0px 10px;
	box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 0.2);
}
.ml_cp_popup_inner .cp_popup_content,.ml_setting_popup .ml_setting_popup_inner .cp_popup_content{
	position: absolute;
	top: -57px;
	right:0;
	bottom: -57px;
	max-width: 520px;
	width: 100%;
	padding:55px 30px 60px 30px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.15);
	background-color: #ffffff;
}
.popup_heading{
	text-align: center;
}
.popup_heading h5{
	font-size:32px;
	letter-spacing: 0.8px;
	font-weight: 800;
	color: #ae65ff;
	margin-bottom:31px;
	text-transform: capitalize;
}
.cp_popup_content .popup_project_body{
	text-align: center;
}
.cp_popup_content .popup_project_body .cp_checkbox_block{
	position: relative;
    text-align: center;
}
.cp_popup_content .popup_project_body .cp_checkbox_block > input{
	position: absolute;
	left: -9999px;
}
.cp_popup_content .popup_project_body .cp_checkbox_block label{
	text-align: center;
	margin-bottom: 30px;
	position: relative;
    padding: 40px 40px 35px;
    background-color: #f5f8ff;
    border-radius: 5px;
	cursor: pointer;
    border: 1px solid #dfe9ff;
	width: 100%;
}
.ml_setting_popup_inner .cp_checkbox_block label .project_type h6 {
    margin-bottom: 5px;
}
.ml_setting_popup_inner .cp_checkbox_block label .project_type p {
    margin: 0;
}
.ml_setting_popup_inner .cp_popup_content .popup_project_body .cp_checkbox_block label {
    padding: 30px 40px 25px;
}
.cp_checkbox_block label .tick{
	position: absolute;
	top:18px;
	left:18px;
	opacity: 0;
	visibility: hidden;
	display: inline-block;
	border-radius: 50%;
	box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.15);
}
.cp_checkbox_block label .tick svg path{
	fill: #45df6d;
}
.cp_checkbox_block label .project_image{
	margin-bottom: 24px;
}
.cp_checkbox_block label .project_type h6{
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #7589b1;
}
.cp_popup_content .popup_project_body .cp_checkbox_block input[type="radio"]:checked ~ label,.ml_setting_popup_inner .cp_popup_content .popup_project_body .cp_checkbox_block input[type="radio"]:checked ~ label{
	border-color: #45df6d;
}
.cp_popup_content .popup_project_body .cp_checkbox_block input[type="radio"]:checked ~ label .tick,.ml_setting_popup_inner .cp_popup_content .popup_project_body .cp_checkbox_block input[type="radio"]:checked ~ label .tick{
	opacity: 1;
	visibility:visible;
}
.ml_setting_option .selection_box .select_check label {
    display: inline-block;
    vertical-align: middle;
}

.ml_setting_option .selection_box .select_check p {
    display: inline-block;
    margin-bottom: 0;
    font-size: 18px;
    vertical-align: middle;
}
.ml_setting_option h4 {
    display: inline-block;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    vertical-align: middle;
}
.ml_setting_option .setting_selection_box {
    display: inline-block;
}
.ml_setting_option {
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.ml_setting_popup .ml_setting_popup_inner .cp_popup_content {
	padding: 30px 30px 60px 30px;
}
.ml_setting_option .selection_box .select_check label span {
    display: block;
}
.ml_setting_option .selection_box .select_check label span {
    opacity: 0;
}
.ml_setting_option .selection_box .select_check input[type='radio']:checked ~ label span {
    opacity: 1;
}
.popup_btn{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	text-align: center;
	border-radius: 30px;
	border: 1px solid #45df6d;
	background-color: #45df6d;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}
.popup_btn span{
	margin-left:10px;
}
.popup_btn span i{
	font-weight: 100;
}
.popup_btn:hover{
	background-color: transparent;
	color: #45df6d;
}
.cp_popup_content .project_create_section .popup_heading h5{
	margin-bottom:29px;
}
.project_create_section{
	display: none;
	padding-top: 53px;
}
.project_create_section .selected_project {
    text-align: center;
    padding: 39px 20px 37px;
    border: 1px solid #dfe9ff;
    border-radius: 5px;
    background-color: #f5f8ff;
}
.project_create_section .selected_project .project_image.selected_project_image {
    margin-bottom: 29px;
}
.project_create_section .selected_project .project_type.selected_project_type h6{
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #7589b1;
}
.project_name_block{
	display: block;
	margin:30px 0px;
}
.project_name_block input{
	width: 100%;
	height:50px;
	line-height: 50px;
	padding: 0px 20px;
	text-align: center;
	outline: none;
	border-radius: 5px;
	border:1px solid #dfe9ff;
	font-size: 18px;
	color: #7589b1;
	font-weight:500;
	background-color: #f5f8ff;
}
.project_name_block input::placeholder{
	color: #7589b1;
}
.popup_btn.popup_btn_purple{
	background-color: #ae65ff;
	border-color: #ae65ff;
}
.popup_btn.popup_btn_purple:hover{
	background-color: transparent;
	border-color: #ae65ff;
	color: #ae65ff;
}
.back_btn{
	font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    text-align: center;
    display: inline-block;
    margin-top: 25px;
	color: #7589b1;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}
.back_btn:hover{
	color: #ae65ff;
}
/*********************************************************************************************
6. Create Project Popup End
*********************************************************************************************/
/*********************************************************************************************
7. Share Project Popup Start
*********************************************************************************************/
.ml_share_popup_wrapper .ml_share_popup_inner,.ml_invite_popup_wrapper 
.ml_invite_popup_inner{
	width:100%;
	position:relative;
	max-width: 560px;
	min-height: 624px;
	padding: 125px 50px 20px;
	margin: 0 auto;
	display: inline-block;
	vertical-align: middle;
	border-radius: 10px;
	box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.15);
	background-color: #ffffff;
}
.ml_share_popup_wrapper .ml_share_popup_inner:before,.ml_invite_popup_wrapper 
.ml_invite_popup_inner:before{
	content: "";
	display: block;
	position: absolute;
	top: 62px;
	left: -80px;
	bottom: 62px;
	right: -80px;
	border-radius: 20px;
	box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 0.2);
	z-index: -1;
	background: linear-gradient( 0deg, rgb(123,67,251) 0%, rgb(134,52,248) 100%);
	background-image: url('../images/share_bg.png');
	background-image: url('../images/share_bg.png'), linear-gradient( 0deg, rgb(123,67,251) 0%, rgb(134,52,248) 100%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.close_popup{
	position: absolute;
	top:-10px;
	right:-10px;
	cursor: pointer;
	background-color: #ff5548;
	color: #ffffff;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display:block;
}
.close_popup i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ml_share_popup_inner .copy_link.ml_input, 
.ml_invite_popup_inner .copy_link.ml_input{
	position: relative;
	display:block;
}
.ml_share_popup_inner .copy_link.ml_input .ml_form_control,.ml_invite_popup_inner .copy_link.ml_input .ml_form_control{	
	width: 100%;
	height:50px;
	line-height: 50px;
	padding: 0px 20px;
	padding-right: 130px;
	outline: none;
	border-radius: 30px;
	border:1px solid #dfe9ff;
	font-size: 16px;
	color: #7589b1;
	font-weight:600;
	background-color: #f5f8ff;
}
.ml_share_popup_inner .copy_link.ml_input .ml_form_control::placeholder,.ml_invite_popup_inner .copy_link.ml_input .ml_form_control::placeholder{
	color: #7589b1;
}
.ml_share_popup_inner .copy_link.ml_input .copy_icon,.ml_invite_popup_inner .copy_link.ml_input .copy_icon{
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	text-align: center;
	display: flex;
	align-items:center;
	justify-content: center;
	width: 120px;
	line-height: 50px;
	border-radius: 0px 30px 30px 0px;
	background-color: #ae65ff;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}
.ml_share_popup_inner .copy_link.ml_input .copy_icon.copied{
	background-color: #10da29;
	display: none;
}
.ml_share_popup_inner .divider{
	margin:34px 0px 32px;
	font-size: 20px;
	text-transform: uppercase;
	color: #000;
	font-weight: 600;
	text-align: center;
	position: relative;
}
.ml_share_popup_inner .divider:before, .ml_share_popup_inner .divider:after{
	content: "";
	width: 180px;
	height: 2px;
	background: linear-gradient(to left, #ededed, #ffffff);
	position: absolute;
	top:50%;
	left: 27px;
}
.ml_share_popup_inner .divider:after{
	left: unset;
	right: 27px;
	background: linear-gradient(to right, #ededed, #ffffff);
}
.ml_share_popup_inner .copy_link.email_link.ml_input .ml_form_control,.ml_invite_popup_inner .copy_link.email_link.ml_input .ml_form_control{
	border-radius: 5px;
	padding: 0px 20px;
}
.ml_share_popup_inner .copy_link.email_link,.ml_invite_popup_inner .copy_link.email_link{
	margin-bottom: 30px;
}
.ml_share_popup_inner .copy_link.email_link.ml_input .email_icon,.ml_invite_popup_inner .copy_link.email_link.ml_input .email_icon{
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 20px;
	color: #7589b1;
}
.ml_share_popup_inner .popup_heading h5 ,.ml_invite_popup_inner .popup_heading h5{
	margin-bottom: 57px;
}
/*********************************************************************************************
7. Share Project Popup End
*********************************************************************************************/
/*********************************************************************************************
8. Delete Project Popup End
*********************************************************************************************/
.ml_delete_popup_wrapper .ml_delete_popup_inner{
	width: 100%;
	max-width: 720px;
	min-height: 330px;
	border-radius: 10px;
	margin: 0 auto;
	display: inline-block;
	vertical-align: middle;
	box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.15);
	position: relative;
	padding: 75px 50px 50px;
	background-color: #ffffff; 
}
.ml_delete_popup_wrapper .ml_delete_popup_inner .warning_message{
	
}
.ml_delete_popup_wrapper .ml_delete_popup_inner .warning_message h6{
	font-size: 22px;
	text-transform: capitalize;
	font-weight: 700;
	color: #334250;
	text-align: center;
	margin: 0;
}
.ml_delete_popup_wrapper .ml_delete_popup_inner .delete_button_wrapper{
	text-align: center;
	margin-top: 34px;
}
.ml_delete_popup_wrapper .ml_delete_popup_inner .delete_button_wrapper a.delete_btn{
	display: inline-block;
	min-width: 180px;
	height: 50px;
	line-height: 50px;
	border-radius: 30px;
	padding: 0px 20px;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background-color: #576c96;
	text-align: center;
	text-transform: capitalize;
}
.ml_delete_popup_wrapper .ml_delete_popup_inner .delete_button_wrapper a.delete_btn.delete_btn_red{
	background-color: #ff5548;
	margin-left: 16px;
}
.ml_delete_popup_inner .popup_heading h5{
	margin-bottom:27px;
}
/*********************************************************************************************
8. Delete Project Popup End
*********************************************************************************************/
/*********************************************************************************************
9. Project Notification Popup Start
*********************************************************************************************/
.project_notification{
	position: fixed;
    bottom: 40px;
    left: 40px;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    background-color: #2cca55;
    border-radius: 10px;
    max-width: 620px;
    min-height: 60px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}
.project_notification.show_notification{
	opacity: 1;
	visibility: visible;
}
.project_notification h3{
	margin: 0;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ffffff;
}
.project_notification.project_warning{
	background-color: #f0ad4e;
}
.project_notification.project_notify{
	background-color: #5bc0de;
}
.project_notification.project_danger{
	background-color: #d9534f;
}
/*********************************************************************************************
9. Project Notification Popup End
*********************************************************************************************/
/*********************************************************************************************
10. Project Page Start
*********************************************************************************************/
.ml_project_wrapper{
	padding-top: 62px;
}
.ml_project_wrapper .project_box_wrapper{
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
.ml_project_wrapper .project_box_wrapper .devider_box{
	width: 18.1%;
    margin: 0px 10px 25px 15px;
	display: inline-block;
	vertical-align: middle;
}
.ml_project_wrapper .project_box_wrapper .devider_box .selection_box .project_block{
	margin-bottom: 0;
}
.ml_project_wrapper .project_box_wrapper .devider_box:last-child{
	margin-right: 0;
}
.progress_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
	opacity: 0;
	visibility: hidden;
}
.progress_overlay.show_progress{
	opacity: 1;
	visibility: visible;
}
.ml_progress_section {
    width: 100%;
    display: block;
}
.ml_progress_section h3{
	margin: 0;
    margin-bottom: 5px;
    text-align: center;
    display: block;
    color: #000000;
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 600;
}
.ml_progress_section .progress {
	background-color: #e0e0e0;
}
.ml_progress_section .progress .progress-bar{
	background-color: #8645f5;
}
.devider_box {
    margin-bottom: 30px;
}
.ml_new_file{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1b2537;
	border-radius: 10px;
	height: 100%;
	min-height: 330px;
}
.ml_new_file:before{
	content: "";
	display: block;
	border: 1px dashed #9498a1;
	border-radius: 10px;
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
}
.ml_new_file input{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.ml_new_file .file_block{
	text-align: center;
}
.ml_new_file .file_block h3{
	margin: 0;
	margin-top: 27px;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 1px;
}
.ml_project_wrapper .project_box_wrapper .devider_box .project_block_lower{
	padding-left: 20px;
	padding-right: 20px;
}
.selection_box{
	position: relative;
	border: 2px solid transparent;
	border-radius: 10px;
}
.selection_box.selected{
	border-color: #45df6d;
}
.selection_box .select_check{
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 10;
}
.selection_box .select_check input{
	position: absolute;
	left: -9999px;
}
.selection_box .select_check label{
	margin: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	box-shadow: none;
	border-radius: 50%;
}
.selection_box .project_block:hover .select_check label{
	box-shadow: 0px 0px 0px 1px #545f73;
}
.selection_box.selected .project_block:hover .select_check label{
	box-shadow: none;
}
.selection_box.selected .select_check label{
	box-shadow: none;
}
.selection_box .select_check label span{
	display:none;
}
.selection_box.selected .select_check label span{
	display:block;
}
.selection_box.selected .select_check label span svg > path{
	fill: #45df6d;
}
.selection_action_box{
    position: fixed;
    bottom: 0;
    left: 50%;
	transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    width: 100%;
    background:linear-gradient( to right, #7d41fb, #8536f8);
    border-radius: 30px 30px 0px 0px;
    max-width: 677px;
    min-height: 80px;
    display: flex;
    align-items: center;
	justify-content: space-around;
	z-index: 10;
    transition: all 0.3s ease-in-out;
}
.selection_action_box.show_selects{
	opacity: 1;
	visibility: visible;
}
.selection_action_box .ml_forgot_remember{
	margin-bottom: 0;
}
.selection_action_box .ml_forgot_remember > .ml_remember > .ml_checkbox > label{
	margin-bottom: 0;
	text-transform: capitalize;
	font-size: 16px;
    font-weight: 700;
	letter-spacing: 1px;
}
.selection_action_box .ml_forgot_remember > .ml_remember > .ml_checkbox > label:before {
    border: 1px solid #ffffff;
    background-color: unset;
    padding: 7px;
}
.selection_action_box .ml_forgot_remember > .ml_remember > .ml_checkbox > label:after {
    top: 2px;
    left: 8px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0px 2px 2px 0px;
}
.action_box a{
	text-transform: capitalize;
	font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    position: relative;
	letter-spacing: 1px;
}
.action_box a span{
	margin-right: 10px;
	vertical-align: text-top;
	display: inline-block;
}
.action_box a span img{
	vertical-align: unset;
}
.ajax_loader{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	display: none;
}
.ajax_loader.show_loader{
	display: flex;	
}
.loader,.loader:before,.loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}
.loader {
	color: #ffffff;
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,.loader:after {
	content: '';
	position: absolute;
	top: 0;
}
.loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 3.5em;
}
@-webkit-keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
@keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

/*********************************************************************************************
10. Project Page End
*********************************************************************************************/
/*********************************************************************************************
11. Draggable Input File Start
*********************************************************************************************/
.draggable_input{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: none;
}
.draggable_input.show_upload{
	display: block;
}
.draggable_input input[type="file"]{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
	z-index: 1;
	cursor: pointer;
}
.draggable_input label.drag_input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
	cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.drag_box{
	width: 450px;
	height: 450px;
	border-radius: 20px;
	text-align: center;
	padding: 30px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px dashed #ffffff;
	background: linear-gradient( 0deg, rgba(123, 67, 251, 0.85) 0%, rgba(134, 52, 248, 0.85) 100%);
}
.drag_box .drag_content{
	text-align: center;
}
.drag_box .drag_content .drag_image{
	width: 100%;
	text-align: center;
	border-radius: 100%;
	margin: 0 auto;
	margin-bottom: 25px;
}
.drag_box .drag_content h3{
	margin: 0;
	font-size: 22px;
	color: #ffffff;
	font-weight: 600;
	text-transform: uppercase;
}
.drag_box .drag_content p{
	margin: 0;
	font-size: 16px;
	color: #f7f7f7;
	font-weight: 500;
	text-transform: uppercase;
}
/*********************************************************************************************
11. Draggable Input File End
*********************************************************************************************/
/*********************************************************************************************
12. Preview Project Start
*********************************************************************************************/
.ml_prev_inner {
	position: relative;
	overflow-x: hidden;
}
.ml_prev_inner::-webkit-scrollbar{
    width: 0px;
    opacity: 0;
}
.preview_screen {
    text-align: center;
    vertical-align: middle;
}
.ml_prev_inner .preview_screen img {
	height: auto;
	vertical-align: middle;
	/* max-width: 100%; */
	max-width: 100%;
}
.ml_left_arrow, .ml_right_arrow {
    position: fixed;
	width: 60px;
	height: 60px;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
	display: inline-block;
	border-radius: 10px;
	background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
	transition: all 0.3s ease;
}
.ml_right_arrow{
    right: 10px;
	left: auto;
}
.ml_left_arrow:hover, .ml_right_arrow:hover {
	background: linear-gradient(to right, rgba(125, 65, 251, 1), rgba(133, 54, 249, 1));
}
.ml_left_arrow img, .ml_right_arrow img {
    position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.preview_screen div.pro-images{
	display: none;
	width: 100%;
    overflow: hidden;
}
.preview_screen div.active{
	display: block;
}
.ml_prev_button {
    position: fixed;
    top: 10px;
    right: 10px;
}
.ml_prev_button .ml_prev_btn{
	min-width: 100px;
    margin: 0 2px;
}
.ml_prev_button .ml_prev_btn span {
    margin-right: 9px;
}
/*********************************************************************************************
12. Preview Project End
*********************************************************************************************/
/*********************************************************************************************
51. components start
*********************************************************************************************/
/* button start */
.ml_btn{
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    padding: 15px;
    border-radius: 5px;
    outline: none;
    border: none;
    box-shadow: none;
    text-decoration: none;
    text-align: center;
	transition: all 0.3s ease-in-out;
}
.ml_btn.ml_btn_dark{
    background-color: #2d3b5d;
	border:1px solid #2d3b5d;
	box-shadow: 0px 21px 22px 0px rgba(166, 99, 251, 0.2);
}
.ml_btn.ml_btn_dark:hover{
	background-color: transparent;
	color: #2d3b5d;
}
.ml_btn.ml_btn_block{
    display: block;
}
/* button end */

/* input box start */
.ml_input{
    margin-bottom: 15px;
}
.ml_input > .ml_form_control{
    padding: 15px;
    background-color: #ffffff;
    width: 100%;
    border-radius: 5px;
    border: none;
    box-shadow: none;
    outline: none;
}
/* input box end */
/*********************************************************************************************
51. components end
*********************************************************************************************/

/*-------- bottom popup css --------*/
.ml_bottom_popup {
    position: fixed;
	bottom: -500px;
	visibility: hidden;
    left: 0;
    right: 0;
    background: #030508;
    padding: 30px 25px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
}
.ml_bottom_popup_open .ml_bottom_popup{
	bottom:0;
	visibility: visible;
}
.ml_bottom_popup .ml_bottom_box {
    width: 250px; 
    height: 250px;
	background: url(https://images2.alphacoders.com/902/thumb-1920-902946.png);
	margin: 0 5px;
	background-size:cover;
    display: inline-block;
	position: relative;
	transition:all 0.3s;
}
.ml_bottom_popup .ml_bottom_box:hover,.ml_bottom_popup .ml_bottom_box.active{
	box-shadow: 0 0 0px 2px #7d41fb;
}
.ml_bottom_popup .ml_bottom_box p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: #ffffff;
    padding: 15px 0;
	background: rgba(0,0,0,.5);
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;
	z-index: 2;
} 
.ml_bottom_popup .ml_bottom_box:hover p,.ml_bottom_popup .ml_bottom_box.active p{
	background:#7d41fb;
}
.ml_bottom_popup_close {
    position: fixed;
	bottom: 35px;
    right: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    background: #7d41fb;
    border-radius: 100px;
    color: #ffffff;
    border: none;
    box-shadow: none;
	cursor: pointer;
	visibility: hidden;
	z-index: 5;
}
.ml_bottom_popup_open .ml_bottom_popup_close{
	visibility: visible;
}
.ml_bottom_popup_close:focus{
	outline:none;
}
.ml_resizer_close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #7d41fb;
    border-radius: 100px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    line-height: 19px;
    z-index: 5;
    cursor: pointer;
}
.ml_resizer_close:before {content: "x";margin-left: -1px;cursor:pointer;} 
#hotspot,#hotspot-new {
    border: 2px solid #7d41fb !important;
    background: rgba(125, 65, 251, 0.33);
}
#hotspot:hover,#hotspot-new:hover {
	cursor:move;
}
.ml_bottom_box .ml_bottom_cimage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0,0,0,0.6);
	z-index: 1;
	visibility: hidden;
}
.image_active.ml_bottom_box .ml_bottom_cimage {
	visibility: visible;
}

.ml_bottom_box .ml_bottom_cimage span {border: 1px solid #ffffff;color: #ffffff;height: 25px;display: inline-block;line-height: 23px;padding: 0 20px;border-radius: 100px;text-transform: capitalize;margin-top: 10px;}

.ml_pro_inner {
    margin: 0 auto;
	position: relative;
}
.ml_pro_desktop .ml_pro_inner {
	max-width: 100%; 
	max-height: 100%;
}
.pro-images.active .hotspotlayer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.pro-images.active .hotspotpoint {
    position: absolute;
    border: 2px solid #7d41fb !important;
	background: rgba(125, 65, 251, 0.33);
	opacity:0;
	cursor:pointer;
}
/*-------- invitation css ----------*/
.ml_invitation > .ml_invite_name {
    background: linear-gradient(to right, #d410dc, #7f4af8);
    color: #ffffff;
    width: 40px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    font-weight: 700;
    letter-spacing: 1px;
}
.ml_invitation {
	margin-right: 5px;
	position: relative;
	display:inline-block;
}
.ml_project_setting .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ml_setting_box .ml_setting_btn {
    color: #ffffff;
    font-size: 18px;
}
.ml_setting_box .ml_setting_btn svg{
	margin-right:15px;
}
.ml_invitation > .ml_invite_avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 100px;
}
.ml_project_invite {
    padding-top: 40px;
}
.ml_invite_popup_wrapper .ml_more_invite {
    color: #813bfa;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 20px;
    display: inline-block;
}
.ml_invite_popup_inner .nav.nav-tabs li {
    width: 50%;
}
.ml_invite_popup_inner .nav.nav-tabs li a {
    padding-bottom: 15px;
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0f1520;
    border-bottom: 2px solid transparent;
}
.ml_invite_popup_inner .nav.nav-tabs {
    margin-bottom: 30px;
}
.ml_invite_popup_inner .nav.nav-tabs li a.active {
	border-bottom: 2px solid #ae65ff;
	color: #ae65ff;
}
.ml_invite_popup_inner .copy_link.email_link {
    margin-bottom: 20px;
}
.ml_invite_popup_inner .popup_btn {
    position: absolute;
    bottom: 30px;
    right: 50px;
    left: 50px;
}
.ml_invite_popup_wrapper .ml_invite_popup_inner {padding-bottom: 100px;padding-top: 50px;}
.ml_collaborators_data input {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border-radius: 5px;
	border: 1px solid #dee2e6;
	margin-bottom: 20px;
}
.ml_collaborators_data input:focus {
    outline: none;
}
.ml_collaborators_data {
    max-height: 330px;
    overflow-x: hidden;
}
.ml_collaborators_users {
    text-align: left;
	display: flex;
	position: relative;
    margin-bottom: 15px;
}
.ml_collaborators_users .ml_collaborators_name h5 {
    margin: 0;
    font-size: 18px;
    color: #0f1520;
}
.ml_collaborators_users .ml_collaborators_name p {
    margin: 0;
}
.ml_collaborators_users .ml_invitation {
    margin-right: 10px;
}
.ml_collaborators_users .selection_box {
    border: none;
    position: absolute;
    right: 0;
    top: 11px;
}
.ml_collaborators_users .selection_box .select_check,.ml_setting_option .selection_box .select_check {
    position: static;
}
.ml_collaborators_users .selection_box .select_check label ,.ml_setting_option .selection_box .select_check label{
    border: 1px solid #545f73;
    box-shadow: none;
}
.ml_collaborators_users .selection_box .project_block:hover .select_check label ,.ml_setting_option .selection_box  .project_block:hover .select_check  label{
    box-shadow: none;
}
.ml_collaborators_users .selection_box .project_block ,.ml_setting_option .selection_box  .project_block{
    margin: 0;
}
.ml_collaborators_users .selection_box .select_check label span ,.ml_setting_option .selection_box .select_check label span {
    position: relative;
    top: -2px;
    left: -1px;
}
.ml_collaborators_users .selection_box.selected .project_block .select_check label ,.ml_setting_option .selection_box.selected .project_block .select_check label {
    border: 1px solid #45df6d;
}
.selection_box.setting_selection_box.selected {
    display: inline-block;
    border: none;
}

.ml_setting_option .selection_box.selected .select_check label span {
    display: inline-block;
}
.ml_invitation_input {
	position: relative;
	margin-bottom:20px;
}
div#invite-via-mail {
    max-height: 330px;
    overflow-x: hidden;
}
div#invite-via-mail::-webkit-scrollbar ,.ml_collaborators_data::-webkit-scrollbar {
    width: 5px;
}
div#invite-via-mail::-webkit-scrollbar-thumb ,.ml_collaborators_data::-webkit-scrollbar-thumb {
  background-color: #ae65ff;
}
.ml_setting_btn{
	margin-left:15px;
}
/*---------- profile css --------*/
.ml_profile_box {
    background: #1B2537;
    padding: 50px;
    margin: 70px 0;
    border-radius: 10px;
}
.ml_profile_photo .ml_invitation > .ml_invite_name {
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
}
.ml_profile_photo .ml_invitation > .ml_invite_avatar {
    width: 100px;
	height: 100px;
	opacity: 1;
}
.ml_profile_photo {
    text-align: center;
    margin-bottom: 30px;
}
.ml_profile_photo .ml_profile_upload {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 31px;
    text-align: center;
    background: rgba(0,0,0,0.5);
    z-index: 37;
    border-radius: 100px;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}
.ml_profile_photo .ml_invitation:hover .ml_profile_upload {
    visibility: visible;
    opacity: 1;
    bottom: 0;
}
.ml_profile_photo .ml_profile_upload input {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}
.ml_profile_photo .ml_profile_upload span {
    color: #ffffff;
    font-size: 25px;
}
.ml_profile_photo .ml_profile_upload input::-webkit-file-upload-button {
    display: none;
}
.ml_profile_submit{
	text-align: center;
}
.ml_change_password_toggle .ml_input > .ml_icon {
    position: absolute;
    top: 50%;
    right: 20px;
    cursor: pointer;
    transform: translateY(-50%);
}
.ml_change_password_toggle .ml_input {
    margin-bottom: 30px;
    position: relative;
}
.ml_change_password .ml_btn.ml_change_password_btn {
    padding: 0;
    color: #7589b1;
}
.ml_change_password {
    margin-bottom: 30px;
    text-align: right;
}

/*-------- phones play css -------*/
.ml_pro_iphone_portrait,.ml_pro_iphone_landscape{
	width: 100%;
    height: 932px;
    max-width: 564px;
    padding: 35px 159px;
    background: url(../images/iphone_play.png);
    background-size: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-repeat: no-repeat;
	position: relative;
	transform: translateX(-63.5px);
}
.ml_pro_iphone_portrait:before,.ml_pro_iphone_landscape:before{
    content: "";
    position: absolute;
    height: 40px;
    width: 289px;
    background: url(../images/iphone_top.png);
    background-repeat: no-repeat;
    z-index: 1;
    left: 50%;
    top: 27px;
    margin-left: -80px;
}
.ml_pro_iphone_portrait .ml_pro_inner ,.ml_pro_iphone_landscape .ml_pro_inner{
	overflow-x: hidden;
	border-radius: 40px;
    margin: 0;
}
.ml_pro_iphone_portrait .ml_pro_inner::-webkit-scrollbar,.ml_pro_iphone_landscape .ml_pro_inner::-webkit-scrollbar{
	width:0px;
}
.ml_pro_iphone_portrait .ml_pro_inner::-webkit-scrollbar-thumb{
	background: #a59fac;
}
.ml_pro_iphone_portrait .ml_pro_inner img ,.ml_pro_iphone_landscape .ml_pro_inner img{
    width: 100%;
}
/*-------- phones landscape play css -------*/
.ml_pro_iphone_landscape{
    width: 912px;
    height: 565px;
    padding: 30px 40px;
    background: url(../images/iphone_land_play.png);
	transform: translate(0px, 54px);
	max-width: 100%;
}
.ml_pro_iphone_landscape:before{
	height: 289px;
    width: 40px;
    background: url(../images/iphone_land_top.png);
    background-repeat: no-repeat;
    top: 50%;
    left: 31px;
    margin: 0;
    margin-top: -215px;
}
/*-------- watch play css -------*/
.ml_pro_smart_watch{
    width:100%;
	height: 552px;
	max-width: 358px;
    padding: 113px 36px 103px;
    background: url(../images/watch_play.png);
    background-size: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: center;
}
.ml_pro_smart_watch .ml_pro_inner{
    border-radius: 38px;
    overflow-x: hidden;
	margin: 0;
	width: 187.8px;
    height: 222px;
}
.ml_pro_smart_watch .ml_pro_inner::-webkit-scrollbar {
    width: 0;
} 
.ml_pro_smart_watch .ml_pro_inner::-webkit-scrollbar-thumb {
  background-color: transparent;
  outline:none;
}
/*-------- phones play css -------*/
.ml_pro_android_portrait,.ml_pro_android_landscape{
    width: 100%;
    height: 950px;
    max-width: 587px;
    padding: 98px 0px 88px 96px;
    background: url(../images/android_play.png);
    background-size: contain;
    margin: 0 auto;
    overflow: hidden;
    background-repeat: no-repeat;
    position: relative; 
}
.ml_pro_android_landscape{
	width: 948px;
    height: 587px;
    padding: 63px 0px 0px 96px;
	background: url(../images/android_land_play.png);
    background-size: 100%;
	background-repeat: no-repeat;
	max-width: 100%;
}
.ml_pro_android_portrait .ml_pro_inner ,.ml_pro_android_landscape .ml_pro_inner{
	overflow-x: hidden;
	border-radius: 5px;
    margin: 0;
}
.ml_pro_android_portrait .ml_pro_inner::-webkit-scrollbar,.ml_pro_android_landscape .ml_pro_inner::-webkit-scrollbar{
	width:0px;
}
/*------- play color switch ------*/
.ml_color_switcher {
    position: fixed;
    top: 10px;
    right: 10px;
}

.ml_white_bg,.ml_black_bg {
    display: inline-block;
    height: 30px;
    border: 1px solid #3c3c3c;
    padding: 0 20px 0 7px;
    line-height: 28px;
    color: #afafaf;
    margin-left: 10px;
    border-radius: 6px;
    cursor: pointer;
}
.ml_white_bg span, .ml_black_bg span {
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    display: inline-block;
    margin-right: 6px;
    border-radius: 4px;
    vertical-align: middle;
    transform: translateY(-2px);
}
.ml_white_bg p, .ml_black_bg p {
    display: inline-block;
	vertical-align: middle;
	margin: 0;
}
.ml_black_bg span {
    background: #0b101a;
}
.white_bg {
    background: #ffffff;
}
.white_bg .ml_white_bg,.white_bg .ml_black_bg {
    border: 1px solid #c7c7c7;
    color: #000;
}
/*********************************************************************************************
52. Responsive Start
*********************************************************************************************/
@media (max-width: 1499px){
	.ml_project_wrapper .project_box_wrapper .devider_box{
		width: 23%;
	}
}
@media (min-width: 1100px){
/* 	.ml_prev_landscape .ml_prev_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	} */
}
@media (max-width: 1100px){
	.ml_pro_android_landscape ,.ml_pro_iphone_landscape{
		background: none;
		padding: 0;
		transform: none;
	}
	.ml_pro_android_landscape .ml_pro_inner ,.ml_pro_iphone_landscape .ml_pro_inner{
		border-radius: 0;
		margin: 0 auto;
	}
	.ml_pro_iphone_landscape:before {
		display: none;
	}
}
@media (max-width: 1200px){
	body{
		overflow-x: hidden;
	}
	.ml_auth_wrapper{ 
		position: relative;
	}
	.ml_new_file .file_block h3{
		font-size: 16px;
	}
	.ml_cp_popup_inner {
		max-width: 970px;
	}
	.ml_project_wrapper .project_box_wrapper .devider_box {
		width: 30.3%;  
	}
}
@media (max-width: 991px){
	.project_block {
		margin-bottom: 30px;
	}
	.new_project_icon {
		bottom: 30px;
		right: 30px;
	}
	.ml_project_wrapper .project_box_wrapper {
		justify-content: center;
		flex-direction: column;
	}
	.ml_project_wrapper .project_box_wrapper .devider_box {
		width: 46%;	
	}
	.ml_new_file{
		min-height: 375px;
	}
	.ml_cp_popup_inner .cp_popup_image{
		display: none;
	}
	.ml_cp_popup_inner .cp_popup_content{
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		overflow-x: scroll;
	}
	.ml_cp_popup_inner .close_popup {
		top: 30px;
		right: 30px;
	}
}
@media (max-width: 768px){
	.ml_auth_content_img{
		display: none;
	}
	.ml_auth_inner > .ml_auth_content{
		max-width: 100%;
		padding-top: 30px;
	}
	.ml_auth_inner > .ml_auth_box {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	.project_block .project_block_upper .project_image img{
		width: 100%;
	}
	.ml_delete_popup_wrapper .ml_delete_popup_inner{
		max-width: 550px;
		min-height: 250px;
		padding: 25px 50px 20px;
		background-size: cover;
	}
	.ml_auth_inner{
		max-width:500px;
	}
	.ml_auth_inner > .ml_auth_box{
		top: 0;
		bottom: 0;
		border-radius: 0px 0px 10px 10px;
	}
	.ml_auth_inner > .ml_auth_content{
		padding-bottom: 30px;
	}
	.ml_dashboard_wrapper{
		padding-bottom: 62px;
	}
	.ml_project_wrapper .project_box_wrapper .devider_box {
		width: 46%;	
	}
}
@media (max-width: 767px){
	.ml_project_wrapper .project_box_wrapper .devider_box {
		width: 100%;
		margin: 0 auto 30px;	
	}
	.project_block .project_block_upper .project_image img {
		height: 272px;
	}
	.ml_main_wrapper .upper_header .ml_logo {
		padding: 40px 0px 0px;
		text-align: center;
	}
	.ml_main_wrapper .upper_header .ml_menu {
		padding: 30px 0px 30px;
		text-align: center;
	}
}
@media (min-width:380px){
	.ml_prev_smart_watch  .ml_prev_inner {width: 100%;}
	.ml_prev_smart_watch  .ml_prev_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}
}
@media (max-width: 575px){
	.lower_header .ml_search{
		max-width: 100%;
		margin-bottom: 20px;
	}
	.lower_header .ml_search > input{
		padding: 0px 30px;
		border: 1px solid #7589b1; 
		border-radius: 3px;
		height: 50px;
	}
	.lower_header .ml_search > .search_icon {
		left: 10px;
	}
	.upper_header .ml_menu ul > li {
		margin-right: 7px;
	}
	.lower_header .ml_filter{
		text-align:center;
		margin-top:10px;
	}
	.ml_share_block {
		text-align: center;
		margin-top: 20px;
	}
	.lower_header .ml_filter .nice-select{
		float: none;
		display: inline-block;
		text-align: center !important;
	}
	.lower_header .ml_filter ul{
		right: auto;
		top: 100%;
	}
	.lower_header .ml_filter ul.filter_show{
		transform: translateX(-50%) scale(1);
	}
	.ml_project_wrapper .project_box_wrapper .devider_box {
		max-width: 100%;
	}
	.ml_share_popup_wrapper .ml_share_popup_inner{
		max-width: 500px;
	}
	.ml_share_popup_inner .divider:before, .ml_share_popup_inner .divider:after{
		display: none;
	}
	.close_popup{
		top: 30px;
		right: 30px;
	}
	.ml_delete_popup_wrapper .ml_delete_popup_inner .delete_button_wrapper a.delete_btn.delete_btn_red{
		margin-left: 0px;
		margin-top: 20px;
	}
	.lower_header {
		padding: 30px 0px 30px;
	}
	.ml_pro_iphone_portrait{
		background: none;
		padding: 0;
		border-radius: 0;
		transform: none;
		text-align: center;
	}
	.ml_pro_iphone_portrait:before {
		display: none;
	}
	.ml_pro_iphone_portrait .ml_pro_inner {
		border-radius: 0;
		margin: 0 auto;
		max-width:100%;
	}
	.ml_pro_android_portrait {
		background: none;
		padding: 0;
	}
	.ml_pro_android_portrait .ml_pro_inner {
		border-radius: 0;
		margin: 0 auto;
		max-width:100%;
	}
} 
@media (max-width: 480px){
	.ml_forgot_remember {
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column;
	}
	.ml_auth_inner > .ml_auth_box {
		padding: 20px;
	}
	.ml_remember{
		margin-bottom: 10px;
	}
}
@media (max-width: 380px){
	.ml_pro_smart_watch {
		background: none;
		padding: 0;
	}
	.ml_pro_smart_watch .ml_pro_inner {
		border-radius: 0;
		margin: 0 auto;
	}
}
@media (max-width: 320px){
	.ml_main_wrapper .upper_header .ml_menu{
		text-align: center;
	}
	.upper_header .ml_menu .nav_tc{
		margin-left: 0px;
	}
	.lower_header .ml_search{
		margin-bottom: 10px;
	}
	.upper_header .ml_menu ul > li > a{
		margin-right: 11px;
	}
}
@media (max-width: 1024px) and (min-width: 991px){
	.share_btn{
		min-width: 110px;
		margin-top: 20px;
	}
}
/*********************************************************************************************
52. Responsive End
*********************************************************************************************/

.draggable-holder #hotspot-holder {left: 50%;transform: translateX(-50%);}
.draggable-holder #screen-holder {
    margin: 0 auto;
}
.draggable-holder {
        margin-top: 0px;
}
.ml_bottom_popup_open .draggable-holder {
padding-bottom: 450px;
}