body {
margin:0px;padding:0px;
font-family: 'Roboto';
}
.wrapper{
width:100%;height: calc(100vh - 6vh);
margin:0px;padding:0px;
background-image: url(../img/tmclk_bg.jpg);
background-repeat:no-repeat;
background-size:cover;
}
a {text-decoration: none;}
#etmclk{padding:0px;margin:0px;}
.tm-numpad-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    padding: 0px;
}
a#tm-numpad-close {
    position: absolute;
    right: -54px;
    top: -56px;
    background-color: #f44336;
    color: #fff;
    line-height: 1;
    padding: 20px 21px;
}
.tm-numpad-output-container {
    position: relative;
    width: 100%;
}
.tm-numpad-output {
    width: 100%;
    border: 1px solid #666;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    margin: 0px;
    text-align: center;
    min-height: 60px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    font-size: 24px;
}
.tm-numpad-output .clkx{font-size:12px;}

.tm-numpad-number-container > table {
    width: calc(100% + 6px);
    position: relative;
    left: -3px;
    margin-top: 10px;
}
.tm-numpad-number-container > table a {
    display: block;
    padding: 16px 10px;
    background-color: #424242;
    color: #fff;
    text-align: center;
}
.tm-numpad-number-container > table a:hover {
    background-color: #616161;
}

.tm-numpad-number-container .cancel {
    background-color: #ef5350;
}
.tm-numpad-number-container .done {
    background-color: #388E3C;
}
.del,.clear,.cancel,.done{
padding-left:0px !important;padding-right:0px !important;
}

table {
  border-spacing: 0;
  border-collapse: separate;
}
td,
th {
  padding: 1px;
}
.clearx {clear:both;width:100%;padding:0px;margin:0px;}

a:focus,
a:hover{
    outline: none;
    text-decoration: none;
}

.time-frame {
    background-color: inherit;
    color: #ffffff;
    width: 100%;
    font-family: Arial;
}

.time-frame > div {
    width: 100%;
    text-align: center;
}

.dsdate {
    font-size: 1.2em;
}
.dstime {
    font-size: 3em;
}

.cameralense{
width:300px;height:250px;
padding:0px;margin:0px;
}
#my_camera{padding:0px;margin:0px;}
.day-message{
text-align:center;color:#fff;
font-size:22px;line-height:24px;
font-weight:normal !important;
margin-top:0px;
}
.day-message img{
border:0px;width:24px;height:24px;
vertical-align:middle;
}

.tmclk{
width:620px; min-height:400px;
margin:50px auto 0 auto;
background: #222;
outline: none;
border: 1px solid #2A2A2A;
border-radius:4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06), 0 2px 2px 0 rgba(0, 0, 0, .2);
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 10px;
background: -webkit-linear-gradient(45deg, #222, #2f2f2f);
opacity: 1;position:relative;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.instr {font-size:11px;color:#ffcc33;font-style:italic;margin-top:10px;text-align:center}
.bizname{
width:300px; border-bottom:1px solid #999;
padding-bottom:5px;margin-bottom:0px;
font-size:14px;color:#fff;
}
.appname{
font-size:30px;color:#fff;margin-bottom:9px;
}
.appname i{font-size:32px;}
#smllscr {display:none;}

@media (max-width:767px){
.tmclk{width:100%;margin:0px auto;}
#smllscr {display:block;width:300px; border-top:1px solid #999;margin:0 auto;padding-top:5px;}
#fullscr {display:none;}
.bizname{margin:0 auto 5px auto;}
.appname{width:300px;margin:0 auto 15px auto;}
.cameralense{margin:0 auto;}
.tm-numpad-container{margin:10px auto 0 auto;}
.wrapper{background-image: none;height:100%}
}

@media only screen and (min-width : 300px) and (max-width : 767px) {
    a#tm-numpad-close {
        right: 0px
    }
}