/* CSS stylesheet voor crm123 - ingelogd */

/* Opmaak van TinyMCE wanneer er geen opmaak is (dus geen buttons voor Italic, Bold, enz) */

textarea#note_after {
    visibility: visible !important;
    width: 480px;
    height: 200px;
    border-color: #bbb;
}
textarea.mceNoEditor {
    visibility: visible !important;
    width: 480px;
    height: 200px;
    border-color: #bbb;
    font-size: 14px;
    font-family: lato, "sanserif";
}
img {
    border: 0px;
}
img.listSize {
    width: 20px;
}
.rotate {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}
.rotate:hover {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
div#main {
    border: 1px #bbb solid;
    background-color: #fff;
    width: 100%;
    margin: 0;
    padding: 30px;
    font-family: lato, sanserif;
    color: #373737;
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    /* meegroeien met childs, voor alles behalve IE */
    display: block;
    overflow: hidden;
    -moz-box-shadow: 0px 0px 10px 0px #ccc;
    -webkit-box-shadow: 0px 0px 10px 0px #ccc;
    box-shadow: 0px 0px 10px #ccc;
    box-sizing: border-box;
}
/*div#main    meegroeien met childs, aanvullend voor IE
{
  display: block;
}  --- dit staat al in regel 16 */

div#main_left {
    width: 685px;
    float: left;
    padding: 0px;
    margin: 0px;
    /*  background-color: #fff;*/
}
div.fieldColumnHead {
    color: #333;
    font-family: lato, sanserif;
    font-size: 15px;
    padding-bottom: 3px;
    /*  padding-left: 5px;*/
    margin-top: 10px;
}
div.fieldLabel {
    float: left;
    width: 140px;
    text-align: right;
    color: #333;
    font-family: lato, sanserif;
    font-size: 16px;
    line-height: 24px;
    padding-right: 12px;
}

div.noFieldLabel  /* SV: Nodig om een Checkbox links te kunnen uitlijnen, zonder het verplichte Label. */
{
	 width: 0px;
}

div.tableInput select {
    height: 26px;
    width: 138px;
    border: 1px #c7c7c7 solid;
    background-color: #efefef;
    color: #333;
    font-family: "Roboto Slab", sanserif;
    font-size: 17px;
    padding-left: 3px;
    margin: 0px !important;
}

div.fieldLabelTable
{
	 float: left;
	 width: 280px;
	 color: #333;
	 font-family: "Roboto Slab", sanserif;
	 font-size: 16px;
	 border-top: #777 1px dotted;
	 margin-top: 14px;
	 padding-top: 5px;
}
div.fieldText {
    float: left;
    width: 290px;
    color: #333;
    font-family: lato, sanserif;
    /*font-size: 0px;*/
    height: 20px;
    margin-top: 7px;
}
.fieldTextTD
{
	 width: 150px !important;
	 margin-top: 0px !important;
	 height: unset !important;
}
div.fieldTextTable {
    float: left;
    width: 280px;
    color: #333;
    font-family: lato, sanserif;
    font-size: 17px;
    margin-top: 5px;
}
div.fieldMotivatie {
    color: #B3632A;
}
.fieldTextLocked {
    background-color: #f5f5f5 !important;
    border: 1px #ddd solid !important;
    color: #777 !important;
    font-weight: normal !important;
    cursor: not-allowed;
}
img.contact_icon {
    margin-bottom: -7px;
    margin-left: 5px;
}
div.fieldTextarea {
    margin-top: 15px;
    width: 655px;
}
.note {
    width: 400px;
    height: 150px;
}
/* Sidebar div, en header (h2), verschillend voor MET tabs en ZONDER tabs (top -114 resp. -14) */

