/*
donker grijs #a6a6a6
licht grijs #c6c6c6
donkerblauw #000044
blauw #027d8f
donkergeel #ffc627
groen #489970
donkergroen #336633
rood #e20419
donkerrood #ae2222
oranje #ef6419
wit #fafafa
*/

/* text and background colors */
.bg_wit {
  background:#fafafa;
  }
.bg_geel {  
  background:#ffc627;
  }  
.bg_grijs {
  background:#e6e6e6; 
  }
.bg_transparent {
  background:transparent; 
  }
.txt_rood {
  color:#ae2222; 
  }
.bg_pictures{  
  background:#572020;  
  }

/* fontawesome icons */
.fa_drag{
  color:#027d8f !important;
  }
.fa_drag_trash{
  color:#e20419 !important;
  }
.fa_txt_edit {
  font-size:18px;	
  color:#027d8f;
  padding:4px;
  border-radius:4px;
  cursor:pointer;  
  }
.fa_txt_edit:hover {
  color:#ffffff; 
  background:#027d8f;
  }
  
.fa_menu {
  font-size:16px;	
  color:#ffffff;
  padding:4px;
  border-radius:4px;
  cursor:pointer;  
  }  
.fa_menu:hover {
  color:#ffffff; 
  background:#229daf;
  }  
  
.fa_frm {
  font-size:16px;	
  color:#ffffff;
  padding:4px;
  border-radius:4px;
  margin:5px 6px;
  cursor:pointer;  
  }  
.fa_frm:hover {
  color:#ffffff; 
  background:#229daf;
  }
.fa_but {
  font-size:20px;	
  color:#ffffff;
  background:#027d8f; 
  padding:6px;
  border-radius:4px;
  margin:5px 0px;
  cursor:pointer;  
  }  
.fa_but:hover {
  color:#ffffff; 
  background:#229daf;
  }
.fa_but_frame {
  font-size:16px;	
  color:#027d8f;
  background:transparent; 
  padding:4px;
  border-radius:4px;
  margin:0px 0px;
  cursor:pointer;
  }  
.fa_but_frame:hover {
  color:#ffffff; 
  background:#229daf;
  }  
.fa_order_del {
  font-size:12px;	
  color:#ffffff;
  background:#027d8f; 
  padding:4px 0px;
  border-radius:4px;
  margin:5px 0px;
  cursor:pointer;  
  }  
.fa_order_del:hover {
  color:#ffffff; 
  background:#229daf;
  }

/* Tekstedit */  
#editForm .header {
  color:#ffffff;
  background:#027d8f;
  width:100%;
  font-size:16px;  
  font-family:verdana,arial;  
  font-weight:bold;  
  line-height:32px;
  padding:0px 10px 0px 20px;
  }  
#editForm .headerText {
  display:table-cell;
  width:100%;
  color:#ffffff;
  background:#027d8f;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:bold;
  vertical-align:middle;
  }  

/* gallery */
#setSetlist #repertoirContainer {
  width:50%;
  margin:8px 2px;
  box-sizing:border-box;
  vertical-align:top;
  border:1px solid #027d8f;
  padding:5px;border-radius:8px;
  }
#setSetlist #setlistContainer {
  width:50%;
  min-height:150px;
  touch-action:manipulation;
  vertical-align:top;
  margin:9px 2px;
  box-sizing:border-box;
  border:1px solid #027d8f;
  padding:5px;border-radius:8px;
  }
#setSetlist .used {
  color:red;
  }
#setSetlist .drag {
  border:0px solid green;
  z-index:900;
  cursor:pointer;
  }
#setSetlist .lyricSelectContainer {
  max-width:400px;
  border:0px solid red;
  }	
    
/* gallery */
#pictures #pictureGroup{
  width:100%;
  top:0px;
  left:0px;
  z-index:1110;
  border:0px solid green;
  box-sizing:border-box;
  padding:0;
  background-color:transparent;
  }
#pictures .imgCon{
 border:0px solid red;	
  }
#pictures .imgThumbnail{
  display:block;
  width:100%;
  }
#pictures #pictureContainer{
  display:none;	
  position:absolute;
  top:0px;
  left:0px;
  border:0px solid blue;
  width:100%;
  padding:0px;
  box-sizing:border-box;
  z-index:1100;
  }
