/* CSS stylesheet voor crm123 - ingelogd */
/* BASIS KLEUREN                         */
/* Donker blauw  #004d8c  0E7CC1         */
/* Donker bruin                          */

html, body
{
   /*  height: 100%;*/
}

body
{
   display: block;
   background-color: #eee;
   margin: 0;
   padding: 0;
}

p
{
   margin: 5px 0px 5px 0px;
}

#main h2
{
   color: #58A7D2;
   margin-left: 0px !important;
}

#main ul, #main li
{
   color: #333;
   line-height: 18px;
   word-break: break-word;
}

div#container
{
   position: relative;
   /*  min-height: 100%;   Footer niet meer onderaan */
   height:auto !important;
   height:100%; /* voor IE */
   width: 96%;
   /*left:50%;*/
   /*position: absolute;*/
	/*left: 50%;*/
	/*margin-left: 95px;*/
   margin: 0 auto 0 auto;    /* horizontaal centreren  */
   /*  background-color: #e7e7e7; */
   padding: 0px;
}

div.error
{
   background-color: #fee;
   border: 1px solid #fcc;
   color: #d33;
   width: 228px;
   margin-left: 155px;
   padding: 1px 5px 1px 7px !important;
   display: block;  /* Nodig? */
   clear: both;

}
div.errorHeader
{
   background-color: #fee;
   border: 1px solid #fcc;
   color: #d33;
   width: 500px;
   margin-left: 26%;
   padding: 1px 5px 1px 7px !important;
   display: block;  /* Nodig? */
   clear: both;
	z-index: 99999;
	position: absolute;
}
div.error_td
{
   margin-left: 0px;
}
div#error_upload
{
   background-color: #fdd;
   border: 1px solid #dbb;
   color: #d00;
   width: 652px;
   margin-left: 0px;
   margin-bottom: 10px;
   padding: 3px !important;
   display: block;  /* Nodig? */
   clear: both;
}
div.warning_p
{
   background-color: #ffd;
   border: 1px solid #ddb;
   color: #e80;
   width: 795px;
   margin-top: 30px;
   /*margin-left: 155px;*/
   padding: 1px 5px 1px 7px !important;
   display: block;  /* Nodig? */
   clear: both;

}
div#warning
{
   background-color: #ffd;
   border: 1px solid #ddb;
   color: #e80;
   width: 648px;
   padding: 5px 5px 5px 8px !important;
   margin-bottom: 10px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
   border-radius: 3px;
   -moz-box-shadow: 0px 2px 5px 0px #efefef;
   -webkit-box-shadow: 0px 2px 5px 0px #efefef;
   box-shadow: 0px 2px 5px 0px #efefef;
}
div#warning{
   /*KK: Geniale CSS die SV steeds steelde maar jammer genoeg bij hem niet werkte en bij mij wel!
   Dit is voor Safari*/
   -webkit-animation-name: from_top_animation;
   -webkit-animation-duration:0.3s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-name: from_top_animation;
   -moz-animation-duration:0.3s;
   -moz-animation-timing-function: linear;
   -moz-animation-fill-mode: forwards;
   -o-animation-name: from_top_animation;
   -o-animation-duration:0.3s;
   -o-animation-timing-function: linear;
   -o-animation-fill-mode: forwards;
   -ms-animation-name: from_top_animation;
   -ms-animation-duration:0.3s;
   -ms-animation-timing-function: linear;
   -ms-animation-fill-mode: forwards;
}
@-webkit-keyframes from_top_animation {
   from {
      transform: translatey(-80px);
   }
   to {
      transform : translatey(0);
   }
}
@-moz-keyframes from_top_animation {
   from {
      transform: translatey(-80px);
   }
   to {
      transform : translatey(0);
   }
}
@-o-keyframes from_top_animation {
   from {
      transform: translatey(-80px);
   }
   to {
      transform : translatey(0);
   }
}
@-ms-keyframes from_top_animation {
   from {
      transform: translatey(-80px);
   }
   to {
      transform : translatey(0);
   }
}

div#warning a:hover
{
   text-decoration: underline;
}

