@charset "UTF-8";

/* ----------------- general ----------------- */
/* ----------------- overlay ----------------- */
/* -------------- block message -------------- */
/* ---------------- messages ----------------- */
/* -------------- basic colors --------------- */
/* ------------- status classes -------------- */
/* --------- password strength meter --------- */

/* ----------------- general ----------------- */

img
{
	margin:             0px;
	border:             0;
}

input[type="radio"], input[type="checkbox"]
{
    background-color:   #FFFFFF;
}

input[type="button"] {
	transition 	: all 0.24s ease;
}

input, textarea
{
    font-size:          15px;
    font-weight:        normal;
}

input[type="text"], 
input[type="password"], 
textarea,
select {  
    font-family:        "Mulish", sans-serif;
	border:             1px solid #ccc;
	border-radius:      5px;
	padding:            4px 8px;
}

/* ----------------- overlay ----------------- */

DIV.overlay
{
    position:           absolute;
    left:               0px;
    top:                0px;
    z-index:            100000;
    visibility:         visible;
    width:              100%;
    height:             100%;
    text-align:         center;
	background:         #EFEFEF;
    filter:             alpha(opacity=40);
    -moz-opacity:       .40;   
    opacity:            .40;
    -khtml-opacity:     0.4;
}

/* -------------- block message -------------- */

DIV.blockMsg
{
    width:              40%;
    top:                30%;
    left:               30%;
    border:             2px solid #4255a4;
    padding:            20px 0px 20px 0px;
    background-color:   #FFFFFF;
    color:              #404040;
    font-size:          12pt;
    font-weight:        normal;
    text-align:         center;
}


/* ---------------- messages ----------------- */

DIV.message
{
    -webkit-border-radius:  6;
    -moz-border-radius:     6;
    border-radius:          6px;
	border:                 solid 1px #8EC08E;
	background-color:       #EBFFEB;
	text-align:             center;
	padding:                10px;
	margin:                 0px 0px 30px 0px;
}

DIV.error
{
	color:                  #FF0000;
	background-color:       #FFF5FF;
	border:                 1px solid #CD0067;
	text-align:             center;
	padding:                10px;
	margin:                 0px 0px 20px 0px;
}

DIV.warning
{
	color:                  #606060;
	background-color:       #FFE6D1;
	border:                 1px solid #FFC897;
	text-align:             center;
	padding:                10px;
	margin:                 0px 0px 20px 0px;
}

/* -------------- basic colors --------------- */

.groen
{
    color:              #99CC00;
}

.oranje
{
    color:              #FFBB33;
}

.rood
{
    color:              #FF4444;
}

/* ------------- status classes -------------- */

.active
{
    color:              #222222;
    font-style:         normal;
}

.inactive
{
    color:              #A0A0A0;
    font-style:         italic;
}

/* --------- password strength meter --------- */

.pass-graybar {
  height: 5px;
  background-color: #CCC;
  width: 132px;
  margin:0px 3px 0px 3px;
  position: relative;
}

.pass-colorbar {
  height: 5px;
  background-image: url(../images/passwordstrength.jpg);
  position: absolute;
  top: 0;
  left: 0;
}

.pass-percent, .pass-text {
  margin:0px 3px 0px 3px;
  font-size: 1em;
}

.pass-percent {
  margin-right: 5px;
}