body
{
    margin:0;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

#wrapper
{
    width:100%;
    display: block;
    position: absolute;
    min-height: 100%;
    left:0px;
    background:#f5f5f5;
}


#header
{
    width:100%;
    background-image:url(images/m_headerBg.gif);
    background-repeat:repeat-x;
}

#middle
{
    margin:0 auto;
    display: block;
    margin-bottom: 2em;
    margin-left:0.5em;
    margin-right:0.3em;
}

.predictiontitle
{
    padding:8px 10px 0px 0px;
    font-size:25px;
    color:#2a2a2a;
    font-weight:bold;
    text-align:center;
    display: block;
}

#middle_map
{
    padding:0px;
    margin:0 auto;
    display: block;
    margin-bottom: 2em;
}

#footer
{
    position: absolute;
    display: block;
    bottom: 0;
    width:100%;
    padding-left:0px;
    height:28px;
}

#footerPrediction
{
    position: absolute;
    display: block;
    bottom: 0;
    width:100%;
    padding-left:0px;
    /*height:23px;*/
}

    #footerPrediction a:hover{color:red !important;}

    .footer {
        background-color: #323232;
        width: 100%;
        height: 23px;
        font-size: 13px;
        font-family: Tahoma, Helvetica, 'Trebuchet MS', Arial, sans-serif;
    }


.loginLeft
{
    float:left;
}

.loginRight
{
    float:right;
}

.footerLeft
{
    float:left;
    padding-top:6px;
}

.footerRight
{
    float:right;
    padding-right:5px;
    padding-top:6px;

}
.LinkButton
{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    color: Yellow;
    padding-right:5px;
    text-align:right;
    text-decoration: underline;
}
.clear
{
    clear:both;
}

.title
{
    font-size:large;
    color:#000;
    font-weight:bold;
    font-style : normal;
    border-bottom:1px dotted #FFFFFF;
    margin-bottom:5px;
}

input
{
    color: #232323;
    border-width: 1px;
    border-color: #999;
}


.select
{
    height:22px;
    border-width: 1px;
    border-color: #494949;
    font-size: medium;
    font-weight : normal;
    font-style : normal;
    color: #232323;
    vertical-align:middle;
}

label
{
    font-size:medium;
    font-weight : normal;
    font-style : normal;
    color: #666;
}

.feedbackFont
{
    font-size:medium;
    font-weight : normal;
    font-style : normal;
}

.labelSmall label
{
    font-size:small;
    font-weight : normal;
    font-style : normal;
    color: #666;
}

img
{
    border:0px;
}

.textbox
{


    font-size:large;
    font-weight : normal;
    font-style : normal;
    color: #232323;
    border-width: 1px;
    border-color: #494949;
    width:99%;
    height:22px;
}

.textarea
{
    font-size:large;
    color: #232323;
    border-width: 1px;
    border-color: #999;
    width:60%;
    height:50px;
    resize:none;
}


.button
{
    background-image:url(images/m_textbox.gif);
    background-repeat:repeat-x;
    height:26px;
    padding-left:5px;
    padding-right:5px;
    padding-top:2px;
    padding-bottom:2px;
    color:#FFFFFF;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    border:0px;
    font-weight:bold;
    font-size:normal;
}

/* Inner Page */

#middle ul
{
    list-style-type:none;
    margin-top:0px;
    margin-left:0px;
    padding-left:5px;
    font-size:medium;
    color:#900;
}

#middle ul li
{
    list-style-type:none;
    line-height:25px;
    font-size:normal;
    color:#900;
}

#middle ul li .blank
{
    border-top: dotted 1px #666;
    margin-bottom:0px;
    background-color:#CCC;
}

#middle ul li a
{
    text-decoration:none;
    color:#900;
}

#middle ul li a:hover
{
    text-decoration:underline;
    color:#666;
}

#middle ul li ul li
{
    list-style-type:none;
    line-height:25px;
    font-size:normal;
    color:#900;
    margin-left:15px;
}

#middle ul li ul li a
{
    text-decoration:none;
    color:#666;
}

#middle ul li ul li a:hover
{
    text-decoration:underline;
    color:#666;
}


.topBar
{
    background-color:#323232;
    width:100%;
    height:23px;
}

.topbarText
{
    font-size:x-small;
    padding-left:10px;
    color: white;
}
#shadowHeader{padding:10px;}

#shadowHeadersmall
{
    padding:10px 5px;
    background:white;
    border: 1px solid #e5e5e5;
}

.shadowHeaderLeft
{
    width:50%;
    float:left;
}

.shadowHeaderRight
{
    float:right;
    width:44%;
    padding-right:5px;
}

.commonWeatherFont
{
    line-height:15px;
    font-size:11px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    text-align:left;
}
.weatherCity
{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:normal;
    font-weight:bold;
    color:#ac0000;
}

.dottedLine
{
    border-bottom:1px dotted black;
}

.dropDowns
{
    float:left;
    line-height:15px;
}

.imageLabels
{
    float:right;
    line-height:15px;
}

.message
{
    color:#ad1219;
    height: 30px;
}

.btnRedbg22
{
    background:url(images/btn_redbg.jpg);
    background-image:repeat-x;
    height:22px;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#fff;
    border:1px solid #b40007;
    text-align:center;
    padding-bottom:3px;
    background-position:top;
    cursor:pointer;
}

.btnGreenbg22
{
    background-image:url(images/btn_greenbg.jpg);
    background-image:repeat-x;
    height:22px;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#fff;
    border:1px solid #138347;
    text-align:center;
    padding-bottom:3px;
    background-position:top;
    cursor:pointer;
}
.predictionsmobilegrid
{
    background:#fff8ab;
    border:1px solid #f8dc87;
    font-size:19px;
    padding:10px 10px;
}
.predictionsmobilegrid span 
{
    word-wrap:break-word;
    word-break: break-word;
}

 .predictionsgrid
{
    background:#D6AC86;
    border:0px solid #7B472F;
    line-height:1.5;
    font-size:19px;
}

 .predictionsDirection
{
    background:#C7B5E7;
    border:1px solid #B19CD9;
    line-height:1.5;
    font-size:19px;
}

.predictionsColorCell
{
    line-height:1.5;
    font-size:19px;
}

.predictionsgridStop
{
   background:#fff8ab;
   border:1px solid #f8dc87;
   line-height:1.5;
   font-size:19px;
}

.gridpager, .gridpager td
{
     color:#A80000;
     font-weight:bold;
     font-size:12;
     text-decoration: none;
     font-style :italic;

}

.gridpager a
{
    color: Black;
    font-weight:normal ;
    font-size:10;
    text-decoration: none;
    font-style :normal;
}

.btnRed
{
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    background-color:#dc0008;
    color:#FFF;
    padding:5px 6px;
    text-decoration:none;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    /*transition: 0.3s;*/
    font-weight:bold;
    cursor:pointer;
   border:1px solid #AC0A10;
   -webkit-appearance: none;
}
.btnRed:hover
{
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    background-color:#000;
    color:#FFF;
    padding:5px 6px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid #000;
}
.btnRed:active
{
    position:relative;
    top:1px;
    left: 1px;
}


 .sortFilter{position: absolute;right:0px;}
 table#rdoSort{text-align:center; margin:0 auto;}
table#rdoSort tbody tr:before{content:'Sort by:'; font-size:17px;font-weight:normal;}
table#rdoSort tbody tr label{color:#000;}

@media all and (max-width: 640px)
{
    .floatLeft, .floatCenter, .floatRight{float:none !important; display:block;  margin: 0 auto; text-align:center !important;padding-top:0px; height:auto;width: 99% !important;}
    .predHeader{padding:10px 0px;}
    .floatRight input{margin: 0 auto; }
    .floatLeft table, .floatRight table, .floatCenter table{vertical-align:middle; height:0%;}
    .predLogo{padding: 5px 0px !important;}
    .gridLeftMsg, .gridRightMsg{float:none !important; display:block; width:100% !important; text-align:center !important;margin: 0 auto;padding:5px 0px;}
    .gridCenterMsg{padding:10px 0px;text-align: center;}
    .gridCenterMsg .btnGreen{margin-top:7px;}
    .predButton{margin-bottom:9px;}
    .sortFilter{text-align:center;position:relative;}
}

@media all and (max-width: 360px){
	.shadowHeaderLeft img{width:250px; image-rendering: -webkit-optimize-contrast;}
	#imgShadowLogo{width: 250px;image-rendering: -webkit-optimize-contrast;}
	
}
   

.predictionMiddle
{
   padding:10px;
}


.btnGreen
{
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    background-color:#008000;
    color:#FFF;
    padding:5px 8px;
    text-decoration:none;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    /*transition: 0.3s;*/
    font-weight:bold;
    cursor:pointer;
   border:1px solid #008000;
   -webkit-appearance: none;
}
.btnGreen:hover
{
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    background-color:#008000;
    color:#FFF;
    padding:5px 8px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid #008000;
}
.btnGreen:active
{
    position:relative;
    top:1px;
    left: 1px;
    background-color:#008000;
    color:#FFF;
}

.gridLeftMsg
{
float:left;text-align:left;width:49%;margin: 0 auto;padding-top:6px;
}

.gridRightMsg
{
float:right;width:50%;text-align:right;
}

/*Updated*/

.predHeader
{
    padding:10px;
    background-color:white;
    border: 1px solid #e5e5e5;
}

.content
{
    padding:10px;
}

.floatLeft
{
    float:left;
    width:33%;
}

.headerLeft table, .headerRight table, .headerCenter table{vertical-align:middle; height:100%;}

.floatCenter
{
    float:left;
    width:33%;
    text-align:center;
}

.floatRight
{
    float:right;
    width:33%;
    text-align:right;
}
.container{margin-top: 10px; padding: 10px; background: white;border: 1px solid #e5e5e5;}
.predMsg{text-align: center; margin:10px 0px;}

.predButton
{
    position:relative;
    top:5px;
    }
    
.predLogo{
    padding:20px 0px;
    }
    
    .gridCenterMsg{padding:5px 0px;text-align: center;}
    
    
    
    
    
.btnLogin_Red
{
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
    background-color:#dc0008;
    color:#FFF;
    padding:5px 6px;
    text-decoration:none;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    /*transition: 0.3s;*/
    font-weight:bold;
    cursor:pointer;
   border:1px solid #AC0A10;
   -webkit-appearance: none;
}
/*
.btnLogin_Red:hover
{
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:17px;
     background-color:#dc0008;
    color:#FFF;
    padding:5px 6px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid #AC0A10;
}
.btnLogin_Red:active
{
    position:relative;
    top:1px;
    left: 1px;
}
*/
    
.whiteFontSmall
{
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#ffffff;
}

/*FOR PREDICTION MOBILE GPSDisplay*/

.div#wrapper PMGPSDisplay popUpMsg {
    width: 240px;
    overflow: auto;
    font-size: 12px;
}

.modalProgressBar {
    position: fixed;
    z-index: 99999;
    height: 100%;
    width: 100%;
    top: 0;
    background: rgba(255,255,255, 0.7);
}

.modalProgressBarCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
}


