/*
Releaz
---------------------------------------------------------------------------------------------------- */

/*
01 Import
---------------------------------------------------------------------------------------------------- */

@import url("normalize.css");
@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700);

/*
02 Base
---------------------------------------------------------------------------------------------------- */

body {
    font-family: 'Verdana', sans-serif;
    font-style: normal;
    line-height: 1.8;
    font-size: 12px;
    color: #4E5860;
    background: #fafafa url(../images/background.png) repeat-y;
}

.left { float: left; }
.right { float: right; }

/*
03 Typo
---------------------------------------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { margin-bottom: .938em; font-size: 100%; font-weight: 400; color: #009BDB; font-weight: 700; line-height: 1.125em; }
h1 { font-size: 2em; line-height: 1.125em; font-weight: 100; border-bottom: 1px solid #EFEFEF; padding-bottom: 20px; }
h2 { font-size: 1.25em; font-weight: 400; }
h3 { font-size: 1em; font-weight: 400; }
h4 { font-size: .875em; }
h5 { font-size: .813em; }
h6 { font-size: .688em; }

p {	margin-bottom: 1em; }
small, .small { font-size: .750em; }
strong { font-weight: 700; }
em { font-style: italic; }
a { color: #4E5860; }
a:hover { color: #ef4423; text-decoration: none; }
hr { background: #DDD; height: 1px; border: 0; }

/*
04 Buttons
---------------------------------------------------------------------------------------------------- */

input[type="submit"] {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #50bb12 url(../images/button-save.png) no-repeat 6px 6px;
    border: 1px solid #149b17;
    color: #FFF;
    padding: 7px 10px 7px 35px !important;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    position: fixed;
    right: 30px;
    top: 112px;
}

#external-form input[type="submit"], #temporary-form input[type="submit"] {
    position: relative !important;
    right: 0px;
    top: 0px;

}

input[type="submit"]:hover { background: #149b17 url(../images/button-save.png) no-repeat 6px 6px; border: 1px solid #50bb12; }

.login input[type="submit"] {
    background: #50bb12 url(../images/button-save.png) no-repeat 10px 9px;
    padding: 10px 20px 10px 45px !important;
    position: relative;
    top: auto;
    right: auto;
}

.button { display: block; float: left; margin: 0 15px 30px 0; }
.button a { color: #FFF; text-decoration: none; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #009BDB !important; color: #FFF !important; font-weight: 700 !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #009BDB !important; background: #00bcf2 !important; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none !important; }

/*
05 Layout
---------------------------------------------------------------------------------------------------- */

#page { width: 100%; }

#options {
    position: fixed;
    left: 240px;
    top: 113px;
}
#options ul { padding: 0; margin: 0; }
#options ul li { list-style: none; margin-right: 10px; display: inline-block; }
#options a, .button {
    background: #999999 url(../images/button-button.png) no-repeat 3px 3px;
    color: #FFF;
    padding: 5px 10px 5px 35px;
    display: block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #666666;
    text-decoration: none;
    font-size: 11px;
}
#options a:hover { background: #666666 url(../images/button-button.png) no-repeat 3px 3px; border: 1px solid #999999; }
#options .button-create { background: #50bb12 url(../images/button-create.png) no-repeat 3px 3px; border: 1px solid #149b17; }
#options .button-create:hover { background: #149b17 url(../images/button-create.png) no-repeat 3px 3px; border: 1px solid #50bb12; }
#options .button-update { background: #ff961c url(../images/button-update.png) no-repeat 3px 3px; border: 1px solid #ff7b1c; }
#options .button-update:hover { background: #ff7b1c url(../images/button-update.png) no-repeat 3px 3px; border: 1px solid #ff961c; }
#options .button-delete { background: #e8171b url(../images/button-delete.png) no-repeat 3px 3px; border: 1px solid #bb171b; }
#options .button-delete:hover { background: #bb171b url(../images/button-delete.png) no-repeat 3px 3px; border: 1px solid #e8171b; }

#content {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 10px 10px;
    margin: 75px 30px 0 240px;
    background: #FFF;
    border: 1px solid #cdced3;
}

#footer {
    padding: 0 10px;
    margin: 10px 35px 0 240px;
    font-size: .8em;
    text-align: center;
}

/* header */

#header {
    position: fixed;
    width: 100%;
    top: 0;
    height: 40px;
    z-index: 999;
    background: #FFF;
    border-top: 3px solid #009BDB;
    border-bottom: 1px solid #cdced3;
}

#logo { position: fixed; left: 26px; top: 3px; }
#profile { float: right; margin: 10px 20px; }
#profile a { text-decoration: none; }

/* navigation */

