/****======================
FONTS IMPORT CSS START HERE
===========================****/

@font-face {
    font-family: Archivo;
    src: url(../fonts/Archivo-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Archivo;
    src: url(../fonts/Archivo-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Archivo;
    src: url(../fonts/Archivo-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Archivo;
    src: url(../fonts/Archivo-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: Archivo;
    src: url(../fonts/Archivo-ExtraBold.ttf);
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: Archivo;
    src: url(../fonts/Archivo-Black.ttf);
    font-weight: 900;
    font-display: swap;
}

/****=======================
FONTS IMPORT CSS FINISH HERE
============================****/

/****=======================
CSS VARIABLE CSS START HERE
============================****/

:root {
    --main-bg: #F5F7FB;
    --white-bg: #ffffff;
    --active-bg: #F6F5FF;
    --light-blue-bg: #E9F2FF;
    --light-green-bg: #0B372B;
    --setting-icon-blue-bg: #0055C6;
    --blue-bg: #0164E9;
    --blue-bg-two: #0242AE;
    --yellow-bg: #FFA500;
    --green-bg: #12AD2B;
    --white: #ffffff;
    --black: #000B1B;
    --blue: #0242AE;
    --blue-text: #0B1E3F;
    --blue-text-three: #82B0FF;
    --para-color: #ffffff;
    --border-color: #E2E2E2;
    --border-white-color: #fff;
    --blue-border: #01227E;
    --inner-heading-bg: #D9E9FF;
    --modal-avg-bg: #0A73FF;
    --blue-border-two: #1378FF;
    --blue-border-three: #0B58D0;
    --blue-border-four: #82B8FF;
    --modal-bg: #F1F7FF;
    --modal-inner-bg: #F1F7FF;
    --price-bg: #6AAAFF;
    --box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    --box-shadow-two: #DFEDFF 0px 3px 8px;
    --gradient-bg: linear-gradient(to right bottom, #005cd5, #074dbf, #083fa9, #053194, #00237f);
    --gradient-bg-two: linear-gradient(to right, #337fff, #2a76f4, #206dea, #1465df, #005cd5);
    --avg-min-bg: #C1DCFF;
    --avg-max-bg: #95C3FF;
    --min-max-bg: #66A8FF;
    --grey-bg: #F9F9F9;
    --glassmorphism-bg: #ffffff45;
    --comparison-chart-bg: #01227E;
    --chart-legend: #93C1FF;
    --chart-border: #B5D5FF;
    --supllier-chart-border: #005CD5;
    --supllier-chart-bg: #005CD5;
    --supllier-chart-legend: #93C1FF;
    --select-bg-icon: url(../images/icons/select-icon.svg);
    --comparison-bg-image: url(../images/comaprsion-bg.svg);
    --map-bg-image: url(../images/map-image.svg);
    --table-thead-bg: #69AAFF;
    --table-striped-bg: #E2EFFF;
    --comparison-tw-bg: #E1EEFF;
    --comparison-tw-bg-two: #E8F2FF;
    --setting-icon-bg: #fff;
    --setting-blue-bg: #0164E9;
    --setting-yellow-bg: #FFA500;
    --setting-white: #fff;
    --calculate-btn-bg: #0164E9;
    --black-two: #000B1B;
    --cross-red: #FB0021;
    --calender-bg: url(../images/icons/calander.svg);
    --calender-bg-two: url(../images/icons/inner-calender-icon.svg);
    --red-bg: #FFDBDB;
}

.night-mode {
    --main-bg: #020907;
    --white-bg: #000000;
    --active-bg: #0F0F0F;
    --blue: #29DC75;
    --blue-border: #000000;
    --blue-text: #fff;
    --white: #000;
    --map-bg-image: url(../images/map-night-image.svg);
    --setting-icon-bg: #F99800;
    --setting-icon-blue-bg: #29DC75;
    --gradient-bg: linear-gradient(to right bottom, #36ff8b, #33f685, #30ed80, #2ce57a, #29dc75);
    --blue-bg: #29DC75;
    --gradient-bg-two: #20CD69;
    --blue-border-two: #3DFF8F;
    --blue-border-three: #3DFF8F;
    --setting-blue-bg: #414D49;
    --setting-yellow-bg: #020907;
    --setting-white: #fff;
    --glassmorphism-bg: #ffffff30;
    --modal-bg: #414D49;
    --modal-avg-bg: #64FFA6;
    --blue-border-four: #29DC75;
    --blue-text-three: #29DC75;
    --blue-bg-two: #32F585;
    --calculate-btn-bg: #64FFA6;
    --modal-inner-bg: #414D49;
    --box-shadow-two: #06120b7d 0px 3px 8px;
    --inner-heading-bg: #32F585;
    --black-two: #fff;
    --avg-min-bg: #32F585;
    --avg-max-bg: #02EB64;
    --min-max-bg: #04D35B;
    --border-white-color: #000B1B;
    --comparison-chart-bg: #069442;
    --chart-legend: #29DC75;
    --chart-border: #9BFFC5;
    --comparison-bg-image: url(../images/comaprsion-night-bg.svg);
    --price-bg: #73FEAE;
    --supllier-chart-bg: #56FF9D;
    --select-bg-icon: url(../images/icons/select-icon-night.svg);
    --table-thead-bg: #64FFA6;
    --para-color: #fff;
    --table-striped-bg: #4A7B61;
    --cross-red: #FFFFFF;
    --comparison-tw-bg: #4F946E;
    --comparison-tw-bg-two: #3B815B;
    --calender-bg: url(../images/icons/calander-night.svg);
    --calender-bg-two: url(../images/icons/inner-calender-icon-night.svg);
    --supllier-chart-border: #71827A;
    --supllier-chart-legend: #EEFFF5;
    --red-bg: #283531;
}


/****=======================
CSS VARIABLE CSS FINISH HERE
============================****/

/****=======================
COMMON CSS START HERE
============================****/

body {
    margin: 0;
    padding: 0;
    background: var(--main-bg);
    font-family: var(--bs-body-font-family);
}

/****=======================
COMMON CSS FINISH HERE
============================****/


/****=======================
DASHBOARD LAYOUT CSS START HERE
============================****/

.dashboard-layout {
    position: relative;
}

.setting-spin{
	color:var(--border-white-color);
}
/**** TOPBAR SEC CSS START ****/

.topbar {
    background: var(--white-bg);
    width: 100%;
    padding: 5px 5px;
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.5s ease;
    z-index: 99;
}

.topbar.hideheader {
    width: 100%;
    transition: all 0.5s ease;
}

.topbar-inner-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 35px;
    padding-right: 35px;
}



.right-box {
    display: flex;
    align-items: center;
    gap: 30px;
}


.switch {
    position: relative;
    width: 45px;
    height: 25px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    inset: 0;
    background-color: var(--light-blue-bg);
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}

.icon {
    position: absolute;
    top: 50%;
    width: 15px;
    height: 24px;
    transform: translateY(-50%);
    transition: 0.3s;
}

.sun {
    left: 8px;
}

.moon {
    right: 8px;
    opacity: 0;
}

input:checked+.slider {
    background-color: var(--light-green-bg);
}

input:checked+.slider .sun {
    opacity: 0;
}

input:checked+.slider .moon {
    opacity: 1;
}


.date-time-box h3 {
    display: flex;
    font-size: 20px;
    gap: 10px;
    font-weight: 600;
    color: var(--blue);
    align-items: center;
    justify-content: center;
}

.date-time-box h3 span {
    font-size: 10px;
    text-align: center;
    font-weight: 600;
}

.date-time-box h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
}

/**** TOPBAR SEC CSS FINISH ****/


/**** SIDEBAR SEC CSS START ****/
.sidebar-box {
    position: fixed;
    width: 250px;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--white-bg);
    padding: 25px 15px;
    border-right: 1px solid var(--border-color);
    transition: all 0.5s ease;
    z-index: 9999;
}

.sidebar-box.hidesidebar {
    left: -250px;
    transition: all 0.5s ease;
}


.logo-box {
    text-align: center;
    margin-bottom: 90px;
}

.logo-box img {
    max-width: 80%;
}


.navbox ul.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbox ul.nav-list li a.nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 12px;
    padding: 15px 15px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
    background-color: var(--white-bg);
}

.navbox ul.nav-list li a.nav-link.active {
    background-color: var(--active-bg);
}

.menu-icon {
    position: absolute;
    right: -11px;
    top: 80px;
    transition: all 0.5s ease;
}

.menu-icon.active-menu-box {
    right: -25px;
    transition: all 0.5s ease;
}

.menu-icon.active-menu-box .menu-toggle-btn .menu-image.active {
    transform: rotate(180deg);
    transition: all 0.5s ease;
}

.footer-box {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 10px 10px;
}

.user-picture {
    width: 70px;
    height: 70px;
    border: 1px solid var(--blue-border);
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: 10px 12px;
    margin: 0 auto;
    margin-bottom: 15px;
}

.user-picture img {
    max-width: 42px !important;
}

.user-name-email {
    margin-bottom: 20px;
}

.user-name-email h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--blue-text);
    text-transform: capitalize;
}

.user-name-email p {
    font-size: 13px;
    font-weight: 500;
    color: var(--para-color);
}

.logout-button-box {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.logout-button-box .btn-outline-primary {
    color: var(--blue) !important;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.copyright-text p {
    font-size: 13px;
    font-weight: 400;
    color: var(--para-color);
}

/**** SIDEBAR SEC CSS FINISH ****/

/**** SETTING BAR SEC CSS START ****/
.setting-box {
    width: 300px;
    background: var(--gradient-bg);
    position: fixed;
    left: -300px;
    top: 75px;
    z-index: 999;
    padding: 15px 15px;
    border-radius: 0px 15px 15px 0px;
    transition: all 0.5s ease;
}

.setting-box.hide {
    transition: all 0.5s ease;
    left: 0;
}

.setting-icon-button-box {
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: var(--setting-icon-blue-bg);
    right: -40px;
    display: flex;
    align-items: center;
    padding: 5px 5px;
    border-radius: 0px 40px 40px 0px;
}

.setting-icon-button-box .btn-primary {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--setting-icon-blue-bg) !important;
    border-radius: 50px;
    border: none;
}



.form-box .label-box {
    margin-bottom: 3px;
}

.form-box .label-box label {
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
}

.form-box .input-group .form-control {
    background-color: transparent;
    border: 1px solid var(--blue-border-two);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
}

.form-box .input-group .form-select {
    --bs-form-select-bg-img: none;
    cursor: pointer;
}

.form-box .input-group .input-group-text {
    background: transparent;
    border-color: var(--blue-border-two);
}

.form-box .input-group input[type="date"]::-webkit-calendar-picker-indicator {
    background: none;
    background-image: var(--calender-bg);
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.category-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.category-wrapper {
    border: 2px solid var(--blue-border-three);
    width: 60px;
    padding: 7px 7px;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.5;
    position: relative;
}

.category-wrapper.selected-category {
    opacity: 1;
}

.category-image {
    margin-bottom: 5px;
}

.category-name p {
    margin-bottom: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--white);
}


.selected-icon {
    position: absolute;
    top: 4px;
    left: 3px;
    display: none;
}

.category-wrapper.selected-category .selected-icon {
    display: block;
}

.action-buttons-box {
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.action-buttons-box .action-button {
    font-size: 14px;
    font-weight: 500;
    color: var(--setting-white);
    border: none;
}

.action-buttons-box .btn-primary {
    background: var(--setting-blue-bg);
}

.action-buttons-box .btn-warning {
    background: var(--setting-yellow-bg);
}

.action-buttons-box .btn-success {
    background: var(--green-bg);
}

/**** SETTING BAR SEC CSS FINISH ****/

/****===========================
DASHBOARD LAYOUT CSS FINISH HERE
================================****/

/****===========================
MAIN CONTENT CSS START HERE
================================****/
.main-content {
}

.main-content.hidemaincontent {
    margin-left: 0px;
    transition: all 0.5s ease;
}

.content-box {
    padding-top: 70px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0;
    position: relative;
}

/****===========================
MAIN CONTENT CSS FINISH HERE
================================****/


/****===============================
TWI DASHBOARD SEC CSS START HERE
=====================================****/
.map-box {
    background-image: var(--map-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    position: relative;
    width: 100%;
}


.water-point-box {
    position: absolute;
    transition: all 0.5s ease;
}


.water-point-inner-wrapper {
    width: 50px;
    height: 50px;
    background-color: var(--white-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    position: relative;
}


.water-point-box .water-image {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blue-border);
    border-radius: 50px;
}


.tooltip-box {
    width: 300px;
    position: absolute;
    background: var(--gradient-bg);
    padding: 15px 15px;
    border-radius: 20px;
    top: 51px;
    display: block;
    opacity: 1;
    z-index: 50;
}


.water-point-box:hover .tooltip-box {
    display: block;
    transition: all 0.5s ease;
    opacity: 1;
}

.tooltip-heading {
    display: block;
    margin-bottom: 5px;
}

.name-box {
    width: 72%;
    background: var(--blue-bg);
    padding: 10px 10px;
    border-radius: 9px;
	overflow: hidden;
	float:left;
	display:inline-block;
	clear:both;
}

.name-box h3 {
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
    text-transform: capitalize;
	word-break: break-word;
	white-space: pre-wrap;
	width:100%;
	display:block;
}

.name-box h3 span {
    font-size: 14px;
    font-weight: 400;
}

.average-box {
    width: 70px;
    background: var(--blue-bg);
    display: inline-block;
    align-items: center;
    justify-content: center;
    border-radius: 64px;
	margin-left:5px;
    padding: 12px 12px;
    height: 70px;
}

.average-box h3 {
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
    text-align: center;
}

.average-box h3 span {
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}


.tooltip-feature ul.feature-list {
    padding: 0;
    margin: 0;
	clear:both;
    list-style: none;
}

.tooltip-feature ul.feature-list li {
    padding: 10px 10px;
    padding-right: 22px;
}

.tooltip-feature ul.feature-list li .feature-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tooltip-feature ul.feature-list li .feature-box .feature-heading h4 {
    font-size: 14px;
    color: var(--white);
    font-weight: 400;
    text-transform: capitalize;
}


.tooltip-feature ul.feature-list li .feature-box .feature-info h4 {
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    text-transform: capitalize;
}

.detailed-button {
    text-align: center;
    margin-top: 15px;
}

.detailed-button .btn-primary {
    background: var(--gradient-bg-two);
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 32px;
    height: 45px;
    border: none;
}


/****===============================
TWI DASHBOARD SEC CSS FINISH HERE
===================================****/

/****===============================
PAGES MODAL CSS START HERE
===================================****/

.pages-modal-box {
    position: absolute;
    width: 95%;
    top: 230px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--glassmorphism-bg);
    padding: 0px 0px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    z-index: 60;
}

.pages-modal-body {
    background: var(--modal-bg);
    padding: 10px 10px;
    border-radius: 20px;
}

.pages-modal-heading-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--blue-bg);
    padding: 0px 15px;
    border-radius: 14px;
    margin-bottom: 15px;
}

.page-name-text {
    text-align: center;
}

.page-name-text h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
}