/* Start of ON-OFF Slider for checkboxes */
.OnOffSlider .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}


.OnOffSlider .switch input {
    display: none;
}


.OnOffSlider .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c8c8c8;
    border: 1px solid #bdbdbd;
    -webkit-transition: .4s;
    transition: .4s;
}

.OnOffSlider .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 30px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.OnOffSlider input:checked + .slider {
    background-color: #77b931;
}

.OnOffSlider input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.OnOffSlider input:checked + .slider:before {
    -webkit-transform: translateX(-28px);
    -ms-transform: translateX(-28px);
    transform: translateX(-28px);
}

.OnOffSlider .on {
    display: none;
}

.OnOffSlider .on {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 60%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

.OnOffSlider .off {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 35%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

.OnOffSlider input:checked + .slider .on {
    display: block;
}

.OnOffSlider input:checked + .slider .off {
    display: none;
}

.OnOffSlider .slider.round {
    border-radius: 34px;
}

    .OnOffSlider .slider.round:before {
        border-radius: 50%;
    }

.OnOffSlider input:checked + .slider .on {
    display: block;
}

.OnOffSlider input:checked + .slider .off {
    display: none;
}

.OnOffSlider .slider.round {
    border-radius: 34px;
}

.OnOffSlider .slider.round:before {
    border-radius: 50%;
}

.OnOffSlider div {
    display: inline-block;
    padding-right: 15px;
}

.OnOffSlider div:last-child {
    padding-right: 0px;
}

/* End of ON-OFF Slider for checkboxes */

.modalBackground {
    background-color: #000000;
    filter: alpha(opacity=40);
    opacity: 0.8;
}

.modal-popup {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -o-transform: translate(-50%, -50%) !important;
    width: 350px;
    background-color: #ffffff;
}

    .modal-popup .modal-header {
        background-color: #ff0000;
        color: #ffffff;
        padding: 12px 15px;
        font-size: 16px;
    }

    .modal-popup .modal-body .list {
        height: 250px;
        overflow-y: auto;
    }

        .modal-popup .modal-body .list ul {
            padding: 0;
            margin: 0;
        }

            .modal-popup .modal-body .list ul li {
                list-style-type: none;
                list-style: none;
                border-bottom: 1px solid silver;
                padding: 10px 10px 10px 40px;
                background-image: url(images/Login/icon-location-pin.png);
                background-repeat: no-repeat;
                background-position: 13px center;
                font-size: 15px;
                cursor: pointer;
            }

                .modal-popup .modal-body .list ul li:hover {
                    background-color: #eaeaea;
                }

    /*.modal-popup .modal-body .list select#listCostCenter {
            width: 100%;
            font-size: 15px;
            -webkit-border-radius: 0;
        }

select[size="0"], select[size="1"] {
    -webkit-appearance: menulist;
    -webkit-box-align: center;
    border: 1px solid #D2D2D2;
    -webkit-border-radius: 0;
    background-color: transparent;
}

.modal-popup .modal-body .list select#listCostCenter option, option {
    border-bottom: 1px solid silver;
    padding: 10px 10px 10px 30px;
    background-image: url(images/Login/icon-location-pin.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    font-size: 15px;
}

    .modal-popup .modal-body .list select#listCostCenter option:hover, option:hover {
        background-color: #e6e6e6;
        cursor: pointer;
    }

    .modal-popup .modal-body .list select#listCostCenter option:active, option:active {
        background-color: #e6e6e6;
        cursor: pointer;
    }*/

    .modal-popup .modal-footer {
        padding: 10px 0px;
        text-align: center;
        background-color: #efefef;
    }

        .modal-popup .modal-footer input[type="submit"] {
            border: 0;
            padding: 5px 15px;
            color: #ffffff;
            font-family: "Open Sans", sans-serif;
            font-size: 15px;
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            -khtml-border-radius: 0px;
            border-radius: 0px;
        }

        .modal-popup .modal-footer .btn-submit {
            background-color: #ff0000;
        }

            .modal-popup .modal-footer .btn-submit:hover {
                background-color: #de0202;
            }

        .modal-popup .modal-footer .btn-cancel {
            background-color: #5e5d5d;
        }

            .modal-popup .modal-footer .btn-cancel:hover {
                background-color: #424141;
            }

    .modal-popup .modal-body {
        padding: 17px;
    }
#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
    font-size: initial !important;
}