:root {
    --smart-turquoise: #1DC6C6;
    --smart-blue: #008FBE;
    --smart-blue-hover: #006cbe;
    /*--smart-green: #80BC00;*/
    --smart-green-light: #008F90;
    --smart-green: #005c64;
    --smart-green-hover: #03373b;
    --smart-light-blue: #00A4FF; /*0, 164, 255*/

}

.backgroundPanel {
    /*background-color: #F0F0F0;*/
    background-color: white;
}

.rootDockLayoutPanel {
    /*background-color: #FFFFFF;*/
    background-color: #F0F0F0;
    margin: 10px 25px 5px 25px;
}

.mainUIlabelFooter {
    font-family: 'Fira Mono', monospace;
    font-size: 14px;
    text-align: right;
}

.imagebutton {
    opacity: 1.0;
}

.imagebutton-up-hovering {
    opacity: 0.5;
}

.imagebutton-down-hovering {
    /*background-color: #1975D1;*/
    opacity: 0.5;
}

.mainTextButtonRed, .mainTextButtonBlue, .myButtonGreen {
    color: white;
    height: 30px;
    border-radius: 5px;
    font-weight: bold;
}

.mainTextButtonBlue {
    background-color: #4485F5;
}

.mainTextButtonRed {
    background-color: #D74A38;
}

.mainTextButtonBlue:hover {
    background-color: #2062B8;
}

.mainTextButtonRed:hover {
    background-color: #a24231;
}

.myButtonGreen {
    background-color: #2B6E66;
}

.myButtonGreen[disabled] {
    background-color: #2B6E66;
    opacity: 0.5;
}

.myButtonGreen[disabled]:hover {
    background-color: #2B6E66;
}

.myButtonGreen:hover {
    background-color: #1a3f37;
}