div#main_right, div#main_right_no_tab {
    width: 208px;
    float: right;
    padding: 14px 9px 15px 9px;
    margin: 0px;
    background-color: #fcfcfc;
    border: #adf 2px solid;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -khtml-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    -moz-box-shadow: 0px 2px 7px 0px #eee;
    -webkit-box-shadow: 0px 2px 7px 0px #eee;
    box-shadow: 0px 2px 7px 0px #eee;
}
#main_right h2, #main_right_no_tab h2 {
    margin-top: 0px;
    font-size: 20px;
    color: #fff;
    background-color: #0573BE;
    padding: 5px 15px 7px 15px;
    font-weight: 400 !important;
    text-align: center;
}
#main_right h2 {
    margin-top: -118px;
    margin-right: -10px !important;
    margin-left: -10px !important;
    margin-bottom: -20px !important;
}
#main_right_no_tab h2 {
    margin: -14px -10px 20px -10px !important;
}
#main_right h2.sitebar
{
	 margin-top: 500px;
	 margin-right : -10px !important;
	 margin-left : -10px !important;
	 margin-bottom: 0px !important;

}
div.dataTables_wrapper {
    margin-top: 20px;
}
div.dataTables_filter {
    margin: 10px 0 10px 0;
    float: right;
}
#main_right h5 {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 13px;
    color: #B15E21;
}
#main h4 {
    margin-top: 0px;
    margin-bottom: 3px;
    font-size: 16px;
    color: #445;
    margin-top: 1px;
}
#main_right a {
    margin-top: 0px;
    font-size: 13px;
    color: #373737;
}
.fieldText input
/* input veld van deze div */

    {
    height: 22px;
    width: 233px;
    border: 1px #c7c7c7 solid;
    background-color: #efefef;
    color: #333;
    font-size: 14px;
    font-family: lato, "sanserif";
    /*font-weight: bold;*/
    padding-left: 6px;
    margin: 2px 1px 0px 0px;
}
::-webkit-input-placeholder {
    color: #777 !important;
    font-weight: normal !important;
}
input:-moz-placeholder {
    color: #777 !important;
    font-weight: normal !important;
}
input:-ms-placeholder {
    color: #777 !important;
    font-weight: normal !important;
}
::-ms-input-placeholder {
    color: #777 !important;
    font-weight: normal !important;
}
:-ms-input-placeholder {
    color: #777 !important;
    font-weight: normal !important;
}
.fieldDate input
/* input veld van deze div */

    {
    height: 22px;
    width: 106px;
    border: 1px #c7c7c7 solid;
    background-color: #efefef;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    padding-left: 6px;
    margin: 2px 16px 0px -4px;
}
.fieldHwSwOms {
    width: 247px !important;
}
.inputHwSwOms {
    width: 232px !important;
}
.fieldHwSwAant {
    width: 50px !important;
}
.inputHwSwAant {
    width: 45px !important;
}
.fieldCheckbox {
    width: 23px !important;
    margin-left: 0px !important;
    border: 0px !important;
    background-color: #fff !important;
}
input[type=file]
/* Opmaak voor de browse Invoer-Veld van file-upload */

    {
    background-color: #efefef;
}
#fieldNum input {
    height: 20px;
    width: 77px;
    border: 1px #ccc solid;
    background-color: #ededed;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    padding-left: 3px;
    margin: 3px;
}
#sidebar_length, #sidebar_filter, .dataTables_filter label {
    color: #777;
}
#sidebar_filter input {
    height: 20px;
    width: 149px;
    border: 1px #ccc solid;
    background-color: #ededed;
    color: #333;
    font-size: 13px;
    font-weight: normal;
    padding-left: 3px;
    margin: 3px;
}
.fieldText input, input:hover, input:focus {
    /*border: 1px #aac solid;*/
    border-top: 0px #D78A00 solid;
    border-right: 1px #D78A00 solid;
    border-bottom: 1px #D78A00 solid;
    border-left: 0px #D78A00 solid;
    background-color: #eaeff7;
    font-size: 15px;
    float: inherit;
}
input, input:hover, input:focus, input:active {
    border-top: 0px #aac solid;
    border-right: 1px #aac solid;
    border-bottom: 1px #aac solid;
    border-left: 0px #aac solid;
    background-color: #fcedd1;
    height: 21px;
    font-size: 15px;
}
div#left td input, input:focus {
    border: 1px #da7 solid;
    background-color: #f7efea;
}
div#left td input:hover {
    border: 1px #da7 solid;
    background-color: #f7efea;
    -webkit-box-shadow: 0 0 2px 2px #E0E0E0;
    /* SV: Shadow bij hover  */
    box-shadow: 0 0 2px 2px #E0E0E0;
}
.fieldText select
/* select veld van deze div */

    {
    height: 26px;
    width: 242px;
    border: 1px #c7c7c7 solid;
    background-color: #efefef;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    padding-left: 3px;
    margin: 3px 0px 0px 0px;
}
.fieldText select:hover, select:focus {
    border: 1px #aac solid;
    background-color: #eaeff7;
}
.fieldTextTable select
/* select veld van deze div */

    {
    /*    height: 26px;*/
    width: 250px;
    margin-right: 10px;
    border: 1px #c7c7c7 solid;
    background-color: #efefef;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    /*    padding-left: 3px;*/
    /*    margin: 3px 0px 0px 0px;*/
}
.fieldTextTable select:hover, select:focus {
    border: 1px #aac solid;
    background-color: #eaeff7;
}
.fieldText checkbox
/* checkbox veld van deze div */

    {
    height: 23px;
    width: 23px;
    border: 1px #ccc solid;
    background-color: #ededed;
    color: #333;
    /*  font-size: 14px;
     font-weight: bold;
     padding-left: 3px;
     margin: 3px;*/
    float: left;
}
.fieldText .button
/* input veld van deze div */

    {
    background-color: #0573BE;
    color: #ffffff;
    font-weight: normal;
    font-size: 13px;
    height: 30px;
    width: 123px;
    border: 1px solid #3380dd;
    cursor: pointer;
    float: left;
    margin-right: 5px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -webkit-appearance: none;
    /* zorgt dat iOS niet override */
}
.fieldText .button:hover {
    background-color: #58A7D2;
    border: 1px solid #0573BE;
    -webkit-appearance: none;
    /* zorgt dat iOS niet override */
}
.fieldLabel {
    float: left;
    width: 115px;
    text-align: right;
    color: #333;
    font-family: lato, sanserif;
    font-size: 14px;
    padding-right: 15px;
    margin-top: 10px;
    clear: both;
}
span.compulsoryField {
    color: #833;
}
.sorting_asc {
    background: url('../../assets/images/sort_asc.png') no-repeat center right;
}
.sorting_desc {
    background: url('../../assets/images/sort_desc.png') no-repeat center right;
}
/* OVERRIDE for tinyMCE */

