.LOGOUI
{
    float: left;
    width: 100%;
    height: 100%;
}
.LOGO
{
    /*Changed for new logo 01/23/2019
    float: left;
    width: 60px;
    height: 60px;
    margin-top: 1px;
    */
    float: left;
    width: 255px;
    /*height: 50px;*/
    margin-top: 5px;
}

.XPLLOGO
{
    /*Changed for new logo 01/23/2019
    float: left;
    width: 60px;
    height: 60px;
    margin-top: 1px;
    */
    float: left;
    width: 100%;
    /*height: 50px;*/
    margin-top: 5px;
}

.XPLLOGOUI
    {
            float: left;
    /* width: 100%; */
    height: 100%;
    }
.PIXSELL
{
    float: right;
    color: #fe530f;
    margin-top: 15px;
    margin-left: 10px;
    font-family: ABEAKRG;
    font-size: x-large;
}

.PIXSELL-f
{
    color: White;
    margin-top: 45px;
    margin-left: 5px;
    font-family: ABEAKRG;
    display: inline-block;
    font-size: medium;
}

.LOGO-f
{
    float: left;
    margin-top: 30px;
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
}

.textColorOrange
{
    color: #fe530f;
    font-family: texgyreadventor-regular;
}

.boldTextOrange
{
    color: #fe530f;
    font-family: texgyreadventor-bold;
    font-size: 60px;
}

.textColorBlack
{
    color: #252525;
    font-family: texgyreadventor-regular;
}

.textColorWhite
{
    color: #ffffff;
    font-family: texgyreadventor-bold;
}

.TextOrange
{
    color: #fe530f;
    font-family: texgyreadventor-bold;
}

.regularText
{
    font-family: texgyreadventor-regular;
    color: White;
    font-size: large;
}

.regularText-black
{
    font-family: texgyreadventor-regular;
    color: black;
    font-size: large;
}

.smallText
{
    font-family: texgyreadventor-regular;
    color: Gray;
    font-size: small;
}


.regularBlackText
{
    font-family: texgyreadventor-regular;
    color: Black;
}


.regularBlackText-s
{
    font-family: texgyreadventor-regular;
    color: Black;
    font-size: x-small;
}


.headerText /* USE IN LOGIN*/
{
    font-family: texgyreadventor-bold;
    color: #fe530f;
    font-size: xx-large;
    text-align: left;
}


.header-black
{
    font-family: texgyreadventor-bold;
    color: Black;
    font-size: xx-large;
}


p
{
    margin: 0px;
    padding: 0px;
    font-family: texgyreadventor-bold;
}

h1
{
    font-weight: bold;
    color: Black;
    font-size: 35px;
    margin: 0px;
    padding: 0px;
}

h2
{
    font-weight: bold;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
    font-size: 30px;
}

h3
{
    font-weight: bold;
    color: #fe530f;
    margin: 0px;
    padding: 0px;
    font-size: 30px;
}
/* ----------- TEXT */
.footerWhite
{
    color: #ffffff;
    font-family: texgyreadventor-regular;
    text-align: left;
}

.bg-orange
{
    background-color: #fe530f !important;
}
/*Added for red new design*/
.bg-Red {
    background-color: #D00000 !important;
}
.textColorRed {
    color: #D00000;
    font-family: texgyreadventor-regular;
}
.btn-red{
    background-color: #D00000;
    font-size: large;
    height: auto;
    cursor: pointer;
    color: White;
}

/*======================== 
    For Boarders 
========================*/

.panel-border
{
    color: #333;
    background-color: #ffffff;
    /*Changed color to red
    border-color: #fe530f;
    */
    border-color: #D00000;
}
.panel-border-solid
{
    color: #333;
    background-color: #ffffff;
    border-color: #808080;
}
.panel-head
{
    /*Changed color to red
    background-color: #fe530f;
    */
    background-color: #D00000;
    height: 40px;
}
.border-title
{
    color: White;
    font-size: x-large;
    text-align: left;
    margin-left: 10px;
}

.div-top-margin
{
    margin-top: 2%;
    top: 0px;
    left: 0px;
}

.div-bottom-margin
{
    margin-bottom: 50px;
    padding: 0px;
}
/*======================== 
    For Boarders END
========================*/


/*======================== 
        Label
========================*/
.lbl-orange
{
    text-align: center;
    font-family: texgyreadventor-regular;
    color: #fe530f;
}