div#header
{
    height: 75px !important;
    width: 100% !important;
    margin: 0;
    padding: 5px 25px 30px 25px;
    box-sizing: border-box;
    border: 1px #bbb solid;
    border-bottom: 3px #0573be solid;
    border-top: 0px;
    background-color: #fff;
    -moz-box-shadow: 0px 0px 10px 0px #ccc;
    -webkit-box-shadow: 0px 0px 10px 0px #ccc;
    box-shadow: 0px 0px 10px 0px #ccc;
}
div#header
{
   /*height: 110px;   verhoogd ivm nieuw logo 72px; */
/*   border: 1px #bbb solid;
   border-top: 0px;
   background-color: #fff;
   width: 100%; /* 990 - padding */
   /*margin: 0;*/
   /*padding: 7px 15px 7px 15px;*/
   /*-moz-box-shadow: 0px 0px 10px 0px #ccc;*/
   /*-webkit-box-shadow: 0px 0px 10px 0px #ccc;*/
   /*box-shadow: 0px 0px 10px 0px #ccc;*/
   /*box-sizing: border-box;*/
}

div#loginLogout
{
   float: right;
   width: 600px;
   height: 45px;
   margin: 25px 0px 0px 0px;
   padding: 0 15px 0 0;
   color: #777;
   font-family: lato, sanserif;
   font-size: 14px;
   text-align: right;
}
#loginLogout img
{
   margin-bottom: -5px;
}

div#logo
{
   float: left;
   width: 300px;
   margin: 0px;
   padding: 0px;
   padding: 0 0 0 15px;
}
div#form
{
   float: left;
   width: 100%;
   margin: -8px 0px 0px 0px;
}

div.mug_container
{
   float: right;
   margin: 58px 195px 0 -171px;
}

/* SV: Specifiek voor products (merk, cat, model) */
div.mug_container_products
{
   margin: 5px 0 0 0px;
   min-height: 100px !important;
}

div.mug_img_products
{
   width: 208px;
   text-align: center;
   margin-bottom: 30px;
}

div.mug_link_products
{
   width:80%;
   margin: 15px auto;
   text-align: center;
   border: 1px solid #0170AE;
   padding: 7px 4px;
   border-radius: 4px;
   /*background-color: #d6f0fe;*/
   background-color: rgba(210, 210, 210, 0.5);
   
}

div.mug_link_products:hover
{
   /*background-color: #c6e0ee;*/
   background-color: rgba(210, 210, 210, 1);
   cursor: pointer;
}
/* einde SV: Specifiek voor products (merk, cat, model) */

div.mug_container_linkBar
{
   margin: 99px 197px 0 -180px;
}

div#mug_img
{
   width: 156px;
   height: 150px;
   margin-top: 50px;
   text-align: center;
   background-color: #fff;
   border: 1px solid #ddd;
   padding: 7px;
   -moz-box-shadow: 0px 2px 7px 0px #eee;
   -webkit-box-shadow: 0px 2px 7px 0px #eee;
   box-shadow: 0px 2px 7px 0px #eee;
   position: absolute;
   cursor: pointer;
}

div.mug_container4
{
   float: left;
   width: 215px;
   margin: 0px 17px 0 0px;
}
.mugAdd
{
   padding-top: 12px; 
   padding-left: 6px;
}

div#mug_img4
{
   width: 200px;
   height: 200px;
   margin-top: 18px;
   text-align: center;
   background-color: #fff;
   border: 1px solid #ddd;
   padding: 7px;
   -moz-box-shadow: 0px 2px 7px 0px #eee;
   -webkit-box-shadow: 0px 2px 7px 0px #eee;
   box-shadow: 0px 2px 7px 0px #eee;
   /*position: absolute;*/
   overflow: hidden;
   cursor: pointer;
}

div#mug_overlay
{
   background-color: #eee;
   color: #333;
   border: 1px solid #ddd;
   padding: 7px 3px 7px 3px;
   opacity: 0.65;
   position: absolute;
   text-align: center;
   text-decoration: underline;
   visibility: hidden;
   top: 420px;
   width: 164px;
   cursor: pointer;
}
.mug_overlay_linkBar
{
   top: 460px !important;
}
div#mug_preview
{
   float: right;
   width: 150px;
   height: 150px;
   text-align: center;
   border: 1px solid #ddd;
   padding: 10px;
   -moz-box-shadow: 0px 2px 7px 0px #eee;
   -webkit-box-shadow: 0px 2px 7px 0px #eee;
   box-shadow: 0px 2px 7px 0px #eee;
   cursor: default;
}