table.mceLayout {
    width: 500px !important;
}
div.layout_label_adresblok {
    color: #B15E21;
    font-size: 14px;
    margin: 0 0 4px 0;
}


div.form_section, div.listCat   /* Heading between parts of a form AND LIST-CATEGORIES */
{
   color: #f29907;
/*    color: #53A0FD; */
   margin: 35px 0 28px 0;
   padding: 12px 14px;
   /*font-family: lato, sans-serif;*/
   font-size: 18px;
   font-weight: 300;
   background: #fefef7;
   border-top: #e7e7e7 4px solid;
   border-bottom: #e3e3e3 2px solid;
   height: 27px;
}

div.form_section_in_progress {
    color: #f29907;
    margin: 30px 0 4px 0;
    padding: 4px 7px;
    background: #fefef7;
    border-top: #e4b364 2px solid;
    border-bottom: #e4b364 2px solid;
    height: 27px;
}

div.form_section_ready {
    color: #009900;
    margin: 30px 0 4px 0;
    padding: 4px 7px;
    background: #f7fef7;
    border-top: #90d690 2px solid;
    border-bottom: #90d690 2px solid;
    height: 27px;
}

div.subForm_section{
    margin-top: 30px;
    margin-left: 147px;
    color: #ee2139;
    font-size: 16px;
    border-bottom: #f1f1f1 2px solid;
    padding: 10px 12px 13px 12px;
}

/*#todo_list
{
  position: absolute;
  width: 255px;
  float: right;
  padding: 10px 10px 12px 10px;
  margin: 58px 0 0 707px;
  background-color: #A9D3C5;
  border: #89B3A5 1px solid;
}*/

