/* SHARED */
html {
    height: 100%;
}

body {
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 17px;
    color: #555557;
    background: url('/Images/Delicates_stripe_pattern.png') repeat;
    height: 100%;
}

textarea:focus, input:focus{
    outline: 0;
}

button,
.clickable {
    cursor: pointer;
}

input[type="text"]
{
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 17px;
    color: #555557;
}

h1 {
    font-size: large;
    font-weight: bold;
}

.content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
    /*overflow: hidden;*/
}

/*.wrapper {
    height: 100%;
    margin: 0 auto;
}*/

.clear {
    clear: both;
}

header {
    margin: 20px 0;
}

.logo {
    float: left;
    background: url('/Images/Delicates_logo.png') no-repeat;
    height: 53px;
    width: 206px;
}

.fullscreen {
    float: right;
    width: 29px;
    height: 29px;
}

.eventName {
    float: right;
    margin: 0 10px 0 20px;
    font-size: 25px;
}

a.back {
    background: url('/Images/Btn_back.png') no-repeat top left;
    display: block;
    width: 29px;
    height: 29px;
    /*text-indent: -9999px;*/ /* hides the link text */
}

.backButton {
    float: right;
    height: 29px;
    width: 29px;
}

#content {
    overflow: hidden;
}

#footer {
    margin: 30px 0;
    padding: 2px 8px;
    background-color: white;
    text-align: right;
}

.searchDefault {
    color: #c2c3c5 !important;
    font-weight: normal !important;
}

.searchText {
    color: #555557;
    font-weight: bold;
}

::selection {
    background: #69c0ba;
}


/* LOGIN */
#loginForm {
    width: 205px;
    margin: 200px auto;
    background-color: white;
    padding: 30px 20px;
}

    #loginForm fieldset .userDelicates {
        margin: 20px 0 5px 0;
    }

    #loginForm fieldset .passwordDelicates,
    #loginForm fieldset .rememberDelicates {
        margin: 5px 0 20px 0;
        color: #c2c3c5;
    }

    #loginForm input {
        width: 205px;
        height: 25px;
        border-radius: 3px;
        border: 1px solid #e5e5e6;
        background-color: #f0f0f1;
        font-size: 17px !important;
        font-weight: normal !important;
    }

        #loginForm input[type="checkbox"] {
            width: auto;
            height: auto;
        }

        #loginForm input[type="submit"] {
            width: 205px;
            height: 25px;
            border-radius: 3px;
            border: 1px solid #e5e5e6;
            background-color: #69c0ba;
            color: white;
            text-transform: uppercase;
        }
.field-validation-error {
    display: none;
}


/* EVENTS */
#events .eventsHeader {
    margin: 30px 0 15px 0;
}

    #events .eventsHeader .title {
        float: left;
        width: 140px;
        height: 40px;
        border-radius: 3px;
        background-color: #69c0ba;
        color: white;
        text-align: center;
        text-transform: uppercase;
        font-size: 22px;
        padding: 15px 0 0 0;
    }

#events .eventsGrid {
    margin-top: -44px; /* button height(29px) + margin-bottom .eventsHeader(15px) */
}

#events .t-grid-top {
    height: 29px;
}

    #events .eventsGrid .t-header,
    #events .eventsGrid .t-grid-header,
    #orders .ordersGrid .t-header,
    #orders .ordersGrid .t-grid-header {
        background: none;
        border: none;
    }

.t-grid-header .t-header .t-link {
    display: none;
}

#events .eventsGrid .t-grid-pager,
#orders .ordersGrid .t-grid-pager {
    display: none;
}

.t-grid table {
    border-collapse: collapse;
}

.t-widget,
.t-toolbar,
.t-button,
.t-alt {
    background: none;
    border: none;
}

.t-grid-toolbar {
    padding: 0;
}

    .t-grid-toolbar a {
        float: right;
    }

.t-grid tr.t-state-selected {
    background-color: #69c0ba;
}

    .t-grid tr.t-state-selected td {
        border-color: #69c0ba;
        background-color: #69c0ba;
    }

.t-grid tr {
    border-top: 5px solid;
    border-bottom: 5px solid;
    border-color: transparent;
}

.t-grid td {
    margin: 5px 0;
    padding: 0;
    border: none;
    line-height: 1em;
    height: 32px;
    background-color: white;
}

.t-grid .t-button {
    margin: 0 10px 0 0;
}

a.t-button.t-button-icon.t-grid-add {
    margin: 0 !important;
}

body .t-button-icon {
    padding: 0;
}

