/* * ======================================================================================================================================= * Variables * ======================================================================================================================================= */ :root { --color-background-header: #001931; --color-label: rgb(102,102,102); --color-data: rgb(21,21,21); --background-color-cards: rgb(239,242,244); --cloudy-blue: #abcdd8; --light-teal: #9dd4d1; --teal-blue: #0082a4; --nice-blue: #0c65af; --navy: #001931; --light-blue-grey: #c3c9d3; --deep-turquoise: #006f73; --dark-slate-blue: #173a53; --cloudy-blue-two: #b8c1c4; --light-olive-green: #c4d64b; --brownish-grey: #767575; --dark-sky-blue: #36a9e1; --light-navy: #154566; /* Fonts ===========================================================================================*/ --font-bold: 'HKNova-Bold', sans-serif; --font-extra-bold: 'HKNova-ExtraBold', sans-serif; --font-heavy: 'HKNova-Heavy', sans-serif; --font-light: 'HKNova-Light', sans-serif; --font-medium: 'HKNova-Medium', sans-serif; --font-regular: 'HKNova-Regular', sans-serif; --font-semi-bold: 'HKNova-SemiBold', sans-serif; --font-thin: 'HKNova-Thin', sans-serif; /* Animations ======================================================================================*/ /* https://daneden.github.io/animate.css/ > for choosing the animation(name) you want [animate.css] */ --animation-swing: swing 0.6s forwards; --animation-zoom-in: zoomIn 0.6s forwards; --animation-zoom-in-fast: zoomIn 0.3s forwards; --animation-zoom-in-slow: zoomIn 1.0s forwards; --animation-zoom-in-up: zoomInUp 0.6s forwards; --animation-slide-in-down: slideInDown 0.6s forwards; --animation-slide-in-right: slideInRight 0.6s forwards; --animation-slide-in-left: slideInLeft 0.6s forwards; --animation-slide-in-up-fast: slideInUp 0.5s forwards; --animation-slide-in-up: slideInUp 0.6s forwards; --animation-flip-in-x: flipInX 0.6s forwards; --animation-fade-in: fadeIn 0.6s forwards; --animation-fade-in-slow: fadeIn 1.0s forwards; --animation-fade-in-up: fadeInUp 0.6s forwards; --animation-zoom-out: zoomOut 0.6s forwards; --animation-zoom-out-slow: zoomOut 1.0s forwards; --animation-zoom-out-extra-slow: zoomOut 2.0s forwards; --animation-zoom-out-down: zoomOutDown 0.6s forwards; --animation-slide-out-up: slideOutUp 0.6s forwards; --animation-slide-out-right: slideOutRight 0.6s forwards; --animation-slide-out-left: slideOutLeft 0.6s forwards; --animation-slide-out-down: slideOutDown 0.6s forwards; --animation-fade-out: fadeOut 0.6s forwards; --animation-fade-out-slow: fadeOut 1.5s forwards; --animation-fade-out-slow-extra: fadeOut 2.5s forwards; --url-icon-cancel-search: url("../img/cancel-search.png"); } /* * ======================================================================================================================================= * Webfont HK_Nova_Typeface * ======================================================================================================================================= */ @font-face { font-family:'HKNova-Bold'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-Bold.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-Bold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Bold.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Bold.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-ExtraBold'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraBold.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraBold.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraBold.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-ExtraLight'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraLight.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraLight.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraLight.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-ExtraLight.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-Heavy'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-Heavy.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-Heavy.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Heavy.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Heavy.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-Light'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-Light.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-Light.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Light.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Light.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-Medium'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-Medium.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-Medium.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Medium.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Medium.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-Regular'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-Regular.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Regular.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Regular.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-SemiBold'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-SemiBold.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-SemiBold.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family:'HKNova-Thin'; src: url('../fonts/webfont_hk_nova_typeface/HKNova-Thin.eot'); /* IE9 Compat Modes */ src: url('../fonts/webfont_hk_nova_typeface/HKNova-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/webfont_hk_nova_typeface/HKNova-Thin.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Thin.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/webfont_hk_nova_typeface/HKNova-Thin.ttf') format('truetype'); /* Safari, Android, iOS */ } /* * ======================================================================================================================================= * Webfont vtteye-mobile * ======================================================================================================================================= */ @font-face { font-family: 'vtteye-mobile'; src: url('../fonts/webfont-vtteye-mobile/font/vtteye-mobile.eot'); src: url('../fonts/webfont-vtteye-mobile/font/vtteye-mobile.eot') format('embedded-opentype'), url('../fonts/webfont-vtteye-mobile/font/vtteye-mobile.woff') format('woff'), url('../fonts/webfont-vtteye-mobile/font/vtteye-mobile.ttf') format('truetype'), url('../fonts/webfont-vtteye-mobile/font/vtteye-mobile.svg') format('svg'); font-weight: normal; font-style: normal; } /* * ======================================================================================================================================= * Sort icon (iCaps design) * ======================================================================================================================================= */ .a-Icon.icon-ig-sort-asc:before, .a-Icon.icon-irr-sort-asc:before, .a-Icon.icon-rpt-sort-asc:before, .a-Icon.icon-ig-sort-desc:before, .a-Icon.icon-irr-sort-desc:before, .a-Icon.icon-rpt-sort-desc:before { content:none; } span.icon-rpt-sort-asc { background-image: url("../img/sort_asc.png"); background-size:10px; width:10px; height:15px; } span.icon-rpt-sort-desc { background-image: url("../img/sort_desc.png"); background-size:10px; width:10px; height:15px; } /* * ======================================================================================================================================= * Animations * ======================================================================================================================================= */ .vc-animation-swing { animation: var(--animation-swing); -o-animation: var(--animation-swing); -moz-animation: var(--animation-swing); -webkit-animation: var(--animation-swing); } /* Open */ .vc-animation-zoom-in { animation: var(--animation-zoom-in); -o-animation: var(--animation-zoom-in); -moz-animation: var(--animation-zoom-in); -webkit-animation: var(--animation-zoom-in); } .vc-animation-zoom-in-fast { animation: var(--animation-zoom-in-fast); -o-animation: var(--animation-zoom-in-fast); -moz-animation: var(--animation-zoom-in-fast); -webkit-animation: var(--animation-zoom-in-fast); } .vc-animation-zoom-in-slow { animation: var(--animation-zoom-in-slow); -o-animation: var(--animation-zoom-in-slow); -moz-animation: var(--animation-zoom-in-slow); -webkit-animation: var(--animation-zoom-in-slow); } .vc-animation-zoom-in-up { animation: var(--animation-zoom-in-up); -o-animation: var(--animation-zoom-in-up); -moz-animation: var(--animation-zoom-in-up); -webkit-animation: var(--animation-zoom-in-up); } .vc-animation-slide-in-down { animation: var(--animation-slide-in-down); -o-animation: var(--animation-slide-in-down); -moz-animation: var(--animation-slide-in-down); -webkit-animation: var(--animation-slide-in-down); } .vc-animation-slide-in-right { animation: var(--animation-slide-in-right); -o-animation: var(--animation-slide-in-right); -moz-animation: var(--animation-slide-in-right); -webkit-animation: var(--animation-slide-in-right); } .vc-animation-slide-in-left { animation: var(--animation-slide-in-left); -o-animation: var(--animation-slide-in-left); -moz-animation: var(--animation-slide-in-left); -webkit-animation: var(--animation-slide-in-left); } .vc-animation-slide-in-up { animation: var(--animation-slide-in-up); -o-animation: var(--animation-slide-in-up); -moz-animation: var(--animation-slide-in-up); -webkit-animation: var(--animation-slide-in-up); } .vc-animation-slide-in-up-fast { animation: var(--animation-slide-in-up-fast); -o-animation: var(--animation-slide-in-up-fast); -moz-animation: var(--animation-slide-in-up-fast); -webkit-animation: var(--animation-slide-in-up-fast); } .vc-animation-flip-in-x { animation: var(--animation-flip-in-x); -o-animation: var(--animation-flip-in-x); -moz-animation: var(--animation-flip-in-x); -webkit-animation: var(--animation-flip-in-x); } .vc-animation-fade-in { animation: var(--animation-fade-in); -o-animation: var(--animation-fade-in); -moz-animation: var(--animation-fade-in); -webkit-animation: var(--animation-fade-in); } .vc-animation-fade-in-slow { animation: var(--animation-fade-in-slow); -o-animation: var(--animation-fade-in-slow); -moz-animation: var(--animation-fade-in-slow); -webkit-animation: var(--animation-fade-in-slow); } .vc-animation-fade-in-up { animation: var(--animation-fade-in-up); -o-animation: var(--animation-fade-in-up); -moz-animation: var(--animation-fade-in-up); -webkit-animation: var(--animation-fade-in-up); } /* Close */ .vc-animation-zoom-out { animation: var(--animation-zoom-out); -o-animation: var(--animation-zoom-out); -moz-animation: var(--animation-zoom-out); -webkit-animation: var(--animation-zoom-out); } .vc-animation-zoom-out-slow { animation: var(--animation-zoom-out-slow); -o-animation: var(--animation-zoom-out-slow); -moz-animation: var(--animation-zoom-out-slow); -webkit-animation: var(--animation-zoom-out-slow); } .vc-animation-zoom-out-down { animation: var(--animation-zoom-out-down); -o-animation: var(--animation-zoom-out-down); -moz-animation: var(--animation-zoom-out-down); -webkit-animation: var(--animation-zoom-out-down); } .vc-animation-slide-out-up { animation: var(--animation-slide-out-up); -o-animation: var(--animation-slide-out-up); -moz-animation: var(--animation-slide-out-up); -webkit-animation: var(--animation-slide-out-up); } .vc-animation-slide-out-right { animation: var(--animation-slide-out-right); -o-animation: var(--animation-slide-out-right); -moz-animation: var(--animation-slide-out-right); -webkit-animation: var(--animation-slide-out-right); } .vc-animation-slide-out-left { animation: var(--animation-slide-out-left); -o-animation: var(--animation-slide-out-left); -moz-animation: var(--animation-slide-out-left); -webkit-animation: var(--animation-slide-out-left); } .vc-animation-slide-out-down { animation: var(--animation-slide-out-down); -o-animation: var(--animation-slide-out-down); -moz-animation: var(--animation-slide-out-down); -webkit-animation: var(--animation-slide-out-down); } .vc-animation-fade-out { animation: var(--animation-fade-out); -o-animation: var(--animation-fade-out); -moz-animation: var(--animation-fade-out); -webkit-animation: var(--animation-fade-out); } .vc-animation-fade-out-slow { animation: var(--animation-fade-out-slow); -o-animation: var(--animation-fade-out-slow); -moz-animation: var(--animation-fade-out-slow); -webkit-animation: var(--animation-fade-out-slow); } .vc-animation-fade-out-slow-extra { animation: var(--animation-fade-out-slow-extra); -o-animation: var(--animation-fade-out-slow-extra); -moz-animation: var(--animation-fade-out-slow-extra); -webkit-animation: var(--animation-fade-out-slow-extra); } /* Vtteye icons */ /* ------------------------------------------------------------------------------------------- */ [class^="ft-"]:before, [class*=" ft-"]:before { margin-right: 0; margin-left: 0; width: auto; } /* ------------------------------------------------------------------------------------------- */ /* Tanks > status colors */ /* ------------------------------------------------------------------------------------------- */ .vc-status-outbound { background-color:#3BE257; color:white; } .vc-status-inbound { background-color:#3BE257; color:white; } .vc-status-blending { background-color:var(--cloudy-blue); color:var(--navy); } .vc-status-mixing { background-color:var(--navy); color:white; } .vc-status-analyzed { background-color:var(--teal-blue); color:white; } .vc-status-maintenance { background-color:var(--cloudy-blue-two); color:var(--navy); } /* ------------------------------------------------------------------------------------------- */ /* Orders > status colors */ /* ------------------------------------------------------------------------------------------- */ .vc-status-running { background-color:red; color:white; } .vc-status-berthed-running { background-color:red; color:white; } .vc-status-running .vi-icon { font-size:17px !important; } .vc-status-departed { background-color:#76c76b; color:white; } .vc-status-departed .vi-icon { font-size:12px !important; } .vc-status-completed { background-color:#76c76b; color:black; } .vc-status-reported { background-color:#7373b5; color:white; } .vc-status-reported .vi-icon { font-size:13px !important; } .vc-status-berthed { background-color:red; color:white; } .vc-status-berthed .vi-icon { font-size:16px !important; } .vc-status-planned { background-color:#c3c9d3; color:black; } .vc-status-arrived { /* Unkown */ background-color: #7FC0D1; color:white; } .vc-status-finished { /* unkown */ background-color: rgb(111, 255, 142); color:black; } .vc-status-finished .vi-icon { font-size:17px !important; } .vc-status-late { background-color: rgb(224,83,101); color:white; } .vc-status-released { background-color: rgb(0,130,164); color:white; } .vc-status-remaining { /* remaining (undefined status before) */ background-color:#f86288; color:black; } /* ------------------------------------------------------------------------------------------- */ /* Tank status */ /* ------------------------------------------------------------------------------------------- */ .vc-tank-status-container { display:flex; border-radius:5px; padding:8px; min-height:45px; } .vc-tank-status-container.vc-background-box-1 { background:#f1f1f2; } .vc-tank-status-container.vc-background-box-2 { border:1px solid #c9d0d7; } .vc-tank-status-container .vc-icon-container { border-radius:100%; width: 25px; height:25px; display: flex; justify-content: center; align-items: center; margin-right:10px; margin-top:auto; margin-bottom:auto; } .vc-tank-status-container .vc-icon { font-size:14px; } .vc-tank-status-container .vc-text-container { margin-top:auto; margin-bottom:auto; } .vc-tank-status-container .vc-text { font-size: 11px; font-family: HKNova-Bold; color: #666666; line-height: 15px; } .vc-tank-status-container .vc-subtext { font-size: 12px; font-family: HKNova-Regular; color: #666666; line-height: 15px; } /* Change the font size for specific icons because they are of different sizes */ .vc-tank-status-container .vc-icon.ft-tank-status-mixing { font-size:16px; } .vc-tank-status-container .vc-icon.ft-tank-status-incoming, .vc-tank-status-container .vc-icon.ft-tank-status-outgoing { font-size:10px; } /* ------------------------------------------------------------------------------------------- */ /* Order status */ /* ------------------------------------------------------------------------------------------- */ .vc-order-status-grafics-info { width:100%; display:flex; padding:7px; position:relative; } .vc-order-status-grafics-info.vc-status-background-box-1 { background-color:#f1f1f2; border-radius:4px; } .vc-order-status-grafics-info.vc-status-background-box-2 { border:1px solid #c3c9d3; border-radius:4px; } .vc-order-status-grafics-info .vc-status-grafics-icon { border-radius:100%; width: 25px; height:25px; display: flex; justify-content: center; align-items: center; } .vc-order-status-grafics-info .vc-status-grafics-icon .vc-icon { font-size:15px; } .vc-order-status-grafics-info .vc-status-grafics-data { margin-left:10px; } .vc-order-status-grafics-info .vc-status-grafics-data * { font-size:11px; line-height:15px; color:rgb(102,102,102); } .vc-order-status-grafics-info .vc-data1, .vc-order-status-grafics-info .vc-data21 { font-family:HKNova-Bold; } .vc-order-status-grafics-info .vc-data21 .vc-status-add-info { padding-left:3px; } .vc-order-status-grafics-info .vc-data1 { padding-top:6px; } .vc-order-status-grafics-info .vc-status-grafics-i-symbol { position:absolute; right:10px; color:#c3c9d3; font-size:12px; vertical-align:middle; top:17px; } #vi-slide-container-orders .vc-order-status-grafics-info .vc-status-grafics-i-symbol { display:none; } /* Change the font size for specific icons because they are of different sizes */ .vc-order-status-grafics-info .vc-status-grafics-icon .vc-icon.ft-departed { font-size:12px; } .vc-order-status-grafics-info .vc-status-grafics-icon .vc-icon.ft-running { font-size:16px; } .vc-order-status-grafics-info .vc-status-grafics-icon .vc-icon.ft-reported { font-size:14px; } .a-AlertMessage-details { text-align: center; }