hr {border: 0; clear:both; display:block; width: 96%; background-color:#ccc; height: 1px; } 
ol{ margin-left: 0; padding-left: 15px; }
table .highlight,
table .highlight td{ background-color: #fff3cd; color: #856404; }
table tr td .reason{ display: inline-block; height: 40px; overflow: hidden; cursor: pointer; }
table tr.pending td{color: #004085; background-color: #cce5ff;  border-bottom: 1px solid #b8daff; } 
table tr.requestRow td{ padding-bottom: 45px; }
table tr.approved td{ color: #155724; background-color: #d4edda; border-bottom: 1px solid #c3e6cb; }
table tr td .fields{ display: none; }
table tr td .fields .form-group{ margin-bottom: 4px; }
table tr td .fields .col-md-4:nth-child(1){ padding-right: 0; }
table tr td .fields .col-md-4 .form-control{ padding: 6px 8px; }
table tr td .fields .col-md-4:nth-child(2){ padding-left: 0; padding-right: 4px; }
table tr td .fields .col-md-4:nth-child(3){ height: 34px; position: relative; }
table tr td .fields .col-md-4 a{ padding: 0 3px; width: 18px; float: left; position: absolute; top: 50%; margin-top: -9px; height: 18px; line-height: 16px; font-size: 20px; display: inline-block; }
table tr td .fields .col-md-4 a:nth-child(1){ margin-right: 0; }
table tr td .fields .col-md-4 a:nth-child(2){ line-height: 12px; margin-left: 20px; }
table tr td .fields .col-md-5 .form-control{ padding: 6px 8px; }
table tr td .cancel,
table tr td .saveRequest{ margin-top: 2px; width: 81px; display: none; }
#dashboard .info-box{ min-height: 102px; }
#dashboard .info-box-icon{ width: 102px; height: 102px; }
#dashboard .info-box-content{ margin-left: 102px; }
#dashboard .info-box .progress{ position: relative; }
.info-box .progress .progress-bar{ position: absolute; }
.clear{ clear: both; height: 1px; display: block; }
.leaveHourField{ max-width: 100px; float: left; margin-right: 10px; text-align: center; }
.leaveHourField select,
.leaveHourField input{ padding: 0 2px; text-align: center; height: 20px; line-height: 20px; margin-bottom: 7px; }
.leaveHourField strong{ display: block; }
.leaveHourField span{ height: 35px; display: block; line-height: 35px; }
.removeLeaveHourButton{ position: absolute; top: 50%; margin-top: -10px; right: 20px; }
.addLeaveHourButton{ position: absolute; top: 50%; margin-top: -10px; right: 40px; }
.mutateUser .removeLeaveHourButton,
.mutateUser .addLeaveHourButton{ top: 0; margin-top: -30px; }
.mutateUser .allLeaveHourFields{ width: 600px; }
.progress-description .block{ display: block; text-align: right; }
.progress-description .block:nth-child(2){ color: #01728c; }
.walk{
    -webkit-animation: walk 7s steps(120) 1;
    -moz-animation: walk 7s steps(120) 1;
    -ms-animation: walk 7s steps(120) 1;
    -o-animation: walk 7s steps(120) 1;
    animation: walk 7s steps(120) 1;
    position: relative;
}
.walk-fast{
    -webkit-animation: walk 5s steps(120) 1;
    -moz-animation: walk 5s steps(120) 1;
    -ms-animation: walk 5s steps(120) 1;
    -o-animation: walk 5s steps(120) 1;
    animation: walk 5s steps(120) 1;
    position: relative;
}

@-webkit-keyframes walk {
    from { left: 0; }
    to { left: 100%; }
}
@-moz-keyframes walk {
    from { left: 0; }
    to { left: 100%; }
}
@-ms-keyframes walk {
    from { left: 0; }
    to { left: 100%; }
}
@-o-keyframes walk {
    from { left: 0; }
    to { left: 100%; }
}
@-keyframes walk {
    from { left: 0; }
    to { left: 100%; }
}

.alertdisclaimer{position: fixed; bottom: 0; right: 0; margin: 10px; width: 25%; z-index: 999; }
.alertdisclaimer h3 { margin: 0 }
.b345xd23{ position: absolute; top: 2px; left: 0; right: 0; height: 50px; }
.b345xd23 img{ max-width: 50px; }
.bdaybox-text{display: block; overflow: hidden; } 
.bgcolors{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }
.bgcolors .pattern_overlay{ background-image: url("/images/diagmonds.png"); opacity: 0.4; width: 100%; }
.bgcolors > div{ position: absolute; top: 0; bottom: 0; width: 33.33333333%;  }
.bgcolors > div .company_name{ position: absolute; bottom: 100px; z-index: 100; left: 50%; transform: translateX(-50%); }
.bgcolors > div .company_name img{ max-width: 100px; width: 100%; }
.bgcolors > div:nth-child(3) .company_name img{ max-width: 200px; }
.bgcolors .color1{ background-color: #6DCFF6; }
.bgcolors .color2{ background-color: #FDC900; margin-left: 33.33333333%; }
.bgcolors .color3{ background-color: #C3D62F; margin-left: 66.66666667%; }
.bootstrap-timepicker-widget table td input {border: none; } 
.box-no-bottom{ margin-bottom: 0; }
.btn{ cursor: pointer; }
.btn-outline-secondary {background-color: #ddd; color: #aaa; border: 1px solid #ccc; }
.btn-outline-secondary:hover {color: #fff; background-color: #6c757d; border-color: #6c757d; }
.clockpicker-button { display: none; }
.content-wrapper{background: #ecf0f5; background: -moz-linear-gradient(top, #ecf0f5 0%, #dcdfe2 100%); background: -webkit-linear-gradient(top, #ecf0f5 0%,#dcdfe2 100%); background: linear-gradient(to bottom, #ecf0f5 0%,#dcdfe2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f5', endColorstr='#dcdfe2',GradientType=0 ); }
.customOverlay{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 1049; }
.customOverlay .box{ z-index: 998; position: absolute; left: 50%; top: 100px; max-width: 400px; transform: translateX(-50%); }
.datepicker table tr td.new, 
.datepicker table tr td.old,
.datepicker table tr td.disabled, 
.datepicker table tr td.disabled:hover{ color: #ccc; }
.datepicker-dropdown{ z-index: 9998 !important; }
.department-buttons .btn img{ max-width: 50px; }
.department-buttons .btn:nth-child(1){-webkit-box-shadow: 2px 2px 0px 0px rgba(69,131,156,1); -moz-box-shadow: 2px 2px 0px 0px rgba(69,131,156,1); box-shadow: 2px 2px 0px 0px rgba(69,131,156,1); } 
.department-buttons .btn:nth-child(1):hover{background-color: #58a5c4 !important; border-color: #58a5c4 !important; } 
.department-buttons .btn:nth-child(2){-webkit-box-shadow: 2px 2px 0px 0px rgba(179,143,14,1); -moz-box-shadow: 2px 2px 0px 0px rgba(179,143,14,1); box-shadow: 2px 2px 0px 0px rgba(179,143,14,1); } 
.department-buttons .btn:nth-child(2):hover{background-color: #d6af22 !important; border-color: #d6af22 !important; } 
.department-buttons .btn:nth-child(3){-webkit-box-shadow: 2px 2px 0px 0px rgba(158,171,41,1); -moz-box-shadow: 2px 2px 0px 0px rgba(158,171,41,1); box-shadow: 2px 2px 0px 0px rgba(158,171,41,1); } 
.department-buttons .btn:nth-child(3):hover{background-color: #adba27 !important; border-color: #adba27 !important; } 
.department-buttons .btn:nth-child(3) img{ max-width: 60px; } 
.department-buttons .btn:nth-child(4){-webkit-box-shadow: 2px 2px 0px 0px rgba(150,150,150,1); -moz-box-shadow: 2px 2px 0px 0px rgba(150,150,150,1); box-shadow: 2px 2px 0px 0px rgba(150,150,150,1); } 
.department-buttons .btn:nth-child(4):hover{background-color: #ccc !important; border-color: #ccc !important; }
.fc-event { box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0, 0, 0, 0.4); }
.fields-form h2{ font-size: 20px; }
.fieldsets{ margin-top: 30px; }
.formcontainer { border: 1px solid black; padding: 10px;}
.form-check-inline {display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0; margin-right: .75rem; } 
.form-check {position: relative; display: block; padding-left: 1.25rem; } 
.form-check-inline .form-check-input {position: static; margin-top: 0; margin-right: .3125rem; margin-left: 0; } 
.form-check-label {margin-bottom: 0; }
.form-control.error{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075) }
.form-control[readonly]{ background-color: #fff; }
.form-control[disabled]{ background-color: #eee; }
.info-link{ font-size: 30px; float: right; margin-top: -5px; }
.input-group .input-group-addon i{ color: #aaa; }
.info-box,
.small-box,
.box{ box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); }
.leaveApprove{ color: #155724; }
.leaveDeny{ color: #721c24; }
.login-box-body > h2{ font-size: 24px; font-weight: 600; margin-top: 0; margin-bottom: 20px; }
.log_buttons{ margin: 10px 0; }
.log_buttons a{ margin-bottom: 2px; }
.login-page, .register-page {position: relative; background-color: #6dcff6; background-image: url(/images/bg-pattern.png); } 
.login-box, .register-box{margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -70%); box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); } 
.main-sidebar { box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22); }
.message.text-red.text-center{ display: block; }
.modal-footer .error{ color: #721c24; float: left; }
.noresize { resize: none;}
.notextdecoration { text-decoration: none !important; }
.otheremployeesleave { max-height: 250px; overflow: auto; }
.overtime_table .pull-right{ width: 176px; }
.output .absent{ margin-top: 20px; cursor: pointer; }
.output .absent input{ vertical-align: top; cursor: pointer; }
.output{ margin-top: 30px;}
.output h2{ font-size: 22px; }
.pagination>li{ cursor: pointer; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{background-color: #62BADD; border-color: #62BADD; }
.pipe{ top: 5px; position: relative; }
.reasonLeave{ margin-bottom: 20px }
.registerAbsence{ padding: 10px; padding-bottom: 0; }
.requestRow td{ padding-bottom: 45px; }
.requestRow .exchange{ position: absolute; }
.searchbar-label{padding-top: 6px; } 
.select2 {width:100%!important; }
.sidebar-menu>li.header { color: #b8c7ce !important; }
.skin-blue .main-header .navbar{ background-color: #6dcff6; background-image: url("/images/diagmonds.png"); -webkit-box-shadow: 0px 3px 2px -1px rgba(0,0,0,0.18); -moz-box-shadow: 0px 3px 2px -1px rgba(0,0,0,0.18); box-shadow: 0px 3px 2px -1px rgba(0,0,0,0.18); }
.small-box .icon i{ width: 80px;}
.spinner{ font-size: 14px; font-weight: bold; display:inline}
.spinner img{ margin-right: 10px; }
.tableLogo img{ max-width: 50px; }
.tableLogo.last img{ max-width: 100px; }
.totalRow td{ border-top: 1px solid #AAA !important; }
.totalHours td{ font-weight: bold; } 
.userMonths{ margin: 30px 0 10px; }
.userMonths h3{ margin: 0; text-align: right; }

#breaktimestable td {width: 15%; text-align: center; } 
#dashboard .small-box label,
#myCalendar .small-box label{ width: 30px;}
#dashboard .small-box .icon,
#myCalendar .small-box .icon{ right: 30px; }
#dashboard sup,
#myCalendar sup{ font-size: 20px; }
#hoursDanger{ max-width: 730px; margin: 50px auto 0; }
#logs .by{ display: block; margin-top: 20px; }
#manageUsers table .row{ margin: 0; }
#manageUsers table td.pull-right{ width: 143px; }
#myDepartments .company-logo img{ max-width: 60px; margin-bottom: 20px; }
#myDepartments .company-logo.last img{ max-width: 110px; }
#mySchedule hr{ height: 0.8px; }
#mySchedule input[type=checkbox] { vertical-align: top; }
#mySchedule .form-group{ margin-bottom: 10px; }
#mySchedule .msg{ text-align: center; color: #a94442; margin: 10px 0; display: block; }
#mySchedule ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: lightgrey;
}
#mySchedule ::-moz-placeholder { /* Firefox 19+ */
    color: lightgrey;
}
#mySchedule :-ms-input-placeholder { /* IE 10+ */
    color: lightgrey;
}
#mySchedule :-moz-placeholder { /* Firefox 18- */
    color: lightgrey;
}
#registerHours .col-lg-3 table tr td:nth-child(1){ width: 150px; }
#registerHours .fc-header-toolbar { display: none; }
#registerVerlof { padding-bottom: 80px; }
#searchHours{ max-width: 730px; margin: 0 auto 20px; position: relative; }
#searchHours .form-group{ min-height: 34px; }
#searchHours .form-group label{ vertical-align: middle; min-height: 34px; position: absolute; top: 50%; margin-top: -10px; }
#searchHours .form-group .col-sm-8{ margin-left: 33.33333333%; top: 50%; }
#searchHours .btn,
#searchHours .form-group .form-control{ margin-top: 7px; }
#selectAll{ cursor: pointer; }
#selectAll span{ color: #333; }
#selectAll img{ width: 24px; vertical-align: baseline; margin-right: 5px; }
#tempHoursSaved { display: inline-block; color: grey; font-size: 14px}
#validationErrorList ul { padding-left: 30px; margin-top: 10px; display: inline-block}
#validationErrorList ul li{ color: #dd4b39; }
#verlofTable{ margin-top: 64px; }
#verlofTable tr{ -webkit-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; }

@media screen and (min-width: 1200px) and (max-width: 1460px)
{
    #mySchedule .input-group-addon{ display: none; }
}

@media screen and (max-width: 1368px)
{
    .alertdisclaimer { width: 50%; }
    #registerHours .col-lg-3 table tr td:nth-child(1){ width: 100px; }
}

@media screen and (max-width: 1199px)
{
    .hoursoverviewlegend {max-height: 200px; overflow: auto; }
    .alertdisclaimer { width: 60%; }
    .fc-scroller{ overflow: none !important; height: auto !important; }
    #registerHours .col-lg-3 table tr td:nth-child(1){ width: 130px; }
    #verlofTable{ margin-top: 30px; }
    .otheremployeesleave { max-height: 150px; }
    
    #mySchedule.admin .input-group-addon{ display: none; }
}

@media screen and (max-width: 1023px)
{
}

@media screen and (max-width: 989px)
{
    /* General */
    .bgcolors > div:nth-child(3) .company_name img{ width: 150px; max-width: 200px; }
    .department-buttons .btn{ padding: 6px; }
    .department-buttons .btn img{ max-width: 30px; }
    .department-buttons .btn:nth-child(3) img{ max-width: 50px; }
    .form-check{ padding-left: 0; }

    /* Dashboard */
    #dashboard .small-box{ width: 49.5%; display: inline-block; vertical-align: top; }
    #dashboard .birthdaydiv .small-box{ width: 100%; }

    /* ApproveDeny */
    #approveDeny .row{ margin-bottom: 10px; }
    #approveDeny .reasonLeave{ margin-bottom: 0; }

    /* myCalendar */
    #myCalendar .box{ margin-top: 15px; }
    #myCalendar .small-box{ width: 49%; display: inline-block; vertical-align: top; }
    #myCalendar .small-box:nth-child(2){ width: 50%; }

    #mySchedule.admin .schedule-seperator{ display: none; }

    /* registerHours */
    .alertdisclaimer { width: 65%; }
    #registerHours .col-lg-3 .box{ width: 49%; display: inline-block; margin-right: 1%; }
    #registerHours .col-lg-3 .box:nth-child(2){ margin-right: 0; }

    /* Search hours */
    #searchHours .col-md-2{ text-align: right; }
    #searchHours .col-md-2 .btn{ margin-bottom: 15px; margin-right: 15px; }
    #searchHours .form-group label{ display: none; }
    #searchHours .form-group .col-sm-8{ margin: 0; }
}

@media screen and (max-width: 768px)
{
    #mySchedule{ margin-top: -50px; }
    #mySchedule.admin{ margin-top: 0; }
    #mySchedule form > .headerRow{ display: none; }
    #mySchedule .input-group-addon{ display: none; }
    #mySchedule .schedule-seperator{ display: none; }
    #breaktimestable .removebreakbutton{ font-size: 23px; }
    #breaktimestable .addbreakbutton{ font-size: 23px; margin-right: 5px; }
}

@media screen and (max-width: 599px)
{
    .department-buttons{ float: none !important; }
    .department-buttons .btn{ display: inline-block; width: 48%; margin-right: 1%; margin-bottom: 10px; }
    .department-buttons .btn img{ max-width: 50px; }
    .department-buttons .btn:nth-child(3) img{ max-width: 60px; }
    /* Register hours */

    #registerHours .col-lg-3 .box{ width: 100%; display: block; margin-right: 0; }
}

@media screen and (max-width: 424px)
{
    /* Register hours */
    #breaktimestable .removebreakbutton{ font-size: 18px; }
    #breaktimestable .addbreakbutton{ font-size: 18px; margin-right: 0px; }
    input[name^="break"] { min-width: 58px; }

    .department-buttons .btn{ width: 100%; }
    .department-buttons .btn img{ max-width: 30px; }
}

@media screen and (max-width: 403px)
{
    /* Register hours */
    #breaklabel {min-width: 55px; }
}

@media screen and (max-width: 355px)
{
    /* Register hours */
    #breaktimestable .removebreakbutton{ font-size: 18px; }
    #breaktimestable .addbreakbutton{ font-size: 18px; }
    #breakbuttons { min-width: 40px; }
    #breaklabel {min-width: 55px; }
    #hourlabel { max-width: 0; visibility: collapse; }
}