/*
 *
 Change Scrollbar for body:
 *
 **************************************************************************************************
 */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 1px;
}
 
::-webkit-scrollbar-track {
    background-color:#ebebeb; /*red; achtergrond*/ 
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background:  #B4B4B4; /*#6d6d6d;  voorgrond*/ 
}





/* Scrollbar Styling */
#PanelZOEKfilter::-webkit-scrollbar {
    width: 1px;
}
 
 
#PanelZOEKfilter::-webkit-scrollbar-track {
    background-color:#ebebeb; /*red; achtergrond*/ 
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

#countryList::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background:  #B4B4B4; /*#6d6d6d;  voorgrond*/ 
}


/* Scrollbar Styling */
#countryList::-webkit-scrollbar {
    width: 5px;
}
 
#countryList::-webkit-scrollbar-track {
    background-color:#ebebeb; /*red; achtergrond*/ 
    -webkit-border-radius: 6px;
    border-radius: 5px;
}

#countryList::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 5px;
    background:  #B4B4B4; /*#6d6d6d;  voorgrond*/ 
}


/*
 *
 Change the placeholder color:
 *
 **************************************************************************************************
 */

::placeholder {
  color: #f5f5f5;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #f5f5f5;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #f5f5f5;
}


/*
 *
 .........
 
 style="color: black; font-family:AccidentalPresidency_Fonts; font-size:44px; font-weight: 900;"
 
 *
 **************************************************************************************************
 */
 

@font-face {	
	/* 
	...Definitie 
	font-family:AlphaFonts;
	font-size:34px;
	src: url("fonts/Alphabet-Fantasie.ttf");
	src: url("fonts/Wedgie-Regular.ttf");	
	src: url("fonts/Quebab-Shadow-ffp.ttf");
	*/
	font-family: AlphaFonts;
	src: url("fonts/Deutschlander.otf");
	}
@font-face {	
	/* 
	...Definitie 
	font-family:AccidentalPresidency_Fonts;
	font-size:34px;	
	src: url("fonts/Wedgie-Regular.ttf");	
	src: url("fonts/Quebab-Shadow-ffp.ttf");	
	src: url("fonts/Alphabet-Fantasie.ttf");
	*/
	font-family: AccidentalPresidency_Fonts;	
	src: url("fonts/AccidentalPresidency.ttf");	
	
	}
@font-face {	
	/* 
	...Definitie 
	font-family: Arial_Fonts;
	*/
	font-family: Arial_Fonts;	
	src: url("fonts/Arial.ttf");	
	
	}
 




/*
 *
 .........
 *
 **************************************************************************************************

 .placeholderFonts-class::-webkit-input-placeholder {
 */	 
.form-wrapperB input::-webkit-input-placeholder {
    color: red;
	/* $('input').addClass('placeholderFonts-class');  */
}

 
 
/*Clearing Floats*/
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}    
/* Form wrapper styling */
.form-wrapper {
    width: 500px;
    width: 100%;
    padding: 0px;
    margin: 10px auto 10px auto;

    background: rgba(0,0,0,.2);*/
	background: #f0ebac;
	/*background: #FDE1C5; #FFFFD8;	background: blue;	 achtergrond inputbox all*/
	background: transparant;
     	
    background:black;  
	
	
	
    border-radius: 2px;
    /*
	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
	*/
	
}