.page-name-text p {
    font-size: 10px;
    font-weight: 500;
    color: var(--white);
}

.pages-average-box .average-wrapper {
    width: 60px;
    height: 60px;
    background: var(--modal-avg-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 55px;
	margin:2px;
}

.pages-average-box .average-wrapper h3 {
    font-size: 20px;
    color: var(--white);
    font-weight: 600;
}

.pages-average-box .average-wrapper p {
    color: var(--white);
    font-size: 8px;
    font-weight: 500;
}

/****===============================
PAGES MODAL CSS FINISH HERE
===================================****/


/****===============================
ALGECIRAS PAGE CSS START HERE
===================================****/
#algeciras-modal {
    display: none;
    opacity: 0.5;
    transition: all 0.5s ease;
}


.algeciras-modal-action {
    margin-bottom: 15px;
}

.input-box .label-box label {
    font-size: 14px;
    font-weight: 500;
    color: var(--blue);
}

.input-box .form-control {
    padding: 15px 15px;
    background-color: var(--modal-bg);
    border: 1px solid var(--blue-border-four);
    color: var(--blue-text-three);
    font-weight: 400;
    font-size: 14px;

}

.input-box input[type="date"] {
    cursor: pointer;
}

.input-box input[type="date"]::-webkit-calendar-picker-indicator {
    background: none;
    background-image: var(--calender-bg-two);
    background-size: 15px 15px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.page-action-button .form-button {
    width: 100%;
    height: 60px;
    font-size: 16px;
    font-weight: 500;
    color: var(--white) !important;
    margin-top: 17px;
    border: none;
}

.page-action-button #form-submit {
    background-color: var(--blue-bg-two);
}