#mainmenu { width: 210px; position: absolute; top: 26px; z-index: 1; }
#mainmenu ul { padding: 5px 0; list-style: none; width: 211px; }
#mainmenu ul li:first-child { border-top: 1px solid #cdced3; }
#mainmenu ul li a {
    color: #848484;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    background: url(../images/arrow.png) no-repeat 8px 14px;
    padding: 9px 25px;
    border-bottom: 1px solid #cdced3;
    border-right: 1px solid #cdced3;
}
#mainmenu .active, #mainmenu li:hover { background: #e0e1e6; }
#mainmenu ul li a:hover, #mainmenu ul li a.active { text-decoration: none; background: #fafafa url(../images/arrow_hover.png) no-repeat 8px 14px; border-right: 1px solid #fafafa; border-left: 3px solid #009BDB; }
#mainmenu ul li:hover a, #mainmenu ul li.active a { color: #009BDB; }

/* breadcrumb */

.breadcrumbs {
    margin: 43px 0 0 211px;
    height: 40px;
    background: #FFF url(../images/breadcrumb_bg.png);
    border-bottom: 1px solid #cdced3;
}

.breadcrumbs a:first-child { padding-left: 20px; }
.breadcrumbs a {
    padding-right: 20px;
    margin-right: 10px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    background: url(../images/breadcrumb_li.png) right no-repeat;
}
.breadcrumbs span { color: #009BDB; }


/*
06 Tables
---------------------------------------------------------------------------------------------------- */

table { width: 100%; }
td, th { padding: 3px 6px; border: 1px solid #FFF; text-align: left; }

thead tr th a { text-decoration: none; }
thead tr th:first-child { border-top-left-radius: 5px; }
thead tr th:last-child { border-top-right-radius: 5px; }

.grid-view .summary { text-align: right; color: #DDD; font-weight: 300; }
.detail-view th { width: 200px; }

.items { }
.items thead th { background: #009BDB; }
.items thead th a { color: #FFF; }
.items tr:hover { background: #DDD; }
.odd { background: #fdfdfd; }
.even { background: #ededed; }
.selected {background: #9AFE2E; }
.is-ordered {background: #C6D880}

.items .id { width: 30px; }
.items .date { width: 100px; }

.items .id input { width: 50px; }
.items input[name="[id]"] { width: 30px !important; }
.items .button-column { width: 60px; }

.items .filters { background: #DDD; }
.items .filters input, .items .filters select { border: 1px solid #e5e5e5; background: #FFF; padding: 3px; width: 95%; }

.pager { text-align: center; margin: 20px 0; }
.pager .selected a { background: #009BDB !important; }
.pager ul.yiiPager a:link, .pager ul.yiiPager a:visited { color: #009BDB; }
.pager ul.yiiPager .selected a { color: #FFF; }

/*
08 Notifications
---------------------------------------------------------------------------------------------------- */

div.flash-error, div.flash-notice, div.flash-success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
div.flash-error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
div.flash-notice { background: #FFF6BF; color: #514721; border-color: #FFD324; }
div.flash-success { background: #E6EFC2; color: #264409; border-color: #C6D880; }
div.flash-error a { color: #8a1f11; }
div.flash-notice a { color: #514721; }
div.flash-success a { color: #264409; }
div.form .rememberMe label { display: inline; }
div.view { padding: 10px; margin: 10px 0; border: 1px solid #C9E0ED; }
div.search-form { padding: 10px; margin: 10px 0; background: #eee; }

/*
09 Loans Drag and Drop
---------------------------------------------------------------------------------------------------- */

div.loan-customers { width: 50%; float: right }
div.loan-products { width: 50%; float: left }

div.loan-products, div.loan-customers { height: 400px; overflow: scroll; }

.ui-draggable-dragging { background-color: #e8171b; color: #FFF; }
.ui-droppable { background-color: #ff961c; color: #FFF; }
.ui-droppable.hoverClass { background-color: #50bb12; }

#external-droppable:hover { background-color: #DDD; }

/*
10 Planning Drag and Drop
---------------------------------------------------------------------------------------------------- */

div.plan-employees { width: 50%; float: left }
div.plan-vehicles { width: 50%; float: right }

/*
10 Contract module
---------------------------------------------------------------------------------------------------- */

.cursor-pointer {
    cursor: pointer;
}

.continue-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #50bb12 url(../images/button-button.png) no-repeat 6px 6px!important;;
    border: 1px solid #149b17;
    color: #FFF;
    padding: 7px 10px 7px 35px !important;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    position: fixed;
    right: 30px;
    top: 112px;
}

#item-added-contract {
    background-color: #9AFE2E;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 0px;
    margin-left: -210px;
    width: 400px;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    font-size: 1.5em;
}

.order-vcu {
    background-color: lightblue;
}