#pictures .ctrlButTxt1{
  font-size:40px;
  padding:10px;
  position:fixed;
  color:#fff;
  background:rgba(66,66,66,0.6);
  border-radius:6px;
  }
#pictures .ctrlButTxt2{
  font-size:40px;
  padding:10px;
  position:fixed;  
  color:#fff;
  background:rgba(66,66,66,0.6);
  border-radius:6px;
  }
#pictures .closeBut{
  display:none;
  position:absolute;
  top:10px;
  left:10px;
  z-index:2000;
  color:#fff;
  background:rgba(66,66,66,0.5);
  border-radius:6px;
 }
.pictTxt{
  position:absolute;
  width:100%;  
  font-size:22px !important;
  font-weight:normal;
  font-family:handschrift,verdana,arial;  
  color:#ffc627;
  background-color:#3333339f;
  padding:8px 6px;
  top:0px;
  box-sizing:border-box;
  border:0px solid green;
  }
#pictures .ctrlConHover{
  opacity:0;
  transition:opacity 1s;
  position:fixed;
  z-index:2000;
  border:0px solid green;
  }
#pictures .ctrlConHover:hover{
  opacity:1;
  }
#pictures .ctrlConTouch{
  opacity:0;
  transition:opacity 1s;
  position:fixed;
  z-index:2000;
  border:0px solid green;
  }
#pictures .showCtrl{
  opacity:1;
  }
#pictures .pict{
  position:fixed;
  top:0px;
  left:0px;
  vertical-align:bottom;
  border-radius:2%;
  z-index:1100;
  }  

/* Pictures */
#pictures .prodImg{
  width:100%;
  border:0px solid #ff0419
  border-radius:6px;
  }
#pictures .prodTitle{
  color:#23238a;	
  font-size:12px;
  font-weight:bold;
  }

.youtube {
  width:300px;
  height:163px;
  border:none;
  }

#tooltip {
   max-width:250px;	   
   padding: 5px 10px;
   background:#027d8f;
   color:#ffffff;
   border:0px solid #ffffff;
   border-radius:4px;
   text-align: left;
   font-family: verdana,arial;
   font-size: 12px;
   font-weight: normal;
   z-index:0;
   } 
  
::-webkit-scrollbar {
  display: scroll;	
  height: 0px;
  width: 8px;
  background: #fff;
  }
::-webkit-scrollbar-thumb {
  background: #027d8f;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
  cursor:pointer;  
  }
::-webkit-scrollbar-corner {
  background: transparent;
  }

:-ms-input-placeholder{ 
  color:#949494;
  font-family:verdana,arial;
  font-size:11px;
  }
::-webkit-input-placeholder{
  color:#949494;
  font-family:verdana,arial;
  font-size:11px;
  }
  
audio::-webkit-media-controls-panel{
  color:#ffffff;
  background:transparent;
  transform: scale(1.0);
  }
audio::-webkit-media-controls-current-time-display{
  color:#ffffff;
  background:transparent;
  font-size:12px;
  }
audio::-webkit-media-controls-time-remaining-display{
  display:none;
  color:#ffffff;
  background:transparent;
  font-size:10px;
  }
audio::-webkit-media-controls-enclosure{
  margin:5px 5px;
  background-color: #027d8f;
  border-radius:4px;
  }
audio::-webkit-media-controls-mute-button{
  display: none !important;
  }
audio::-webkit-media-controls-volume-slider{
  display: none !important;
  }
audio::-webkit-media-controls-timeline{
 color:red !important;
  }
audio{
  height:35px;
  width:300px;
  }

body {
  color:#333333;                              
  background:#fafafa;  
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-text-size-adjust: none;
  user-select:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance: none;
  }

.material-icons{
  transform: scale(1.1);
  }

.fieldUnValid {
  border:1px solid #e20419;
  background:#fce2e2;
  }

.write {
  color:#e20419 !important;
  }

.write_button {
  color:#ffffff !important;
  background:#e20419 !important;
  }  
  
#pagina {
  display:block;
  box-sizing:border-box;	
  width:100%;
  padding:0px;
  margin:0px;
  border:0px solid red;
  }
#pagina #contentContainer a {
  color: #027d8f;
  font-family:beatnik,verdana,arial;   
  font-weight:normal;  
  text-decoration:none;
  }