/* Form text input */
.form-wrapper input {
    width: 240px;
    width: 68%;
    height: 40px;
    padding: 5px 5px;
    float: left;   
    /*font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
	font-style: normal;
	text-decoration: none;	

	font-family: Arial_Fonts;
	*/	
	font: 15px Arial, sans-serif;

	letter-spacing: -1px;
	font-size:18px;
    border: 0;
	background: #FFFFEE;	/* achtergrond inputbox enkel
    border-radius: 3px 0 0 3px; */	    
    border-radius: 3px 3px 3px 3px;     
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   color: #f5f5f5;
   color: #E6E6D7;		/* fots color placeholder inputbox enkel			color: aqua;*/	
   font-weight: normal;
   font-style: italic;
   font-size:18px;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
	color: #f5f5f5;
    font-weight: normal;
    font-style: italic;
	font-size:22px;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
	color: #f5f5f5;
    font-weight: normal;
    font-style: italic;
	font-size:22px;	
}   
.usernameClass  input::-webkit-input-placeholder {
	color: #B4B4B4;		/* fots color placeholder inputbox enkel*/	
	color: green;        /*     */	
	font-weight: normal;
	font-style: italic;
	font-size:20px;
	}	
.usernameClass input:-moz-placeholder {
    color: #999;
	color: #f5f5f5;
	/* color: blue;*/	
    font-weight: normal;
    font-style: italic;
	font-size:20px;
	}
.usernameClass input:-ms-input-placeholder {
    color: #999;
	color: #f5f5f5;
	/* color: red;*/	
    font-weight: normal;
    font-style: italic;
	font-size:20px;
}
.GalaxyA7Class  input::-webkit-input-placeholder {
	color: #B4B4B4;		/* fots color placeholder inputbox enkel*/	
	/* color: green;*/	
	font-weight: normal;
	font-style: italic;
	font-size:30px;
	}	
.GalaxyA7Class input:-moz-placeholder {
    color: #999;
	color: #f5f5f5;
	/* color: blue;*/	
    font-weight: normal;
    font-style: italic;
	font-size:30px;
	}
.GalaxyA7Class input:-ms-input-placeholder {
    color: #999;
	color: #f5f5f5;
	/* color: red;*/	
    font-weight: normal;
    font-style: italic;
	font-size:30px;
}
.FontsPlaceholder412  input::-webkit-input-placeholder {
	color: #B4B4B4;		/* fots color placeholder inputbox enkel*/	
	/*color: red; */	
	font-weight: normal;
	font-style: italic;
	font-size:30px;
	}	
.FontsPlaceholder412 input:-moz-placeholder {
    color: #999;
	color: #f5f5f5;
	/* color: blue;*/	
    font-weight: normal;
    font-style: italic;
	font-size:30px;
	}
.FontsPlaceholder412 input:-ms-input-placeholder {
    color: #999;
	color: #f5f5f5;
	/* color: red;*/	
    font-weight: normal;
    font-style: italic;
	font-size:30px;
}
			
				
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 30%;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    background: orange;
    border-radius: 0 3px 3px 0;     
    border-radius: 3px 3px 3px 3px;     
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  

.form-wrapper button:hover{    
    background: #e54040;
}  

.form-wrapper button:active,
.form-wrapper button:focus{  
    background: #c42f2f;
    outline: 0;  
}

.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    border-color: transparent orange transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}     

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   


/*
 *
 .........
 *
 **************************************************************************************************
 */
#leftDIV {
	/*color: white;
	background:gray;*/
	position: fixed;
	width: 62px; 
	height: 100%;
	top:  0px; 
	left: 0px;
	/*background-color: 	#FFD400;
	background:orange; black;*/
	background:#FF870E;
	font-size:40px;
	clear: both;	
	border-top: 2px solid orange; 
	border-bottom: 1px solid orange; 
	border-right: 1px solid white; 
	border-left: 0px solid white;	
	opacity: 0.98;
	float: left;

}

/*
 *
 .........
 *
 **************************************************************************************************
 */
