/*
Custom styling for MSI Tooltip

/*override*/
div.ui-tooltip {
    max-width: 400px;
}

.msi_tooltip {
    cursor: pointer;
    border-bottom: 1px dashed #00ADEF;
    background-color: #ECF7FC;
}

.ui-tooltip-content{
	width:400px!important;
	height:400px!important;
}

.msi_tooltip_container {
	font-family: 'Arial';
    padding: 0;
    border: #569fd2 1px solid;
    border-radius: 0;
    width: 400px!important;
    height: 400px!important;
}

.msi_tooltip_container .msi_tooltip_header {    
    color: #ffffff;
}

.msi_tooltip_container .msi_tooltip_header a {
    color: #ffffff;
    font-size: 18px;
}

.msi_tooltip_container .msi_tooltip_header .msi_tooltip_heaer_info {
    font-size: 13px;
}

.msi_tooltip_container .msi_tooltip_header .msi_tooltip_header_logo {
    padding:5px!important;
	position:absolute!important;
	height:86px!important;
	top:0px;
	left:0px;
}

.msi_tooltip_container .msi_tooltip_photo {
    background-color: #ECF7FC;
}

.msi_tooltip_container .msi_tooltip_photo img {
	width: 100%;
}

.msi_tooltip_container .msi_tooltip_content {
    background-color: #ECF7FC;
    color: #727374;
    font-size: 13px;
	width:396px!important;
}

.msi_tooltip_container .msi_tooltip_content .text_content {
    width:396px;
	display:block;
	height:94px; 
	background-color:#00355f; 
	background-repeat:no-repeat;
	background-image: url('../asset/content.svg');
}

.msi_tooltip_container .msi_tooltip_content .text_content .left-content{    
	width: 220px!important;
	float: left;
}
.msi_tooltip_container .msi_tooltip_content .text_content .right-content{    
	width: 176px!important;
	float: right;
}

.msi_tooltip_container .msi_tooltip_content .graph_content {
    display:block;
}

.msi_tooltip_container .msi_tooltip_content .graph_content .graph1{
    height: 190px!important;
	width: 240px!important;
	float: left;
}
.msi_tooltip_container .msi_tooltip_content .graph_content .graph2{
    height: 190px!important;
	width: 156px!important;
	float: right;
}

/*Footer Class*/
.msi_tooltip_container .msi_tooltip_brand {
    background-color: #569fd2;
    padding: 3px 5px 2px 5px;
    color: #ffffff;
    text-align: right;
    font-size: 9px;
    line-height: 9px;
	position:absolute;
	bottom:0px;
	width:396px;
	height:26px;
	cursor:pointer;
}

.msi_tooltip_container .msi_tooltip_brand span {
    position: absolute;
    bottom: 6px;
    right: 40px;
    color: #ffffff;
    font-size: 11px;
	font-weight: 600;
}

.msi_tooltip_container .msi_tooltip_brand img {
    width: 30px;
}

/*Loaders Class for Vessel Information and Charts*/
.loader-small-left {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
	position:absolute; 
	top:113px;
	left:68px
}

.loader-small-right {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
	position:absolute; 
	top:113px;
	right:68px
}

.loader-big {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
	position:absolute; 
	top:245px;
	left:168px
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*Error Message Class*/
.alert {
	position:absolute;
	display:none;
	align-items:center;
	font-size:16px;
    padding: 20px;
    background-color: white;
    color: #00355f;
	top:86px;
	width:100%;
	height: 284px;
}