.page-action-button #form-download {
    background-color: var(--yellow-bg);
}

.page-action-button #form-calculate-button {
    background-color: var(--calculate-btn-bg);
}

.comparison-box {
    background: var(--modal-inner-bg);
    padding: 15px 15px;
    border-radius: 12px;
    box-shadow: var(--box-shadow-two);
    overflow: hidden;
}

.total-comparison-wrapper {
    margin-bottom: 30px;
}

.total-comparison-wrapper .total-comparison-heading {
    padding: 15px 15px;
    background: var(--inner-heading-bg);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.total-comparison-wrapper .total-comparison-heading h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
}

.total-comparison-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 35px;
    padding-right: 35px;
}

.total-comparison-box .total-comparison-main-box .total-comparison-name {
    background-image: var(--comparison-bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-comparison-box .total-comparison-main-box .total-comparison-name span {
    color: var(--blue-border);
    font-weight: 500;
    font-size: 14px;
}

.total-comparison-box .total-comparison-main-box .total-comparison-price {
    background-color: var(--price-bg);
    padding: 10px 10px;
    border-radius: 3px;
    text-align: center;
}

.total-comparison-box .total-comparison-main-box .total-comparison-price span {
    color: var(--blue-border);
    font-weight: 500;
    font-size: 14px;
}

#tangible-saving-wrapper {
    margin-bottom: 30px;
}

.potential-saving-wrapper .potential-saving-heading {
    padding: 15px 15px;
    background: var(--inner-heading-bg);
    border-radius: 5px;
    margin-bottom: 10px;
}

.potential-saving-wrapper .potential-saving-heading .potential-saving-main-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.potential-saving-wrapper .potential-saving-heading .potential-saving-main-heading h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
}

