body {
    padding: 0px;
    margin: 0px;
    font: 10px "Verdana", Helvetica, Arial, sans-serif;
    background-color: #F8F8F8;
    box-sizing: border-box;
}

a {
    color: #3D7DBA;
    text-decoration: none;
    font-size: 10pt;
}

a:hover {
    color: #38E7F7;
}

h1 {
    color: #2767A8;
    font-size: 24pt;
    margin: 0 0 10px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #2767A8;
}

h2 {
    color: #2767A8;
    font-size: 18pt;
    margin: 0 0 10px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #2767A8;
}

h3 {
    color: #2767A8;
    font-size: 12pt;
    margin: 0 0 4px 0;
    padding: 0 0 4px 0;
    border-bottom: 1px solid #2767A8;
}

input {
    outline: 0;
    outline-style: none;
    outline-width: 0;
}

.login {
    box-sizing: border-box;
    font-size: 10pt;
    width: 350px;
    margin: 50px auto;
    text-align: center;
}

.topbar {
    display: none;

    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    
    padding: 10px;
    
    background: #2564a9;
    background: -moz-linear-gradient(top,  #2564a9 0%, #77b8e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2564a9), color-stop(100%,#77b8e2));
    background: -webkit-linear-gradient(top,  #2564a9 0%,#77b8e2 100%);
    background: -o-linear-gradient(top,  #2564a9 0%,#77b8e2 100%);
    background: -ms-linear-gradient(top,  #2564a9 0%,#77b8e2 100%);
    background: linear-gradient(to bottom,  #2564a9 0%,#77b8e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2564a9', endColorstr='#77b8e2',GradientType=0 );

    box-shadow: 0px 0px 10px #333333;
}

.input  {
    margin: 0px 2px;
    padding: 4px;
    
    width: 250px;
    
    font-size: 11pt;
    font-family: Verdana;

    border-radius: 10px;
    border: 1px solid #969696;
    
    outline: 0;
    outline-style: none;
    outline-width: 0;
}

.button {
    width: 120px;
    margin: 0px 2px;
    padding: 4px;
    
    color: #FFFFFF;
    //font-weight: bold;
    font-size: 11pt;
    font-family: Verdana;

    background: #fcd66f;
    background: -moz-linear-gradient(top,  #fcd66f 0%, #f27c21 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd66f), color-stop(100%,#f27c21));
    background: -webkit-linear-gradient(top,  #fcd66f 0%,#f27c21 100%);
    background: -o-linear-gradient(top,  #fcd66f 0%,#f27c21 100%);
    background: -ms-linear-gradient(top,  #fcd66f 0%,#f27c21 100%);
    background: linear-gradient(to bottom,  #fcd66f 0%,#f27c21 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd66f', endColorstr='#f27c21',GradientType=0 );

    border-radius: 10px;
    border: 2px solid #FFFFFF;
}

.button:hover {
    cursor: pointer;
    
    background: #f27c21;
    background: -moz-linear-gradient(top,  #f27c21 0%, #ff5533 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f27c21), color-stop(100%,#ff5533));
    background: -webkit-linear-gradient(top,  #f27c21 0%,#ff5533 100%);
    background: -o-linear-gradient(top,  #f27c21 0%,#ff5533 100%);
    background: -ms-linear-gradient(top,  #f27c21 0%,#ff5533 100%);
    background: linear-gradient(to bottom,  #f27c21 0%,#ff5533 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f27c21', endColorstr='#ff5533',GradientType=0 );
}

.greenbutton {
    width: 120px;
    margin: 0px 2px;
    padding: 4px;
    
    color: #FFFFFF;
    //font-weight: bold;
    font-size: 11pt;
    font-family: Verdana;

    background: #60f777;
    background: -moz-linear-gradient(top,  #60f777 0%, #219900 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60f777), color-stop(100%,#219900));
    background: -webkit-linear-gradient(top,  #60f777 0%,#219900 100%);
    background: -o-linear-gradient(top,  #60f777 0%,#219900 100%);
    background: -ms-linear-gradient(top,  #60f777 0%,#219900 100%);
    background: linear-gradient(to bottom,  #60f777 0%,#219900 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60f777', endColorstr='#219900',GradientType=0 );

    border-radius: 10px;
    border: 2px solid #FFFFFF;
}

.greenbutton:hover {
    cursor: pointer;
    
    background: #00c90a;
    background: -moz-linear-gradient(top,  #00c90a 0%, #0a5600 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00c90a), color-stop(100%,#0a5600));
    background: -webkit-linear-gradient(top,  #00c90a 0%,#0a5600 100%);
    background: -o-linear-gradient(top,  #00c90a 0%,#0a5600 100%);
    background: -ms-linear-gradient(top,  #00c90a 0%,#0a5600 100%);
    background: linear-gradient(to bottom,  #00c90a 0%,#0a5600 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c90a', endColorstr='#0a5600',GradientType=0 );
}

.redbutton {
    width: 120px;
    margin: 0px 2px;
    padding: 4px;
    
    color: #FFFFFF;
    font-size: 11pt;
    font-family: Verdana;

    background: #ff4d3d;
    background: -moz-linear-gradient(top,  #ff4d3d 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4d3d), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top,  #ff4d3d 0%,#cf0404 100%);
    background: -o-linear-gradient(top,  #ff4d3d 0%,#cf0404 100%);
    background: -ms-linear-gradient(top,  #ff4d3d 0%,#cf0404 100%);
    background: linear-gradient(to bottom,  #ff4d3d 0%,#cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4d3d', endColorstr='#cf0404',GradientType=0 );

    border-radius: 10px;
    border: 2px solid #FFFFFF;
}

.redbutton:hover {
    cursor: pointer;
    
    background: #c93030;
    background: -moz-linear-gradient(top,  #c93030 0%, #7a0202 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c93030), color-stop(100%,#7a0202));
    background: -webkit-linear-gradient(top,  #c93030 0%,#7a0202 100%);
    background: -o-linear-gradient(top,  #c93030 0%,#7a0202 100%);
    background: -ms-linear-gradient(top,  #c93030 0%,#7a0202 100%);
    background: linear-gradient(to bottom,  #c93030 0%,#7a0202 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c93030', endColorstr='#7a0202',GradientType=0 );
}

.bluebutton {
    width: 120px;
    margin: 0px 2px;
    padding: 4px;
    
    color: #FFFFFF;
    font-size: 11pt;
    font-family: Verdana;

    background: #87e0fd;
    background: -moz-linear-gradient(top,  #87e0fd 0%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#05abe0 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#05abe0 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#05abe0 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );

    border-radius: 10px;
    border: 2px solid #FFFFFF;
}

.bluebutton:hover {
    cursor: pointer;
    
    background: #00b9fc;
    background: -moz-linear-gradient(top,  #00b9fc 0%, #22049b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b9fc), color-stop(100%,#22049b));
    background: -webkit-linear-gradient(top,  #00b9fc 0%,#22049b 100%);
    background: -o-linear-gradient(top,  #00b9fc 0%,#22049b 100%);
    background: -ms-linear-gradient(top,  #00b9fc 0%,#22049b 100%);
    background: linear-gradient(to bottom,  #00b9fc 0%,#22049b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9fc', endColorstr='#22049b',GradientType=0 );
}

.logout {
    float: right;
    margin-left: 30px;
}

.logout input { 
    width: 80px;
}

.monthyear {
    float: right;
    margin-left: 5px;
}

.monthyear input{ width: 60px; }
.monthyear select{ width: 120px; }

.content {
    display: none;
    
    box-sizing: border-box;
    margin-top: 60px;
    padding: 10px;
}

.content_print {
    box-sizing: border-box;
    padding: 5px;
}

.tbcalendar {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid #3170B1;
}

.tbcalendar td {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 1px;
    border: 1px dotted #3170B1;
    text-align: center;
}

.tbpcalendar {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    border: 2px solid #3170B1;
}

.tbpcalendar td {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 1px;
    border: 1px dotted #3170B1;
    text-align: center;
}

.tday {
    font-size: 10pt;
    font-weight: bold;
}

.thours {
    font-size: 10pt;
    font-weight: bold;
}

.tminutes {
    font-size: 7pt;
}

.bg-sab { background-color: #FFE5B0; }
.bg-dom { background-color: #FAAAA8; }

.dtbcustomers {
    width: 500px;
    margin: 10px auto;
    page-break-before: always;
    text-align: center;
}

.tbcustomers {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.tbcustomers th {
    height: 18px;
    margin: 0;
    padding: 3px;
    border: 1px dotted #3170B1;
    text-align: left;
    font-size: 10pt;
}

.tbcustomers td {
    height: 18px;
    margin: 0;
    padding: 3px;
    border: 1px dotted #3170B1;
    text-align: left;
    font-size: 8pt;
}

.tbcustomershours {
    /*font-weight: bold;*/
}

.tdhours {
    border-left: 1px solid #3170B1 !important;
}

.tdminutes {}

.tdphours {
    border-left: 2px solid #3170B1 !important;
}

.tdpminutes {}

.tbdotted {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.tbdotted th {
    height: 22px;
    margin: 0;
    padding: 3px;
    border: 1px dotted #3170B1;
    text-align: left;
    font-size: 10pt;
}

.tbdotted td {
    height: 22px;
    margin: 0;
    padding: 3px;
    border: 1px dotted #3170B1;
    text-align: left;
    font-size: 10pt;
}

.rcustomer:hover {
    cursor: pointer;
    background-color: #16BE59;
    border-radius: 10px;
    color: white;
    font-weight: bold;
}

.rcustomerselected {
    border-radius: 10px;
    background-color: red;
    color: white;
    font-weight: bold;
}

.msglongcontent {
    font-size: 9pt;
}

.dover {
    padding: 10px;
    font-size: 10pt;
}

.checkbox {
    margin-left: 12px;
}

.ts {
    text-align: right;
    font-size: 10pt;
}