/*********************Reservation Styles************/
.style1
{
    width: 100%;
}
/*
.txt-state{width:35px; text-align:center;}
.txt-zip{width:50px; text-align:center;}
.txt-city{width:110px;}
*/
.txt-street{width:190px;}/*290  */
.pnl-expando{margin:10px; border-top:1px solid #999999; border-bottom:1px solid #999999; padding-top:10px; padding-bottom:10px;}
.reservation-fom{float:left; width:100%;}
.txt-pickupperson{width:328px;}
.txt-ClientPhone{width:190px;}
.pnlButtons{text-align:right; padding-right:12px; padding-top:5px; padding-bottom:5px; width:100%; border-top:1px solid #999999; margin-top:10px;}
#estimate-table{width: 100%; height:100%;}
#estimate-table td{text-align:center;}
#estimate-table input[type="text"]{width:50px; text-align:center; border:0px none; background-color:transparent; color:#ffffff;}
#estimate-table input[disabled='disabled'] {color:#ffffff;}
.address-verified{color:Green;}
.address-notverified{color:Red;}
.txt-zone{width:50px; text-align:center;}
.cbo-specialvehicle{width:100px;}
a.suggestion-item{display:block; margin-top:5px; margin-bottom:5px; color:#ff0000;}
a.suggestion-item:hover{color:#000000;}
input.txttime{width:60px;}
.txt-JobId{width:190px;}
.txt-Copay{width:110px;}


.headercolorsred  
{
    color:#CC3333; 
    font-weight:bold;
}


/*************************************Login.aspx**************************/

/* Login Page Labels color, font size, font weight change other properties can be added */
.MainDiv {color:#002561; font-size:13px; font-weight:bold;}

/* Login Error Label Css */
.errorlabel{  font-weight:bold; color:Red;} 

/* Login/Logout Buttion CSS */
#loginBar .loginBarHandle {background-color:#016836;color: White;font-size: 12px;}
#loginBar a:link, a:visited {color: White;}
#loginBar a {color: White;}
#loginBar {background-color: #016836;color: White;}
#loginBar {
    /* background-color: #00245F;*/
    border-bottom: 1px solid #65A5D1;
    /*color: White;*/
    position: relative;
    z-index: 1;
    width:100%;
}
#loginBar .pageContent {
    padding-top: 5px;
    position: relative;
}
#loginBar a {
    /* color: white;*/
    text-decoration: underline;
}

#loginBar a:link, a:visited {
    /*color: White;*/
    text-decoration: none;
}
#loginBar a[href]:hover {
    text-decoration: underline;
}
#loginBar a:hover {
}

#loginBar a.noOutline {
    outline: 0 none;
}

#eAuthUnit li {
    margin-top: 10px;
}

#eAuthUnit li a {
    -moz-box-sizing: border-box;
    width: 180px;
}
#loginBar .loginBarHandle {
    /*background-color: #00245F;*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    bottom: -31px;
    box-shadow: 0 2px 5px #094E7F;
    /*color: white;
    font-size: 11px;*/
    line-height: 20px;
    margin-left: 20px;
    padding: 0 20px;
    position: absolute;
    left: 0;
    text-align: center;
    z-index: 1;
}

#loginBar .loginBarHandlelogo {
background-color: White;
/*border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;*/
bottom: -62px;
box-shadow: 0 2px 5px #094E7F;
/*color: white;
font-size: 11px;*/
line-height: 20px;
margin-right:0; /*20px;*/
/*padding: 0 20px;*/
position: absolute;
right: 0;
text-align: center;
z-index: 1;
}

.verificationcodetd
{
border-left:1px solid #000;
}
.clickhere
{
color:White;
}
.centertitle
{
font-size:20px; font-weight:bold; color:#003366
}
/*********************************ReservationHistory**************************/

.confirm
{
    background-color: White;
    padding: 10px;
    width: 370px;
}
.style16
{
}
.pagination
{
    text-align:left;
}
.pagination a:link { color: blue; text-decoration: none; }
.pagination a:visited { color: blue; text-decoration: none; } 
.pagination a:hover { color: blue; } 
.pagination b{color:Black;}
.linkcolor a:link { color: red; text-decoration: none; } 
.linkcolor a:visited { color: red; text-decoration: none; } 
.linkcolora{ color: red; text-decoration: none; } 
.linkcolor { color: pink; text-decoration: none; }
.ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_gvReservationHistory {
    height: 85vh !important;
}

/*****************************************************************************/

/*********************Active Reservations*********************/