/* Vertelt waar je bent - main-action bottons rechts */
div#nav1  /* Eerste regel */
{
   width: 100%;
   height: 30px;
   margin: 0;
   padding: 15px 30px 15px 30px;
   font-family: lato, sanserif;
   color: #58A7D2;
   font-size: 28px;
   font-weight: 300;
   box-sizing: border-box;
}
div#nav2  /* tweede regel */
{
   width: 100%;
   height: 30px;
   /*margin: 10px 0 0 0;*/
   padding: 45px 30px 45px 30px;
   font-family: lato, sanserif;
   font-size: 16px;
   font-weight: normal;
   color: #635497;
   box-sizing: border-box;
}
span.nav2Relatie
{
   color: #999;
}

div#tabContainer
{
   width: 992px;
   height: 30px;
   padding: 0px;
   margin: 0px;
}


/*div#main
{
  border: 1px #bbb solid;
  background-color: #fff;
  width: 960px;
  margin: 0;
  padding: 15px;
  font-family: lato, sanserif;
  color: #373737;
  font-size: 12px;
  font-weight: normal;
}*/

div.BtnOneLine
{
   width: 100%;
   height: 125px;
   margin: 0px;
   padding: 0px;
}
div.BtnSecondLine
{
   height: 275px;
}

.afoot{
   font-family: lato, sanserif;
   color: #444 !important;
   font-size: 13px !important;
   font-weight: normal !important;
	margin-left: 2px !important;
}
div#footer
{
   position: absolute;
   bottom: 0;
   height: 40px;
   width: 100%;
   margin: 0px 0px -59px 0px;
   padding: 10px 15px 6px 15px;   
   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;
   box-sizing: border-box;
}
.footText{
   display: -webkit-inline-box;
}
a, a:link, a:visited, a:active
{
   display: inline;
   color: #0070AE;
   text-decoration: none;
}
a:hover
{
   color: #4390ed;
   text-decoration: underline;
}

/*td > a:link, a:visited, a:active {
   display: block;
   color: #000 !important;
   font-size: 15px !important;
}*/
/* SV: LIGHTBOX (bij facturen en zo) */
#invoice h2  /* Eerste regel,  kopje in lightbox (bij facturen)   */
{
   width: 930px;
   height: 30px;
   margin: 0 0 20px 0;
   padding: 0;
   font-family: lato, sanserif;
   color: #58A7D2;
   font-size: 28px;
   font-weight: 300;
}
#invoice p, #invoice td {
   color: #333;
   font-family: lato, sanserif;
   font-size: 16px;
   line-height: 24px;
}

/* FONT AWSOME*/
p.tegel-font-icon {
    /* SV: De fontawesome icoontjes op de tegels staan in een <P> met deze class. */
/*   font-size: 30px !important;
   margin-top: -60px;*/
   font-size: 40px !important;
   margin-top: -75px !important;
   color: #58A7D2 !important;
 }
p.image-font-icon {
   font-size: 40px !important;
   text-align: center;
   padding: 10px;
   color: #58A7D2;
 }
p.tegel-font-icon:hover, .image-font-icon:hover {
    color: #777;
}

.fa, .fab, .fal, .far, .fas, .fa-solid
{
   font-size: 18px;
   padding: 5px;
   display: inline-block;
}   
.fa-exclamation-triangle{
   font-size: 50px;
   color: #fc7e2a;
}  
.fa-regular{
   font-size: 21px;
   color: #ffffff;
}    
.fa-times{
   font-size: 50px;
   color: #da0000;
}    
.fa-info-circle{
   font-size: 50px;
   color: #00ab3e;
}    
.fa-image{
   font-size: 75px;
}
.fmenu{
   font-size: 44px;
   color: #58a7d2;
}    
.icoBtn{
   font-size: 21px;
}