.labelP
{
    margin: 10px;
    padding: 0px;
    text-align: center;
    font-family: texgyreadventor-regular;
    color: Black;
}

.lbl-title
{
    margin: 10px;
    padding: 0px;
    text-align: left;
    font-family: texgyreadventor-bold;
    color: Black;
}


.lbl-Item
{
    margin: 10px;
    padding: 0px;
    text-align: left;
    font-family: texgyreadventor-regular;
    color: Black;
    padding-left: 5%;
}


.lbl-title-dboard
{
    margin: 10px;
    padding: 0px;
    text-align: left;
    font-family: texgyreadventor-bold;
    color: Black;
    font-size: large;
}


.lbl-Item-dboard
{
    margin: 10px;
    padding: 0px;
    text-align: right;
    font-family: texgyreadventor-bold;
    color: Black;
    font-size: large;
}

.lbl-hint
{
    padding: 0px;
    text-align: left;
    font-family: texgyreadventor-regular;
    color: red;
}
/*======================== 
        Label END
========================*/






/*======================== 
        Image
========================*/

.img-qr
{
    width: 100px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
}

.img-edit
{
    width: 30px;
    height: 40px;
    vertical-align: middle;
    text-align: right;
    position: absolute;
    right: 0px;
    display: block;
}


.img-Login-icon
{
    float: right;
    width: 40px;
    height: 40px;
    margin-right: 0px;
    vertical-align: middle;
}

/*======================== 
        Image END
========================*/




/*======================== 
     DIV tricks 
========================*/

.card-img
{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    width: 100px;
}

.card-DT
{
    border-radius: 10px;
    padding: 0px;
    width: 150px;
    height: 200px;
}


.card-DT-pos1
{
    border-radius: 10px;
    padding: 0px;
    width: 150px;
    height: 300px;
    margin-top: 10px;
    margin-left: 100px;
}


div /*for Dashboard */
{
    background-repeat: no-repeat;
}

/*======================== 
     DIV tricks End
========================*/




/*================= 
    buttons
==================*/
.btn-orange
{
    background-color: #fe530f;
    font-size: large;
    height: auto;
    cursor: pointer;
    color: White;
    font-family: texgyreadventor-regular;
}


.btn-Default
{
    font-size: large;
    height: auto;
    cursor: pointer;
}


.btn-black
{
    background-color: #000000;
    font-size: x-large;
    height: auto;
    cursor: pointer;
}

.img-btn-icon
{
    width: 40px;
    height: 40px;
    vertical-align: middle;
    position: absolute;
    left: 60px;
}

.btn-Cancel
{
    background-color: #808080;
    font-size: large;
    height: auto;
    cursor: pointer;
    color: White;
    font-family: texgyreadventor-regular;
}

.lnk    /*= Link Button =*/
{
    color: #fe530f;
    text-decoration: underline;
    font-weight: bold;
}

.11lnk:hover  /*= Link Button =*/
{
    
    color: blue;
    text-decoration: underline;
    font-weight: bold;
}

/*================= 
    buttons END
==================*/






/* =================
     Master Page
=================*/
.buttom
{
    bottom: 0;
    margin-bottom: -5em;
    position: relative;
}

.bg-black
{
    background-color: #000000 !important;
}

.LinkRigth
{
    float: right;
    margin-top: 35px;
}

.LinkB-Rigth
{
    margin-right: 100%;
}

.LinkB-Rigth1
{
    margin-right: 5%;
}



.foot-top
{
    margin-top: 6px;
}

.foot-icon
{
    /*margin-left: 10px;             margin-right: 10px;             margin-top: 1px;             margin-bottom: 2px;*/
    margin-bottom: 10px;
    margin: 0;
}

.LinkRigth
{
    float: right;
    margin-top: 35px;
}

.LinkB-Rigth
{
    margin-right: 10px;
}


.regular
{
    font-family: texgyreadventor-regular;
    color: White;
}

footer
{
    background: #2db34a;
    bottom: 0;
    left: 0;
    position: inherit;
    right: 0;
    z-index: 1010;
}

.lnk-lgin-G
{
    width: 20px;
    height: 15px;
}


.gPlay
{
    margin-left: 25%;
}

.imgMargin
{
    margin: 0;
}

#user-profile
{
    /*height: 50px;*/
    padding-top: 30px;
    padding-left: 58px;
}

#user-profile img
{
    height: 45px;
    width: 45px;
    position: absolute;
    top: 15px;
    left: 8px;
    padding: 1px;
}

