/*--------------- SET THE MONTSERRAT FONT --------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

body, html {
	font-family        : 'Montserrat', sans-serif;
}

/*--------------- MAP OVERLAY CLICKABLE AREAS --------------------------*/
#backing {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	overflow: hidden;
}
#backing svg { 
	display: inline-block;
	position: absolute;
	top: 0; left: 0;
}
/*--------------- LIST OF FLAGS --------------------------*/
.flag_list {
	width              : calc(100% - 20px);
	height             : calc(40% - 45px);
	margin             : 10px;
	text-align         : center;
	overflow           : auto;
}

/* Custom tiny scrollbar */
.flag_list::-webkit-scrollbar {
	height             : 8px;               /* height of the entire scrollbar */
	width              : 8px;               /* width of the entire scrollbar */
	background-color   : #F5F5F5;
}

.flag_list::-webkit-scrollbar-track {
	-webkit-box-shadow : inset 0 0 6px rgba(0,0,0,0.3);
	border-radius      : 10px;
	background-color   : #F5F5F5;
}

.flag_list::-webkit-scrollbar-thumb {
	border-radius      : 10px;
	-webkit-box-shadow : inset 0 0 6px rgba(0,0,0,.3);
	background-color   : #0076ff;
}

.flag_icon {
	display            : inline-block;
	position           : relative;
	width              : 72px;
	text-align         : center;
	font-size          : 12px;
	color              : white;
	margin             : 6px;
	border             : 1px solid #231E45;
	white-space        : nowrap;
    overflow           : hidden;
    text-overflow      : ellipsis;
}

.flag_icon:hover {
	background-color   : #EB5A5E;
}

.flag_icon_selected {
	background-color   : #EB5A5E;
	border             : 1px solid white;
}

/*--------------- F A V O U R I T E S --------------------------*/
.destinationContainer {
	display            : inline-block;
	width              : 64px;
	text-align         : center;
	font-size          : 12px;
	text-align         : center;
	white-space        : nowrap;
    overflow           : hidden;
    text-overflow      : ellipsis;
}

.delFav {
	color              : red;
	cursor             : pointer;
	font-size          : 24px;
}
/*--------------- R O U T E   I M A G E --------------------------*/
.route_circle {
	position           : absolute;
	border             : 2px solid #EB5A5E;
	width              : 20px;
	height             : 20px;
	border-radius      : 10px;
	background-color   : white;
}

.route_flag {
	position           : absolute;
	width              : 32px;
	height             : 32px;
}

.route_line{
	position           : absolute;
	border-top         : 2px solid white;
	width              : calc(100% - 76px);
	top                : 49px;
	left               : 38px;
}

.route_line1{
	position           : absolute;
	border-top         : 2px solid white;
	width              : 25%;
	top                : 49px;
	left               : 38px;
}

.route_line2{
	position           : absolute;
	border-top         : 2px dashed white;
	width              : calc(50% - 72px);
	top                : 49px;
	left               : calc(25% + 36px);
}

.route_text {
	position           : absolute;
	width              : 72px;
	color              : white;
	font-size          : 12px;
	text-align         : center;
	white-space        : nowrap;
    overflow           : hidden;
    text-overflow      : ellipsis;
}

.ferry_text{
	position           : absolute;
	width              : 120px;
	top                : 54px;
	left               : calc(50% - 60px);
	font-size          : 12px;
	color              : white;
	text-align         : center;
	white-space        : nowrap;
    overflow           : hidden;
    text-overflow      : ellipsis;
}

.route_date{
	position           : absolute;
	width              : 120px;
	top                : 0px;
	left               : calc(50% - 60px);
	font-size          : 12px;
	color              : green;
	text-align         : center;
	white-space        : nowrap;
    overflow           : hidden;
    text-overflow      : ellipsis;
}

.route_modality {
	position           : absolute;
	width              : 48px;
	top                : 22px;
	left               : calc(50% - 24px);
}

.ferry_logo {
	width              : 44px;
	margin-right       : 10px;
}

/*--------------- T E X T   P A G E S  --------------------------*/
.txtPar {
	color              : white;
	padding            : 4px;
	text-align         : justify;
}

.txtHead {
	color              : #EB5A5E;
	margin-bottom      : 0;
}

/*--------------- G E N E R A L --------------------------*/
.bottomButtonContainer {
	text-align         : center;
	width              : 100%;
	position           : fixed;
	bottom             : 20px;
}

@media screen and (max-width:475px){
	.bottomButtonContainer {
		width          : calc(100% - 100px);
	}
}

.logoLowerRight {
	position           : fixed;
	right              : 0;
	bottom             : 0;
	width              : 100px;
	height             : 100px;
	background-color   : white;
	border-radius      : 100px 0 0 0;
	text-align         : center;
	padding            : 26px 10px 0 23px;
	color              : white;
	z-index            : 10;
}

