@font-face {
    font-family: karma-medium;
    src: url(Karma-Medium.ttf);
}

body {margin:60px;padding:0px;font-size:14px;font-family:karma-medium,Verdana;color:#000000;background:#aadfff}
table {margin:0px;padding:0px;font-size:12px;font-family:karma-medium,Verdana;color:#000000;background:#aadfff;}

textarea { width: 500px; height: 100px; }
.textarea { width: 500px; }

hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

/* table {border:1px solid;} */

.main-table {font-family:karma-medium,Verdana;font-size:11px;border:thin solid #cccccc;color:#000000;}
.sortable {font-family:karma-medium,Verdana;font-size:14px;border:thin solid #000000;color:#000000;}
.bigger{font-size:14px;}

a {color: #000000;text-decoration:none;font-weight:bold;}
a:hover {color: red;text-decoration:none;}

.copy{font-size:15px;font-family:karma-medium,Verdana;color:#EEEEEE;background-color:#333333;border:0;width:100%;text-align:left;}
.smallwarning{font-size:10px;font-family:karma-medium,Verdana;color:#FF0000;}
.groovybutton{font-family:karma-medium,Verdana;color:#EEEEEE;background-color:transparent;border:1px solid;text-align:left;cursor:pointer;}
.groovybutton3{font-size:12px;font-family:karma-medium,Verdana;font-weight:bold;color:#EEEEEE;background-color:#4B5A63;border:1px outset #FFFFFF;cursor:pointer;}
.btn{border:1px solid;background:#333333;color:#F4F4F4;font-weight:bold; cursor:pointer}
.groovymenu{font-size:12px;font-family:karma-medium,Verdana;font-weight:bold;color:#EEEEEE;background-color:#6B5A63;border:1px outset #FFFFFF;text-align:left;}
.shoutbox{font-size:12px;font-family:karma-medium,Verdana;font-weight:bold;color:#EEEEEE;background-color:#6B5A63;border:1px outset #FFFFFF;text-align:left;}

.tabx{border:1px solid;background:#333333;color:#F4F4F4;font-weight:bold;cursor:pointer;}

.progressBar {font-size:12px;margin:5}

img {border:0}

.imgfd { opacity: 0.5;}
.imgfd:hover{opacity: 1.0;}


label:hover {opacity: 1.0;}
    

.dig{text-align:right;}

.radio_item { display: none !important;}

.label_item { opacity: 0.4;}


.radio_item:checked + label { opacity: 1.0;}



label { cursor: pointer;}

 td { padding: 4px; text-align:left; vertical-align: top;}

table {
    border-collapse:collapse;
	background:transparent;
} 


.youtube { /* continer (responsive) */
  position: relative;
  cursor: pointer;
  background: #ccc no-repeat center center / cover; 
  padding-bottom: 56.25%; /* 16:9 */
  height: 0px;
  clear:both;
}

.youtube::before { /* play bubble */
  content: '';
  background: rgba(255, 255, 255, .6);
  height: 80px;
  width: 80px;
  display:block;
  margin: -40px 0 0 -40px;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 20px 3px rgba(51, 51, 51, .8);
  transition: all .1s ease;
  z-index:1;
}

.youtube:hover::before { /* play bubble hover */
  background: rgba(238, 238, 238, .8);
  box-shadow: 0 0 10px 3px rgba(51, 51, 51, .8);
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
}

.youtube::after { /* Play Triangle */
  content: '';
  width: 0;
  height: 0;
  line-height:0px;
  display:block;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  margin: -20px 0 0 -15px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  z-index:2;
} 
.youtube iframe { /* youtube embed (responsive) */
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:3;
}

.thumb {
  max-width: 170px;
  max-height: 180px;
  display: block;
  margin-left: auto;
  margin-right: auto;
   border-radius: 20px;
}