/* HTML */

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap");
@font-face {
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html, body {
	font-family:"Inter", sans-serif !important;
	color: var(--gray)!important;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-weight: 600 !important}

.no-wrap {white-space: nowrap}

/* Border */
.rounded-top-0 {
    border-top-left-radius: 0!important;
	border-top-right-radius: 0!important;
}

.rounded-bottom-0 {
    border-bottom-left-radius: 0!important;
	border-bottom-right-radius: 0!important;
}

.rounded-start-0 {
    border-top-left-radius: 0!important;
	border-bottom-left-radius: 0!important;
}

.rounded-end-0 {
    border-top-right-radius: 0!important;
	border-bottom-right-radius: 0!important;
}



@media (max-width: 767.98px) {
	.border-top-md-down-0 {border-top-left-radius: 0!important; border-top-right-radius: 0!important;}	
	.border-bottom-md-down-0 {border-bottom-left-radius: 0!important; border-bottom-right-radius: 0!important;}
}

/* Tooltip */
.tooltip-inner {background-color: var(--darker); box-shadow: 0 4px 10px 0 rgba(0,0,0,0.15); color: var(--light)}
.tooltip.show {opacity: 1}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {border-top-color: var(--darker);}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {border-right-color: var(--darker);}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {border-bottom-color: var(--darker);}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {border-left-color: var(--darker);}

/* Navbar */
.navbar-brand {max-width: 250px;}
.navbar-brand img:nth-child(1) {width:20%}
.navbar-brand img:nth-child(2) {width:80%}

.navbar-nav .nav-link {
	font-weight: 500 !important; 
	padding-left: 1rem !important; 
	padding-right: 1rem !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.7) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
	color: var(--success) !important;
}	

.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,.55);
    border: none !important;
}

/* Nav tabs */
.nav-pills.nav-small .nav-link  {padding: .25rem 0.5rem !important}
@media (min-width: 768px) {.col-12.col-md-6.d-flex .nav-pills {margin-left: auto;}}	

/* Page content 1 - Top Background */
.top-background {
	background-image: url("/media/bg/home-illustration-2.jpg");
	background-repeat: no-repeat; 
	background-position: center right; 
}

@media (max-width: 1199.98px) {
	.top-background {background-size: 50%}	
	.top-background-title {
	margin-top:40px !important; 
	margin-bottom:200px !important;}
}	

.top-background-title {
	margin-top:80px; 
	margin-bottom:170px;
	background-color: rgba(var(--darker-rgba), 0.5);
	border-radius: 1rem;
}

h1 .badge-normal {
	border-radius: 0.5rem;
    padding: 0rem 0.7rem 0.2rem 0.7rem;}


/* Border-radius*/
.rounded-custom, .btn, .card {border-radius: 0.75rem;}