.messageAlertBubble {
	position           : fixed;
	bottom             : 87px;
	right              : 10px;
	color              : white;
	font-weight        : bold;
	font-size          : 13px;
	height             : 20px;
	padding            : 0 4px 0 4px;
	border-radius      : 10px;
	line-height        : 20px;
	background-color   : #EB5A5E;
	z-index            : 11;
}

.messageBell {
	position           : fixed;
	bottom             : 80px;
	right              : 32px;
	color              : #EB5A5E;
	font-size          : 24px;
	z-index            : 11;
}

.section_title {
	font-weight        : bold;
	font-size          : 1.2em;
	color              : white;
}

.avatar_thumbnail {
	width              : 40px;
	height             : 40px;
	border-radius      : 8px;
}

.avatar_thumbnail_round {
	width              : 40px;
	height             : 40px;
	border-radius      : 20px;
}

.toast--multilineToast{
	/* any styling for the toast container goes here ;*/
}

.toast--multilineToast__message {
	white-space        :  normal;	/* this will override the default behavior and allow for multiple lines */
	line-height        : 1.5;
}

.myDropdown{
	width              : 80%;
	max-width          : 360px;
	margin             : 0 auto;
	position           : relative;
	height             : 44px;
	border-bottom      : 1px solid #afafaf;
}

.myDropdown_icon{
	display            : inline-block;
	position           : absolute;
	left               : 0;
	height             : 44px;
	line-height        : 44px;
}

.myDropdown_text{
	display            : inline-block;
	position           : absolute;
	left               : 40px;
	height             : 44px;
	line-height        : 44px;
}

.myDropdown_caret{
	display            : inline-block;
	position           : absolute;
	right              : 0;
	height             : 44px;
	line-height        : 44px;
}

.myDropdown_edit{
	display            : inline-block;
	position           : relative;
	right              : 10%;
	font-size          : 20px;
	line-height        : 44px;
}

@media all and (min-width: 276px) {
    .myDropdown_edit{
        right          : calc(50% - 130px);
    }
}

.optionCheck {
	display            : inline-block;
	margin             : 3px;
	width              : 60px;
	height             : 65px;
	border             : 1px solid gray;
	border-radius      : 6px;
	background-color   : #c0c0c0;
	text-align         : center;
	font-size          : 12px;
	padding            : 12px 4px 4px 4px;
	cursor             : pointer;
}

.optionCheck:hover {
	background-color   : #caf0fe;
	color              : #1f1f21
}

.optionCheckSel {
	background-color   : #3a88fe;
	color              : white;	
}

.alertCircle {
	height             : 18px;
	min-width          : 18px;
	line-height        : 18px;
	font-size          : 12px;
	color              : white;
	text-align         : center;
	top                : 4px;
	right              : 0;
	border-radius      : 9px;
	position           : absolute;
	z-index            : 99;
	background-color   : #eb445a;
	padding            : 0 4px 0 4px;
}

/*--------------- S I G N U P --------------------------*/

.step {
	display            : inline-block;
	width              : 26px;
	height             : 26px;
	font-size          : 20px;
	font-weight        : bold;
	text-align         : center;
	line-height        : 26px;
	border             : 1px solid #0076ff;
	border-radius      : 13px;
}

.stepLine {
	display            : inline-block;
	width              : 54px;
	height             : 26px;
	transform          : translateY(-7px);
	border-bottom      : 1px solid #0076ff;
}

.isActive {
	color              : white;
	background-color   : #0076ff;
}

.isInactive {
	color              : #0076ff;
	background-color   : white;
}

/*--------------- L O G I N --------------------------*/

.loginDigit {
	width              : 32px;
	border             : none;
	background-color   : #aaaaaa;
	text-align         : center;
	font-size          : 32px;
	font-weight        : bold;
	line-height        : 32px;
}

.loginDash {
	font-size          : 32px;
	text-align         : center;
	font-weight        : bold;
	line-height        : 32px;
}

/*----------------- D A S H B O A R D ------------------------*/

.dashboardItem {
	position           : relative;
	display            : inline-block;
	width              : 120px;
	height             : 90px;
	margin             : 20px;

	font-size          : 14px;
	font-weight        : normal;
	text-align         : center;
	line-height        : 16px;
}


.dashboardItemTitle {
	margin-top         : 10px;
	text-align         : center;
	font-weight        : bold;
	color              : #0076ff;
}

/*-------------- T I M E L I N E ---------------------------*/

.timeLineContainer {
	height             : 100%;
	width              : 100%;
	top                : 0;
	left               : 0;
	text-align         : center;
	padding            : 10px;
}

.timeLineIsPortrait {
	overflow-y         : auto;
}

.timeLineIsLandscape {
	overflow-x         : auto;
	white-space        : nowrap;
	padding-top        : 100px;
}