/*========================== 
    master page end 
========================== */





/*========================== 
         Carousel 
========================== */

.container
{
    margin-top: 0px;
}

/* Carousel Styles */
.carousel-indicators .active
{
    background-color: #2980b9;
}

.carousel-inner img
{
    width: 100%;
    max-height: 400px;
}



/* Carousel Header Styles */


.header-text
{
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.header-text h2
{
    font-size: 40px;
}

.header-text h2 span
{
    background-color: #2980b9;
    padding: 10px;
}

.header-text h3 span
{
    color: #FFFFFF;
    padding: 15px;
}

.carousel-left-txt
{
    margin-left: 10%;
    margin-top: 1%;
}

.carousel-left-btn
{
    margin-left: 5.5%;
    margin-top: 1%;
}

/*==========================  
        end carousel */






/* Login Singup */
.divcard
{
    border-radius: 25px;
    background: #f2f2f2;
    padding: 20px;
    width: 400px;
    height: 290px;
    margin-top: 30%;
}

/* endLogin Singup */





/* Intellisense auto complete*/
.ui-autocomplete
{
    position: fixed;
    z-index: 1511;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff !important;
    border: 1px solid #ccc -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    padding-right: 20px;
    width: 550px;
}
.ui-autocomplete > li
{
    padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus
{
    background-color: #DDD;
}
.ui-helper-hidden-accessible
{
    display: none;
}

.a
{
    color: #000000;
}

.b
{
    padding-right: 5px;
    margin-right: 5px;
}


.style4
{
    width: 1204px;
}
/* !!! end Intellisense auto complete*/



.inputStyle
{
    width: 100%;
    height: 40px;
    color: white;
    background-color: #fe530f;
    font-size: 20px;
    cursor: pointer;
    border: none;
    outline: none;
}


#map-canvas
{
    width: 500px;
    height: 500px;
}


/* Costom DIV border*/

.panel-border
{
    color: #333;
    background-color: #ffffff;
    /*Changed color to red
    border-color: #fe530f;
    */
    border-color: #D00000;
}
.panel-head
{
    /*Changed color to red
    border-color: #fe530f;
    */
    background-color: #D00000;
    height: 40px;
}
.border-title
{
    color: White;
    font-size: x-large;
    text-align: left;
    margin-left: 10px;
}


/*end Costom DIV border*/





/*=========       Dashboard          ==========*/


.dashboard
{
    height: 300px;
    border-radius: 10px;
    text-align: center;
    background-position: 50% 50%;
}

.dt-top
{
    font-family: texgyreadventor-regular;
    color: White;
    text-align: center;
    padding: 0px;
    vertical-align: middle;
    font-size: xx-large;
    margin-top: 20%;
    display: inline-block;
}

.dt-top-icon
{
    font-family: texgyreadventor-regular;
    color: White;
    text-align: center;
    padding: 0px;
    vertical-align: middle;
    font-size: xx-large;
    margin-top: 130px;
    display: inline-block;
}

.dt-down
{
    font-family: texgyreadventor-regular;
    color: White;
    text-align: center;
    padding: 0px;
    vertical-align: middle;
    font-size: large;
    text-decoration: underline; 
}

/*=========    END   Dashboard      END    ==========*/




/*=========    Grid view ==========*/
.mygrid-wrapper-div
{
    overflow-y: scroll;
}


.GridPager a, .GridPager span
{
    display: block;
    height: 20px;
    width: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.GridPager a
{
    background-color: #f5f5f5;
    color: #969696;
    border: 1px solid #969696;
}
.GridPager span
{
    background-color: #A1DCF2;
    color: #000;
    border: 1px solid #3AC0F2;
}

.pagination-ys
{
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination-ys table > tbody > tr > td
{
    display: inline;
}

.pagination-ys table > tbody > tr > td > a, .pagination-ys table > tbody > tr > td > span
{
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}

.pagination-ys table > tbody > tr > td > span
{
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}

.pagination-ys table > tbody > tr > td:first-child > a, .pagination-ys table > tbody > tr > td:first-child > span
{
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination-ys table > tbody > tr > td:last-child > a, .pagination-ys table > tbody > tr > td:last-child > span
{
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination-ys table > tbody > tr > td > a:hover, .pagination-ys table > tbody > tr > td > span:hover, .pagination-ys table > tbody > tr > td > a:focus, .pagination-ys table > tbody > tr > td > span:focus
{
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}
/*========= END Grid view END ==========*/

@media screen and (min-width: 800px)
{
    .modal-dialog
    {
        width: 1000px; /* New width for default modal */
    }
    .modal-sm
    {
        width: 500px; /* New width for small modal */
    }

    .modal-s
    {
        width: 300px; /* New width for small modal */
    }
}
@media screen and (min-width: 1000px)
{
    .modal-lg
    {
        width: 1000px; /* New width for large modal */
    }
}


@media only screen and (max-width: 768px)
{
    /* For mobile phones: */


    .txt
    {
        margin-right: 74%;
    }

    .lbl-title
    {
        padding: 0px;
        text-align: left;
        margin-left: 1%;
        font-family: texgyreadventor-bold;
        color: Black;
    }

    .LOGOUI
    {
        float:left;
        width: 100%;
        /*height: 80%;*/
        height: 100%;
        margin-top: 0px;
        margin-left: 30px;
    }
    .LOGO
    {
        float: left;
        width: 40px;
        height: 40px;
        margin-top: 6px;
    }
    .PIXSELL
    {
        float: right;
        color: #fe530f;
        margin-top: 15px;
        margin-left: 10px;
        font-family: ABEAKRG;
        font-size: x-large;
    }
    .navbar-toggle
    {
        margin-top: 20px;
    }
}

.faq-Htext
{
        margin-top: 7%;
    font-family: texgyreadventor-regular;
    color: #D00000;
    font-size: 35px;
}
.faq-Ptext {
    margin-top: 15px;
    color: #252525;
    font-family: texgyreadventor-regular;
    font-size: medium;
}

/*for the download options is waybill status report*/

.dlOptions
{
    width: 95%;
}

.dlOptions > td
{
    padding:5;
}

.qrcode
{
    width: 180px;
    height: 180px;
}

/*Timepicekr*/
/*
 * Timepicker stylesheet
 * Highly inspired from datepicker
 * FG - Nov 2010 - Web3R 
 *
 * version 0.0.3 : Fixed some settings, more dynamic
 * version 0.0.4 : Removed width:100% on tables
 * version 0.1.1 : set width 0 on tables to fix an ie6 bug
 */

        .ui-timepicker-inline {
            display: inline;
        }

        #ui-timepicker-div {
            padding: 0.2em;
        }

        .ui-timepicker-table {
            display: inline-table;
            width: 0;
        }

        .ui-timepicker-table table {
            margin: 0.15em 0 0 0;
            border-collapse: collapse;
        }

        .ui-timepicker-hours,
        .ui-timepicker-minutes {
            padding: 0.2em;
        }

        .ui-timepicker-table .ui-timepicker-title {
            line-height: 1.8em;
            text-align: center;
        }

        .ui-timepicker-table td {
            padding: 0.1em;
            width: 2.2em;
        }

        .ui-timepicker-table th.periods {
            padding: 0.1em;
            width: 2.2em;
        }

        /* span for disabled cells */
        .ui-timepicker-table td span {
            display: block;
            padding: 0.2em 0.3em 0.2em 0.5em;
            /*width: 1.2em;*/

            text-align: right;
            text-decoration: none;
        }

        /* anchors for clickable cells */
        .ui-timepicker-table td a {
            display: block;
            padding: 0.2em 0.3em 0.2em 0.5em;
            /*width: 1.2em;*/
            cursor: pointer;
            text-align: right;
            text-decoration: none;
        }


        /* buttons and button pane styling */
        .ui-timepicker .ui-timepicker-buttonpane {
            background-image: none;
            margin: .7em 0 0 0;
            padding: 0 .2em;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
        }

        .ui-timepicker .ui-timepicker-buttonpane button {
            margin: .5em .2em .4em;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            width: auto;
            overflow: visible;
        }

        /* The close button */
        .ui-timepicker .ui-timepicker-close {
            float: right
        }

        /* the now button */
        .ui-timepicker .ui-timepicker-now {
            float: left;
        }

        /* the deselect button */
        .ui-timepicker .ui-timepicker-deselect {
            float: left;
        }
        
.bgColorRed
{
    background-color: #d00000 !important;
}

.bgColorBlue
{
    background-color: #0d00d0;
}

.bgColorYellow
{
    background-color: #ffec0b;
}

.bgColorGreen
{
    background-color: #0dd000;
}