#pagina #contentContainer a:hover {
  color: #ff9970;	
  font-style:italic;
  text-decoration: none;  
  }  
#pagina #pluginContainer a {
  color: #027d8f;
  font-family:beatnik,verdana,arial;   
  font-weight:normal;  
  text-decoration:none;
  }
#pagina #pluginContainer a:hover {
  color: #027d8f;	
  font-style:italic;
  text-decoration: none;  
  }

#pagina .webdesign {
  color:#333333;
  background:#fa00fa;
  font-size:10px;
  text-align:center;
  padding:20px 0px;
  margin:0px;
  }

#flyerContainer .titel {
  color:#e20419;	
  font-size:18px;
  font-family:verdana,arial;
  font-weight:bold;
  font-style:normal;
  padding:10px 0px;
 }  
#flyerContainer { 
  width:400px;	
  background-color:#e6e6e6;
  padding:10px;
  z-index:10001;  
  }
  
#pluginContainer .title {
  color:#e20419;	
  font-size:18px;
  font-family:verdana,arial;
  font-weight:bold;
  font-style:normal;
  padding:10px 0px;
  z-index:510;
 }
#pluginContainer {
  width:100%;
  max-width:900px;
  color: #333333;
  font-size:16px;
  line-height:24px;
  font-family:verdana,arial;
  vertical-align:top;
  box-sizing:border-box;
  border:0px solid blue;
  padding:10px 20px;  
  margin-top:0px;
  margin-left:auto;
  margin-right:auto; 
  }
#pluginContainer h4 {
  color:#027d8f;
  font-size:28px;
  font-family:beatnik,verdana,arial;  
  line-height:38px;
  font-weight:normal;
  text-align:left;
  padding:0px 0px;
  margin:15px 0px 15px 0px;
  }
#pluginContainer h5 {
  color:#027d8f;
  font-size:22px;
  font-family:beatnik,verdana,arial;  
  line-height:27px;
  font-weight:bold;
  text-align:left;
  padding:0px;
  margin:10px 0px 5px 0px;
  }

#contentContainer .title {
  color:#e20419;	
  font-size:30px;
  font-family:verdana,arial;
  font-weight:bold;
  font-style:normal;
  padding:15px 0px;
  z-index:510;
 }
#contentContainer {
  color: #333333;
  font-size:16px;
  line-height:22px;  
  font-family:beatnik,verdana,arial;
  font-weight:normal;
  font-style:normal;
  vertical-align:top;
  box-sizing:border-box;
  border:0px solid green;
  padding:10px 20px;  
  margin:0 auto 0 auto;
  }
#contentContainer h4 {
  color:#027d8f;
  font-size:28px;
  font-family:beatnik,verdana,arial;  
  line-height:38px;
  font-weight:normal;
  text-align:left;
  padding:0px 0px;
  margin:15px 0px 15px 0px;
  }
#contentContainer h5 {
  color:#027d8f;
  font-size:22px;
  font-family:beatnik,verdana,arial;  
  line-height:27px;
  font-weight:bold;
  text-align:left;
  padding:0px;
  margin:10px 0px 5px 0px;
  }
#contentContainer .textInsert{
  position:relative;
  color:#027d8f;
  font-size:20px;
  font-family:handschrift;
  font-weight:normal;	  
  line-height:25px;
  margin:20px 0 0 10px;
  padding:0px 0px;
  box-sizing:border-box;  
  border:0px solid red;
  }
@media screen and (max-width: 60em) {
  #contentContainer .textInsert{
    width:500px;
    margin: 20px auto 0 auto;
    padding-right:0px;
    }
  }
@media screen and (max-width: 40em) {
  #contentContainer .textInsert{
    width:auto;
    margin: 20px 0 0 0;
    }
  }    
  
input {
  width:100%;
  height:22px;
  color:#333333;
  background:#fafafa;
  font-family:verdana,arial;
  font-size:12px;
  border:1px solid #027d8f;
  padding: 3px 6px;
  margin:2px 0px;
  border-radius:4px;
  box-sizing:border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  }
.input_postcode {
  max-width: 5.3em;	
  }
.input_voorvoegsel {
  max-width: 7.3em;	
  }
.input_gender {
  max-width: 2.2em;	
  }