.t-icon.t-add {
    background-image: url("/Images/Btn_add.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
}

.btnTotalen {
    background-image: url("/Images/Btn_euro.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
}

.t-icon.t-select {
    background-image: url("/Images/Btn_select.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.t-icon.t-edit {
    background-image: url("/Images/Btn_edit.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.t-icon.t-delete,
.t-icon.t-cancel {
    background-image: url("/Images/Btn_delete_small.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.t-icon.t-insert,
.t-icon.t-update {
    background-image: url("/Images/Btn_save_small.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.t-icon.t-cancel {
    background-image: url("/Images/Btn_delete_small.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

input {
    border: none;
}

.t-alt.t-grid-edit-row,
.t-edit-container {
    height: 37px;
}

.t-grid-edit-row .text-box {
    margin: 0;
    width: 100px;
    border: 1px solid #69c0ba;
}

.t-grid-edit-row .t-edit-form td {
    height: 27px !important;
}

.t-widget .text-box {
    color: #555557;
}

.textLeft {
    text-align: left;
    width: 110px !important;
}

.textRight {
    text-align: right;
}

.textRightBold {
    text-align: right;
    font-weight: bold;
}

.textLeftBold {
    text-align: left;
    font-weight: bold;
}

.totalen {
    text-align: right;
}

.showAmount {
    display: table-cell !important;
    color: #69c0ba;
}

/* ORDERS + DETAILS */
button {
    border: none;
}

/* order index */
#klantnaam,
#klantnummer {
    height: 27px;
    width: 206px; /* =breedte logo */
    margin-top: 10px;
    border-radius: 3px;
    border: 1px solid #e5e5e6;
    float: left;
    font-weight: bold;
}

/* order detail */
.klantnummerBestelling {
    height: 27px;
    width: 75px;
    margin-top: 10px;
    border-radius: 3px;
    border: 2px solid #69c0ba;
    float: left;
    font-weight: bold;
}

#klantnaamBestelling,
#klanttelnrBestelling {
    height: 27px;
    width: 242px;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 3px;
    border: 2px solid #69c0ba;
    float: left;
    font-weight: bold;
}

.toevoegen {
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: left;
    margin: 11px 0 0 10px;
}

.annuleren,
.annuleren img {
    height: 29px;
    width: 29px;
    border-radius: 3px;
}

.zoeken {
    background-image: url("/Images/Btn_search.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: left;
    margin: 11px 0 0 10px;
}

.lijstPerGerecht,
.lijstPerKlant,
.lijstExtras {
    background-color: #69c0ba;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    width: 177px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 11px 0 0 10px;
}

.bewaren {
    background-image: url("/Images/Btn_save_big.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 11px 0 0 10px;
}

.bewaren2 {
    background-image: url("/Images/Btn_save_big.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 0 0 0 10px;
}

.afdrukken {
    background-image: url("/Images/Btn_print.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 11px 2px 0 10px;
}

.afdrukken2 {
    background-image: url("/Images/Btn_print.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 0 2px 0 10px;
}

.annuleren {
    background-image: url("/Images/Btn_delete_big.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 11px 0 0 10px;
}

.annuleren2 {
    background-image: url("/Images/Btn_delete_big.png");
    background-position: 0 0;
    width: 29px;
    height: 29px;
    border-radius: 3px;
    float: right;
    margin: 0 0 0 10px;
    padding: 0 !important;
}

.increase {
    background-image: url("/Images/Btn_up.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.decrease {
    background-image: url("/Images/Btn_down.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.reset {
    background-image: url("/Images/Btn_delete_small.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.memoEmpty {
    background-image: url("/Images/Btn_memo_empty.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.memoFull {
    background-image: url("/Images/Btn_memo_full.png");
    background-position: 0 0;
    width: 27px;
    height: 27px;
    border-radius: 3px;
}

.orderDetailsHeader {
    margin-bottom: 20px;
}

.orderDetailsTable {
    border-spacing: 10px 10px;
    margin-left: -10px;
    margin-right: -10px;
}

.orderDetailsTable tr {
    height: 27px;
}

.orderDetailsTable td {
    border-radius: 3px;
    vertical-align: middle;
}

.categorienaam,
.opmerkingenTitel {
    text-align: center;
    color: white;
    background-color: #69c0ba;
    padding: 5px 0;
    height: 17px;
    width: 600px;
}

.gerechtnaam,
.totaal {
    background-color: white;
    padding-left: 20px;
    height: 27px;
}

    .gerechtnaam input {
        width:450px;
    }

.extraTitel {
    text-align: center;
    color: white;
    background-color: #69c0ba;
    font-weight: bold;
}

.totaal {
    text-transform: uppercase;
    font-weight: bold;
}

.totaalprijs {
    color: white;
    background-color: #69c0ba;
    padding-left: 20px;
    font-weight: bold;
}

.hoeveelheid,
.extraprijs input,
.hoeveelheid input {
    text-align: center;
    background-color: white;
    color: #555557;
    font-size: 17px;
    border-radius: 3px;
    height: 27px;
    width: 75px;
    border: 1px solid #69c0ba;
}

.extraprijs {    
    color: white;
    border-radius: 3px;
    background-color: #555557;
    padding-left: 20px;
}

.prijs {
    color: white;
    background-color: #555557;
    padding-left: 20px;
    width: 221px;
    height: 27px;
}

.spatie {
    height: 10px;
}

.memoOrderDetail {   
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 17px;
    color: #555557;
    background-color: #f0f0f1;    
    resize: none;
    border: none;
    border-radius: 3px;
    height: 23px;
    width: 100%;
    overflow:hidden;
}

td.memoOrderDetail {
    background-image: url("/Images/Arrow.png");
    background-position-x: 15px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-right: 10px;
}

.extraOrder {
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 17px;
    color: #555557;
    background-color: white;
    resize: none;
    border: none;
    border-radius: 3px;
    width: 583px;
    border: 2px solid #69c0ba;
}

.memoOrder {
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    font-size: 17px;
    color: #555557;
    background-color: white;
    resize: none;
    border: none;
    border-radius: 3px;
    width: 990px;
    border: 2px solid #69c0ba;
}