body{
    font-family: 'Quicksand', sans-serif;
}
.navbar{
    background-color: white;
    border-color: #34a4c4;
}

.navbar-brand .header-logo{
    height: 30px;
}

.navbar .navbar-text{
    color: #7c7c7c;
}

.top-actions .actions-holder{
    margin-left: auto;
    margin-right: auto;
    width: 835px;
}

.top-actions .actions-holder-sm{
    margin-left: auto;
    margin-right: auto;
    width: 275px;
}


.top-actions .top-actions-action{
    display: inline-block;
    padding: 4px;
    cursor: pointer;
    width: 135px;
}

.top-actions-action.selected{
    background-color: #dd3a38;
}

.top-actions .top-actions-action p{
    margin: 0;
    color: white;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
.top-actions .top-actions-action img{
    height: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 5px;
}
.date-time-box{
    display: inline-block;
    background-color: #d33a38;
    padding: 5px;
    position: relative;
    margin-top: -10px;
    margin-bottom: 15px;
}

.date-time-box span{
    color: white;
    font-weight: 500;
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 23px;
}

.date-time-box .icon{
    height: 15px;
    margin-left: 5px;
}

.date-time-box input{
    width: 200px;
    outline: none;
    border-radius: 2px;
    border: none;
    padding: 4px 10px 4px 10px;
    text-align: center;
}


.serviceType{
    width:170px;
    background: #c7c7c7;
    padding: 2px;
    cursor: pointer;
    display: inline-block;
}

.cl-w{
    color: white;
}

.serviceType .s-title{
    text-align: center;
    color:white;
    font-weight: bold;
    width: 100%;
    font-size: 16px;
    padding: 7px;
    margin-bottom: 0;
}

.serviceType .s-inner{
    background: white;
    border-radius:2px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.serviceType .s-inner p{
    text-align: center;
    margin-bottom: 0;
    font-size: 14px;
}

.serviceType .s-inner .s-time{
    text-align: center;

}


.serviceType.selected{
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    background: #d33a38 !important;

}


/* form starting stylings ------------------------------- */
.group {
    position:relative;
    margin-bottom:30px;
}
.group input {
    font-size:14px;
    padding:5px 5px 5px 5px;
    display:block;
    width:200px;
    border:none;
    border-bottom:1px solid #757575;
}
.group input:focus {
    outline:none;
}

/* LABEL ======================================= */
.group label {
    color:#999;
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:8px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

/* active state */
.group input:focus ~ label, .group input:valid ~ label {
    top:-16px;
    font-size:12px;
    color:#5264AE;
}

/* active state */
.group input.n-zo ~ label {
    color:#c9302c;
}

/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:200px; }
.bar:before, .bar:after     {
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#5264AE;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%;
    width:200px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:0.5;
    filter: alpha(opacity=50);
}

/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to    { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
    to    { width:0; background:transparent; }
}



.block-item{
    margin-top: 20px;
    margin-bottom: 20px;
}

.coupon-text{
    border-radius: 2px;
    outline: none;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid #c7c7c7;
    padding: 4px;
}

.save-button{
    background-color: #35a6c6;
    color: white;
    font-weight: 400;
}

.save-button:hover, .save-button:focus{
    color:white;
}

.dashboard-upper{
    background-color: white;
    min-height: 150px;
    width: 80%;
    margin-left: 10%;
    padding: 20px;
}

.search-box{
    border-radius: 2px;
    outline: none;
    min-width: 200px;
    border: 1px solid #c7c7c7;
    padding: 4px;
    display: inline-block;
    margin-top: 1em;
}
.dropdown-button{
    color:black !important;
    text-decoration: none !important;
}

.dashboard-body{
    width: 90%;
    margin: auto;
    padding: 10px;
    padding-bottom:200px;
    position: relative;
}

.grid-item {
    width:300px;
    height: 192px;
    margin-bottom: 10px;
    background: white;
    border-radius: 2px;
    color: #c7c7c7;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}
.grid-item .item{
    font-size: 18px;
    text-align: center;
    display: block;
}
.grid-item .date-box {
    font-size: 22px;
    text-align: center;
    display: block;
    margin-top: 24px;
}

.grid-item-active{
    background: #33a7c6;
    color: white;
}
.grid{
    margin: auto;
}
.order-status {
    position: absolute;
    color: #839091;
    top: 10px;
    font-weight: bold;
}
.grid-item-selected .order-status {
    color: #fff;
}

.r-c {
    display: table;
    width: 90%;
    margin: auto;
    margin-top: 15px;
}
.left-box {
    float: left;
    background: white;
    padding-right: 5px;
}
.right-box{
    float:right;
    background: white;
    padding-left: 5px;
}

.grid-item-active .left-box{
    background: #33a7c6;
}

.grid-item-active .right-box{
    background: #33a7c6;
}

.middle-box {

}

.grid-item .middle-box .rep{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjEwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj42PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgICAgPGRjOnN1YmplY3Q+CiAgICAgICAgICAgIDxyZGY6U2VxLz4KICAgICAgICAgPC9kYzpzdWJqZWN0PgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNToxMTowNiAxNDoxMToyMzwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjMuMjwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KSFOgHwAAAGRJREFUCB1jZICCq1evsn369Knp////cSAhRkbGRXx8fHXa2tq/QHwWEAECIEVAqhyoAMwHsYFiIHYFiGACESAAMwnCg5DIYnCFyAqwseEKQW5CV4AsBncjyOEgN8Gsg3kGphkA9MkjzcddVy8AAAAASUVORK5CYII=);
    background-repeat: repeat-x;
    height: 6px;
    display: block;
    margin-top: 7px;
}

.grid-item .arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #dd3a38;
    top: 100%;
    position: absolute;
    z-index: 10;
    left: 130px;
    display: none;
}

.grid-item-active .arrow-down{
    border-top: 20px solid #dd3a38;
}

.grid-item-selected{
    background-color: #dd3a38;
    color: white;
    opacity: 1 !important;
}

.grid-item-selected .left-box{
    background: #dd3a38;
}

.grid-item-selected .right-box{
    background: #dd3a38;
}

.grid-item-selected .arrow-down{
    display: block;
}

.grid-item-active .middle-box .rep, .grid-item-selected .middle-box .rep{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjEwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj42PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgICAgPGRjOnN1YmplY3Q+CiAgICAgICAgICAgIDxyZGY6U2VxLz4KICAgICAgICAgPC9kYzpzdWJqZWN0PgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNToxMTowNiAxNDoxMTo1MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjMuMjwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KnotldQAAAEBJREFUCB1jYICC////swFxBxA/g2IQmw0mD6ehioAUCuiAK4AxgNIgk9DBM5g8E4xBiEZWuAiLYkwxoJ14PQMAO6pZpaWDiOUAAAAASUVORK5CYII=);
}

.order-id{
    margin-top: 25px;
    text-align: center;
    display: block;
}


.top-actions{
    height: 64px;
    background-color: #f55756;
    padding-top: 4px;
    padding-bottom: 4px;
    position: fixed;
    width: 100%;
    top: 50px;
    z-index: 1000;
}



/*.popover{*/
/*max-width: 1200px;*/
/*}*/

/*.data-col{*/
/*min-width: 100px;*/
/*display: inline-block;}*/

.data-col{
    width: 13%;
    display: inline-block;
    float: left;
}

.data-col-big{
    width: 17.5%;
}

.data-col .d-title{
    display: block;
    text-align: center;
    font-size: 14px;
    color: #c7c7c7;
    padding-top: 10px;
    padding-bottom: 10px;
}

.data-col .d-data{
    display: block;
    text-align: center;
    font-size: 14px;
    color: #777777;
}

.data-popup{
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    background: white;
    border: 1px solid #efefef;
    z-index: 10;
    margin-top: 30px;
    top: 180px;
    display: none;
    border-left: 5px solid #dd3a38;
    border-radius: 2px;
    min-width: 900px;
    -webkit-transition:all .1s ease-in-out;
    transition:all .1s ease-in-out;
}
.data-popup .link-button {
    cursor: pointer;
    float: right;
    margin-right: 40px;
    font-weight: 500;
    color: #33a7c6;
}

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

.cost-calc-body{
    width: 800px;
    margin: auto;
    height: 300px;
    background-color: white;
    border-radius: 2px;
    position: relative;
}

.title-holder{
    padding-top: 25px;
    padding-bottom: 30px;
}

.lbh-container{
    background-color: #dd3a38;
    height: 300px;
    width: 270px;
    border-radius: 2px;
}

.lbh-container .input-holder{
    margin-top: 10px;
    border-radius: 2px;
    background-color: white;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3px;
    padding-bottom: 3px;
}

.lbh-container .input-holder:last-child{
    margin-top: 30px;
}

.lbh-container .input-holder input{
    border: none;
    outline: none;
    width: 160px;
}
.lbh-container .input-holder .left-icon{
    font-size: 18px;
    font-weight: bold;
    color: #cccccc;
    margin-left: 5px;
    margin-right: 5px;
}

.src-dst-container{

}

.src-dst-container .input-holder{
    border-radius: 2px;
    border: 2px solid #df4543;
    width: 210px;
    margin-top: 20px;
    padding: 3px;
    display: inline-block;
}

.src-dst-container .input-holder img{
    height: 25px;
    margin-right: 5px;
    padding: 5px;
}

.src-dst-container .input-holder input{
    width: 160px;
    border: none;
    outline: none;
}

.calc-button{
    color: white;
    background: #33a7c6;
    border: 1px solid #33a7c6;
    border-radius: 2px;
    padding: 5px;
    display: block;
    margin: auto;
    outline: none;
}

.calc-button:disabled{
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.dtpicker-bg {
    width: 150%;
}




/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.ui-view-container {
    position: relative;
    height: 65px;
}

[ui-view].ng-enter, [ui-view].ng-leave {
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

[ui-view].ng-enter {
    opacity: 0;
    filter: alpha(opacity=0);
}

[ui-view].ng-enter-active {
    opacity: 1;
    filter: alpha(opacity=100);

}

[ui-view].ng-leave {
    opacity: 1;
    filter: alpha(opacity=100);

}

[ui-view].ng-leave-active {
    opacity: 0;
    filter: alpha(opacity=0);

}




.result-body {
    width: 800px;
    margin: auto;
    background: white;
    border-top: 2px solid #CCCCCC;
    margin-bottom: 25px;
    display: none;
    padding-bottom: 20px;
}

.service-method {
    display: inline-block;
    margin: 25px;
    width: 160px;
    color: #de3a38;
    border: 2px solid #de3e3c;
    padding: 10px;
    border-radius: 2px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
    cursor: pointer;
}


.service-method.not-avail .service-class-price{
    color: white;
    opacity:0;
}

.service-method div{
    text-align: center;
    padding-bottom: 10px;
}

.service-method.selected{
    color: white;
    background: #de3a38;
}

.service-method .img-white{
    display: none;
}

.service-method .img-red{
    display: inline;
}


.service-method.selected .img-red{
    display: none;
}

.service-method.selected .img-white{
    display: inline;
}

.service-method.not-avail .img-red{
    display: none;
}

.service-method.not-avail .img-white{
    display: none;
}


.loading{
    display: none;
}




.navbar-text{
    float: left;
    margin-left: 15px;
    margin-right: 15px;
}

.navbar-header{
    float: left;
}

.proceed-button{
    display: block;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    background-color: #33a5c5;
    color: white;
    border: none;
    outline: none;
    padding: 10px 15px 10px 15px;
    border-radius: 2px;
}

.proceed-button:disabled{
    opacity: 0.6;
}


.modal-backdrop {
    bottom: 0;
    position: fixed;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    border-top: 5px solid #34a5c5;
    z-index: 1100;
}

.bottom-link{
    text-decoration: none;
    color: #34a6c5;
    cursor: pointer;
}

a.bottom-link:visited{
    text-decoration: none;
}

a.bottom-link:hover{
    text-decoration: none;
}

.container .text-muted {
    margin: 15px 0;
    font-size: 12px;
}

.m-r-40{
    margin-right: 80px;
}

.m-t-20{
    margin-top: 20px;
}

::-webkit-input-placeholder {
    color: #c7c7c7;
    font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
    color: #c7c7c7;
    font-style: italic;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #c7c7c7;
    font-style: italic;
}

:-ms-input-placeholder {
    color: #c7c7c7;
    font-style: italic;
}

.input-class{
    padding: 5px;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #f55756;
    outline: none;

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.input-class:focus{
    -webkit-box-shadow: 0 0 2px rgba(221,57,55,1);
    box-shadow: 0 0 2px rgba(221,57,55,1);
}

.service-class-price{
    font-size: 12px;
}

.service-class-time{
    font-size: 16px;
    font-weight: 500;
}
.service-class-name{
    font-size: 12px;
}

#date-picker, #date-picker-one, #date-picker-two, #date-picker-three {
    top: 100% !important;
    left: 0px !important;
}

.address-group{
    max-height: 500px;
    overflow: scroll;
}

.m-t10{
    margin-top: 10px;
}

.cl-custom{
    color: white;
    opacity: 0.4;
}

.cl-custom:hover{
    color: white;
    opacity: 0.9;
}

.custom-cl{
    position: absolute;
    right: 0;
    margin-right: 5px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);opacity: .2;
    cursor: pointer;
}

.custom-cl:hover{
    filter: alpha(opacity=60);opacity: .6;
}

.modal-content{
    border-left: 5px solid #34a5c5;
}
.carousel{
    height: 300px;
}
.carousel-indicators li{
    background-color: #ededed;
    border: 1px solid #ededed;
}
.carousel-indicators .active{
    background-color: #a3b1b2;
}


.loading-parent{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

.loading-mask{
    background: black;
    opacity: 0.2;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
}

.loading-image{
    display: block;
    margin: auto;
    top: 40%;
    left: 40%;
    z-index: 10001;
}
button {
    text-transform: uppercase;
    font-weight: bold!important;
}
.dtpicker-buttonCont .dtpicker-button{
    background: #f55756;
}
.dtpicker-header .dtpicker-value{
    color: #f55756;
}
.radio-inline{
    padding-right: 30px;
}
.search-box{
    background-color: #fff;
    min-width: 125px;
}
.search-box input{
    border: none;
}
.search-box input:focus{
    outline: none;
}
.search-box .glyphicon{
    color: #7c7c7c;
}
.grid-pick>.grid-pick-item{
    width: 100%;
    height: 90px;
    margin-bottom: 10px;
    background: white;
    border-radius: 2px;
    color: #c7c7c7;
    font-weight: bold;
    cursor: pointer;
    position: relative;
}
.grid-pick-item{
    border-left: 10px solid #c7c7c7;
    -webkit-transition: height 0.2s ease;
    -moz-transition: height 0.2s ease;
    -ms-transition: height 0.2s ease;
    -o-transition: height 0.2s ease;
    transition: height 0.2s ease;
}
.grid-pick-item.grid-item-active{
    border-left: 10px solid #e67e22;
    color: #e67e22;
}
.grid-pick-item.grid-item-done{
    border-left: 10px solid #1ccba9;
    color: #1ccba9;
}
.grid-pick-status{
    background-color: #ededed;
    padding: 5px;
    color:#595959;
    font-weight:normal;
    text-align: center;
    font-size: 12px;
}
.grid-pick-service{
    margin-top: 0px;
    text-transform: uppercase;
    font-weight: bold;
    color: #c7c7c7;
    text-align: center;
}
.grid-pick-detail{
    color: #595959;
    font-weight: normal;
    position: absolute;
    top: 5px;
    z-index: 10;
}
.detail-holder{
    padding-top: 20px;
    height: 100%;
    border-right: 1px solid #c7c7c7;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 1px 0px #c7c7c7;
    box-shadow: 0px 1px 1px 0px #c7c7c7;
}
.grid-toggle {
    position: absolute;
    top: 5px;
    right: 9px;
    font-size: 20px;
}
.grid-pick-item.grid-item-selected {
    color: #fff;
    height: 300px;
}
.grid-item-selected .grid-pick-detail {
    color: #fff;
}
.detail-holder-select {
    display: none;
}
.grid-item-selected  .detail-holder-select{
    display: block;
    height: 100%;
    background-color: #c7c7c7;
}
.grid-item-selected.grid-item-done .detail-holder-select{
    background-color: #1ccba9;
}
.grid-item-selected.grid-item-active .detail-holder-select{
    background-color: #e67e22;
}
.grid-item-selected .detail-holder{
    display: none;
}
.address-holder{
    margin-top: 30px;
    border: 1px solid;
    border-radius: 4px;
    font-weight: normal;
    padding: 5px 10px;
    height: 125px;
    overflow: auto;
    background-color: #c7c7c7;
}
.grid-item-done .address-holder{
    background-color: #1ccba9;
}
.grid-item-active .address-holder{
    background-color: #e67e22;
}
.address-holder>h4{
    margin-bottom: 5px;
}
.address-holder>span{
    font-size: 12px;
    display: block;
}
.item-select-detail{
    position: absolute;
    top: 5px;
    right: 80px;
}

.detail-box {
    background-color: #fff;
    color: #c7c7c7;
    margin: 0 4px;
    width: 50px;
    display: inline-block;
    padding: 0px 5px;
    font-size: 10px;
    height: 16px;
}
.detail-box>.inner-detail{
    float: right;
    color: #85c9dc;
}
.track-point {
    margin-top: 20px;
    width: 110px;
    float: left;
    text-align: center;
    position: relative;
}
.track-number {
    display: block;
    border: 1px solid;
    width: 25px;
    height: 25px;
    padding-top: 4px;
    border-radius: 100%;
    margin: 0 auto;
}
.track-name{
    font-size: 10px;
    display: block;
    font-weight: normal;
    margin-top: 5px;
}
.track-date{
    font-size: 10px;
    display: block;
    font-weight: normal;
    margin-top: 3px;
}
.track-complete .track-number {
    background-color: white;
    color: #85C9DC;
}
.next-arrow {
    position: absolute;
    width: 86px;
    border: 1px solid;
    top: 12px;
    left: 67px;
}
.pick-city-detail{
    margin-top: 28px;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}
.print-position{
    position: absolute;
    right: 5px;
    bottom: -22px;
}
a.cancel-position {
    position: absolute;
    left: 3px;
    color: #F55756;
    text-decoration: none;
}
a.cancel-position:hover {
    color: #DD3A38;
}