.potential-saving-sub-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.potential-saving-sub-heading h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
}

.potential-saving-box .potential-saving-main-box p {
    font-size: 14px;
    font-weight: 500;
    color: var(--black-two);
    margin-bottom: 6px;
}

.potential-saving-box .potential-saving-main-box p:last-child {
    margin-bottom: 0;
}


.potential-saving-box .potential-saving-sub-box {
    display: flex;
    justify-content: space-between;
}

.potential-saving-sub-box .potential-saving-inner-box {
    text-align: center;
    width: 100%;
    padding: 7px 7px;
    border-bottom: 1px solid var(--border-white-color);
}


.potential-saving-sub-box .potential-saving-inner-box span {
    font-size: 12px;
    font-weight: 500;
    color: var(--blue-border);
    line-height: normal;
}

div#avg-min {
    background: var(--avg-min-bg);
}

div#avg-max {
    background: var(--avg-max-bg);
}

div#min-max {
    background-color: var(--min-max-bg);
}

#intangible-saving-wrapper {
    margin-bottom: 30px;
}

.global-ports-box .global-ports-heading {
    padding: 15px 15px;
    background: var(--inner-heading-bg);
    border-radius: 5px;
    margin-bottom: 15px;
}

.global-ports-box .global-ports-heading h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
}

