.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}
/* I think the following is a necessary style if possible. (Strictly speaking, style is not necessary, but it means that it is the lowest current style. */
.cropper-container {
    width: 100%;
}
/* The following are not required. Created to make the Sample easier to see. */
main {
    width: 50%;
    margin: 0 auto;
}

.triming-image {
    width: 90%;
    border: dashed #000 1px;
    cursor: pointer;
}

.informationCrop {
    width: 40px;
    border: 1px solid #ced4da;
    background-color: #ced4da;
    margin-bottom: 0px;
    border-radius: 2px;
    text-align: center;
    font-weight: 500;
}

.center-info-crop {
    margin-bottom: 0px;
    width: 30px;
    text-align: center;
}

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

.margin-left-12px {
    margin-left: 12.9px;
}

#trimed_image {
    height: 500px;
}

.img-preview {
    float: left;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    overflow: hidden;
}

.img-preview > img {
    max-width: 100%;
}

.border-img-center {
    height: 275px;
    max-height: 275px;
    border-style: ridge;
    background-color: darkgray;
}

.preview-lg {
    height: 9rem;
    width: 16rem;
}
#imgDelete{
    margin-left: auto;
    width: 24px;
    height: 24px;
}
.image-chooser{
    float: right; 
    width: 75%;
}


/* NAV Style - HungND */
/* Popup container - can be anything you want */

.jqx-notification-content {
	cursor: pointer !important;
}

.popup {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 100%;
}

/* The actual popup */
.popup .popuptext {
	visibility: hidden;
	width: 160px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.visible-jqxpopover {
	display: none !important;
}

/* Toggle this class - hide and show the popup */
.popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
	from {
        opacity: 0;
    }

    to {
	    opacity: 1;
    }

}
@keyframes fadeIn {
	from {
        opacity: 0;
    }

    to {
	    opacity: 1;
    }
}
@media (max-width: 1350px) {
    .logo-collapse {
		margin-left: 280px !important;
    }
}

@media screen and (min-width: 1007px) and (max-width: 1350px) {
	.li-notity {
		margin-left: 0;
	}

	.navbar-brand {
		width: 25%;
	}
}

@media screen and (max-width: 1007px) {
    .navbar-collapse.collapse {
		display: flex!important;
		height: auto!important;
		overflow: visible!important;
        margin-left: 25px;
        border-top: none;
        padding-left: 0;
        padding-right: 0;
		padding-bottom: 0;
	}
    .logo-collapse {
        margin: 0 !important; 
        display: flex;
        justify-content: center;
        flex: 1;
    }
    .notify-menu {
        margin-right: 0px;
        display: flex;
        justify-content: flex-end;
        max-width: 60%;
    }
    .navbar-brand {
        margin-right: 0;
    }
    .navbar-nav>li{
        width: 40%;
        margin-left: 0;
    }
    .navbar-nav>li:nth-last-child(1){
        width: 100%;
        margin-left: 10px;
        justify-content: flex-end;
    }
    #searchbox {
        margin-top: 0;
        width: 100%;
    }
    #openNotification {
        margin-right: 10px;
    }
    .full-name,.company-name {
        width: calc(100% - 37px);
    }
}
@media screen and (max-width: 640px) {
    .image-chooser{
        float: right; 
        width: 60%;
    }
    #Modal_Change_Avatar .client_startup_profile_modal-content .modal-body {
        padding: 0;
    }
    .navbar-collapse.collapse {
        margin-left: 30px;
        padding-left: 15px;
	}
    .logo-collapse{
        flex: 1;
    }
    .full-name, .company-name{
        display: none;
    }
    .notify-menu {
        justify-content: flex-end;
        width: 30%;
    }
    .navbar-nav>li {
        width: auto;
    }
    #searchbox{
        display: none;
    }
    .navbar-brand {
        padding: 18px 15px;
    }
    .navbar-brand>img {
        width: 120px;
        object-fit: scale-down;
        height: 40px;
    }
    #openNotification {
        margin-top: 5px;
    }
    .logo_link {
        margin-top: 0;
    }
    #notificationJqxPopover {
        width: 300px;
    }
    #notificationJqxPopoverContent {
        max-height: 80px;
    }
    .jqx-notification {
        padding: 1px;
    }
    .notification_img img {
        width: 30px;
        height: 30px;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        padding: 0px;
        border: 1px #DDDDDD solid;
        object-fit: cover;
    }
    .notification_message {
        line-height: 30px;
        height: 30px;
    }
    .avatar {
        width: 32px;
        height: auto;
        border-radius: 50%;
        margin-top: 7px;
    }
    
    #tour-guide{
    	display:none;
    }
}