.input_date {
  max-width: 7.3em;	
  }
.input_gebdat{
  max-width: 7.3em;	
  }
.input_time {
  max-width: 4.3em;	
  }
.input_tel {
  max-width: 9em;	
  }
.input_email{
  max-width:25em;	
  }
.input_price{
  min-width:6em;	
  }
.input_header {
  color:#027d8f;
  font-family:verdana,arial;
  font-size:12px;
  font-weight:bold;
  margin:0px 10px 0px 0px; 
  padding:0px 10px 0px 0px; 
  }
.stotal{
  min-width:4.6em;	
  }
.gtotal{
  color:#027d8f;
  font-family:verdana,arial;	
  font-size:14px;
  font-weight:bold;  
  min-width:4.6em;
  border-top:2px solid;
  }   
.frame_header {
  color:#027d8f;
  font-family:verdana,arial;
  font-size:11px;
  font-weight:bold;
  margin:0px 0px 0px 0px; 
  padding:0px 0px 0px 0px; 
  }  
  
.data_header {
  color:#027d8f;
  font-family:verdana,arial;
  font-size:14px;
  font-weight:bold;
  } 
  
.data_content {
  color:#666666;
  font-family:verdana,arial;
  font-size:14px;
  font-weight:bold;
  padding-left:10px;  
  }  
  
.number_header {
  position:relative;
  display:inline-block;
  top:0px;
  color:#027d8f;
  font-family:verdana,arial;
  font-size:12px;
  font-weight:bold;
  } 
  
.number_content {
  position:relative;
  display:inline-block;  
  top:0px;	
  color:#333333;
  font-family:verdana,arial;
  font-size:12px;
  font-weight:bold;
  padding-left:10px;  
  }  

textarea {
  width:100%;
  color:#333333;
  background:#fafafa;
  font-family:verdana,arial;
  font-size:12px;
  border:1px solid #027d8f;
  padding: 3px 6px;
  margin:2px 0px;
  border-radius:4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  }
.ta_naw_w50 {
  height:5.7em;
  max-width:50%;
  margin:5px 0px;
  }
.ta_naw_w100 {
  height:5.7em;
  max-width:100%;
  margin:5px 0px;
  }  
@media screen and (max-width: 40em) {
  .ta_naw_w50 {
    min-width:100%;
    margin:0px 0px;
    } 
  }  
.ta_50 {
  height:50px;
  }
.ta_100 {
  height:100px;
  }	
.ta_150 {
  height:150px;
  }
.ta_200 {
  height:200px;
  }
.ta_lyrics {
  height:500px;
  }

.chkbox {
  position:relative;
  color:#027d8f;
  background:#fafafa;	
  min-width:14px;
  min-height:14px;
  border:1px solid #027d8fa1;
  border-radius:4px;
  margin:5px 0px 5px 2px;
  padding:2px;  
  vertical-align:middle;
  font-size:12px;
  }
.chkbox:hover {
  color:#ffffff; 
  background:#229daf;
  }  

.optbox {
  color:#027d8f;
  background:#fafafa;	
  max-width:18px;
  max-height:18px;
  border:1px solid #027d8fa1;
  border-radius:4px;  
  margin:0px 5px 0px 5px;
  padding:0;  
  }  

.w10 {
  position:relative;
  width:10%;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }  