.global-port-box-wrapper .table {
    background-color: var(--modal-bg);
    border: 1px solid var(--blue-border-four);
}

.global-port-box-wrapper .table thead tr th {
    background-color: var(--modal-bg);
    border: 1px solid var(--blue-border-four);
    font-size: 14px;
    font-weight: 600;
    color: var(--black-two);
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    padding: 20px 15px;
}

.global-port-box-wrapper .table thead tr th.active {
    background-color: var(--red-bg);
}

.global-port-box-wrapper .table tbody tr td {
    background-color: var(--modal-bg);
    border: 1px solid var(--blue-border-four);
    font-size: 14px;
    font-weight: 600;
    color: var(--black-two);
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    padding: 20px 15px;
}

.global-port-box-wrapper .table tbody tr td.active {
    background-color: var(--red-bg);
}

.algeciras-chart-box {
    background: var(--modal-inner-bg);
    padding: 15px 15px;
    border-radius: 12px;
    box-shadow: var(--box-shadow-two);
    position: relative;
}

.algeciras-chart-box .algeciras-chart-inner-box .apexcharts-text tspan {
    font-family: 'Archivo';
    font-weight: 400;
    font-size: 9px;
    fill: var(--chart-legend) !important;

}

.algeciras-chart-box .algeciras-chart-inner-box .apexcharts-grid-borders line {
    stroke: var(--chart-border) !important;
}