#todo_list {
    font-family: lato, sanserif;
    position: absolute;
    z-index: 999999999;
    top: 250px;
    right: 0px;
    /*left: 50%;*/
    width: 360px;
    float: right;
    padding: 10px 10px 12px 10px;
    /*margin : -336px 0 0 739px;*/
    background-color: #fff;
    border: 1px #ccc solid;
    -moz-box-shadow: 0px 4px 12px 0px #aaa;
    -webkit-box-shadow: 0px 4px 12px 0px #aaa;
    box-shadow: 5px 5px 20px #ccc;
    height: 600px;
    overflow-y: auto;
}
#todo_listClosed {
    font-family: lato, sanserif;
    position: fixed;
    top: 220px;
    right: 0px;
    width: 30px;
    height: 140px;
    float: right;
    /*   position: absolute;
   top: 260px;
   right: -24px;
   width: 38px;
   height: 150px;
   float: right;*/
    /* padding: 10px 10px 12px 10px; */
    /* margin: -336px 0 0 739px; */
    background-color: #fff;
    border: 1px #ccc solid;
    box-shadow: 0px 0px 10px #ccc;
    cursor: pointer;
    z-index: 999;
}
#todo_listClosed p {
    margin: -34px -57px 0 -55px;
    font-size: 18px;
    /*color: #135E54;*/
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#todo_list h1 {
    /*color: #B15E21;*/
    font-size: 20px;
    margin: 0px 0 9px 0;
    font-weight: normal;
    cursor: pointer;
}
#todo_list h2 {
    color: #135E54;
    font-size: 15px;
    margin: -6px 0 4px 0px;
    font-weight: normal;
}
#todo_list h3 {
    color: #01519E;
    font-size: 13px;
    margin: 5px 0 5px 7px;
}
#todo_list p {
    font-size: 13px;
    margin: 5px 0 5px 14px;
}
#todo_corner {
    margin: -31px 0px 0 341px;
    width: 30px;
    height: 30px;
    /*  border: 2px #d00 solid;*/
    background: url('../../assets/images/todo_corner.png') no-repeat top right;
}
#todo_cornerClosed {
    margin: -21px 0px 0 9px;
    width: 30px;
    height: 30px;
    /* border: 2px #d00 solid; */
    background: url('../../assets/images/todo_corner.png') no-repeat top right;
}
/* SV: De verschillende kleuren voor datum verlopen, vandaag en morgen, toekomst */

span.sp_r {
    color: #b00;
}
span.sp_b {
    color: #00b;
}
span.sp_z {
    color: #111;
}
/* SV: tekst en icoontjes in de todo-box */

div.todo_datum_soort {
    float: left;
    width: 295px;
}
div.todo_icons {
    float: right;
    width: 60px;
}
p.todo_tekst {
    clear: both;
    color: #444;
}
/*hr.todo_ruler { height: 2px; background: #fff url(../../assets/images/todo_hr.png) no-repeat scroll center; border: 0px; }*/

hr.todo_ruler {
    height: 2px;
    border-top: 2px dotted #bbb;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
}
/* SV: CSS */