.panelmain1{ background-color:#F7F7F7;}
.panelheadertitle{color: #000000; font-size: x-large; font-weight: bold; background-color:#3399FF;}
.paneltitle{color: #333333; font-size: 12pt;}
.activegridmain{ border-style:solid; border-width:1px; border-color:Blue; color:#333333;}
.activegridAlternaterow{ background-color:White; color:#284775;}
.activegridEditrow{ background-color:#999999;}
.activegridFooterrow{background-color:#5D7B9D; font-weight:bold; color:White;}
.activegridHeaderrow{background-color:#5D7B9D; font-weight:bold; color:White;}
.activegridPagerrow{background-color:#016836; color:White;}
.activegridrow{background-color:#F7F6F3; color:#333333;}
.activegridSelectedrow{background-color:#E2DED6; font-weight:bold; color:#333333;}
.panelmain{ background-color: White; }

tr.activegridPagerrow td {
    text-align: -webkit-center !important;
}
tr.activegridPagerrow{
    font-size: x-large !important;
}

/******************************************************************************/
/******************Common***************************/
.btn {
    border-style: solid;
    border-width: 1px;
    width: 82px;
}
.borderdiv{  border-style:solid;}
.titlefonts{  font-weight:bold;}
.subtitlefonts{  font-weight:bold; color:black}
.strip
{
    background-color:White;
}

.coverborder
{
    width:95%;
}


.MenuItemHover
{
	background-color:Silver;
}



/***************************************************MenuCode************************************************************/

div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
/*background: Black;*/ /*#1a1109;*/
width:100%;
float:left;
}

ul.semiopaquemenu{ /* main menu UL */
font-size:20px;
font-family:Arial;
/*font-weight:bold;*/
width: 100%;
/*background:#00245F; #b1e958;*/
/*padding: 11px 0 8px 0;*/ /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
/*color:white;*/
padding: 6px 8px 6px 24px; /* padding of the 4 sides of each menu link */
/*margin-right: 5px;*/ /* spacing between each menu link */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent  of linear gradients */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
/*padding-top: 12px;*/ /* large padding to get menu item to protrude upwards */
/*padding-bottom: 20px; *//* large padding to get menu item to protrude downwards */
}
/***************************************************MenuCode************************************************************/


.textboxstyle12
{
    
background-image:url(/Images/Calendar_scheduleHS.png);
background-repeat: no-repeat;
background-position:center right;
padding-left: 18px;
}
.maskfcolor{color:#828282;}



.ContentPlaceHolder1DivStyle
{
    width:95%;
}
.style11
{
   width: 100%;
}
.style12
{}
.style16
{
}
.style18
{
  width: 251px;
}
.lblemail
{
    color:#000066;
    font-weight:bold;
    
}
.menudiv
{
    float:left;
    width:12%;
    
}

/**********************Header***********************/


/************MenuDynamicCode******************//*
ul.semiopaquemenu 
{
    background:#00245F;
    font-size:14px;
    
}

ul.semiopaquemenu li a{
color:white;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
}

#loginBar #loginBarHandle 
{
    background-color: #00245F;
    color: white;
    font-size: 11px;
}
    
#loginBar a:link, a:visited {
    color: White;
}

#loginBar a {
    color: white;
}

#loginBar {
    background-color: #00245F;
    color: White;
    
}
*//************MenuDynamicCode******************/

/**********************Dynamic Style******************
body
{
     /*background-color:#FFFFFF;
     background:url(/Images/px1.gif);
*//*
        background-color:#5D8BB0;
}

.errorlabel
{
    color:Red;
    font-weight:bold;
    
}
.titlefonts
{
    font-size:18px; color:#ffffff;
    
}
.subtitlefonts{ font-size:12px;  color: white;}

.borderdiv
{
    border-width:1px; 
    border-color:#003063;
}
.Divd
{
    background-color:#5D7B9D;
}

.MainDiv
{
    color: #003366;
font-weight:bold;
    
}
.MenuItem
{
	background-color:#3366CC;
	color:White;
    font-size:10pt;
}
.MenuItemHover
{
	color:Gray;
    font-size:10pt;
}
*****************************************************/
.wrapper {
    padding: 2px;
    max-width: 1060px;
    width: 99%;
    margin: 10px auto;
}


.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}

.column {
    flex: 1;
    /*border: 1px solid gray;*/
    margin: 2px;
    padding: 5px;
    /*&:first-child{ margin-left: 0;}
    &:last-child { margin-right: 0; };*/
}


@media screen and (max-width: 980px) {
        .columns .column {
            margin-bottom: 5px;
            flex-basis: 65%;
            &:nth-last-child(2)
            {
                margin-right: 0;
            }

            &:last-child {
                flex-basis: 100%;
                margin: 0;
            }

        }
}



.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: #5d7b9d;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 17px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        color: #ffffff;
    }

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}


@keyframes example {

    /*50% {
        transform: rotate(180deg);
    }*/
    0%, 40% {
        transform: rotate(0deg);
    }

    60%, 100% {
        transform: rotate(360deg);
    }
   /* 0% {
        background-color: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background-color: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background-color: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background-color: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background-color: red;
        left: 0px;
        top: 0px;
    }*/
}

@media only screen and (max-width: 768px) { /*//and (min-width: 700px) {*/
    .borderdiv {
        margin-right: 10% !important;
        margin-left: 10% !important;
    }
    .outerDiv {
        margin-right: 10% !important;
        margin-left: 10% !important;
    }
}