.w20 {
  position:relative;
  width:20%;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
.w25 {
  position:relative;	
  width:25%;
  padding:2px;
  margin:10px 15px;
  border:2px solid #666666;
  border-radius:8px;
  display:block;
  }  
.w25 .mediaSetting {  
  border-radius:7px;
  border:2px solid #666666;
  box-sizing:border-box; 
  background:#eafafa;
  }
.w30 {
  position:relative;
  width:30%;
  padding:0px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
  
.w40 {
  position:relative;	
  width:40%;
  padding:0px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }  
.w50 {
  position:relative;
  width:50%;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
.w80 {
  position:relative;	
  width:80%;
  padding:0px;
  margin:10px 15px;
  border:0px solid #333333;
  border-radius:8px;
  display:block;
  }    
.w100 {
  position:relative;	
  width:100%;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
@media screen and (max-width: 40em) {
  .w10,.w20,.w25,.w30,.w40,.w50,.w80 {
    width:100%;
    }
  }

.p10 {
  position:relative;
  width:100%;  
  max-width:100px;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }   
.p20 {
  position:relative;
  width:100%;  
  max-width:200px;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
.p30 {
  position:relative;
  width:100%;  
  max-width:300px;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
.p40 {
  position:relative;
  width:100%;  
  max-width:400px;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }  
.p50 {
  position:relative;
  width:100%;  
  max-width:500px;
  padding:0px;
  margin:10px 15px;
  border:0px solid #ff0000;
  border-radius:8px;
  display:block;
  }
.p80 {
  position:relative;
  width:100%;	
  max-width:800px;
  padding:0px;
  margin:10px 15px;
  border:0px solid #333333;
  border-radius:8px;
  display:block;
  }    
 
/* nav-top */ 
.header_logo {
  display:block;
  position:relative;  
  background-color:#b6c1bf;
  width:100%;
  height:75px;
  }
.header_logo .imglogo {
  display:block;
  position:absolute;
  top:10px;
  left:20px;
  width:80px;
  }
.header_logo .txt1 {
  position:relative;
  top:15px;
  width:6em;
  font-size:28px;
  font-weight:bold;
  font-family:handschrift,verdana,arial;
  color:#781414;
  padding:0px 0px 0px 0px;
  margin:0 auto 0 auto;
  }
.header .pict {
  display:block;	
  width:100%;
  padding:0px;
  margin:0px;
  }  
.header .txt1 {
  position:absolute;
  top:5.5vw;
  left:48%;
  font-size:2.6vw;
  font-weight:bold;
  padding:0px 20px 0px 0px;
  } 	
.header .txt2 {
  position:absolute;
  top:5.5vw;
  left:48%;
  font-size:2.6vw;
  font-weight:bold;
  padding:0px 20px 0px 0px;
  }
  
/* nav-bottom */  
.footer {
  color:#ffffff;
  background-color:#5a9a9f;
  font-family:verdana,arial;  
  font-size:14px;
  font-weight:normal;
  line-height:20px;  
  padding:20px 50px;  
  }
.footer a {
  color:#ffffff;
  text-decoration:none;
  }
.footer  a:hover {
  color:#00ffff;
  }
.footer .txt1 {
  min-width:12em;
  max-width:12em;
  }
.footer .txt2 {
  min-width:16em;
  max-width:16em;
  }
.footer .txt3 {
  max-width:22em;
  }
.auteur {
  color:#ffffff;
  background-color:#5a9a9f;
  font-family:verdana,arial;  
  font-size:12px;
  line-height:16px;
  padding:5px 0;
  text-align:center;
  }
.auteur a {
  color:#ffffff;
  text-decoration:none;
  }
.auteur  a:hover {
  color:#00ffff;
  } 

.buttonFrame{
  position:relative;	
  width:100%;  
  background-color:#c8c8c8;
  padding:10px 15px;
  box-sizing:border-box;
  margin:auto auto 0px 0px;  
  border-radius:8px;
  }
.buttonFrameFlex{
  max-width:120px;
  }
@media screen and (max-width: 40em) {
  .buttonFrameFlex{
    max-width:100%;
    margin:5px 0px;
    }  
  }
  
#audioplayer .button {
  font-size:12px;
  font-weight:normal;
  font-family:verdana,arial;  
  line-height:22px;
  font-weight:normal;
  text-align:center;
  color:#ffffff;
  background:#027d8f;
  width:100%;
  padding:2px 0px;
  margin:5px 0px;
  border-radius:6px;
  cursor:pointer;
  }  
  
.button {
  font-size:12px;
  font-weight:normal;
  font-family:verdana,arial;  
  line-height:22px;
  font-weight:normal;
  text-align:center;
  color:#ffffff;
  background:#027d8f;
  width:100%;
  padding:2px 0px;
  margin:5px 0px;
  border-radius:6px;
  cursor:pointer;
  }
.button:hover {
  color:#ffffff; 
  background:#229daf;
  }  
.button_shop {
  font-size:12px;
  font-weight:normal;
  font-family:verdana,arial;  
  font-weight:normal;
  line-height:22px;  
  text-align:center;	
  color:#ffffff;
  background:#ffa700;
  width:100%;
  padding:2px 0px;
  margin:5px 0px;  
  border-radius:6px;
  cursor:pointer;  
  }
.button_unvalid {
  color:#ffffff;
  background:#c6c6c6;
  cursor:not-allowed;
  } 
  
#mailSpecs {
  position:relative;
  display:none;
  top:50px;
  width:350px;
  color:#333333;
  background:#fafafa;  
  font-size:14px;
  font-family:verdana,arial;  
  font-weight:normal;
  padding:0px 15px 15px 10px;
  border:2px solid #027d8f;  
  border-radius:8px;
  z-index:10001;
  margin:0px auto 0px auto;
  }
#mailSpecs .closeMailSpecs{
  width:30px;
  text-align:right;
  }
#mailSpecs .header {
  color:#027d8f;
  font-family:verdana,arial;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  padding:2px 2px 2px 0px;  
  border:0px solid red;  
  } 
#mailSpecs .content {
  color:#333333;
  font-family:verdana,arial;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  padding:2px 0px;  
  border:0px solid red;
  }
.mailSpecsFrame {
  width:100%;
  background:#ffffff;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;
  margin:3px 0px;
  vertical-align:middle;
  padding:12px 20px 12px 10px;
  border:1px solid #027d8fa1;
  border-radius:8px;
  box-sizing:border-box;
  cursor:pointer;  
  }  
.mailSpecsFrame .opendCheck {
  position:relative;
  margin-top:-12px !important;
  margin-right:0px;
  margin-left:auto;
  color:green;
  font-family:verdana,arial;  
  font-weight:normal;
  width:0px;
  }
.mailSpecsFrame .opendCheckCont {
  position:relative;
  width:100%;
  margin:0px;
  height:10px;
  }  

.loginbox {
  position:relative;
  display:none;
  top:50px;
  width:300px;
  color:#333333;
  background:#fafafa;  
  font-size:14px;
  font-family:verdana,arial;  
  font-weight:normal;
  padding:10px 15px 15px 10px;
  border:2px solid #027d8f;  
  border-radius:8px;
  z-index:10001;
  margin:0px auto 0px auto;
  }
.loginboxContainer{
 position:relative;
  height:0px;
  border:0px solid red;
  }

.messagebox {
  position:fixed;
  top:100px;
  display:none;
  width:300px;
  color:#027d8f;
  background:#fafafa;  
  font-size:14px;
  line-height:18px;
  font-family:verdana,arial;  
  font-weight:normal;
  padding:10px 15px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  border:2px solid #027d8f;  
  border-radius:8px;
  z-index:10001;
  }

#confirmBox {
  position:fixed;
  top:100px;
  display:none;
  color:#027d8f;
  background:#fafafa;
  font-size:14px;
  line-height:18px;
  font-family:verdana,arial;
  font-weight:normal;
  padding:5px 5px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  border:2px solid #027d8f;
  border-radius:8px;
  z-index:10001;
  }