#rightDIV {
	/*color: white;
	background:gray;
	position: fixed;
	position: relative       width: 100%;      */
	width: 62px;
	
	
	height: 100%;
	top:  0px; 
	left: 0px;
	/*background-color: 	#FFD400;
	background:orange; black;  #FF870E; */
	background:green;
	font-size:40px;
	clear: both;	
	border-top: 2px solid orange; 
	border-bottom: 1px solid orange; 
	border-right: 1px solid white; 
	border-left: 0px solid white;	
	opacity: 0.98;
	float: right;

}

 
/*
 *
 .........
 *
 **************************************************************************************************
 */
 #MainDIV {
	/*color: white;
	background:gray;*/
	position: fixed;
	width: 100%; 
	height: 100%;
	top:  40px; 
	left: 0px;
	background-color: black; /*transparant; 	#FFD400; */
	 /* background:lime;         */
	font-size:40px;
	clear: both;
	overflow-y: scroll;
	padding-top: 0px;
	padding-bottom: 60px;
	padding-left: 65px;
	padding-right: 5px;
}


#rotateText {
 	position: relative; 
	background:transparant;
	width:260px;
	height: 60px;
	-ms-transform: rotate(-90deg); /* IE 9  */
	transform: rotate(270deg);
	opacity: 0.4;
	float: left;
	top:100%;
	padding-left: 180px;
	left:-105px;
	color: white;
	font-family:AlphaFonts;
	font-size:44px;
}

#rotateText2---- {
 	position: fixed;
	background:transparent;
	height: 260px;
	height: 80px;
	-ms-transform: rotate(-90deg); /* IE 9  */
	transform: rotate(270deg);
	opacity: 0.4;

	top:100%;
	top:240px;	
	left:720px;	
	
	
	/*  padding-right: 180px;
	padding-left: 180px;
			 left:-105px;float: left; 	width:260px; float: right;   position: relative; 
 */
	color: white;
	font-family:AlphaFonts;
	font-size:94px;
	
}
#rotateText2 {
    position: fixed;
	color: white;
	font-family:AlphaFonts;
	font-size:94px;
    top: 250px;
    right: -120px;
	-ms-transform: rotate(-90deg); /* IE 9 0em; 2em;*/
	transform: rotate(270deg);
	opacity: 0.4;
	z-index: 1000;

	
	
}

#logoAUTO {
	position: relative; 
	clear: both;
	width: 100px; 
	height: 32px;
	top:  -1px; 
	left: 20px; 
}

#panelHEAD {
	/*color: white;*/
	background:gray;
	width: 100%; 
	position: fixed;
	width: 100%; 
	height: 40px;
	top:  0px; 
	left: 0px;
	background-color: 	#FFD400;
	background:orange; /*black;*/
	background:white;
	font-size:40px;
	clear: both;
	border-top: 2px solid orange; 
	border-bottom: 1px solid orange; 
	opacity: 0.38; /* */
	float: right;
}







/*
 *
 .........
 *
 **************************************************************************************************
 */
 .Fonts375 input {

	font-size:20px;
	
}	
 .Fonts412 input {

	font-size:30px;
	
}	
	
/*
 *
 .........
 *
 **************************************************************************************************
 */
 
/* Media queries in css */
@media(max-width: 800px) {
    /* for 800px screen */
 
	background-color: 	red;

 
	
	
}

@media(min-width: 801px) {
    /* for larger then 800px screen */
 
	background-color: 	lime;

 	
	
	
}




/* css as usual */
.this-class { font-size: 12px; }


@media (min-width:500px) {	/* condition for screen size minimum of 500px */
  /* your conditional, responsive CSS inside this condition */
  .this-class { font-size: 20px; background-color:blue;}
  .lijst-breedte { background-color:blue; width:100%; max-width: 100%;}
}
	
@media (min-width:1024px) {	/* condition for screen size minimum of 500px */
  /* your conditional, responsive CSS inside this condition */
  .this-class { font-size: 20px; background-color:red;}
  .lijst-breedte { background-color:red; width:85%; max-width: 85%;}
}


	
/*
 *
 .........
 *
 **************************************************************************************************
 */


	
/*
 *
 .........
 *
 **************************************************************************************************
 */


	
/*
 *
 .........
 *
 **************************************************************************************************
 */


	
/*
 *
 .........
 *
 **************************************************************************************************
 */