/* Utilities */
.cursor-pointer {cursor: pointer;}
.cursor-context-menu {cursor: context-menu;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


/* Table */
.table-header h6 {cursor: pointer;}
.table-header h6 span {font-size:0.9rem; font-weight:500}	
.table-header h6 span:nth-of-type(3n){margin-right: 3px;}
.table-header h6 > i {visibility: hidden; font-style: normal !important; position:absolute; margin-top:2px; text-align: center}
.table-header h6:hover i,
.table-header h6.active-desc i,
.table-header h6.active-asc i {visibility: visible !important;}		
.table-header h6 i:before {font-family: 'bootstrap-icons'; content: "\f229" !important;}
.table-header h6.active-asc i:before {font-family: 'bootstrap-icons';content: "\f229" !important;}
.table-header h6.active-desc i:before {font-family: 'bootstrap-icons';content: "\f235" !important;}
.table-header h6.active-asc:hover i:before {font-family: 'bootstrap-icons';content: "\f235" !important;}
.table-header h6.active-desc:hover i:before {font-family: 'bootstrap-icons';content: "\f229" !important;}
.cruiseline-table-status {font-size: 0.9rem}

@media (max-width: 767.98px) {
	.cruiseline-table-status span {line-height:1.2rem !important;}
	.table-header h6 span {margin-right:2px; }	
	.table-header h6 span:nth-of-type(3n){margin-left:-15px;}
}

.progress-started {
	background-color: var(--secondary-light) !important;
	height: 100% !important;
	min-height: 8px !important;	
	border-radius: 0.75rem !important;
}

.progress-started .progress-bar {
	background-color: var(--success) !important;
}

.progress-started span{
	color: white !important;
	text-shadow: 1px 1px var(--success);
	position: absolute;
	padding-left: 5px;
	font-size: 0.9rem;
	cursor: context-menu;
}

.progress-pending {
	background-color: var(--secondary-light) !important;
	height: 100% !important;
	min-height: 8px !important;	
	border-radius: 0.75rem !important;
}

.progress-pending span{
	color: var(--gray) !important;
	position: absolute;
	padding-left: 5px;
	font-size: 0.9rem;
	cursor: context-menu;
}

/* Timeline */
.timeline {
	display: block;
	position: relative;
	margin-left: 10px;
}

.timeline ul {
	padding: 0;
	display: inline-block;
}

.timeline ul li {
	list-style: none;
	margin: auto;
	min-height: 50px;
	border-left: 1px dashed #fff;
	padding: 0 0 20px 20px;
	position: relative;
}

.timeline ul li:last-child {
	border-left: 0;
	padding: 0 0 0 20px
}

.timeline ul li::before {
	position: absolute;
	left: -10px;
	top: 0px;
	content: " ";
	border-radius: 500%;
	height: 20px;
	width: 20px;
	transition: all 500ms ease-in-out;
}

.timeline ul li .title {
	position: relative;
	line-height: 15px;
}

.timeline ul li.success::before {background: var(--success);}
.timeline ul li.warning::before {background: var(--warning);}
.timeline ul li.danger::before {background: var(--danger);}

.timeline ul li.success .title {color: var(--success);}
.timeline ul li.warning .title {color: var(--warning);}
.timeline ul li.danger .title {color: var(--danger);}

.timeline ul li .title span {font-weight: 500}
.timeline ul li .title span:last-child {font-size: 0.9rem}

.description {
  color: #fff;
  font-size: 0.9rem;
}

/* 
Curved shape over background - bottom */
.shape.bg-body {color: #fff !important;}
.shape.bg-light, .shape.bg-body, .shape.bg-primary, .shape.bg-secondary, .shape.bg-dark, .shape.bg-darker {background-color: transparent !important;}
.shape-bottom { bottom: 0;margin-bottom: -1px;}
.shape-top, .shape-bottom {width: 100%;left: 0;}
.shape {position: absolute;width: 100%;overflow: hidden;z-index: 2;}

/* Img - circle */
.image-circle {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
}

.image-circle img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
	border-radius:50%;
}

/* Form with icon */
.input-icon {position:relative !important;}
.input-icon .form-control {padding-left: calc(1.5em + 1.3rem + 2px);}
.input-icon span {
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(1.5em + 1.3rem + 2px);
}

/* Rating stars */

.stars-4half:after {font-family: 'bootstrap-icons'; content: "\f586" "\f586" "\f586" "\f586" "\f587"; color: var(--warning);}

@media (max-width: 767.98px) {
	.ship-status-name {border-top-left-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
	.ship-status-dest {border-bottom-left-radius: 0; border-top-right-radius: 0; border-top-left-radius: 0;}
}	

/* Custom */
.bg-cover {
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding-bottom: 50%;
    border: none;
}

.bg-cover-simple {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	min-height:50px;
	height:100%;
}	

@media (max-width: 767.98px) {.w-100-md {max-width: 100% !important}}	




.modal-content {border: none; border-radius: 0.75rem}
.modal-section-md-up .modal-header {border: none !important;border-radius: 0 !important;}	
.modal-footer {border-top: none !important}

@media (min-width: 768px) {
	.modal-section-md-up {
		position:sticky !important;
		top: 76px !important;		
		width: 100%;
		z-index: 9999999;
		padding: 0 !important;
		
	}	

	.modal-section-md-up .modal-dialog {
		position: relative !important;		
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		margin: 0 !important;
	}

	.modal-section-md-up .modal {
		position: absolute !important;
		height: calc(var(--vh, 1vh) * 100 - 76px) !important;
		padding: 0 !important;
	}			
}	


/* MODAL AS LEFT/RIGHT SIDEBAR */
.modal.left .modal-dialog,
.modal.right .modal-dialog {

	-webkit-transform: translate3d(0%, 0, 0);
		-ms-transform: translate3d(0%, 0, 0);
		 -o-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}
		
/*Left*/
.modal.left .modal-dialog{
	left: -100%;
	-webkit-transition: left 0.5s ease-out;
	   -moz-transition: left 0.5s ease-out;
		 -o-transition: left 0.5s ease-out;
			transition: left 0.5s ease-out;
}


.modal.left.show .modal-dialog{
	left: 0;
}
        
/*Right*/
.modal.right .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		 -o-transition: opacity 0.3s linear, right 0.3s ease-out;
			transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.show .modal-dialog {
	right: 0;
}