#confirmBox .message {
  padding:10px 6px;
  font-size:14px;
  line-height:18px;
  }
#confirmBox .confirmButton {
  display:inline-block;  
  font-size:12px;
  font-weight:normal;
  font-family:verdana,arial;  
  line-height:22px;
  font-weight:normal;
  text-align:center;
  color:#ffffff;
  background:#027d8f;
  min-width:80px;
  padding:2px 6px;
  margin:5px 8px;
  border-radius:6px;
  cursor:pointer;
  }
#confirmBox .confirmButton:hover {
  color:#ffffff; 
  background:#229daf;
  }    

.frame {
  width:100%;
  background:#ffffff;
  font-size:16px;  
  font-family:verdana,arial;  
  font-weight:normal;
  margin:3px 0px;
  vertical-align:middle;
  padding:12px 10px;
  border:1px solid #027d8fa1;
  border-radius:8px;
  box-sizing:border-box;
  cursor:pointer;  
  }
.frameContainerLeft {
  width:21em;	
  }
.frameContainerRight{
  min-width:160px;
  vertical-align:middle;
  font-size:12px;
  line-height:15px;
  }  

.frame_unpaid {
  border:1px solid #e20419;
  background:#fce2e2;
  }
@media screen and (max-width: 40em) { 
  .frameConLeft {
    width:100%;	
    }
  }

/* agenda */ 
#appointments{
  position:relative;
  width:100%;
  border:0px solid blue;
  }

