/*//////////////////////////////////////////////////////////////////////////////
// ##########################################################################///
// # DM System 1.0                                                          # //
// ########################################################################## //
// #                                                                        # //
// #               --  DM SYSTEM IS NOT FREE SOFTWARE  --                   # //
// #                                                                        # //
// #  ============ Programming & Designing By Dilovan Matini =============  # //
// #      Copyright � 2013 - 2014 Dilovan Matini. All Rights Reserved.      # //
// #------------------------------------------------------------------------# //
// #------------------------------------------------------------------------# //
// # Website: www.qkurd.com                                                 # //
// # Contact us: dilovan@lelav.com                                          # //
// ########################################################################## //
//////////////////////////////////////////////////////////////////////////////*/

/**************  The custum css classes  ************/
.shutdown-message {
    padding: 4px;
    background-color: #ffffc4;
    font: 500 12px 'Montserrat', tahoma, arial;
}
.browser-support-message {
    padding: 4px;
    background-color: #d8ebff;
    font: 500 12px 'Montserrat', tahoma, arial;
}
.block-content {
    position: relative;
    padding: 10px 1px;
}
.block-footer {
    height: 84px;
    margin: 0;
    padding: 6px 7px;
    border: 1px solid #1c1c1c;
    background-color: #2b2b2b;
}
.block-footer > .footer-left {
    float: right;
    text-align: right;
}
.block-footer > .footer-left > img {
    width: 77px;
    height: 77px;
    margin: 4px 2px 4px 10px;
}
.block-footer > .footer-left > div {
    margin: 2px 0;
    white-space: nowrap;
    font: normal 15px "adobe-clean", tahoma;
    color: #aaa;
}
.block-footer > .footer-left > div a,
.block-footer > .footer-left > div a:hover {
    font: bold 15px "adobe-clean", tahoma;
    color: #fff;
}
.block-footer > .footer-left > div.title {
    font: normal 20px/34px "Uniform Medium", arial;
}
.block-footer > .footer-left > div.title > span {
    font: normal 20px "Uniform Medium", arial;
    color: #fff;
}
.block-footer > .footer-right {
    float: left;
    text-align: left;
}
.block-footer > .footer-right > div {
    margin: 0 0 2px 0;
    white-space: nowrap;
}
.block-footer > .footer-right > div > span {
    display: inline-block;
    width: 160px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    background-color: #444444;
    font: normal 15px "adobe-clean", "Droid Arabic Kufi", arial, tahoma;
    color: #aaa;
    line-height: 22px;
}
.block-footer > .footer-right > div.bigger > span {
    margin-bottom: 2px;
    height: 30px;
    font-size: 17px;
    color: #fff;
    line-height: 28px;
}
.block-footer > .footer-right > div > span.live-clock {
    font-size: 22px;
}
.block-footer > .footer-right > div > span.date {
    font-size: 16px;
}
.main-menubar {
    position: relative;
    height: 32px;
    border: 1px solid #555;
    border-color: #155b76 #555 #155b76;
    background-color: #006080;
    background-image: url(menubar-back.svg?x=1.25);
    background-image: -moz-linear-gradient(top, #007299, #006080);
    background-image: -webkit-linear-gradient(top, #007299, #006080);
    background-image: -o-linear-gradient(top, #007299, #006080);
    background-image: linear-gradient(top, #007299, #006080);
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}
.main-menubar > .logo {
    float: left;
    margin: 0 20px 0 5px;
    line-height: 26px;
}
.main-menubar > .user {
    float: right;
    padding-right: 12px;
    font: 600 13px/32px 'Montserrat', tahoma, arial;
    color: #fff;
    text-shadow: 0 -1px #155b76;
}
.main-menubar > .user > i {
    color: #fff;
}
.main-menubar > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
.main-menubar > ul a {
    font: 600 15px 'Montserrat', tahoma, arial;
    text-decoration: none;
    white-space: nowrap;
}
.main-menubar > ul li > a {
    display: block;
}
.main-menubar > ul > li > a > span {
    display: inline-block;
    padding: 1px 4px 0;
    margin: 0 0 0 5px;
    vertical-align: middle;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    background-color: #ff0000;
    color: #fff;
    text-shadow: 0 0 0 transparent;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.main-menubar > ul li,
.main-menubar > ul ul a {
    position: relative;
    text-align: left;
}
.main-menubar > ul > li {
    display: inline-block;
    border-right: 1px solid #227393;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.main-menubar > ul > li:hover > a {
    background-color: #fff;
    color: #333;
    border-left: none;
    padding-left: 9px;
    text-shadow: none;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+PC9zdmc+);
    background-image: -moz-linear-gradient(top, #f0f0f0, #fff);
    background-image: -webkit-linear-gradient(top, #f0f0f0, #fff);
    background-image: -o-linear-gradient(top, #f0f0f0, #fff);
    background-image: linear-gradient(top, #f0f0f0, #fff);
}
.main-menubar > ul > li:first-child,
.main-menubar > ul > li:first-child > a {
    border-left-color: transparent;
}
.main-menubar > ul > li:last-child,
.main-menubar > ul > li:last-child > a {
    border-right-color: transparent;
}
.main-menubar > ul > li > a {
    color: #fff;
    line-height: 15px;
    text-shadow: 0 -1px #155b76;
    padding: 2px 8px;
    line-height: 28px;
    border-left: 1px solid #59b5da;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.main-menubar > ul ul {
    position: absolute;
    display: none;
    min-width: 160px;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    border-top: none;
}
.main-menubar ul {
    left: -1px;
}
.main-menubar > ul ul a {
    color: #555;
    line-height: 18px;
    padding: 5px 8px;
    border-top: 1px solid #e4e4e4;
}
.main-menubar > ul ul a > i {
    color: #555;
}
.main-menubar > ul ul ul {
    top: 0;
    left: 160px;
}
.main-menubar > ul ul a:hover {
    background-color: #f0f0f0;
}
.main-menubar > ul ul ul li:first-child a {
    border-top-color: #b3b3b3;
}
.main-menubar > ul ul li a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.main-menubar > ul ul li a:hover {
    padding-left: 15px !important;
    border-left: 3px solid #b3b3b3;
}
.main-menubar > ul li:hover > ul {
    display: block;
}
.main-menubar > .logout,
.main-menubar > .logout:hover,
.main-menubar > .logout:active,
.main-menubar > .logout:focus,
.main-menubar > .logout:visited {
    float: right;
    width: 36px;
    height: 32px;
    margin: 0;
    border-bottom: 1px solid #751515;
    border-left: 1px solid #c44040;
    vertical-align: middle;
    text-align: center;
    background-color: #d60000;
}
.main-menubar > .logout:hover {
    background-color: #e80000;
}
.main-menubar > .logout > i,
.main-menubar > .logout:hover > i {
    margin-top: -1px;
    margin-left: 2px;
    color: #fff;
    font-size: 20px;
    line-height: 33px;
    text-shadow: 0 -1px #155b76;
}
.photo-viewer-place {
    position: relative;
    width: 400px;
    height: 450px;
}
.photo-viewer-place > img {
    width: 400px;
    height: 450px;
}
.photo-viewer-place > div {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 394px;
    padding: 7px 5px;
    color: #f5f5f5;
    text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8), 0 0 0.3em rgba(0, 0, 0, 0.8),
        0 0 0.3em rgba(0, 0, 0, 0.8);
    filter: dropshadow(color=#000000, offx=1, offy=1, Positive=1);
    text-align: left;
    background-color: rgba(0, 0, 0, 0.3);
    font: bold 15px arial, tahoma;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.photo-viewer-place > i.download-photo {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 10;
}
.photo-viewer-place > i.download-photo:hover {
    text-shadow: 0 0 12px rgba(0, 0, 0, 1);
}

div.form-number > input {
    font: bold 15px arial, tahoma !important;
    color: #006080;
    letter-spacing: 0.3px;
}
div.form-number > div {
    background-color: #006080 !important;
    color: #fff !important;
    border-color: #0e2744 !important;
}
div.form-number[ft="IE"] > div {
    background-color: #631616 !important;
    border-color: #420d0d !important;
}

div.manifest-number {
    width: 100px;
    letter-spacing: 1.2px;
    overflow-x: auto !important;
}

div.consignee-name {
    width: 124px;
    white-space: nowrap;
    overflow-x: auto !important;
    font-weight: normal !important;
}

.yard-slot {
    display: inline-block;
    width: 180px;
    height: 50px;
    position: relative;
    margin: 5px;
    box-sizing: border-box;
}
.yard-slot:hover {
    cursor: pointer;
}
.yard-slot.iblock {
    display: block;
}
.yard-slot.occupied:before {
    display: inline-block;
    content: "";
    width: 62px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url(layout/truck.head.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.yard-slot:after {
    display: inline-block;
    content: attr(data-number);
    width: 118px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ccc;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    font: bold 40px arial;
    line-height: 50px;
    color: #999;
    -webkit-text-size-adjust: auto !important;
    text-size-adjust: auto !important; /* to make font-size change with zoom property in mobile devices */
}
.yard-slot:hover:after {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.yard-slot > div {
    display: none;
    position: absolute;
    top: 4px;
    left: 150px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1;
}
.yard-slot > div:after,
.yard-slot > div:before {
    border: 8px solid transparent;
    border-right-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    content: "";
    right: 100%;
    top: 12px;
}
.yard-slot > div:before {
    border-right-color: #ccc;
    border-width: 9px;
    margin-top: -1px;
}
.yard-slot:hover > div {
    display: inline-block;
}
.yard-slot:hover > div * {
    text-align: left;
    white-space: nowrap;
    line-height: 15px;
    color: #555;
}
.yard-slot.rotate90,
.yard-slot.rotate270 {
    width: 50px;
    height: 180px;
}
.yard-slot.rotate90:before {
    top: auto;
    bottom: 6px;
    right: -6px;
    transform: rotate(90deg);
}
.yard-slot.rotate90:after {
    left: -34px;
    top: 34px;
    transform: rotate(270deg);
}
.yard-slot.rotate90 > div {
    left: 35px;
    top: 130px;
}
.yard-slot.rotate270:before {
    top: 6px;
    left: -6px;
    right: auto;
    bottom: auto;
    transform: rotate(270deg);
}
.yard-slot.rotate270:after {
    right: -34px;
    bottom: 34px;
    left: auto;
    top: auto;
    transform: rotate(270deg);
}
.yard-slot.rotate270 > div {
    left: 35px;
    top: 12px;
}
.yard-slot.rotate180 {
    transform: rotate(180deg);
}
.yard-slot.rotate180:after {
    transform: scale(-1, -1);
}
.yard-slot.rotate180 > div {
    left: -45px;
    transform: rotate(180deg);
}
.yard-slot.cwhite:after {
    background-color: #fff;
    color: #000;
}
.yard-slot.cred:after {
    background-color: #d80000;
    color: #fff;
}
.yard-slot.cblue:after {
    background-color: #006cd8;
    color: #fff;
}
.yard-slot.cyellow:after {
    background-color: #ffe500;
    color: #000;
}
.yard-slot.cgreen:after {
    background-color: #48ad00;
    color: #fff;
}
.yard-slot.cpurple:after {
    background-color: #990099;
    color: #fff;
}