.loginScherm {
    -webkit-animation-name: fade-in-animation;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes fade-in-animation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.loginScherm {
    -moz-animation-name: fade-in-animation;
    -moz-animation-duration: 0.4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}
@-moz-keyframes fade-in-animation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.loginScherm {
    -o-animation-name: fade-in-animation;
    -o-animation-duration: 0.4s;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: forwards;
}
@-o-keyframes fade-in-animation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.loginScherm {
    animation-name: fade-in-animation;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
@keyframes fade-in-animation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Opmaak van de popup (fancybox), onder andere Factuur maken */

#fancyBox {
    font-family: lato, sanserif;
    color: #333;
}
/* Wordt gebruikt om DIV voor foutmelding wel aan te maken voor gebruik met Javascript.*/

div.displayNone {
    display: none;
}
/* Voor tekstje achter tekstveld, zoals: cm */
.textInfo {
    width: 100px;
    float: left;
    margin-top: 12px;
    display: contents;
}
/* en icoontjes, zoals telefoon en mail */
.textInfo i {
    width: 45px !important;
    float: right !important;
    margin-top: -22px !important;
    font-size: 21px !important;
    color: #555 !important;
}

.fieldText256 {
   width: 256px !important;
}
/* NJJ CSS voor status overzicht */

/* SV: Opmaak van de Specifieke velden bij Modellen */
div.productRow {  /* In deze regel zit zowel het label als de content */
   margin: 21px 24px 17px 12px;
   background: #f9f9f9;
   border: #e9e9e9 1px solid;
   border-bottom: #ddd 2px solid;
   padding: 7px 12px;
}

div.productRow:hover {
   background-color: #f0f0f0;
   border: #ddd 1px solid;
   border-bottom: #ccc 2px solid;
}

div.productLabel {  /* In deze regel zit zowel het label als de content */
   margin-bottom: 7px;
   font-size: 17px;
   color: #0070AE;  /* SV: Deze kleur krijgt hij al van het a-element, maar dat mag niet van 'toeval' afhangen. */
}

div.productDelete {  /* Deleteknop voor speciale- en vrije velden */
   float: right !important;
   font-size: 21px !important;   
   color: #aaa;
   margin: -2px 23px 0px 0;
   padding: 10px 15px;
}
div.productDelete:hover {
   color: #a11;
}

div.productUnlink {  /* Deleteknop voor speciale- en vrije velden */
   float: right !important;
   font-size: 21px !important;   
   color: #aaa;
   margin: -2px 23px 0px 0;
   padding: 10px 15px;
}
div.productUnlink:hover {
   color: #39F;
}
div.productMove {  /* Deleteknop voor speciale- en vrije velden */
   float: right !important;
   font-size: 18px !important;   
   color: #aaa;
   margin: -2px 23px 0px -15px;
   padding: 10px 15px;
   cursor: move;
}
div.productMove:hover {
   color: #777;
}
div.productPrice {
   float: right;
}
div.productContent {  /* In deze regel zit zowel het label als de content */
   padding: 10px;
   margin-left: 34px;
   color: #333;
   background-color: #fff;
   /*border: #eee 1px solid;*/
   border-bottom: #ddd 1px solid;
   /*border-radius: 4px;*/
}
div.productAlert {  /* Als model of option verwijderd is deze class toevoegen. */
    border-left: 4px solid #ee223a;
    border-right: 4px solid #ee223a;
}
div.productAlert:hover {  /* Als model of option verwijderd is deze class toevoegen. */
    border-left: 4px solid #ee223a;
    border-right: 4px solid #ee223a;
    background-color: #ee223a17;
}

p.popupLabel {  /* labels bij velden in de lightbox */
   margin-bottom: 7px;
   font-size: 17px;
   color: #0070AE;
}

/* SV: De CSS voor de mooi knop om naar boven te scrollen */
#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 65px;
    right: 0;
    background-color: #DDD;
    color: #777;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 7px 7px 0px 0px;
}
#back2Top:hover {
    background-color: #AAA;
    color: #333;
}

.catOverview {  /* Lijstje van categorieën onder Merk, waaraan dit merk gekoppeld is */
   margin: 3px 0 5px 14px;
   border-bottom: 1px solid #ddd;
   padding: 0 2px;
}

.catOverview:hover {
   background-color: #eee;
}

div.linkMerkCatContainer {
   padding-top: 10px;
   line-height: 25px;
}

.linkMerkCat:hover { /* Het linkje op de Model-pagina, naar Merk of Cat */
   color: #EE2139 !important;
}

.linkMerkCat { /* Het linkje op de Model-pagina, naar Merk of Cat */
   color: #f29907 !important;
   font-size: 17px !important;
}

.linkMerkCatNoHover { /* Het linkje op de Offerte-detail-pagina, naar Merk of Cat, maar dan zonder link / zonder hover! */
   color: #f29907 !important;
   font-size: 17px !important;
}

.doubleSpace {
   width: 30px;
   color: #fff;
}

.dot-gray { /* De dot tussen de linkjes */
   font-size: 14px;
   color: #ddd;
}

ul.ulNoDisk {
   list-style-type: none;
   margin-left: -40px;
}
.optielijstLI {
    font-size: 16px !important;
    line-height: 24px !important;
}
/* CSS voor Drag and Drop */
 /*NJJ Deze wordt ook door clander gebruikt. */
.ui-state-highlighted {
   width: 877px;
   padding: 40px 7px;
   background-color: #ffffcc;
   border: 1px dotted #ffcc66;
   cursor: move;
   margin-top: 12px;
   margin-left: 12px;
}
   

