@font-face{ font-family:TmSans;
            src:url(../fonts/TMSans-Regular.eot);
            src:url(../fonts/TMSans-Regular.eot?#iefix) format('embedded-opentype'),
                url(../fonts/TMSans-Regular.woff) format('woff'),
                url(../fonts/TMSans-Regular.ttf) format('truetype'),
                url(../fonts/TMSans-Regular.svg#TMSans-Regular) format('svg');
            font-weight:400;
            font-style:normal;
}
@font-face{ font-family:TmSans;
            src:url(../fonts/TMSans-Bold.eot);
            src:url(../fonts/TMSans-Bold.eot?#iefix) format('embedded-opentype'),
                url(../fonts/TMSans-Bold.woff) format('woff'),
                url(../fonts/TMSans-Bold.ttf) format('truetype'),
                url(../fonts/TMSans-Bold.svg#TMSans-Regular) format('svg');
            font-weight:700;
            font-style:normal;
}

body {
    font-family: TmSans;
    background-color: #F7F7F7 !important;  
}

/* required for jquery popup of date and time */
a.ui-state-default {
    background: #414141 !important;
}
a.ui-state-default:hover {
    background: #515151 !important;
}
a.ui-state-active {
    background: #007fff !important;
}
a.ui-state-active:hover {
    background: #1E8AF7 !important;
}

a, a:link, a:visited {
    outline: 0;
    color: #009CDE !important;
    text-decoration: none;
    font-weight: normal;
}
a:hover, a.active {
    outline: 0;
    color: #009CDE !important;
    text-decoration: none !important;
    font-weight: normal;
}

.angularScope {
    display: none;
    padding: 0px;
    margin-top: 48px;
    margin-bottom:32px;
    padding-bottom:32px;
}

.footer {
    bottom: 0px;
    position:fixed;
    padding: 8px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    background-color: #F7F7F7 !important;
}
@media (max-width: 768px) {
    .footer {
        display: none;
    }
}

.loginbar {
    height: 48px;
    margin-bottom: 8px;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    display: table;
    background-color: #009CDE !important;
}
.loginbar>div {
    display: table-cell;
    vertical-align: middle;
}
.loginLanguage {
    margin: 2px; 
    cursor: pointer;
}
.loginForgotPassword {
    margin-top: 20px;
    cursor: pointer;
    color: #009CDE !important;
    text-decoration: underline;
    white-space: nowrap;
}

.topbar {
    top: 0px;
    position: fixed;
    height: 48px;
    padding: 0px;
    margin: 0px;
    background-color: #009CDE !important;
    z-index: 9998;
}
.topbar .icon,
.topbar .logo {
    height: 48px;
    margin-right: 8px;
}
.topbar .icon { 
    cursor: pointer;
}
@media (max-width: 768px) {
    .topbar .logo {
        display: none;
    }
}
.topbar .title { 
    height: 48px;
    color: #FFFFFF !important;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    display: table; 
}
.topbar .title>div {
    display: table-cell;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .topbar .title {
        font-size: 18px;
        line-height: 20px;
    }
}
.topbar .menu {
    padding-bottom: 8px;
    height: auto;
    border-left: 1px solid #009CDE;
    border-right: 1px solid #009CDE;
    border-bottom: 1px solid #009CDE;
    background-color: #F7F7F7 !important;
}
.topbar .button {
    margin: 4px;
    padding: 8px;
}

.button {
    padding: 10px 20px 10px 20px;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 6px;
    background-color: #009CDE !important;
}
.button:hover {
    background-color: #008BC7 !important;
}
.button:active {
    font-weight: bold;
    background-color: #008BC7 !important;
}

.popup {
    top: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8) !important;
    z-index: 9999;
}
.popupDark {
    top: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85) !important;
    z-index: 9999;
}
.popup .closeButton,
.popupDark .closeButton {
    margin: 8px;
    cursor: pointer;    
    font-size: 48px;
    font-weight: bold;
}
.popup .closeButton {
    color: #009CDE !important;
}
.popupDark .closeButton {
    color: #FFFFFF !important;
}
.popup .wrapper {
    right: 0;
    left: 0;
    position: fixed;
    top: 20%;
    margin-right: auto;
    margin-left: auto;
    padding: 8px;
    text-align: center;
    border: 6px solid #009CDE;
    border-radius: 8px;
    background-color: #FFFFFF !important;
}
.popup .content { 
    padding: 8px;
    color: #009CDE !important;
    font-size: 16px;
    font-weight: bold;
    white-space: pre-wrap;
}

.x-scrollable {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.y-scrollable {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.xy-scrollable {
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
}
.header {
    padding-top: 16px;
    color: #009CDE !important;
    font-size: 16px;
    font-weight: bold;
}
.action {
    cursor: pointer;
    color: #009CDE !important;
    font-size: 14px;
    font-weight: normal;
}
.formOverlay {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5) !important;
    z-index: 9997;
}
.list {
    height: calc(100vh - 120px);
}
.mytable { 
    width: 100%;
    margin: 0 auto;
    font-size: 13px;
    font-weight: normal;
}
.mytable input.myfilter {
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: rgba(0,0,0,0) !important;
}
.mytable input.myfilter:focus {
    color: #FF0000 !important;
}
.mytable tr.mytitle {
    padding-top: 8px;
    color: #009CDE !important;
    font-size: 14px;
    font-weight: bold;
}
.mytable tr.myrow_type_0 {
    color: #000000 !important;
}
.mytable tr.myrow_type_1:nth-of-type(odd) {
    color: #FFFFFF !important;
    background-color: #5A5A5A !important;
}
.mytable tr.myrow_type_1:nth-of-type(even) {
    color: #FFFFFF !important;
    background-color: #828282 !important;
}
.mytable tr.myrow_type_2 {
    color: #FFFFFF !important;
    font-weight: bold;
    background-color: #009CDE !important;
}
.mytable td {
    text-align: left;
    padding-left: 10px;
    vertical-align: middle;
}
.mytable td.rightaligned {
    text-align: right;
    padding-right: 10px;
    vertical-align: middle;
}
.mytable td.centered {
    text-align: center;    
    vertical-align: middle;
}
@media (max-width: 768px) {
    .mytable { 
        font-size: 10px;
    }
    .mytable tr.mytitle {
        padding-top: 4px;
        font-size: 11px;
    }
    .mytable td {
        padding-left: 5px;
    }
    .mytable td.rightaligned {
        padding-right: 5px;
    }
}