.frame_agenda_appointment {
  width:200px;
  color:#333333;	  
  background:#fafafa;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;
  line-height:18px;
  margin:10px auto 0 auto;
  vertical-align:middle;
  padding:12px 10px;
  border:1px solid #027d8fa1;
  border-radius:8px;
  box-sizing:border-box;
  cursor:auto;  
  }  
.frame_agenda_appointment .datum{
  color:#e20419;	
  }
.frame_agenda_appointment .customer{
  padding:6px 0px;  
  }
.frame_agenda_public {
  width:100%;
  color:#333333;	  
  background:#ffffff;
  font-size:18px;  
  font-family:verdana,arial;  
  font-weight:normal;
  line-height:24px;
  margin:15px 0px;
  vertical-align:middle;
  padding:12px 10px;
  border:1px solid #027d8fa1;
  border-radius:8px;
  cursor:auto;  
  }
.frame_agenda_public_old {
  background:#e6e6e6;	
  }  
.frame_agenda_public_header {
  color:#027d8f;
  margin:0px 0px 0px 0px;	
  font-size:15px;  
  font-family:verdana,arial;  
  font-weight:bold;  	
  }
.frame_agenda_public_event {
  color:#e20419;	
  padding:5px 10px;	
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;  	
  }
.frame_agenda_public_memo {
  color:#e20419;	
  padding:5px 0px;	
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;  	
  }   
.frame_agenda_public_customer {
  padding:0px 10px; 	
  }
.frame_agenda_image{
  width:100%;
  border-radius:8px;
  }
.frame_agenda_image_cont{
  width:100%;
  padding:10px;
  box-sizing:border-box;
  }
@media screen and (max-width: 40em) { 
  .frame_agenda_public_event {
    padding:10px 10px;	
    } 
  }  

/* options forms */  
.optionformbody {
  display:none;
  position:absolute;
  margin-top:0px;
  margin-left:0px;
  color:#ffffff;
  background:#027d8f;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;
  line-height:22px;
  padding:8px 15px;
  border:1px solid #027d8f;
  border-radius:8px;
  z-index:10000;
  }
.optfrm {
  border-radius:4px !important;
  padding:2px 6px !important; 
  }   
.optfrm:hover {
  color:#027d8f;
  background:#ffffff;
  }
  
/* modify */
.modifyContainer {
  position:relative;	
  width:100%;
  height:100%;
  color:#781414;
  background:#e6e6e6;
  font-size:18px;  
  font-family:verdana,arial;  
  font-weight:normal;  
  padding:20px;
  box-sizing:border-box;
  border:0;
  }
.formModify {
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:inherit;
  color:#333333;
  background:#e6e6e6;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;
  margin:0px;
  vertical-align:middle;
  padding:0px 0px 50px 0px;
  z-index:1100;
  }  
.formModify .topNav {
  position:sticky;
  top:0;
  z-index:1000;
  }
#lyricModify .invoer,#bookingModify .invoer,#orderModify .invoer,#locationModify .invoer,#customerModify .invoer,#memberModify .invoer,#menuModify .invoer,#emailModify .invoer {
  padding:0px 20px 50px 20px;
  max-width:900px;
  margin:20px auto 0 auto;
  }
#lyricModify .header,#bookingModify .header,#orderModify .header,#locationModify .header,#customerModify .header,#memberModify .header,#formModify .header,#menuModify .header,#emailModify .header {
  color:#ffffff;
  background:#027d8f;
  width:100%;
  font-size:16px;  
  font-family:verdana,arial;  
  font-weight:bold;  
  line-height:32px;
  padding:0px 10px 0px 20px;
  }
#lyricModify .headerText,#bookingModify .headerText,#orderModify .headerText,#locationModify .headerText,#customerModify .headerText,#memberModify .headerText,#formModify .headerText,#menuModify .headerText,#emailModify .headerText {
  display:table-cell;
  width:100%;
  color:#ffffff;
  background:#027d8f;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:bold;
  vertical-align:middle;
  }
#membersModifyBg .cell{
  display:table-cell;	
  }

/* lyrics */
.frame_lyrics {
  width:100%;
  color:#027d8f;	  
  background:#ffffff;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:normal;
  margin:5px 0px;
  vertical-align:middle;
  padding:12px 10px;
  border:1px solid #027d8fa1;
  border-radius:8px;
  box-sizing:border-box;
  cursor:auto;  
  }  