/* Linkjes rechterkant, op navigatie 2*/
.nav2ExtraLinks {
   float: right;
   font-size: 13px !important;
   color: #777;
}
.nav2ExtraLinks a, .nav2ExtraLinks a:hover {
   color: #C7773F;
   font-size: 13px !important;
}
/* NJJ extra informatie voor e-mail adressen */
div.info{
	padding-top: 5px; 
	padding-bottom: 5px; 
	font-size: 15px;
	display: inline-block;
}

/* Status van een offerte in het Edit-scherm */
.offerStatus {
   float: right;
   font-size: 17px;
   border: 1px solid #ddd;
   padding: 6px 20px;
   background-color: #f3f3f3;
   border-radius: 3px;   
}
.offerStatus:hover {
   cursor: default;
}
/* BUTTON Status */
.productStatus {
	margin: 2px auto 13px !important;
	font-size: 17px;
	/*border: 1px solid #ddd !important;*/
	background-color: #f3f3f3 !important;
}
.productStatus:hover {
   cursor: default;
}
/* Kleuren: 0 in de maak, 1 aangeboden, 2 Opdracht, 3 Verlopen, 4 vervallen, 5 goedgekeurd */
.oS0 {
   color: #53A0FD;
}
.oS1 {
   color: #f29907 !important;
}
.oS2 {
   color: #009900 !important;
}
.oS3 {
   color: #b00 !important;
}
.oS4 {
   color: #999 !important;
}
.oS5 {
   color: #007700 !important;
   font-weight: bold;
}

/* Status in het overzicht: geen border en zo ... */
.offerStatusGrid {
/*   font-size: 17px;
   padding: 3px 7px;*/
}

/* SV: Image in front of Variant on Option Edit Page */
div.mug_container_variant {
   float: left;
   margin: 1px -32px 0px 0px;
}

div.mug_img_variant {
   width: 130px;
   margin-left: 13px;
}

.img_variant {
   width: 79px;
   height: 79px;
}

div.variantContent {
   padding: 10px;
   margin-left: 76px;
   color: #333;
   background-color: #fff;
   border-bottom: #ddd 1px solid;
}

p.variant-font-icon {
   margin: 0 0 0 1px;
   font-size: 80px;
   color: #999;
}
/* SV: END Image in front of Variant on Option Edit Page */

.fieldTextNumeric {
   width: 154px !important;
   margin-top: 0px !important;
   text-align: right;
   float: right;
}

.subTotalText {
   font-size: 18px;
   text-align: right;
}
.subTotalNumber {
   font-size: 18px;
   /*font-weight: bold;*/
}

/* SV: het tabelletje met extra info bij het aanvinken van de opties, in de offertemodule  */
div.optionVariationTable{display: flex;}
div.optionVariationTable .ciTable { margin-left: 30px; }
div.optionVariationTable .ciHTh { color:#111; font-weight: 500; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ccc;}
div.optionVariationTable .ciTd0 { color:#333; font-weight: 200; font-size: 14px; background-color: #fff;}
/* SV: EINDE het tabelletje met extra info bij het aanvinken van de opties, in de offertemodule  */

/* SV: Offerte totaal VERSTUUR PDF */
.btnSendPdf {
   /*font-size: 18px;*/
   color: #ffffff !important;
   background-color: #5281c1 !important;
   padding-left: 7px;
   padding-right: 7px;
   margin-right: 24px !important;
}

.divBtnSendPdf {
   float: right;
   font-size: 18px;
   margin-left: 12px;
}

.offerTotal {
   float: left;
   font-size: 18px;
   margin-left: 12px;
}

.varPriceRow{
	border: 1px solid #dadada;
	margin: 15px 0 6px 0;
}
.ciTrLine {
	border-bottom: 1px solid #dadada !important;
}
div.FullWidthfooter {
    position: sticky;
    bottom: 0;
    height: 24px;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px 15px 20px 15px;
    box-sizing: border-box;
    text-align: center;
    font-family: lato, sanserif;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    background-image: linear-gradient(to right, #35A3ED, #c5e5f5);
    border-bottom: 2px solid #E79A09;
    -moz-box-shadow: 0px 0px 5px 0px #999;
    -webkit-box-shadow: 0px 0px 5px 0px #999;
    box-shadow: 0px 0px 5px #999;
}

div.checkboxColumn > div.fieldLabel {
    width: 250px;
}

}