.algeciras-chart-box .algeciras-chart-inner-box .apexcharts-tooltip {
    background: transparent;
    box-shadow: none;
    border-radius: 20px !important;
}

.algeciras-chart-tooltip-box {
    width: 300px;
    background: var(--gradient-bg);
    padding: 15px 15px;
    border-radius: 20px;
}

/****===============================
ALGECIRAS PAGE CSS FINISH HERE
===================================****/


/****===============================
SUPPLIER PAGE CSS START HERE
===================================****/
#suppliers-modal {
    transition: all 0.5s ease;
}


.supplier-wrapper {
    background-color: var(--modal-bg);
    box-shadow: var(--box-shadow-two);
    border-radius: 12px;
    padding: 25px 25px;
    margin-top: 30px;
}

.supplier-chart-heading {
    margin-bottom: 10px;
}

.supplier-chart-heading h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--black-two);
}


.supplier-chart-inner-box .apexcharts-grid line {
    stroke: var(--supllier-chart-border);
    opacity: 30%;
}

.supplier-chart-inner-box .apexcharts-grid-borders line {
    stroke: var(--supllier-chart-border);
    opacity: 30%;
}

.supplier-chart-inner-box text.apexcharts-text.apexcharts-yaxis-label {
    font-family: 'Archivo' !important;
    font-weight: 400;
    font-size: 12px;
    fill: var(--supllier-chart-legend) !important;
}

.supplier-chart-inner-box text.apexcharts-text.apexcharts-xaxis-label {
    font-family: 'Archivo' !important;
    font-weight: 400;
    font-size: 12px;
    fill: var(--supllier-chart-legend) !important;
}

/****===============================
SUPPLIER PAGE CSS FINISH HERE
===================================****/


/****===============================
COMPARISON ANALYSIS PAGE CSS START HERE
===================================****/

#comparison-analysis-modal {
    display: none;
    opacity: 0.5;
    transition: all 0.5s ease;
}


.comparison-analysis-wrapper {
    background-color: var(--modal-bg);
    box-shadow: var(--box-shadow-two);
    border-radius: 12px;
    padding: 25px 25px;
    margin-top: 30px;
}

.input-box select.form-select {
    padding: 15px 15px;
    background-color: var(--modal-bg);
    border: 1px solid var(--blue-border-four);
    color: var(--blue-text-three);
    font-weight: 400;
    font-size: 14px;
    background-image: var(--select-bg-icon);
    background-size: 20px 20px;
    cursor: pointer;
}

.add-button-box .btn-primary {
    background-color: var(--blue-bg-two) !important;
    width: 100%;
    padding: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--white) !important;
    border: none;
}


.comparison-analysis-wrapper .table-responsive table.table {
    background: var(--modal-bg);
}

.comparison-analysis-wrapper .table-responsive table.table thead tr th {
    padding: 30px 30px;
    background-color: var(--table-thead-bg);
    font-size: 22px;
    font-weight: 500;
    color: var(--white);
    text-transform: capitalize;
    text-align: center;
}

.comparison-analysis-wrapper .table-responsive table.table thead tr th:first-child {
    border-radius: 14px 0 0 14px;
}

.comparison-analysis-wrapper .table-responsive table.table thead tr th:last-child {
    border-radius: 0 14px 14px 0;
}

.comparison-analysis-wrapper .table-responsive table.table tbody tr td {
    background-color: var(--modal-g);
    vertical-align: middle;
    padding: 20px 15px;
    text-align: center;
}

.comparison-analysis-wrapper .table-responsive table.table tbody tr:nth-child(even) {
    background-color: var(--table-striped-bg);
}

.comparison-analysis-wrapper .table-responsive table.table tbody tr td .table-data-box h5 {
    font-size: 18px;
    font-weight: 500;
    color: var(--para-color);
    text-transform: capitalize;
}

/****===============================
COMPARISON ANALYSIS PAGE CSS FINISH HERE
===================================****/


/****===============================
COMPARISON ANALYSIS PAGE TWO CSS START HERE
===================================****/