.timeLineBox {
	width              : 150px;
	margin             : 0 auto;
	margin-bottom      : 4px;
	margin-top         : 4px;
	border-radius      : 10px;
	text-align         : center;
	padding            : 4px;
	border             : 1px gray solid;
}

.timeLineBoxTitle {
	font-weight        : bold
}

.timeLineBoxTime {
	font-size          : 12px;
	border-bottom      : 1px gray solid;
}

.timeLineBoxContent {
	margin-top         : 10px;
}

.timeLineBoxInline {
	display            : inline-block;
}

.timeLineVerticalLine {
	width              : 4px;
	height             : 40px;
	margin             : 0 auto;
	border-right       : 2px solid gray;
}

.timeLineHorizontalLine {
	width              : 40px;
	height             : 4px;
	border-top         : 2px solid gray;
	display            : inline-block;
}

.statusDone {
	background-color   : #96d35f;
}

.statusCancelled {
	background-color   : #ffb5af;
}

.statusCancelledHard {
	background-color   : red;
}

.statusPending {
	background-color   : #ff8647;
}

.statusAccepted {
	border             : 2px solid #96d35f;
	background-color   : white;
}

.statusApplied {
	border             : 2px solid #96d35f;
	background-color   : #ff8647;
}

.statusToDo {
	background-color   : white;
}

.toastBullet {
	vertical-align     :  middle;
	width              : 14px;
	height             : 14px;
	margin-left        : 6px;
	margin-right       : 6px;
	border-radius      : 7px;
	display            : inline-block;
}

/*----------------- C A L E N D A R ------------------------*/

.calTitle {
	text-align         : left;
	font-size          : 20px;
	line-height        : 36px;
}

.cal_header {
	text-align         : center;
	font-size          : 18px;
	line-height        : 36px;
	/*font-weight        : bold;*/
	width              : 14%;	
}

.cal_day {
	text-align         : center;
	font-size          : 16px;
	line-height        : 44px;
}

.cal_weekend {
	color              : gray;
}

.cal_today {
	color              : white;
	font-weight        : bold;
	height             : 40px;
	width              : 40px;
	border-radius      : 20px;
	background-color   : black;
	display            : inline-block;
}

.calSelected {
	color              : white;
	font-weight        : bold;
	background-color   : gray;
}

#dayDetails {
	width              : 80%;
	max-width          : 360px;
	margin             : 0 auto;
	display            : none;
}

.dayDetailsBlock {
	width              : 100%;
	max-width          : 360px;
	margin             : 0 auto;
	margin-top         : 30px;
	height             : 60px;
	position           : relative;
	border-bottom      : 1px solid gray;
}

#DayDetTime {
	width              : 38px;
	height             : 32px;
	top                : 10px;
	font-size          : 12px;
	line-height        : 16px;
	border-right       : solid 1px gray;
	font-weight        : bold;
}

#DayDetDesc {
	width              : calc (100% - 44px);
	height             : 44px;
	top                : 0;
	left               : 44px;
	position           : absolute;
	padding-left       : 4px;
}

.DayDetDel {
	position           : absolute;
	top                : 5px;
}

#calSelectedDate {
	width              : 100%;
	text-align         : center;
	margin-top         : 10px;
	font-weight        : bold;
}

/*----------------- E A R N I N G S ------------------------*/

.earningsRow {
	width              : 80%;
	max-width          : 560px;
	margin             : 0 auto;
	margin-top         : 10px;
	border-bottom      : 1px solid gray;
}

.earnLegendCol {
	width              : 50%;
	text-align         : center;
}

.earnLegendCell {
	height             : 40px;
	line-height        : 40px;
}

.earnLegendBullet {
	line-height        : 40px;
	border             : 1px solid gray;
	margin-top         : -3px;
}

.earnLegendAmnt {
	display            : inline-block;
	height             : 40px;
	line-height        : 40px;
}

#earnListContainer {
	height             : calc(100% - 130px);
	width              : 100%;
	top                : 100px;
	left               : 0;
	text-align         : center;
	overflow-y         : auto;
}

.earnListLeft {
	padding            : 0;
	margin-right       : 8px;
	width              : 40px;
	min-width          : 40px;
}

/*----------------- S E T T I N G S ------------------------*/
.settings_icon {
	padding            : 0;
	width              : 36px;
	height             : 36px;
	border-radius      : 8px;
	color              : white;
	font-size          : 24px;
	text-align         : center;
	line-height        : 36px;
}

.set_gray {
	color              : #c0c0c0;
	font-weight        : bold;
}

.map_bottom_console {
	position           : fixed;
	height             : 80px;
	width              : 100%;
	max-width          : 360px;
	bottom             : 10px;
	border-radius      : 8px;
	background-color   : #c0c0c0;
	opacity            : 0.85;
	left               : 50%;
	transform          : translateX(-50%);
	text-align         : center;
	padding            :10px;
}