md-icon.icon-font-16 {
font-size : 16px;
min-width : 16px;
min-height : 16px;
height : 16px;
width : 16px;
}
md-icon.icon-font-18 {
font-size : 18px;
min-width : 18px;
min-height : 18px;
height : 18px;
width : 18px;
}
html, body {
font-family : 'Lato', sans-serif;
color : rgb(0, 0, 0, 0.87);
font-size : 12px;
background-color : transparent;
text-rendering : optimizeLegibility;
}
@media screen and (min-width: 1920px) {
html, body {
font-size : 14px;
}
}
@media screen and (min-width: 1920px) {
html {
width : 1920px;
max-width : 1920px;
}
}
h1 {
font-size : 32px;
line-height : 28px;
color : #333333;
}
h2 {
font-size : 28px;
line-height : 24px;
color : #333333;
}
h3 {
font-size : 24px;
line-height : 20px;
color : #333333;
}
h4 {
font-size : 20px;
line-height : 16px;
color : #333333;
}
h5 {
font-size : 18px;
line-height : 16px;
color : #333333;
}
h5 {
font-size : 16px;
line-height : 14px;
color : #333333;
}
p {
font-size : 15px;
line-height : 16px;
color : #333333;
}
:hover, :focus, :active {
outline : 0;
}
.toggle-button {
border : none;
background : none;
}
@font-face {
font-family : 'Material Icons';
font-style : normal;
font-weight : 400;
src : local("Material Icons"), local("MaterialIcons-Regular"), url(../../Common/fonts/material-icons.woff) format("woff");
}
.material-icons {
font-family : 'Material Icons';
font-weight : normal;
font-style : normal;
font-size : 24px;
line-height : 1;
letter-spacing : normal;
text-transform : none;
display : inline-block;
white-space : nowrap;
overflow-wrap : normal;
direction : ltr;
font-feature-settings : 'liga';
}
.side-nav-wrapper, .side-nav-wrapper-hidden {
width : 45px;
height : 100%;
color : white;
position : fixed;
background : #F5F5F5;
top : 40px;
z-index : 49;
}
.side-nav-wrapper.open, .open.side-nav-wrapper-hidden {
overflow-y : auto;
overflow-x : hidden;
}
.side-nav-bg, .md-sidenav-left {
background : #F5F5F5;
}
.side-nav-wrapper.open, .open.side-nav-wrapper-hidden {
width : 210px;
}
.side-nav-wrapper.open md-icon:first-child, .open.side-nav-wrapper-hidden md-icon:first-child {
margin : 0 5px 0 0;
}
div[ng-view] {
padding-top : 5px;
}
.menu {
border-bottom : 1px solid #ccc;
position : relative;
display : block;
}
.side-nav-wrapper button, .side-nav-wrapper-hidden button, .md-sidenav-left button {
border : 0;
background : transparent;
outline : 0;
color : white;
display : flex;
align-items : center;
width : 100%;
position : relative;
}
.side-nav-wrapper button:hover span, .side-nav-wrapper-hidden button:hover span, .side-nav-wrapper button.md-primary-bg span, .side-nav-wrapper-hidden button.md-primary-bg span, .md-sidenav-left button.md-primary-bg span, .side-nav-wrapper.theme ul:not(.md-primary-bg) button:hover span, .theme.side-nav-wrapper-hidden ul:not(.md-primary-bg) button:hover span {
color : #FFFFFF;
}
.side-nav-wrapper button:hover .material-icons, .side-nav-wrapper-hidden button:hover .material-icons, .side-nav-wrapper button.md-primary-bg .material-icons, .side-nav-wrapper-hidden button.md-primary-bg .material-icons, .md-sidenav-left button.md-primary-bg .material-icons, .side-nav-wrapper.theme ul:not(.md-primary-bg) button:hover .material-icons, .theme.side-nav-wrapper-hidden ul:not(.md-primary-bg) button:hover .material-icons {
color : #FFFFFF;
}
.side-nav-wrapper .side-menu-main md-icon.md-default-theme, .side-nav-wrapper-hidden .side-menu-main md-icon.md-default-theme, .side-nav-wrapper .side-menu-main md-icon.material-icons, .side-nav-wrapper-hidden .side-menu-main md-icon.material-icons, .md-sidenav-left button .material-icons {
color : #999;
}
.side-nav-wrapper > button, .side-nav-wrapper-hidden > button {
justify-content : flex-end;
width : auto;
margin-left : auto;
}
.menu button span, .md-sidenav-left button span {
font-size : 14px;
font-weight : 400;
white-space : nowrap;
text-align : left;
color : #666;
}
.side-nav-wrapper.open .menu .submenu li button span, .open.side-nav-wrapper-hidden .menu .submenu li button span {
white-space : normal;
}
.menu .submenu li button span {
font-size : 13px;
float : left;
}
.menu ul li {
list-style : none;
border-bottom : 1px solid rgb(221, 221, 221, 0.19);
}
.menu ul.submenu > li > button {
height : 44px;
}
.menu button.md-primary-bg span.selected {
border-right : 10px solid white;
}
.menu button.md-primary-bg span.selected {
position : absolute;
right : 0;
top : 10px;
}
.switch-app {
z-index : 50;
position : absolute;
border : rgb(0, 0, 0, 0.15) solid 1px;
border-radius : 4px;
box-shadow : 0 6px 12px rgb(0, 0, 0, 0.175);
min-width : 160px;
}
@media screen and (max-width: 600px) {
.switch-app {
right : 0;
}
}
.switch-app span {
font-size : 12px;
}
.switch-app md-content > span {
cursor : pointer;
}
.switch-app.switch-station md-content > span {
padding : 6px 10px 6px 10px;
}
.switch-app label {
width : 100%;
outline : 0;
padding : 10px 10px 10px 20px;
color : #AFB6C2;
font-size : 12px;
color : rgb(48, 48, 48, 0.75);
}
.switch-app.switch-station label {
padding : 10px 10px 10px 10px;
}
.switch-app md-tabs span {
width : 100%;
outline : 0;
padding : 6px 10px 6px 20px;
cursor : pointer;
}
.switch-app md-tabs span:hover {
background-color : #f4f5f7;
}
.ecw-app-header md-tabs md-tabs-wrapper {
display : none;
}
.ecw-app-header md-tabs md-tab-content {
padding : 0;
}
.ecw-app-header md-tabs md-icon.back-icon {
transform : rotate(180deg);
cursor : pointer;
}
.side-nav-wrapper:not(.open) .menu .submenu, .side-nav-wrapper-hidden:not(.open) .menu .submenu {
position : absolute;
display : none;
padding : 0;
list-style : none;
margin : 0;
}
.side-nav-wrapper:not(.open) .menu .submenu li, .side-nav-wrapper-hidden:not(.open) .menu .submenu li {
border-bottom : 1px solid #ccc;
}
.side-nav-wrapper:not(.open) .menu .submenu .submenu-button, .side-nav-wrapper-hidden:not(.open) .menu .submenu .submenu-button {
padding : 10px 20px;
width : 100%;
}
.side-nav-wrapper:not(.open) .menu:hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:hover .submenu {
display : block;
left : 100%;
top : 0;
background : #F5F5F5;
}
.side-nav-wrapper:not(.open) .menu:nth-child(5):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(5):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(6):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(6):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(7):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(7):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(8):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(8):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(9):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(9):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(10):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(10):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(11):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(11):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper:not(.open) .menu:nth-child(12):hover .submenu, .side-nav-wrapper-hidden:not(.open) .menu:nth-child(12):hover .submenu {
max-height : 260px;
overflow : auto;
}
.side-nav-wrapper-hidden {
position : relative;
visibility : hidden;
}
md-sidenav.md-sidenav-left .submenu, md-sidenav.md-sidenav-left .submenu .level2, .side-nav-wrapper.open .submenu, .open.side-nav-wrapper-hidden .submenu, .side-nav-wrapper .submenu .level2, .side-nav-wrapper-hidden .submenu .level2 {
max-height : 0;
overflow : hidden;
opacity : 0;
padding : 0;
}
md-sidenav.md-sidenav-left .submenu.open, md-sidenav.md-sidenav-left .submenu.open .level2.open, .side-nav-wrapper.open .submenu.open, .open.side-nav-wrapper-hidden .submenu.open, .side-nav-wrapper .submenu .level2.open, .side-nav-wrapper-hidden .submenu .level2.open {
opacity : 1;
max-height : inherit;
}
md-sidenav.md-sidenav-left .submenu.open .submenu-button, .side-nav-wrapper.open .menu .submenu .submenu-button, .open.side-nav-wrapper-hidden .menu .submenu .submenu-button {
padding : 7px 7px 7px 20px;
width : 100%;
text-align : left;
}
.side-nav-wrapper button:hover, .side-nav-wrapper-hidden button:hover {
background : #5b5b5b;
}
md-sidenav.md-sidenav-left .submenu.open .submenu-button {
white-space : normal;
}
.error-message {
font-size : 13px;
color : #D0021B;
}
.ecw-app-header md-icon.material-icons {
margin : 0 5px 0 0;
line-height : 24px;
outline : 0;
font-size : 24px;
color : #4C5F76;
}
.ecw-app-header .page-head.theme .dropdown-toggle md-icon.material-icons:not(.switch), .ecw-app-header .page-head.theme .zoom md-icon.material-icons {
color : white !important ;
}
.ecw-app-header .page-head.theme .header-date {
color : white;
}
.ecw-app-header .dropdown-toggle {
border : 0;
background : transparent;
height : 36px;
font-weight : 500;
color : #333333;
align-items : center;
display : flex;
}
.ecw-app-header .page-head.theme .dropdown-toggle {
color : white;
}
.ecw-app-header .welcome-label {
border-left : 1px solid rgb(0, 0, 0, 0.38);
padding-left : 8px;
padding-right : 5px;
}
.ecw-app-header .page-head.theme .welcome-label {
border-left : 1px solid rgb(255, 255, 255, 0.68);
padding-left : 8px;
}
.ecw-app-header .dropdown-toggle img {
border : rgb(0, 0, 0, 0.38) solid 1px;
margin-right : 10px;
}
.ecw-app-header .dropdown li {
cursor : pointer;
padding : 3px 5px;
}
.ecw-app-header .dropdown li.setting:hover {
background : #EAEAEA;
}
.ecw-app-header .mail {
position : relative;
}
.ecw-app-header .badge-notify {
text-align : center;
color : #ffffff;
background : #ff0000;
position : absolute;
top : 0;
width : 17px;
height : 17px;
border-radius : 15px;
margin-top : -3px;
margin-left : 4px;
}
.ecw-app-header .user-info, .ecw-footer .user-info {
padding : 0 5px;
border-right: 1px solid rgb(0, 0, 0, 0.38);
}
.ecw-app-header .user-info-label, .ecw-footer .user-info-label {
padding-left : 5px;
color : #333333;
}
.ecw-footer{
padding-left:0px !important;
}
.ecw-app-header .page-head.theme .user-info-label, .ecw-app-header .page-head.theme .user-info, .ecw-app-header .page-head.theme .user-info-group {
color : white;
}
.ecw-app-header .user-info-wrapper {
padding : 5px;
}
.ecw-app-header .switch {
background : white;
border-style : double;
border-width : 1px;
border-radius : 0;
font-weight : bold;
outline : 0;
}
@media screen and (max-width: 960px) {
.ecw-app-header .switch {
padding : 0 5px;
}
}
.ecw-app-header .switch md-icon {
margin : 0;
height : 14px;
width : 14px;
font-size : 14px;
min-height : 14px;
min-width : 14px;
line-height : 14px;
border-style : none;
border : 0;
}
.menu-head {
height : 40px;
font-size : 22px;
}
.page-head {
height : 40px;
width : 100%;
position : fixed;
z-index : 51;
top : 0;
background : #FEFEFE;
max-width : 1920px;
box-shadow : -2px 0 3px #666666;
}
.page-head .theme-palette {
border : 0;
width : 23px;
height : 23px;
border-radius : 4px;
}
.theme-palettein {
border : 0;
width : 23px;
height : 23px;
border-radius : 4px;
}
.mr59{
margin:0px;
position:relative;
top:2px;
}
.page-head > md-icon.sidenav-menu {
cursor : pointer;
}
.page-head-hidden {
visibility : hidden;
padding : 20px;
}
.page-header {
border-bottom : 1px solid #e7ecf1;
color : #666;
margin : 0;
align-items : center;
}
.page-header md-icon.material-icons {
font-size : 16px;
height : 16px;
width : 16px;
min-height : 16px;
min-width : 16px;
line-height : 16px;
margin : 0 5px 0 0;
color : #666;
}
.ecw-footer {
position : fixed;
width : 100%;
bottom : 0;
z-index : 49;
right : 0;
max-width : 100%;
}
@media screen and (max-width: 600px) {
.ecw-footer {
position : relative;
}
}
.ecw-footer-hidden {
position : relative;
width : 100%;
bottom : 0;
visibility : hidden;
}
@media screen and (max-width: 600px) {
.ecw-footer-hidden {
display : none;
}
}
.ecw-footer .version-label, .ecw-footer-hidden .version-label {
background-color : #909090;
color : white;
text-align : center;
font-size : 10px;
padding : 2px;
}
@media (min-width: 600px) and (max-width: 960px) {
.ecw-footer .version-label, .ecw-footer-hidden .version-label {
font-size : 8px;
padding : 1px;
}
}
@media screen and (max-width: 600px) {
.ecw-footer .version-label, .ecw-footer-hidden .version-label {
font-size : 7px;
padding : 1px;
}
}
.ecw-footer .copyrights, .ecw-footer-hidden .copyrights {
color : #404040;
font-size : 10px;
padding : 2px 20px 2px 20px;
position : relative;
}
@media (min-width: 600px) and (max-width: 960px) {
.ecw-footer .copyrights, .ecw-footer-hidden .copyrights {
font-size : 8px;
padding : 2px 10px;
}
}
@media screen and (max-width: 600px) {
.ecw-footer .copyrights, .ecw-footer-hidden .copyrights {
font-size : 7px;
padding : 2px 5px;
}
}
.ecw-footer .tenant-configs {
align-items : center;
justify-content : center;
position : absolute;
width : 100%;
font-size : 12px;
top : 0;
bottom : 0;
}
@media screen and (min-width: 1280px) {
.ecw-footer .tenant-configs {
left : -22px;
}
}
@media screen and (max-width: 1280px) {
.ecw-footer .tenant-configs {
font-size : 10px;
position : relative;
}
}
@media (min-width: 600px) and (max-width: 960px) {
.ecw-footer .tenant-configs {
font-size : 8px;
position : relative;
}
}
@media screen and (max-width: 600px) {
.ecw-footer .tenant-configs {
font-size : 7px;
position : relative;
}
}
.ecw-footer .all-right-reserved {
text-align : right;
}
@media (min-width: 600px) and (max-width: 960px) {
.ecw-footer .all-right-reserved {
text-align : center;
}
}
@media screen and (max-width: 600px) {
.ecw-footer .all-right-reserved {
display : none;
}
}
.version-modal-text, .change-password {
text-align : center;
font-weight : bold;
font-size : 13px;
}
button.primary-btn {
font-weight : bold;
}
button.secondary-btn {
background : #e5e5e5;
color : black;
font-weight : bold;
}
@keyframes spin {
0% {
transform : rotate(0deg);
}
100% {
transform : rotate(360deg);
}
}
ecw-loader.loader md-progress-circular path {
stroke : white;
}
.loader .temp-loader, .partial-loader .temp-loader {
border-radius : 50%;
width : 24px;
height : 24px;
border : rgb(255, 255, 255, 0.2) solid 0.25rem;
border-top-color : white;
animation : spin 1s linear infinite;
}
.loader {
position : fixed;
width : 100%;
height : 100%;
background : rgb(102, 102, 102, 0.65);
z-index : 101;
top : 0;
left : 0;
display : flex;
align-items : center;
justify-content : center;
}
.partial-loader {
position : absolute;
width : 100%;
height : 100%;
background : rgb(102, 102, 102, 0.15);
z-index : 40;
top : 0;
left : 0;
display : flex;
align-items : center;
justify-content : center;
}
.loader .dialogue-box {
position : relative;
background-color : white;
height : 265px;
width : 570px;
border-radius : 5px;
padding : 10px;
box-shadow : 0 1px 3px 0 rgb(0, 0, 0, 0.2), 0 1px 1px 0 rgb(0, 0, 0, 0.14), 0 2px 1px -1px rgb(0, 0, 0, 0.12);
}
@media screen and (max-width: 600px) {
.loader .dialogue-box {
height : 175px;
width : 250px;
}
}
.loader svg {
width : 175px;
height : 175px;
}
@media screen and (max-width: 600px) {
.loader svg {
height : 110px;
}
}
.loader .loading-svg-wrapper {
display : flex;
justify-content : center;
align-items : center;
}
.loader span {
text-align : center;
position : relative;
padding : 10px;
display : block;
width : 100%;
font-size : 19px;
}
@media (min-width: 600px) and (max-width: 960px) {
.loader span {
font-size : 15px;
font-weight : bold;
}
}
@media screen and (max-width: 600px) {
.loader span {
font-size : 12px;
font-weight : bold;
}
}
.loader span.large-text {
font-size : 17px;
}
@media (min-width: 600px) and (max-width: 960px) {
.loader span.large-text {
font-size : 12px;
}
}
@media screen and (max-width: 600px) {
.loader span.large-text {
padding : 7px;
font-size : 9px;
}
}
.pd0 {
padding : 0;
}
.pd5 {
padding : 5px;
font-size : larger;
}
.pd10 {
padding : 10px;
}
.pd15 {
padding : 15px;
}
.pd20 {
padding : 20px;
}
.pd25 {
padding : 25px;
}
.pd30 {
padding : 20px;
}
.pd-t0 {
padding-top : 0 !important ;
}
.pd-t5 {
padding-top : 5px !important ;
}
.pd-t10 {
padding-top : 10px !important ;
}
.pd-t15 {
padding-top : 15px !important ;
}
.pd-t20 {
padding-top : 20px !important ;
}
.pd-t25 {
padding-top : 25px !important ;
}
.pd-t30 {
padding-top : 30px !important ;
}
.pd-r0 {
padding-right : 0 !important ;
}
.pd-r5 {
padding-right : 5px !important ;
}
.pd-r10 {
padding-right : 100px !important ;
}
.pd-r15 {
padding-right : 15px !important ;
}
.pd-r20 {
padding-right : 20px !important ;
}
.pd-r25 {
padding-right : 25px !important ;
}
.pd-r30 {
padding-right : 30px !important ;
}
.pd-b0 {
padding-bottom : 0 !important ;
}
.pd-b5 {
padding-bottom : 5px !important ;
}
.pd-b10 {
padding-bottom : 10px !important ;
}
.pd-b15 {
padding-bottom : 15px !important ;
}
.pd-b20 {
padding-bottom : 20px !important ;
}
.pd-b25 {
padding-bottom : 25px !important ;
}
.pd-b30 {
padding-bottom : 30px !important ;
}
.pd-l0 {
padding-left : 0 !important ;
}
.pd-l5 {
padding-left : 5px !important ;
}
.pd-l10 {
padding-left : 10px !important ;
}
.pd-l15 {
padding-left : 15px !important ;
}
.pd-l20 {
padding-left : 20px !important ;
}
.pd-l25 {
padding-left : 25px !important ;
}
.pd-l30 {
padding-left : 30px !important ;
}
.pd8 {
padding : 8px;
}
.pd16 {
padding : 16px;
}
.pd-t8 {
padding-top : 8px !important ;
}
.pd-t16 {
padding-top : 16px !important ;
}
.pd-r8 {
padding-right : 8px !important ;
}
.pd-r16 {
padding-right : 16px !important ;
}
.pd-b8 {
padding-bottom : 8px !important ;
}
.pd-b16 {
padding-bottom : 16px !important ;
}
.pd-l8 {
padding-left : 8px !important ;
}
.pd-l16 {
padding-left : 16px !important ;
}
.mr0 {
margin : 0;
}
.mr5 {
margin : 5px;
}
.mr10 {
margin : 10px;
}
.mr15 {
margin : 15px;
}
.mr20 {
margin : 20px;
}
.mr25 {
margin : 25px;
}
.mr30 {
margin : 30px;
}
.mr-t0 {
margin-top : 0 !important ;
}
.mr-t5 {
margin-top : 5px !important ;
}
.mr-t10 {
margin-top : 10px !important ;
}
.mr-t15 {
margin-top : 15px !important ;
}
.mr-t20 {
margin-top : 20px !important ;
}
.mr-t25 {
margin-top : 25px !important ;
}
.mr-t30 {
margin-top : 30px !important ;
}
.mr-r0 {
margin-right : 0 !important ;
}
.mr-r5 {
margin-right : 5px !important ;
}
.mr-r10 {
margin-right : 10px !important ;
}
.mr-r15 {
margin-right : 15px !important ;
}
.mr-r20 {
margin-right : 20px !important ;
}
.mr-r25 {
margin-right : 25px !important ;
}
.mr-r30 {
margin-right : 30px !important ;
}
.mr-b0 {
margin-bottom : 0 !important ;
}
.mr-b5 {
margin-bottom : 5px !important ;
}
.mr-b10 {
margin-bottom : 10px !important ;
}
.mr-b15 {
margin-bottom : 15px !important ;
}
.mr-b20 {
margin-bottom : 20px !important ;
}
.mr-b25 {
margin-bottom : 25px !important ;
}
.mr-b30 {
margin-bottom : 30px !important ;
}
.mr-l0 {
margin-left : 0 !important ;
}
.mr-l5 {
margin-left : 5px !important ;
}
.mr-l10 {
margin-left : 10px !important ;
}
.mr-l15 {
margin-left : 15px !important ;
}
.mr-l20 {
margin-left : 20px !important ;
}
.mr-l25 {
margin-left : 25px !important ;
}
.mr-l30 {
margin-left : 30px !important ;
}
.mr8 {
margin : 8px;
}
.mr16 {
margin : 16px;
}
.mr-t8 {
margin-top : 8px !important ;
}
.mr-t16 {
margin-top : 16px !important ;
}
.mr-r8 {
margin-right : 8px !important ;
}
.mr-r16 {
margin-right : 16px !important ;
}
.mr-b8 {
margin-bottom : 8px !important ;
}
.mr-b16 {
margin-bottom : 16px !important ;
}
.mr-l8 {
margin-left : 8px !important ;
}
.mr-l16 {
margin-left : 16px !important ;
}
.width-10 {
min-width : 10px;
margin-right : 10px;
}
.width-20 {
min-width : 20px;
margin-right : 10px;
}
.width-30 {
min-width : 30px;
margin-right : 10px;
}
.width-40 {
min-width : 40px;
margin-right : 10px;
}
.width-50 {
min-width : 50px;
margin-right : 10px;
}
.width-60 {
min-width : 60px;
margin-right : 10px;
}
.width-70 {
min-width : 70px;
margin-right : 10px;
}
.width-80 {
min-width : 80px;
margin-right : 10px;
}
.width-90 {
min-width : 90px;
margin-right : 10px;
}
.width-100 {
min-width : 100px;
margin-right : 10px;
}
.width-110 {
min-width : 110px;
margin-right : 10px;
}
.width-120 {
min-width : 120px;
margin-right : 10px;
}
.width-130 {
min-width : 130px;
margin-right : 10px;
}
.width-140 {
min-width : 140px;
margin-right : 10px;
}
.width-150 {
min-width : 150px;
margin-right : 10px;
}
.width-160 {
min-width : 160px;
margin-right : 10px;
}
.width-170 {
min-width : 170px;
margin-right : 10px;
}
.width-180 {
min-width : 180px;
margin-right : 10px;
}
.width-190 {
min-width : 190px;
margin-right : 10px;
}
.position-relative {
position : relative;
}
.position-absolute {
position : absolute;
}
.text-align-left {
text-align : left;
}
.text-align-center {
text-align : center;
}
.text-align-right {
text-align : right;
}
.display-block {
display : block;
}
.display-flex {
display : flex;
}
.display-items-center {
display : flex;
align-items : center;
}
.display-content-center {
display : flex;
justify-content : center;
}
.display-center {
display : flex;
align-items : center;
justify-content : center;
}
.absolute-display-center {
display : flex;
align-items : center;
justify-content : center;
position : absolute;
top : 0;
bottom : 0;
}
.display-none {
display : none !important;
}
.visibility-hidden {
visibility : hidden;
}
.vertical-align-middle {
vertical-align : middle;
}
.align-items-center {
align-items : center;
}
.align-items-end {
align-items : flex-end;
}
.align-items-start {
align-items : flex-start;
}
.justify-content-center {
justify-content : center;
}
.justify-content-end {
justify-content : flex-end;
}
.full-width {
width : 100%;
}
.full-height {
height : 100%;
}
.flex-row {
display : flex;
flex-direction : row;
}
.flex-wrap {
flex-wrap : wrap;
}
.text-underline, .grid-link {
text-decoration : underline;
}
.margin-left-auto {
margin-left : auto;
}
.margin-right-auto {
margin-right : auto;
}
.margin-auto {
margin : 0 auto;
}
.cursor-pointer {
cursor : pointer;
}
.capitalize {
text-transform : uppercase;
}
.ecw-padding, .search-form {
padding : 10px;
}
@media screen and (max-width: 1024px) {
.ecw-padding, .search-form {
padding : 5px;
}
}
@media screen and (min-width: 1920px) {
.ecw-padding, .search-form {
padding : 15px;
}
}
.ecw-margin {
margin : 10px;
}
@media screen and (max-width: 1024px) {
.ecw-margin {
margin : 5px;
}
}
@media screen and (min-width: 1920px) {
.ecw-margin {
margin : 15px;
}
}
.ecw-header {
font-size : 16px;
font-weight : 600;
}
@media screen and (min-width: 1920px) {
.ecw-header {
font-size : 20px;
}
}
.ecw-header-light {
font-size : 18px;
}
@media screen and (min-width: 1920px) {
.ecw-header-light {
font-size : 20px;
}
}
.ecw-subheader {
font-size : 16px;
font-weight : bold;
}
@media screen and (min-width: 1920px) {
.ecw-subheader {
font-size : 20px;
}
}
.form-subheader {
padding : 10px;
background : #EAEAEA;
font-weight : bold;
}
.ecw-desc {
font-size : 14px;
}
ecw-list-wrapper md-list button.show-header {
width : 100%;
padding : 11px 10px;
background : white;
border : 0;
text-align : left;
outline : 0;
}
ecw-list-wrapper md-list .list-title {
font-weight : bold;
font-size : 14px;
}
.bg-white {
background : #ffffff !important ;
}
.bg-pink {
background : #F5888D;
color : white;
}
.bg-purple {
background : #9A89B5;
color : white;
}
.bg-green {
background : #5A8770;
color : white;
}
.fg-white {
color : #ffffff !important ;
}
.fg-indigo {
color : #3F51B5;
}
.fg-green {
color : #4CAF50;
}
.fg-teal {
color : #26A69A;
}
.fg-grey {
color : #BDBDBD;
}
.fg-orange {
color : #FF5722;
}
.fg-red {
color : #F44336 !important ;
}
.font-bold {
font-weight : bold !important ;
}
.font-600 {
font-weight : 600;
}
.font-normal {
font-weight : 500;
}
.font-8 {
font-size : 8px;
}
.font-10 {
font-size : 10px;
}
.font-12 {
font-size : 12px;
}
.font-14 {
font-size : 14px;
}
.font-16 {
font-size : 16px;
}
.font-18 {
font-size : 18px;
}
.summary-small {
font-size : 13px;
font-weight : 600;
}
.summary-medium {
font-size : 17px;
font-weight : 600;
}
.summary-large {
font-size : 21px;
font-weight : 600;
}
@media screen and (min-width: 1280px) {
.small-dialog {
max-width : 960px;
}
}
.search-form {
border-bottom : 1px solid #EAEAEA;
background : white;
border : #E4E4E4 solid 10px;
position : absolute;
z-index : 50;
width : calc(100% - 20px);
background-clip : padding-box;
box-shadow : 0 6px 12px rgb(0, 0, 0, 0.175);
}
.search-form-opacity {
background : rgb(0, 0, 0, 0.1);
}
.backdrop-opacity {
background : rgb(0, 0, 0, 0.2);
}
.grid-link {
padding : 2px 7px 2px 0;
margin : 0;
min-width : auto;
min-height : auto;
line-height : normal;
cursor : pointer;
}
.grid-link:hover {
background : none !important ;
}
.border-right {
border-right : 1px solid #C3C3C3;
}
.block-bottom {
border-left : 1px solid rgb(0, 0, 0, 0.12);
border-right : 1px solid rgb(0, 0, 0, 0.12);
border-bottom : 1px solid rgb(0, 0, 0, 0.12);
}
.filter-icon md-icon {
color : white;
}
.filter-wrapper {
cursor : default;
border-radius : 16px;
display : block;
height : 32px;
line-height : 32px;
margin : 8px 8px 0 0;
padding : 0 12px;
float : left;
box-sizing : border-box;
max-width : 100%;
position : relative;
background : #e0e0e0;
color : #424242;
padding-right : 22px;
font-weight : 600;
}
.grid-row-count {
cursor : default;
display : block;
margin-left : 8px;
padding : 0 12px;
float : left;
box-sizing : border-box;
max-width : 100%;
position : relative;
background : #e0e0e0;
color : #424242;
min-width : 20px;
font-weight : 600;
line-height : 24px;
height : 22px;
border-radius : 10px;
}
.grid-header-title {
padding : 10px;
align-items : center;
display : flex;
}
.grid-header-right-align .ui-grid-cell-contents {
justify-content : flex-end;
}
div[ng-view] > div, div[ng-view] > md-content, div[ng-view] > form {
width : 100%;
}
div[ecw-active-window] {
position : fixed;
width : initial;
height : 0%;
right : 0;
z-index : 51;
}
@media screen and (min-width: 2200px) {
div[ecw-active-window] {
left : 1920px;
}
}
div[ecw-active-window] .active-window {
position : relative;
right : 0;
bottom : 0;
background : white;
color : #333;
border-left : 1px solid #ccc;
height : 100%;
}
div[ecw-active-window] .title {
position : absolute;
right : 0;
top : 150px;
transform : rotate(-0deg);
background : orange;
color : white;
font-weight : bold;
padding : 10px 7px;
writing-mode : vertical-lr;
cursor : pointer;
white-space : nowrap;
}
@media all {
}
div[ecw-active-window] .active-window-content {
width : 200px;
height : 100%;
overflow : auto;
}
@media screen and (min-width: 2200px) {
div[ecw-active-window] .active-window-content {
width : 250px !important ;
}
}
div[ecw-active-window] .active-window-content.hide-acw {
width : 0;
height : 0;
}
div[ecw-active-window] .active-window-content .button-text {
padding : 10px 10px;
cursor : pointer;
font-size : 14px;
border-bottom : 1px solid #ccc;
}
div[ecw-active-window] .active-window-content .button-text.active md-icon {
color : white;
}
div[ecw-active-window] .active-window-content .button-text.active, div[ecw-active-window] .active-window-content .button-text:hover {
color : white;
}
ecw-search-form {
display : none;
}
.time-input-buttons-wrapper {
position : absolute;
right : 0;
}
@media all {
.time-input-buttons-wrapper {
bottom : 0;
}
}
.time-input-buttons-wrapper .time-input-button {
width : 20px;
height : 13px;
padding : 0;
background : #EEE;
border : rgb(0, 0, 0, 0.24) solid 1px;
}
.time-input-buttons-wrapper .time-input-button md-icon {
width : 10px;
height : 10px;
min-width : 10px;
min-height : 16px;
font-size : 10px;
}
.slide-in.ng-enter {
animation : fadeInUp 1s;
}
.slide-in.ng-leave {
animation : fadeOutDown 1s;
}
input[type="number"] {
appearance : none;
margin : 0;
}
.export-as {
font-size : 14px;
float : left;
margin-right : 10px;
}
.export-wrapper {
margin : 0 10px;
align-items : center;
display : flex;
}
.export-wrapper img {
margin : 0 5px;
cursor : pointer;
height : 21px;
width : 16px;
}
.login-form .login-wrapper {
min-width : 320px;
z-index : 2;
width : 350px;
top: 20px;
position: relative;
left: 27%;
}
.login-form .title {
font-size : 20px;
color : #000000;
}
.login-form .reset {
width : 320px;
font-size : 15px;
color : white;
}
.login-form .content {
background :#D4D9E8;
}
.login-form .image {
margin-top : 60px;
margin-left : auto;
margin-right : auto;
}
@media screen and (max-width: 600px) {
.login-form .image {
width : 250px;
}
}
.login-form .copyrights {
font-size : 12px;
color : black;
text-align : center;
}
.login-form .forgot-password {
font-size : 14px;
color : black;
}
.login-form .forgot-password .click-here {
color : #2F448F;
cursor : pointer;
}
.login-form .forgot-password .click-here:hover {
text-decoration : underline;
}
.login-form .input-container > label {
color : white !important ;
}
.login-form .input-container {
position : relative;
margin-bottom : 20px;
display : flex;
}
.login-form .input-container input {
height : 34px;
width : 100%;
border : 0;
outline : 0;
padding-left : 5px;
border-top-right-radius : 4px;
border-bottom-right-radius : 4px;
}
.login-form .input-container .icon-container {
background-color : #fff;
display : flex;
align-items : center;
justify-content : center;
width : 35px;
border-bottom-left-radius : 4px;
border-top-left-radius : 4px;
}
.login-form .input-container .icon-container md-icon {
margin : 0;
color : rgb(0, 0, 0, 0.38);
font-size : 16px;
height : 16px;
width : 16px;
min-height : 16px;
min-width : 16px;
}
.filtered-menu-dropdown {
position : absolute;
z-index : 50;
display : flex;
background : white;
background-color : #fff;
background-clip : padding-box;
border-radius : 0;
box-shadow : 0 6px 12px rgb(0, 0, 0, 0.15);
min-width : 150px;
}
.filtered-menu-dropdown button:not(:hover) {
color : black;
}
.filtered-menu-item button {
font-weight : bold;
text-align : left;
background : white;
border : 0;
width : 100%;
display : flex;
align-items : center;
}
.filtered-menu-item button.md-primary-bg span.md-primary-fg, .ecw-app-header .filtered-menu-item button:hover span.md-primary-fg, .ecw-app-header .search-input button:hover span.md-primary-fg {
color : inherit !important ;
}
.ecw-app-header .search-input input {
width : 150px;
height : 30px;
border-radius : 4px;
}
.color-inherit {
color : inherit !important ;
}
.content-border {
border : #ececec solid 1px;
}
.custom-dropdown-wrapper {
position : absolute;
width : 100%;
height : 100%;
background : rgb(102, 102, 102, 0.65);
z-index : 50;
display : flex;
align-items : center;
justify-content : center;
}
.custom-dropdown {
width : 80%;
padding : 10px;
background : white;
background-color : #fff;
background-clip : padding-box;
border : #ccc solid 1px;
border : rgb(0, 0, 0, 0.15) solid 1px;
border-radius : 0;
box-shadow : 0 6px 12px rgb(0, 0, 0, 0.15);
font-size : 15px;
}
.custom-dropdown button.md-button {
min-width : 50px;
}
.invalid-message {
padding-left : 3px;
color : #dd2c00;
font-weight : bold;
font-size : 12px;
}
.bd-t2 {
border-top : 2px solid;
}
.ecw-slider {
overflow : hidden;
height : 0;
}
.ripple-wrap {
display : none;
overflow : hidden;
position : absolute;
z-index : 1000;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
@keyframes RIPPLER {
0% {
border-width : 0;
}
40% {
height : 0;
width : 0;
border-width : 1500px;
margin-top : -1500px;
margin-left : -1500px;
}
41% {
height : 0;
width : 0;
border-width : 1500px;
margin-top : -1500px;
margin-left : -1500px;
}
100% {
border-width : 1500px;
height : 2000px;
width : 2000px;
margin-top : -2500px;
margin-left : -2500px;
border-color : whitesmoke;
}
}
.ripple {
display : block;
height : 0;
width : 0;
border-width : 0;
border-style : solid;
border-radius : 100%;
position : absolute;
top : 300px;
left : 300px;
animation : none;
}
.ripple-wrap.goripple {
display : block;
}
.ripple-wrap.goripple .ripple {
animation-name : RIPPLER;
animation-duration : 1s;
animation-fill-mode : forwards;
}
table.grid-table {
width : 100%;
border-spacing : 0;
border : #CCC solid 1px;
border-top : 0;
margin-bottom : 25px;
}
table.grid-table tr td, table.grid-table tr th {
border-right : 1px solid #ececec;
}
table.grid-table tr td input, table.grid-table tr td span {
border : 0;
padding : 5px 5px;
width : 100%;
}
table.grid-table tr td input[disabled], table.grid-table tr td span[disabled] {
background : none;
}
table.grid-table tr td span {
display : block;
}
table.grid-table tr td md-select[disabled] md-select-value {
background : none;
border : 0;
}
table.grid-table tr th[colspan] {
border-bottom : 1px solid #ececec;
}
table.grid-table tr th {
color : white;
padding : 8px;
}
.md-dialog-container-AEx {
background : #FFFFFF;
display : flex;
justify-content : center;
align-items : center;
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 80;
overflow : hidden;
}
.releaseLabel {
padding-right : 150px;
line-height : 35px;
width : 70%;
border-bottom : 1px solid #CCCCCC;
}
.releasebtn {
width : 30%;
text-align : right;
border-bottom : 1px solid #CCCCCC;
}
.releasePopup {
min-width : 500px !important ;
}
.releaseDiv {
padding : 0 5px 0 5px;
}
.version-icon {
font-size : 15px;
padding-top : 3px;
}
.background-container {
width : 100%;
background-color : #fff;
height : 45px;
}
.sticky-buttons-wrapper {
position : fixed;
bottom : 22px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
}
.createpbbooking {
position : fixed;
bottom : 26px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 2px;
}
.t-tab {
top : 10px;
}
.res-dashboard ecw-tab {
padding : 10px 0 !important ;
}
.bulkbooking {
position : fixed;
bottom : 26px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 2px;
}
/** div:nth-child(6) .ui-grid-icon-angle-down {
display : block;
}
div:nth-child(7) .ui-grid-icon-angle-down {
display : none;
}
div:nth-child(11) .ui-grid-icon-angle-down {
display : none;
}
div:nth-child(12) .ui-grid-icon-angle-down {
display : none;
}
div:nth-child(13) .ui-grid-icon-angle-down {
display : none;
}
div:nth-child(14) .ui-grid-icon-angle-down {
display : none;
}
div:nth-child(15) .ui-grid-icon-angle-down {
display : none;
}  **/
.ui-grid-column-menu-button-last-col{
    margin-right: 5% !important;
}

.flight-container {
position : fixed;
bottom : 25px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 211px;
}
.export {
position : fixed;
bottom : 20px;
right : 0;
left : 0;
top : calc(89vh - 0);
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 12px;
padding-left : 60px;
}
.contact-support-text {
font-size : 16px;
color : #333;
margin : 8px;
}
.flightdashboardinbound {
position : fixed;
bottom : 26px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 0;
padding-left : 409px;
display : flex;
justify-content : flex-end;
}
.flightmanagementdashboard {
position : fixed;
bottom : 26px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 0;
padding-left : 225px;
display : flex;
justify-content : flex-end;
}
.freightbooking {
position : fixed;
bottom : 22px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.invoicedashboard {
position : fixed;
bottom : 27px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
}
.postflight {
position : fixed;
bottom : 27px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 800px;
display : flex;
justify-content : flex-end;
}
.background-container {
width : 100%;
background-color : #fff;
height : 45px;
}
.contact-support-container {
margin-left : 5px;
display : flex;
align-items : center;
cursor : pointer;
margin-right : -10px;
}
.support {
cursor : pointer;
}
.contact-support-text {
font-size : 16px;
color : #333;
margin : 8px;
}
.footer-BGcontainer {
width : 100%;
background-color : #fff;
box-shadow:rgba(100, 100, 111, 0.5) 0px 4px 10px 0px;
}
.newfooter{
padding-top:3px;
margin-right:6px;
}
.material-icons.changeTheme {
margin : 0 3px 0 14px;
line-height : 24px;
font-size : 24px;
color : #0085C9;
}
.pd00 {
padding : 0;
}
.pd01 {
padding : 5px;
margin-left : -9px;
}
.pd02 {
padding : 0 0;
}
.searchCall {
position : fixed;
bottom : 27px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.invoice {
position : fixed;
bottom : 27px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.target-actual {
padding : 5px;
}
.flight-management {
padding : 10px 0!important;
background: none !important;
}
.res-search {
margin : 5px 5px 5px 6px;
}
.res-search-arrow {
margin : 5px 6px 6px -3px;
}
.submitok {
padding : 0 6px;
}
.cass-hot {
margin-right : 26px;
}
.search-sales {
padding : 10px 24px 0 0;
}
.cargoacceptance {
padding : 0 22px;
}
.purchasedashboard {
position : fixed;
bottom : 27px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.supplierinvoice {
position : fixed;
bottom : 28px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.supplier {
bottom : 15px;
}
.cassdash {
padding : 0 35px;
}
.usermanage {
position : fixed;
bottom : 28px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.chargecode {
position : fixed;
bottom : 28px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.companys {
position : fixed;
bottom : 28px;
right : 0;
left : 0;
background : white;
padding-right : 20px;
z-index : 48;
border-top : 1px solid rgb(0, 0, 0, 0.1);
box-shadow : 0 2px 4px rgb(11, 81, 32, 1);
padding-top : 1px;
padding-left : 560px;
display : flex;
justify-content : flex-end;
}
.dataupload {
padding : 0;
}
.tariffmargin {
margin-right : 5px;
}
.messageboard {
height : 37px;
}
.pd-r101 {
padding-right : 20px;
}
.customerstatistics {
padding : 10px 0 !important ;
}
.dash-card {
box-shadow : 0 4px 8px rgb(0, 0, 0, 0.1);
border-radius : 8px;
margin : 10px;
padding : 15px;
align-items : center;
width : calc((100% / 4) - 6px);
cursor : pointer;
}
.fonts {
font-size : 20px !important ;
font-weight : bold;
}
.dropdown {
position : relative;
display : inline-block;
}
.dropbtn {
background-color : #fff;
color : #000;
font-size : 16px;
border : none;
cursor : pointer;
font-weight : bold;
display : flex;
justify-content : flex-end;
position : relative;
bottom : 20px;
left : 40px;
}
.dropdown-content {
display : none;
position : absolute;
background-color : #f9f9f9;
min-width : 160px;
box-shadow : 0 8px 16px 0 rgb(0, 0, 0, 0.2);
z-index : 30;
right : 0;
}
.dropdown-content a {
color : black;
padding : 12px 16px;
text-decoration : none;
display : block;
}
.dropdown-content a:hover {
background-color : #f1f1f1;
}
.imageheight {
height : 60px;
}
.numberHeight {
font-size : 40px;
font-weight : bold;
}
.mr-12 {
width : 12% !important ;
}
.dash-card.tonnage {
display : flex;
flex-direction : row;
justify-content : space-around;
}
.dash-card.tonnage .label {
display : flex;
align-items : center;
flex-direction : row;
}
.gridpad {
padding : 0 10px;
}
.flightpopup {
position : relative;
font-size : 20px !important ;
}
.mgtform {
width : 100%;
}
.mr-t6 {
margin : 5px 6px 5px 0;
}
.lock {
position : absolute;
right : 10px;
top : 50%;
transform : translateY(-50%);
cursor : pointer;
}
.pd20 {
padding : 20px;
}
.picture {
margin-top : 40px !important ;
}
.pd-b20 {
padding-top : 5px !important ;
}
.pd30 {
border-radius : 4px;
}
.loginForm {
transition : font-weight 0.3s ease !important ;
}
.btn:hover {
font-weight : bold;
}
body {
font-family : Arial, sans-serif;
margin : 0;
padding : 0;
}
.mr-20 {
margin-right : 10px !important ;
}
.container {
display : flex;
width : 1512px;
border-radius : 5px;
overflow : hidden;
gap : 10px;
padding : 6px;
padding-top : 2px;
background-color : #fff;
justify-content: space-between;
}
.section {
display : flex;
flex-direction : row;
justify-content : space-between;
border-radius : 5px;
padding : 0 0;
}
.data-padding-space {
margin-top : 6px;
}
.shipment-info-width ,.finance-info-kk-width , .finance-info-stb-width {
width : fit-content;
}
.shipment-info-width .rights,.finance-info-kk-width .rights , .finance-info-stb-width .rights {
    padding: 7px 10px;
    text-align: center;
}
.shipment-info-width .rights:last-child,.finance-info-kk-width  .rights:last-child , .finance-info-stb-width  .rights:last-child {
    border-right: none;
}
.font-weight {
font-weight : bold;
font-size : 14px;
}
.font-weight-1 {
font-weight : 200;
}
.margin-top-space-ctrl {
margin-top : 10px;
}
.title {
font-weight : bold;
line-height : 1.4;
}
.item {
margin : 5px 0;
text-align : center;
line-height : 1.4;
}
.item span {
display : block;
font-size : 0.8em;
line-height : 2.4;
margin-top : 0;
font-size : 15px !important ;
}
.shipment-info {
background-color : #f9f9f9;
align-self: center;
text-align: center;
}
.finance-info-kk {
background-color : #D5FCE5;
}
.finance-info-stb {
background-color : #FFF6DD;
}
.flight-info {
display : flex;
border : #ccc solid 1px;
border-radius : 5px;
overflow : hidden;
margin : 6px;
box-shadow : 0 2px 4px rgb(0, 0, 0, 0.1);
width : 100%;
height : 95px;
}
.flight-info .section {
padding : 15px;
}
.flight-info .section.flight-details {
display : flex;
align-items : flex-start;
background-color : #fff;
justify-content : flex-start;
width : 61vh;
margin-right : 0;
flex-direction: column;
}
.big-b {
line-height : 33px;
}
.fdetails {
width : 100%;
}
.blue-color {
color : #329ee8;
font-weight : bold;
font-size : 15px;
}
.rights {
border-right : 2px solid #ccc;
padding : 7px;
}
.flight-info .section.flight-details img {
width : 40px;
margin-right : 10px;
}
.flight-info .section.flight-details .details {
display : flex;
flex-direction : row;
}
.flight-info .section.flight-details .details span {
margin-bottom : 5px;
}
.flight-info .section.flight-details .details .status {
color : green;
font-weight : bold;
}
.flight-info .section.financial-details {
display : flex;
justify-content : space-around;
align-items : flex-start;
flex-grow : 1;
background-color : #fff;
position : relative;
margin-top : -1px;
}
.flight-info .section.financial-details .financial-item {
text-align : center;
padding : 2px;
}
.big {
font-size : 14px;
}
.adjust {
display : flex;
flex-direction : column;
}
.flight-info .section.financial-details .financial-item span {
display : block;
}
.flight-info .section.financial-details .financial-item .value.green {
color : green;
font-weight : bold;
font-size : 15px;
}
.flight-info .section.financial-details .financial-item .value.blue {
color : blue;
}
.full-card {
border : #EAEAEA solid 2px;
}
.content-header_1 {
background-color : #fff;
}
width-90_1 {
width : 1522px;
}
.data-row {
display : flex;
justify-content : space-between;
font-family : Arial, sans-serif;
}
.flight-date-size {
margin-top : 24px;
font-size : 15px;
}
.data-row .flight-date, .data-row .reg-no, .data-row .origin, .data-row .route, .data-row .dest, .data-row .etd, .data-row .aircraft {
width : auto;
}
.font-weigt {
font-weight : 100;
font-size : 1rem;
}
.pd_space {
margin-top : -37px;
}
.rights_2 {
padding : 7px;
}
.font-style {
margin : 0 0 0 10px !important ;
}
.big-d {
margin-left : -5px;
}
.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900 !important;
}

.flight-details .adjust .flight-no{
    display: flex;
    flex-direction: row;
}
.flight-details .adjust .flight-no md-icon{
    font-size: 20px!important;
        margin: 5px 0;
}
.flight-details .flight-det-row{
    display: flex;
    flex-direction: row;
    width: 100%
}
.flight-details .flight-det-row .section{
    padding: 0px !important
}
.flight-details .data-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
}
.flight-details .flight-det-row .adjust .label{
    font-size: 14px;

}
.shipment-data{
    font-size: 16px;
    margin: 8px 0;
}
.container.fdetails .section{
    align-items: center;
}
.popup-container {
       position: absolute;
       left: 220px;
       top: 4px;
}
.post-flight-video{
    position: fixed;
    cursor: pointer;
    right: 26px;
    bottom: 48px;
    z-index: 1000;
}
.modal {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it appears above other content */
}
.modal-content {
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 230px;
    position: fixed;
    right: 10px;
    bottom: 155px;
}
.modal-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: 55px;
    border-width: 15px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.watch-video{
    justify-content: center;
    background: #058ffc;
    border-radius: 4px;
    top: 5px;
    cursor: pointer;
    width: 94%;
    color: #fff;
    font-size: 14px !important;
}
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it appears above other content */
}
.video-modal-content {
    background: white;
    padding: 10px 10px 10px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 800px; /* Adjust width as needed */
}
.sizes {
    font-size: 18px !important;
    line-height:10px !important;
    width: 98%
}
.parasizes {
    font-size: 16px !important;
    line-height: 20px !important;
    color: #333333 !important;
    margin: 0px 0px 10px 0px!important;
    text-align: center;
}
.close-button {
    position: absolute; /* Position it relative to your modal */
    top: 10px;
    right: 10px;
    background: none; /* Remove default background */
    border: none; /* Remove default border */
    cursor: pointer;
}
.material-icons {
    font-size: 24px; /* Adjust size if needed */
    color: #000; /* Set icon color */
}
.fontVariation {
    line-height: 0px !important;
    position: relative;
    bottom: 0px;
    width:95%;
}
.video-model-header{
    position: fixed;
    right: 25px;
    }
    .bg-colour {
        background-color: #152F88;
        border: none;
        border-radius: 4px;
        padding: 2px !important;
        margin: 5px;
        min-width: 100px !important;
    }

   .popup {
       position: fixed;
       top: -2.70%;
       right:0%;
       width: 32%;
       height: 96%;
       display: flex;
       justify-content: center;
       align-items: center;
       visibility: hidden;
       opacity: 0;
       transition: opacity 0.3s ease, visibility 0.3s ease;
   }
   .popup.active {
       visibility: visible;
       opacity: 1;
   }

   .popup-body {
       width: 80%;
       height: 80%;
       background: #fff;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
   }

   .popup-close {
       position: absolute;
       top: 14.3%;
       right: 14.3%;
       background: none;
       border: none;
       font-size: 24px;
       color: #152F88;
       cursor: pointer;
   }
   .logo-alignment {
   height:18px;
   position: relative;
   top:2px;
   }
   .text-correction {
       color: white;
       font-size: 14px;
       font-weight: bold;
   }
   .imagePicture {
       width: 70%;
       margin: 0% 15% -1%;
   }
   .social-Icon {
   padding: 4px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   display: inline-block;
   width: auto !important;
   }
   .emailtitle {
   font-size: 14px;
   color: #000000;
   font-weight: normal;
   line-height: 1.4;
   padding: 4px 0px;
   }
   .pd4 {
   padding : 6px ;
   }
   .pd2 {
       padding: 2px;
   }
   .br6 {
   border-radius : 6px;
   }
   .loginbutton {
       position: absolute;
       padding: 0px 4px;
       color: white;
   }

   /* Hover Animation */
   .material-icon-btn:hover {
       background-color:  #53575C !important; /* Darker shade on hover */
       transform: scale(1); /* Slight zoom effect */
       box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
   }

   /* Material Icon Styling */
   .material-icons {
       font-size: 24px; /* Icon size */
       transition: transform 0.3s ease;
   }
   .colors {
   color: inherit !important;
   }

   /* Icon Animation */
   .material-icon-btn:hover .material-icons {
       transform: translateX(5px); /* Slide icon to the right on hover */
   }

.custom-dropdown {
    width: 100%;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    box-shadow : 0 3px 6px rgb(0, 0, 0, 0.15) !important;
}

.custom-dropdown:disabled {
    background-color: #eaeaea;
    color: #aaa;
    cursor: not-allowed;
}

.ui-grid-awaiting-postflight {
    display: flex;
    align-items: center;
    justify-content: center;
}
.Break-function {
    text-align: center;
    white-space: normal;
    font-weight: bold;
    line-height: 1.2;
}
.center-align-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
@media screen and (max-width: 425px) {
.ecw-footer {
margin-top : 768px;
margin-left : -9px;
}
}
@media (max-width: 768px) {
.layout-sm-column {
flex-direction : row;
}
.login-form .login-wrapper {
    left: 20%;
}
.social-icons {
    right: 12vh !important;
    }
}
@media (max-width: 1024px) {
.pd-r11 {
padding-right : 5px !important ;
}
.ecw-app-header .search-input input {
width : 100px !important ;
}
.mr-r10 {
margin-right : 0 !important ;
}
.pd-h {
height : 25px;
}
.side-input {
width : 60px !important ;
}
.ecw-app-header .user-info {
padding : 0 2px !important ;
}
.mr-t0 {
  margin-top: 110px !important;
 }
.social-icons {
 right: 12vh !important;
 }
}
@media screen and (min-width: 1025px) and (max-width: 1240px) {
.pd-r12 {
padding-right : 25px !important ;
}
.ecw-app-header .search-input input {
width : 120px !important ;
}
.footerExpand {
margin-left: 20px;
}

}
@media screen and (min-width: 1241px) and (max-width: 1280px) {
.login-form .login-wrapper {
 top: 10px !important;
}
.social-icons {
    right: 28vh !important;
}
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {

    .social-icons {
       right: 30vh !important;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1919px){
.footerExpand {
margin-left: 20px;
margin-top: 3px;
}
}



.airport-number-input::-webkit-inner-spin-button,
.airport-number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.airport-number-input {
  -moz-appearance: textfield;
}

/* power bi related CSS ---start*/
@keyframes blinkbi {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
.blinking-button-bi {
  animation: blinkbi 1s infinite;
}
.blinking-button-bi:hover {
  animation: none;
  opacity: 1;
}
.blinking-red {
    background-color: rgb(219 4 4) !important;
    color: white !important;
    animation: blinkbi 1s infinite;
    border-radius: 4px;
}
/*power bi related CSS ---end*/