$("#overlay").show();
#flash{padding:3px; display: none; width:64px;}
#error,#error1,#error2,#error3,#error4{color:red; float:left;} 
.spinner{ float: right; display: none;
   width: 22px; margin-left: 5px;
   height: 22px;
   border-radius: 50%;
   background: radial-gradient(farthest-side,#ffffff 94%,#0000) top/5px 5px no-repeat,
   conic-gradient(#0000 30%,#ff9347);
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0);
   animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
   100% {
      transform: rotate(1turn);
   }
}
.input-rounded{border-radius: 50px !important;}

.pull-right{ float: right !important;}
.pull-left{ float: left !important;}
.usertbl{width:97.5%; margin: 2% auto 0 auto; color: #333; font-size: 16px;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #bbb !important; font-size: 16px !important;
  opacity: 1; /* Firefox */
}
.clublogo{width:100px; height: 100px; border-radius: 50%; margin: 0 auto; display: block;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #bbb !important; font-size: 16px !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #bbb !important; font-size: 16px !important;
}
.ticket{display: block; padding: 15px 0 !important;}
.ticket:hover{background: #f1f1f1;}

body, p{color: #333 !important; font-size: 16px;}
input[type='text'],input[type='number'],input[type='password'],input[type='email']{border: 1px solid #ccc;}
.heading{padding: 30px; overflow: auto; background: #0f5da8; color: #fff; border-radius: 10px 10px 0 0;}
.heading h2{text-align: center; color: #fff; padding-top: 30px; font-weight: 700; text-transform: uppercase;}
.heading .kda{width:100%;}
span.copy{color:#999; font-size:14px;}
.usertb{width:100%; color: #333; font-size: 16px;}
.usertb td{text-align: center !important;}
table .t1{padding: 10px; border:1px solid #999 !important; width:12%;}
table .t2{padding: 10px; border:1px solid #999 !important; width: 88%;}

.user-box {
    width:160px; height: 180px;
    padding: 0px; margin: 0; 
    position: relative; background: #dadada;
}
#badge{width: 900px; height: 492px; background:#fff url('../../uploads/badge/badge-front.png') no-repeat center center; background-size: 100%;}

.user-box form{display: inline;}
.user-box img#imagePreview{width: 160px; height: 180px; margin:-21px 0 0 0; padding: 3px;}

.editLink {
    position:absolute;
    top:0%; height: 180px; width: 160px;
    left:0%; 
    opacity:0;
    transition: all 0.3s ease-in-out 0s;
    -mox-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.img-relative:hover .editLink{opacity:1;}
.overlay{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(255,255,255,0.7);
}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #555;
}
.uploadProcess img{
    max-width:160px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    display: inline;
}
.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1; text-align: center;
}

.inputfile + label {
    width:100%;
    font-size: 14px;
    /* 20px */
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block; text-align: center;
    overflow: hidden;
    padding:10px; background: #fff; border: 1px solid #999;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.btn-file {
    position: relative; background: #f00; color: #fff;
    overflow: hidden; border:1px solid #ccc; border-radius: 0;
}
.btn-file:hover{color: #fff;}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: inherit; 
    display: block;
}

#img-upload{
    width: 100px; height: 100px; display: none;
}



#error{padding: 10px; color: red; float: left; font-size: 16px;} 
    
#overlay {
position : absolute;
top      : 0;
left     : 0;
width    : 100%;
height   : 100%;
z-index  : 995;
display  : none;
} 
#overlay-back {
position   : absolute;
top        : 0;
left       : 0;
width      : 100%; text-align: center; color: #f00; vertical-align:text-bottom;
height     : 100%;
background: rgba(255,255,255, 0.9) url(../loader.gif) no-repeat center center;
z-index    : 990;
display    : none;
}
#dvLoading {
padding: 20px;
background-color:none;
border-radius: 10px;
height: 100%;
width: 100%;
position: fixed;
z-index: 1000;
left: 0%;
top: 0%;
margin:0;
text-align: center;
display: none;
} 
th{font-weight: normal !important; background: #f1f1f1;}
.btn-blue{background: #0f5da8; color: #fff;}
.btn-gray{background: #666; color: #fff;}
.btn-gray:hover{color: #dadada;}
.blue{color: #0f5da8;}
.gray{color:gray;}
.background-gray{background: #dadada !important;}
.red{color:red;}
.aqua{color:aqua;}
.caps{text-transform: capitalize;}
.upper{text-transform:uppercase;}
.lower{text-transform:lowercase;}
.font-12{font-size: 12px !important;}
.font-14{font-size: 14px !important;}
.font-16{font-size: 16px !important;}
.font-18{font-size: 18px !important;}
.font-20{font-size: 20px !important;}
.alc{text-align: center;}

.p-5{padding: 5px;}
.p-10{padding: 10px;}
.p-15{padding: 15px;}
.p-20{padding: 20px;}

.pt-5{padding-top: 5px;}
.pt-10{padding-top: 10px;}
.pt-15{padding-top: 15px;}
.pt-20{padding-top: 20px;}

.pb-5{padding-bottom: 5px;}
.pb-10{padding-bottom: 10px;}
.pb-15{padding-bottom: 15px;}
.pb-20{padding-bottom: 20px;}

.pl-5{padding-left: 5px;}
.pl-10{padding-left: 10px;}
.pl-15{padding-left: 15px;}
.pl-20{padding-left: 20px;}

.pr-5{padding-right: 5px;}
.pr-10{padding-right: 10px;}
.pr-15{padding-right: 15px;}
.pr-20{padding-right: 20px;}

.clearfix{display: block; padding:0; margin: 0; clear: both; width: 100%;}
h1,h2,h3,h4,h5,h6,h7{font-weight: 300;}
.normal{font-weight:300 !important;}
.bold{font-weight: 600;}

.btn-outline-blue{border: 1px solid blue;}
.btn-outline-gray{border: 1px solid gray;}
.resp{width:100%;}
.metismenu li a, .metismenu li, .metismenu li a i{color: #333 !important;}

.header h4{font-size: 18px; font-weight: 300; padding:30px 0 0 0;}

@media (max-width: 992px) {
    .small{font-size: 8px !important;}
    .header h4{font-size: 16px; padding:30px 0 0 10%;}
}