#comparison-analysis-modal-two {
    display: none;
    opacity: 0.5;
    transition: all 0.5s ease;
}


.submit-button-box .btn-primary {
    background-color: var(--blue-bg-two) !important;
    width: 100%;
    padding: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--white) !important;
    border: none;
}

.export-pdf-button-box .btn-warning {
    background-color: var(--yellow-bg) !important;
    width: 100%;
    padding: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--white) !important;
    border: none;
}

.comparison-analysis-wrapper-two {
    background-color: var(--modal-bg);
    box-shadow: var(--box-shadow-two);
    border-radius: 12px;
    padding: 25px 25px;
    margin-top: 30px;
}

.country-name-heading {
    margin-bottom: 15px;
}

.country-name-heading h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--black-two);
}

.country-name-heading span {
    font-size: 13px;
    font-weight: 500;
    color: var(--para-color);
    opacity: 40%;
}

.comparison-info-list-box {
    background: var(--comparison-tw-bg);
    padding: 15px 15px;
    border-radius: 10px;
}



.comparison-info-list-box ul.comparison-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-info-list-box ul.comparison-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-info-list-box ul.comparison-info-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    margin-bottom: 5px;
}

.comparison-info-list-box ul.comparison-info-list li:nth-child(even) {
    background-color: var(--comparison-tw-bg-two);
}

.comparison-info-list-box ul.comparison-info-list li .comparison-heading span {
    font-size: 16px;
    font-weight: 500;
    color: var(--para-color);
}

.comparison-info-list-box ul.comparison-info-list li .comparison-info span {
    font-size: 16px;
    font-weight: 600;
    color: var(--black-two);
}

/****===============================
COMPARISON ANALYSIS PAGE TWO CSS FINISH HERE
===================================****/

.navbar-brand {
    position: absolute;
    padding-top: .33594rem;
    padding-bottom: .33594rem;
    margin-right: 1rem;
    font-size: 1.09375rem;
    line-height: inherit;
	left:10
}
.skin-megna .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    display: inline-block;
    color: rgba(255, 255, 255, .8)
}

.profile-pic img {
    width: 30px;
    border-radius: 100%
}

.profile-pic span {
    font-size: 14px;
    white-space: nowrap
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #fb9678
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background: #fb9678;
    color: #fff
}

.datepicker td,
.datepicker th {
    padding: 5px 10px
}
.accordion>.card,
.collapsing,
.modal-open,
.progress,
.progress-bar,
.toast {
    overflow: hidden
}
.accordion>.card:not(:last-of-type),
.card-img,
.card-img-bottom,
.card>.list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}
.accordion>.card:not(:first-of-type),
.card-img,
.card-img-top,
.card>.list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}
.accordion>.card:not(:last-of-type) {
    border-bottom: 0
}
.accordion>.card>.card-header {
    border-radius: 0;
    margin-bottom: 0
}
.btn-link {
    color: #f95c2e
}

.btn-link:hover {
    color: #f95c2e;
    text-decoration: underline
}

.btn-link.focus,
.btn-link:focus {
    text-decoration: underline;
    box-shadow: none
}

.breadcrumb-item+.breadcrumb-item:hover::before,
.close:hover,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover,
.list-group-item-action:focus,
.list-group-item-action:hover,
.nav-link:focus,
.nav-link:hover,
.navbar-brand:focus,
.navbar-brand:hover,
.navbar-toggler:focus,
.navbar-toggler:hover,
.page-link:hover,
a.badge:focus,
a.badge:hover {
    text-decoration: none
}

.btn-link.disabled,
.btn-link:disabled {
    color: #6c757d;
    pointer-events: none
}

.btn-group-lg>.btn,
.btn-lg {
    padding: .5rem 1rem;
    font-size: 1.09375rem;
    line-height: 1.5;
    border-radius: .3rem
}

.btn-group-sm>.btn,
.btn-sm {
    padding: .25rem .5rem;
    font-size: .76563rem;
    line-height: 1.5;
    border-radius: .2rem
}

.btn-block {
    display: block
}

.btn-block+.btn-block {
    margin-top: .5rem
}
.bounceInDown{
	width: 100%;
	  position: absolute;
	  left: 0;
}
.mega-dropdown-menu li{
	list-style:none
}