#display_lyrics{
  position:relative;
  display:inline-block;
  }
#lyric{
  display:none;	
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:31100;
  }
#lyric .header{
  color:#ffffff;
  background:#027d8f;	
}
#lyricsBg{
  width:100%;
  color:#212121;
  background:#ffffff;  
  font-size:20px;
  font-weight:normal;
  font-family:arial,verdana;
  padding:10px 50px;
  box-sizing:border-box;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  }  
#lyric .headerText{
  width:100%;
  color:#ffffff;
  background:#027d8f;
  font-size:14px;  
  font-family:verdana,arial;  
  font-weight:bold; 
  white-space: nowrap;
  }
.pause{
  font-size:18px;
  font-weight:bold;
  padding:10px 5px;
  color:#e20419;
  }
.rehearsal{
  color:#027d8f;
  } 
.frame_rehearsal{
  background:#fffafa;
  border:1px solid #e2041970;
  }

@media screen and (max-width: 40em) { 
  #lyric .headerText{
    display:none;
    }
  #lyric .test{
    width:100%;
    }    
  #lyricsBg{
    padding:10px 15px;
    }     
  }   
.chords{
  color:#e20419;
  }
  
/* menu */
.menuItem {
  margin:3px 0px;
  padding:0px 10px;
  line-height:16px;
  background-color:#e0e0e0;
  font-size:12px;
  font-family:verdana,arial;
  border:1px solid #aeaeae;
  }
.menuSub {
  margin-left:15px;
  }
  
/* search */
#search, #searchMedia {
  margin:15px 0px;	
  }
#search .searchInput, #searchMedia .searchInput{
  width:200px;
  float:right;
  padding-right:22px;
  margin-right:-22px
  }
#search #inputContainer, #searchMedia #inputContainer{
  position:relative;
  }
#search .searchClear, #searchMedia .searchClear {
  background-color:transparent;
  font-size:14px;
  position:relative;
  border:0px solid red;
  padding:0px 5px;
  min-width:20px;
  cursor:pointer;
  }
#laNew{
  margin-left:10px;	
  }
#search .button, #searchMedia .button {
  font-size:12px;
  font-weight:normal;
  font-family:verdana,arial;  
  line-height:2px;
  font-weight:normal;
  text-align:center;
  color:#ffffff;
  background:#027d8f;
  width:20px;
  padding:4px 2px;
  margin:5px 0px;
  border-radius:6px;
  cursor:pointer;
  }

/* Video container */  
.setVid{  
  width:225px;
  padding:0px;
  vertical-align:top;
  margin:0 10px 10px 0;
  border:0px solid red;
  display:inline-block;
  }  
  
.setVid .yt{
 height:126px;	
	
 }

@media screen and (max-width: 600px) {
  .setVid {
    width:100% !important;
    }
  }
.setVid_discription{
  display:block;
  position:relative;
  color:#444444;
  background:transparent;
  font-size:12px;
  line-height:14px;
  padding:5px 0px;
  }
#videoContainer{
  position:relative;
  max-width:720px;
  margin:0 auto 0 auto;
  border:0px solid green;	
  }
  
#hits #hitsCont{
	position:relative;
	font-size:16px;
	font-family:verdana,arial;
	font-weight:normal;
	border:0px solid green;
	margin:0px auto 0px auto;
	box-sizing: border-box;
	}
@media screen and (max-width: 600px) {
  #hits td:nth-child(3) {
    display:none;
    }  
  }
@media screen and (max-width: 400px) {
  #hits td:nth-child(4) {
    display:none;
    }
  #hits tr:nth-child(1) td:nth-child(2) {
    border-radius:0px 6px 6px 0px;
    }      
  }
#hits td{
  padding:0em 0.5em 0em 0.2em;
  } 
#hits tr:nth-child(1){
  color:#ffffff;
  background:#027d8f;
  font-size:12px;
  line-height:22px;
  text-align:center;
  padding:0em 0.5em;
  }
#hits tr:nth-child(1) td:first-child{
  border-radius:6px 0px 0px 6px;
  }
#hits tr:nth-child(1) td:last-child{
  border-radius:0px 6px 6px 0px;
  }