.labelDataTextLarge {
    color: #006BB7;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

.labelDataTextMedium {
    color: #006BB7;
    padding-right: 4px;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

.labelDataTextSmall {
    color: #006BB7;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.dlgMargin {
    margin: 10px;
}

.dlgTitle {
    font-size: 22px;
    font-family: Roboto;
    background-color: white;
    text-align: left;
    /*color: #628CD5;*/
    color: #2A3A59;
}

.dlgSubTitle {
    font-family: Roboto;
    font-size: 11pt;
    font-style: italic;
    color: #372977;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

.labelDescriptiveText, .labelPageSubHeader {
    font-family: Helvetica Neue, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    color: black;
    margin: 0px 0px 10px;
    text-align: left;
}

.labelPageSubHeader {
    font-size: 12pt;
    font-weight: bold;
}

.labelError {
    font-weight: bold;
    color: red;
    text-decoration: blink;
}

.borderBottom {
    border-bottom: thin solid silver;
}

.borderBottomThick {
    border-bottom: 2px solid var(--smart-green)
}

.flexTableCell {
    border-bottom: thin solid var(--smart-green)
}

.promptInputComment {
    color: #e7961b;
    font-style: italic;
    font-size: 11px;
    /*width: 100%;*/
}

.pageHeader {
    font-size: 16pt;
    font-weight: bold;
    /*color: #777777;*/
    color: var(--smart-green);
}

.pageHeaderSmall {
    font-size: 12pt;
    font-weight: bold;
    color: var(--smart-green);
}

.myButton {
    cursor: pointer;
    font-family: arial;
    font-size: 21px;
    text-decoration: none;
    /*text-align: center;*/
    border-radius: 4px;
    border-style: solid;
    display: table-cell;
    vertical-align: middle;
}


/*.myButton {
  background-color: #D1D3D4;
  color: black;
  display: table-cell;
  vertical-align: middle;
}*/

.myButton:hover {
    background-color: #888;
    color: #ffffff;
}

.myButtonLabel {
    font-size: 16px;
}

.gwt-imagebutton {
    opacity: 1.0;
}

.gwt-imagebutton-up-hovering {
    opacity: 0.5;
}

.gwt-imagebutton-down-hovering {
    /*background-color: #1975D1;*/
    opacity: 0.5;
}

.gwt-imagebutton:focus {
    outline: 0
}

.messageSenderContainer {
    /*background-color: lightblue;*/
    background-color: var(--smart-turquoise);
    /*opacity: 0.4;*/
    width: 380px;
    padding-top: 2px;
    padding-left: 2px;
    /*margin-left: 50px;*/
    margin-bottom: 2px;
    margin-right: 4px;
    float: right;
    border-radius: 4px;
    /*height: 35px;*/
}

.labelKey {
    font-family: Helvetica Neue, sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-right: 10px;
}

.labelValue {
    font-family: Helvetica Neue, sans-serif;
    font-size: 12px;
    font-weight: bold;
    border-bottom: #777777;
    border-bottom-style: solid;
    border-bottom-width: thin;
    width: 100%;

    /*height: 30px;*/
}

.messageSendTextArea {
    /*margin: 3px;*/
    font-family: Helvetica Neue, sans-serif;
    font-size: 12px;
    background-color: white;
    opacity: 1.0;
    color: #403f3f;
    margin-top: 2px;
    margin-right: 3px;
    margin-left: 3px;
    /*margin-bottom: 2px;*/
    /*border:  thin antiquewhite;*/
    width: 300px;
    resize: vertical;
    border-radius: 4px;
}

.textBoxInfoWallMsg {
    resize: none;
    border-radius: 10px;
    /*border: 5px solid #008FBE;*/
    padding: 10px;
    margin-right: 5px;
}

.textBoxInfoWallMsg:focus {
    outline: 0
}

.cardheaderCol1, .cardheadercol2 {
    font-family: Helvetica Neue, sans-serif;
    font-size: 10px;
    font-style: italic;

}

.cardheaderCol2 {
    float: right;
}

.cardmessage {
    font-family: Helvetica Neue, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-weight: normal;
    margin-top: 2px;
    padding: 5px;
    width: 100%;
}

.cardcontainer {
    background-color: white;
    border-radius: 5px;
    border: 2px;
    padding: 5px;
    margin-bottom: 5px;
}


.sendMessageButton {
    /*float: right;*/
    border: red;
}

.sendMessageButton:hover {
    /*float: right;*/
    border: green;
}

.textAreaNotResize {
    resize: none;
}

.textAreaWithBorder {
    background-color: white;
    border: 4px solid #60A312;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 10px;
}

.headerMessage {
    border: 2px solid #dedede;
    /*background-color: #f1f1f1;*/
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    /*padding: 10px;*/
    /*margin: 10px 0;*/
    margin-top: 5px;
    margin-right: 2px;
}

.selected {
    background-color: white;
    border-color: #1236a3;
}

.headerMessageTitle {
    font-family: Arial, sans-serif;
    font-weight: normal;
}

.headerMessageTitleNotRead {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.messageBottomLine {
    /*float: left;*/
    color: #999;
}

.label-right {
    float: right;
}

.childMessage {
    /*background: rgba(243, 197, 197, 0.13);*/
    /*background: #f1f1f1;*/
    background: white;
    border: solid #cccc;
    border-radius: 6px;
    float: right;
    width: 90%;
    margin-top: 2px;
    margin-right: 4px;
    /*margin-left: 50px;*/
    padding: 5px;
    /*margin-bottom: 2px;*/
}

.marketplaceMessageCard {
    /*background: rgba(243, 197, 197, 0.13);*/
    /*background: #f1f1f1;*/
    background: white;
    border: solid #cccc;
    border-radius: 6px;
    /*float: right;*/
    /*width: 100%;*/
    margin-top: 2px;
    margin-right: 4px;
    /*margin-left: 50px;*/
    padding: 5px;
    /*margin-bottom: 2px;*/
}

.borderAll {
    border: thin solid silver;
}

.messageSenderNameMe {
    color: #006BB7;
    float: right;
    margin-right: 8px;
}

.messageSenderNameOther {
    color: #ef0a1c;
    float: right;
    margin-right: 8px;
}

.imageButton16Blury {
    opacity: 0.2;
    /*padding-left: 3px;*/
    /*margin-right: 5px;*/
    padding-top: 4px;
}

.imageButton16Blury:hover {
    opacity: 1.0;
}

.imageButton16Blury[disabled] {
    opacity: 0.5;
}

.imageButton16Blury[disabled]:hover {
    opacity: 0.5;
}

.buttonCellMargin {
    margin-right: 10px;
}

.cellButtonA {
    background-color: rgb(186, 197, 236);
    color: rgb(253, 253, 253);
}

.cellButtonA:hover {
    background-color: rgb(3, 31, 109);
    color: rgb(253, 253, 253);
}

.cellButtonB {
    background-color: rgb(238, 191, 192);
    color: rgb(253, 253, 253);
}

.cellButtonB:hover {
    background-color: rgb(109, 3, 19);
    color: rgb(253, 253, 253);
}

.myCheckBox {
    color: #781105;
    font-size: 16px;
}

.utwCallOut {
    position: absolute;
    top: 20px;
    left: 100px;
}

.utwUser {
    position: absolute;
    left: 0px;
}

.utwTableNameAndTime {
    color: rgb(3, 31, 109);
}

.utwObjects1 {
    color: black;
}

.utwObjects2 {
    color: darkgrey;
}

.utwCard {
    margin-bottom: 5px;
    background-color: white;
    border: 1px outset gray;
    border-radius: 5px;
}

.utwCard:hover {
    background-color: #c3e2f5;
}

.utwCard:active {
    background-color: #9abfe1;
}

.utwCardSelected {
    background-color: #ccc8c8;
    border: 1px outset var(--smart-light-blue);
    margin-bottom: 5px;
}

.utwCardHeader {
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 5px;
}

.utwCardBody {
    margin-left: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.utwCardDriverName {
    font-size: 12px;
    font-family: Helvetica Neue, sans-serif;
    color: #505050;
}

.utwCardRouteName {
    font-size: 12px;
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    color: #505050;
}

.utwCardLabelBullet {
    border-radius: 10px;
    width: 17px;
    height: 17px;
    border: 1px solid #1DC6C6;
    background-color: #1DC6C6;
}

.buttonToggleOff, .buttonToggleOn {
    background-color: #FFFFFF;
    border: solid #000066;
    width: 70px;
    height: 25px;
    border-radius: 3px;
}

.buttonToggleOn {
    background-color: #0b920e;
    color: white;
}

.colHeaderSnowflake {
    background-image: url("images/snowflake20.png");
    background-repeat: no-repeat;
    /*background-size: 60% 100%;*/
    background-size: 30px 22px;
    height: 19px;
    /*background-attachment: fixed;*/

    /*width: 20% !important;*/
    /*background-color: lightgoldenrodyellow;*/
}

.colHeaderIcy {
    background-image: url("images/icyBlue20.png");
    background-repeat: no-repeat;
    background-size: 60% 100%;
    /*background-attachment: fixed;*/

    /*width: 20% !important;*/
    /*background-color: lightgoldenrodyellow;*/
}

.snowCol {
    background-color: lightgoldenrodyellow;
}

.buttonUser {
    color: #008FBE;
    background-color: transparent;
    background-image: url("images/user-line-72.png");
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-repeat: no-repeat;
    background-size: 95% 95%;
}

.buttonUser:hover, .buttonUser:active {
    opacity: 0.6;
}

/* used in dynamic route cards */
.buttonMessage, .buttonArrowDropDown, .buttonEventLog {
    /*color: #008FBE;*/
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    background-size: 99% 92%;
    width: 30px;
    height: 25px;
}

.buttonEventLog {
    background-image: url("images/history-line.png");
    opacity: 0.5;
    width: 24px;
    margin-right: 10px;
}

.buttonMessage {
    background-image: url("images/mail-line.png");
    opacity: 0.5;
    height: 24px;
}

.buttonMessage:hover, .buttonEventLog:hover {
    opacity: 0.9;
    /*box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.buttonMessage:active, .buttonEventLog:active {
    background-color: lightgray;
    border-radius: 6px;
}

.buttonArrowDropDown {
    background-image: url("images/arrow-drop-down-line.png");
    /*background-image: url("images/mail-line.png");*/
    opacity: 0.5;
}

.buttonArrowDropDown:hover {
    opacity: 1.0;
}

/*Button img add*/
.buttonImgSmartBlueSmallAdd {
    background-color: var(--smart-green);
    background-image: url("images/add-line-white.png");
    border-radius: 8px;
}

.buttonImgSmartBlueSmallAdd:hover {
    background-color: var(--smart-green-hover);
}

.buttonImgSmartBlueSmallAdd:active {
    background-color: var(--smart-green-hover);
}

/*Delete*/
.buttonImgSmartBlueSmallDelete {
    background-color: var(--smart-blue);
    background-image: url("images/delete-bin-2-line.png");
    background-repeat: no-repeat;
    background-size: 24px, 24px;
    background-position: center;
    border-radius: 8px;
}

.buttonImgSmartBlueSmallDelete:hover {
    background-color: var(--smart-blue-hover);
}

.buttonImgSmartBlueSmallDelete:active {
    background-color: var(--smart-blue-hover);
}

/*Delete*/
.buttonImgSmartEnvelope {
    /*background-color: var(--smart-blue);*/
    background: transparent url("images/konvolutt-505050.png") no-repeat center;
    background-size: 30px;
    width: 31px;
    height: 24px;
    border-radius: 8px;
    border: none;
}

.buttonImgSmartEnvelope:hover {
    background-color: lightgray;
}

.buttonImgSmartEnvelope:active {
    background-color: darkgray;
}

.buttonTableMap {
    background: transparent;
    opacity: 0.8;
    background-image: url("images/table-line.png");
    background-repeat: no-repeat;
    background-size: 24px, 24px;
    background-position: center;
    border: transparent;
}

.buttonTableMap:hover {
    opacity: 0.6;
}

.buttonTableMap:active {
    opacity: 1.0;
}

/*ButtonImgSmart Edit*/
.buttonImgSmartBlueSmallEdit {
    background-color: var(--smart-blue);
    background-image: url("images/pencil-fill.png");
    background-repeat: no-repeat;
    background-size: 24px, 24px;
    background-position: center;
    border-radius: 8px;
}

.buttonImgSmartBlueSmallEdit:hover {
    background-color: var(--smart-blue-hover);
}

.buttonImgSmartBlueSmallEdit:active {
    background-color: var(--smart-blue-hover);
}

.buttonZoomToExtent {
    background: transparent;
    opacity: 0.8;
    background-image: url("images/zoomToExtent.png");
    background-repeat: no-repeat;
    background-size: 24px, 24px;
    background-position: center;
    border: transparent;
}

.buttonZoomToExtent:hover {
    opacity: 0.6;
}

.buttonZoomToExtent:active {
    opacity: 1.0;
}

.buttonRemove {
    background-image: url("images/Delete_Icon_32.png");
    background-color: transparent;
    opacity: 0.5;
    width: 32px;
    height: 32px;
    /*margin-bottom: 3px;*/
    border: none;
}

.buttonRemove:hover {
    opacity: 1.0;
}

.buttonMakeRoute {
    background-image: url("images/addBlue24.png");
    background-color: transparent;
    opacity: 0.5;
    width: 32px;
    height: 32px;
    /*margin-bottom: 3px;*/
    border: none;
}

.buttonMakeRoute:hover {
    opacity: 1.0;
}

.btImgRemove {
    background-image: url("images/remove24.png");
    background-color: transparent;
    opacity: 0.5;
    width: 24px;
    height: 24px;
    /*margin-bottom: 3px;*/
    border: none;
}

.btImgRemove:hover {
    opacity: 1.0;
}

.buttonSmartTurquoise, .buttonSmartBlue, .buttonSmartGreen {
    color: white;
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    font-weight: bold;
    border-radius: 7px;
    border-color: white;
    height: 35px;
}

.buttonSmartTurquoise {
    background-color: #1DC6C6;
}

.buttonSmartTurquoise:hover {
    background-color: #0c5e5e;
}

.buttonSmartTurquoise:active {
    background-color: #0c5e5e;
}

.buttonSmartTurquoise:disabled {
    background-color: #1DC6C6;
    opacity: 0.5;
}

.buttonSmartTurquoise:disabled:hover {
    background-color: #1DC6C6;
    opacity: 0.5;
}


.buttonSmartBlue {
    background-color: #008FBE;
    height: 30px;
}

.buttonSmartBlue:hover {
    background-color: #01485e;
}

.buttonSmartGreen {
    /*background-color: #80BC00;*/
    background-color: var(--smart-green);
    border-color: var(--smart-green);
    border-radius: 15px;
    padding-left: 15px;
    padding-right: 15px;
    outline: 0;
}

.buttonSmartGreen:hover {
    background-color: var(--smart-green-hover);
}

.buttonSmartGreen:disabled,
.buttonSmartGreen[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

.menuBar {
    font-size: 16px;
}

.mainMenuToggleButtonOn, .mainMenuToggleButtonOff {
    font-size: 14px;
    /*padding-left: 10px;*/
    font-family: Arial, sans-serif;
    color: rgba(0, 0, 102, 0.55);
    height: 30px;
    background-color: transparent;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    font-weight: normal;
}

.mainMenuToggleButtonOn {
    font-weight: bold;
    border-bottom: 6px solid #1DC6C6;
    background-color: transparent;
}

.listBox {
    overflow: hidden !important;
}

.listBoxPromptLb {
    border: solid 3px;
    border-color: white;
    font-weight: bold;
}

.listBox2 {
    font-family: Helvetica Neue, sans-serif;
    height: 35px;
}

.listBoxPromptLb:active {
}

.listBoxPromptLb:focus {
}

.listBoxPromptContainer {
    border: solid 2px;
    border-color: darkgray;
    border-radius: 3px;
    padding-left: 4px;
}

/*RouteDetailsCard */
.routeDetailsCardMainPanel {
    /*width: 480px;*/
    border: 1px outset gray;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    /*-webkit-box-shadow: 1px 1px 5px rgba(0, 143, 190, 0.4);*/
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    background-color: white;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
}

.routeDetailsCardMainPanel:hover {
    -webkit-box-shadow: 1px 1px 10px rgba(200, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 5px rgba(200, 0, 0, 0.4);
}

.routeDetailsCardMainPanel:active {
    border: 1px outset darkgray;
    -webkit-box-shadow: 1px 1px 10px rgba(200, 200, 200, 0.4);
    -moz-box-shadow: 2px 2px 5px rgba(200, 0, 0, 0.4);
}


.routeDetailsCardHeader {
    border-bottom: 2px darkgray solid;
    margin-top: 4px;
    /*margin-bottom: 8px;*/
    margin-left: 20px;
    width: 440px
}

.routeDetailsCardHeaderSelected {
    border-bottom: 2px var(--smart-green) solid;
}

.RouteDetailsCardBody {
    margin-left: 20px;
    border: 1px;
    width: 440px;
    margin-bottom: 10px;
    /*margin-right: 10px;*/
    /*margin-right: 3px;*/
}

.RouteDetailsCardLabelTitle {
    font-size: 14px;
    font-family: Helvetica Neue, sans-serif;
    color: #505050;
    font-weight: normal;
}

.RouteDetailsCardLabelTitleSelected {
    color: var(--smart-green);
    font-weight: bold;
}

.RouteDetailsCardLabelBulletDynamic {
    border-radius: 10px;
    width: 15px;
    height: 15px;
    border: 1px solid var(--smart-green);
    background-color: var(--smart-green);
    color: white;
    /*background-color: rgb(186, 197, 236);*/
}

.RouteDetailsCardLabelBulletStatic {
    border-radius: 10px;
    width: 15px;
    height: 15px;
    border: 1px solid var(--smart-blue);
    color: white;
    background-color: var(--smart-blue);
}

.RouteDetailsCardLabelBulletGreen {
    border-radius: 10px;
    width: 15px;
    height: 15px;
    border: 1px solid #00FF00;
    background-color: #00FF00;
}


.SelectBox {
    width: 100%;
}

.SelectBoxValue {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    margin-left: 6px;
    color: #505050;
}

.promptLabel {
    /*height: 25px;*/
}

.weatherConditionCardContainer {
    background-color: transparent;
    margin-bottom: 5px;
}

.weatherConditionCard, .weatherConditionCardSelected {
    width: 100px;
    margin-left: 5px;
    padding-top: 5px;
    padding-left: 10px;
    /*padding-bottom: 5px;*/
    border: 3px solid white;
    border-radius: 6px;
    background-color: white;
}

.weatherConditionCard:hover {
    background-color: lightgray;
    border: 3px solid #1DC6C6;
}

.weatherConditionCard:active {
    background-color: darkgray;
    border: 3px solid #1DC6C6;
}

.weatherConditionCardSelected {
    background-color: lightgray;
    border: 3px solid var(--smart-light-blue);
}


.weatherConditionCardLabelSnow {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    margin-left: 10px;
    color: #008FBE;
    cursor: default;
}

.weatherConditionCardLabelIce {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    margin-left: 10px;
    color: red;
    cursor: default;
}

.weatherConditionCardLabelTime {
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    margin-left: 10px;
    color: #7b7878;
    font-size: 18px;
    cursor: default;
}

.flexTableHeaderContent {
    font-family: Helvetica Neue, sans-serif;
    background-color: #2062B8;
    color: white;
    font-style: italic;
    border: thin solid #444444;
    border-right-color: #111111;
    border-bottom-color: #111111;
    /*margin-bottom: 2px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    /*width: available;*/
}

.flexTableRowContent {
    font-family: Helvetica Neue, sans-serif;
    width: available;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.flexContainerScrollPanel {
    width: available;
}

.flexTableBackgroundPanel {
    border-color: white;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    width: fit-content;
}

.buttonImageText {
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 20px 20px;
    background-color: transparent;
    border: none;
    margin: 0 15px;
    padding: 20px 0 0 0;
    text-align: center;
}

.popupPanelContainer {
    padding: 10px;
    background-color: white;
    /*background-color: var(--smart-turquoise);*/
    border: 3px solid var(--smart-turquoise);
    border-radius: 5px;
}

.popupPanelContainerBlue {
    padding: 10px;
    background-color: white;
    border: 3px solid var(--smart-blue);
    border-radius: 5px;
}

.myRadioButtonPanel {
    cursor: pointer;
    opacity: 1.0;
    border: 1px solid #D1D3D4;
    border-radius: 3px 0 0 3px;
}

.myRadioButtonImg {
    padding-left: 5px;
    padding-top: 3px;
}

.myRadioButtonCbOn, .myRadioButtonCbOff {
    font-family: sans-serif;
    font-weight: normal;
    border-radius: 3px 0 0 3px;
    height: 25px;
    width: 25px;
    padding-bottom: 7px;
    text-indent: 7px;
    cursor: pointer;
}

.myRadioButtonCbOn {
    /*background-color: #4DCB6D;*/
    background-color: #0080ff;
    /*color: #9CE2AE;*/
    color: white;
    font-weight: bold;
}

.myRadioButtonCbOff {
    background-color: #D1D3D4;
    color: #D1D3D4;
}

.myRadioButtonCbOff:before:hover {
    color: #888;
}

.myRadioButtonCbOn:before {
    content: "\2022";
    font-size: 30px;
    padding-bottom: 3px;
}

.myRadioButtonLabelOn, .myRadioButtonLabelOff {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    font-family: Arial, Helvetica, sans-serif;
    color: #2A3A59;
    text-align: left;
    font-weight: bold;
}

.myRadioButtonLabelOn {
    font-weight: bold;
}

.myRadioButtonLabelOff {
    font-weight: lighter;
}

.utwToggleButtonContainer {
    /*padding-left: 1px;*/
    margin-left: 4px;
}

.myToggleButtonCbOn, .myToggleButtonCbOff {
    font-family: sans-serif;
    font-weight: normal;
    border-radius: 3px 0 0 3px;
    height: 25px;
    width: 25px;
    padding-top: 7px;
    text-indent: 7px;
    cursor: pointer;
}

.myToggleButtonCbOn {
    /*background-color: #4DCB6D;*/
    background-color: #0080ff;
    /*color: #9CE2AE;*/
    color: white;
    font-weight: bold;
}

.myToggleButtonCbOff {
    background-color: #D1D3D4;
    color: #D1D3D4;
}

.myToggleButtonCbOff:before:hover {
    color: #888;;
}

.myToggleButtonCbOn:before {
    content: "\2714";
}

.myToggleButtonLabelOn, .myToggleButtonLabelOff {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    font-family: Arial, Helvetica, sans-serif;
    color: #2A3A59;
    text-align: left;
    font-weight: bold;
}

.myToggleButtonLabelOn {
    font-weight: bold;
}

.myToggleButtonLabelOff {
    font-weight: lighter;
}

.myToggleButtonPanel {
    cursor: pointer;
    opacity: 1.0;
    border: 1px solid #D1D3D4;
    border-radius: 3px 0 0 3px;
}

.myToggleButtonImg {
    padding-left: 5px;
    padding-top: 3px;
}

progress {
    background-color: #f3f3f3;
    border: 1px solid #0059b3;
    height: 10px;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

progress::-webkit-progress-bar {
    background-color: white;
}

progress::-webkit-progress-value {
    /*background-color: #0059b3;*/
    background-color: var(--smart-light-blue);
    border-radius: 3px;
}

progress::-moz-progress-bar {
    /* style rules */
}

.popupToastMsg {
    background-color: rgb(251, 251, 251);
    /*border: #6c7c7c;*/
    border: 3px solid darkgray;
}

.labelToastMsg {
    font-size: 24px;
    /*color: #ef8616;*/
    color: #0B2161;
    font-family: Verdana, sans-serif;
    /*font-weight: bold;*/
    margin: 15px;
}

.flowPanelInScrollPanel {
    margin-right: 50px;
    /*padding-right: 50px;*/
}

.adscardTitle {
    font-family: Helvetica Neue, sans-serif;
    font-weight: normal;
    font-size: 18px;
    font-weight: bold;
    margin-top: 2px;
    padding: 5px;
    width: 100%;
}

.adscardDescription {
    font-family: Helvetica Neue, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-weight: normal;
    margin-top: 2px;
    padding: 5px;
    width: 100%;
}

.adscardcontainer {
    background-color: white;
    border-radius: 10px;
    border: 2px;
    padding: 5px;
    margin-bottom: 10px;
}

.labelGuidingTextSmall {
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #505050;
}

.labelGuidingTextMedium {
    padding-right: 4px;
    padding-left: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.adimage {
    opacity: 1;
    display: block;
    /*width: 100%;*/
    /*height: auto;*/
    transition: .5s ease;
    backface-visibility: hidden;
    border-radius: 10%;
}

.adimage:hover {
    opacity: 0.3;
}

.adimage:active {
    opacity: 0.7;
}

.buttonBWicon {
    opacity: 0.5;
    background: transparent;
    border-radius: 25%;
    /*text-align: center;*/
    /*display: block;*/
    border: 2px;
    width: 30px;
    height: 28px;
    margin: auto;

    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.buttonBWicon:hover {
    opacity: 1.0;
}

.buttonBWicon[disabled] {
    opacity: 0.2;
}

.buttonBWicon:active {
    background: #999999;
}

.buttonBWicon[disabled]:hover {
    opacity: 0.3;
}

.buttonIconBase {
    opacity: 1.0;
    background: transparent;
    border-radius: 25%;
    /*text-align: center;*/
    /*display: block;*/
    border: 2px;
    width: 30px;
    height: 28px;
    margin: auto;

    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.buttonIconBase:hover {
    opacity: 0.5;
}

.buttonIconBase[disabled] {
    opacity: 0.2;
}

.buttonIconBase:active {
    background: #999999;
}

.buttonIconBase[disabled]:hover {
    opacity: 0.3;
}


.messageNotRead {
    font-weight: bold;
}

.messageRead {
    font-weight: normal;
}

.adMessageCard {
    background: white;
    /*border: solid #cccc;*/
    /*border-radius: 6px;*/
}

.adMessageCardSelected {
    background: #e7e1e1;
    /*border: solid rgba(110, 107, 107, 0.82);*/
    /*border-radius: 6px;*/
}

.tableBorderTop {
    margin-top: 10px;
    border-top: solid #6F7277;
    border-width: 2px;
}

.tableHeader {
    font-family: Helvetica Neue, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-right: 10px;
    color: #4B4A4A;;
}

.imagebutton-transparent {
    background-color: transparent;
    cursor: pointer;
}

.buttonImgBase {
    border-radius: 10px;
    border: 2px;
    border-color: transparent;
    width: 38px;
    height: 25px;
    padding-top: 5px;
    background-color: transparent;
    text-align: center;
    opacity: 1.0;
}

.buttonImgBase:hover {
    /*background-color: var(--smart-blue-hover);*/
    opacity: 0.5;
}

.loader {
    border: 6px solid transparent;
    border-radius: 50%;
    border-top: 6px solid var(--smart-blue);
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--smart-green);;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.listBox {
    outline: 0;
    border-radius: 5px;
    background: white;
    /*border-color: var(--smart-green);*/
    border-color: white;
    border-width: 1px;
    padding: 2px;
}

.simpleLayoutPanelAsBackground {
    background-color: white;
    /*border: 4px solid #888;*/
    /*border: 4px solid #f6f8f9;*/
    border-radius: 10px;
}

.weatherobservationcell {
    font: 18px Arial, sans-serif
}

.userStatusAvailable {
    color: #0b920e;
}

.userStatusNotAvailable {
    color: red;
}

.buttonBackgroundRound {
    background: var(--smart-green-light);
    border-radius: 25px;
    width: 35px;
    height: 28px;
    padding-top:4px;
    border-color: var(--smart-green-light);
    outline: 0;
}

.textBoxRounded {
    outline: 0;
    border-color: rgba(38, 19, 19, 0.69);
    border-width: thin;
    border-radius: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
}

.labelMapEditText {
    background-color: white;
    padding-top: 7px;
    padding-left: 10px;
    border-radius: 4px;
    color: #0D66BF;
    opacity: 0.9;
    margin-left: 4px;
    margin-right: 15px;
}

.textLightGreen {
    color: var(--smart-green-light);
    font-family: Helvetica Neue, sans-serif;
    font-size: 11pt;
    font-weight: bold;
}


/*
.simpleLayoutPanelAsBackgroundMargin {
    margin: 10px;
}
*/