@import url('https://fonts.googleapis.com/css?family=Lora:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@font-face {
font-family: HelveticaNeueRegular;
src: url(../fonts/HelveticaNeue-Regular.otf);
}
@font-face {
font-family: HelveticaNeueBold;
src: url(../fonts/HelveticaNeue-Bold.otf);
}
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
/*    font-family: 'Lora', serif;*/
    font-family: 'HelveticaNeueRegular', sans-serif;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.no-padding {
    padding: 0!important;
}

.no-margin {
    margin: 0 !important;
}
.p-r-0{
    padding-right: 0 !important;
}
.p-l-0{
    padding-left: 0 !important;
}
.no-radius {
    border-radius: 0;
}

ul li {
    list-style: none;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    -webkit-transition: all .3s;
    transition: all .3s;
}

::-moz-selection {
    background: #e6d339;
}

::selection {
    background: #e6d339;
}

::-webkit-scrollbar {
    width: 3px;
}

::-moz-scrollbar {
    width: 3px;
}

::-ms-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-thumb {
    background: #64616E;
}

::-moz-scrollbar-thumb {
    background: #64616E;
}

::-ms-scrollbar-thumb {
    background: #64616E;
}

a {
    text-decoration: none;
    outline: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a:hover {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.p-0 {
    padding: 0!important;
}

.m-0 {
    margin: 0 !important;
}


/*-------------------------------*/


/*           Login page          */


/*-------------------------------*/
.login-body{
    background: rgb(88, 170, 72) url(../images/bg-pattern.4b96119.svg) repeat 50%;
}
.login-wrapper{
    padding-top: 30px;
    padding: 30px;
}
.login-box{
    max-width: 448px;
    margin: auto;
    transition: width .12s ease-out;
    -webkit-transition: width .12s ease-out;
    background-color: #fff;
    padding: 1rem 2rem 2em;
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    padding: 80px 25px 50px 25px;
}
.logo-holder {
    width: 180px;
    margin: auto;
    margin-bottom: 30px;
}
.logo-holder img{
    width: 100%;
}
.login-title{
    font-size: 2em;
    margin-bottom: 1em;
    text-align: center;
}
.login-form .form-control{
    border: 1px solid #a6a6a6;
    height: 40px;
    padding-left: 40px;
    position: relative;
    z-index: 2;
    background: transparent;
}

.login-form .form-control:focus{
    border-color: #36f;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51,102,255,.6);
}
.field {
  display: flex;
  flex-flow: column-reverse;
  position: relative;
  margin-bottom: 5px;
}

label, input {
  transition: all 0.2s;
}

input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

.form-control::-webkit-input-placeholder {
   opacity:0;
}

.form-control:-moz-placeholder { /* Firefox 18- */
   opacity:0; 
}

.form-control::-moz-placeholder {  /* Firefox 19+ */
   opacity:0; 
}

.form-control:-ms-input-placeholder {  
  opacity:0;
}

input:placeholder-shown + label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(40px, 30px);
    color: #999;
    margin-bottom: 0;
}

::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}

input:not(:placeholder-shown) + label,
input:focus + label {
    transform: translate(0, 0) scale(.9);
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 400;
    color: #999999;
}

.field .icon{
    color: #bfc4d6;
    position: absolute;
    padding: 12px 10px 12px 12px;
    top: 21px;
	z-index: 3;
}
.field .icon svg{
    fill : #bfc4d6;
}
input:focus + .icon svg{
    fill: #36f;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: .35714em .85714em;
    font-size: 1em;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-success {
    color: #fff;
    background-color: #65d656;
    border-color: #65d656;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
}
.login-form .btn-success{
    margin-top: 15px;
/*    font-size: 15px;*/
    font-size: 1.1em;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-success:hover {
    color: #fff;
    background-color: #42c831;
    border-color: #40c02f;
}
.forgot-password{
    display: block;
    text-align: center;
    margin-top: 25px;
    font-size: 12px;
    color: #36c;
}
.forgot-password:hover{
    color: #36c;
    text-decoration: underline;
}
.styled-checkbox {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 1;
    margin-bottom: 0;
    margin-top:15px;
}

.styled-checkbox input {
    opacity: 0;
    position: absolute;
    padding: 0;
}
.styled-checkbox .input-replacer {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 13px;
    height: 13px;
    font-size: .65em;
    background-color: #fff;
    box-shadow: 0 0 0 1px #a6a6a6;
    margin-right: .5rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.styled-checkbox input[type=checkbox]+.input-replacer {
    border-radius: 3px;
}
.styled-checkbox input:checked+.input-replacer {
    background-color: #65d656;
    box-shadow: 0 0 0 1px #65d656;
}
.styled-checkbox .input-replacer:after {
    content: "";
    background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI2IDI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNiAyNiIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CiAgPHBhdGggZD0ibS4zLDE0Yy0wLjItMC4yLTAuMy0wLjUtMC4zLTAuN3MwLjEtMC41IDAuMy0wLjdsMS40LTEuNGMwLjQtMC40IDEtMC40IDEuNCwwbC4xLC4xIDUuNSw1LjljMC4yLDAuMiAwLjUsMC4yIDAuNywwbDEzLjQtMTMuOWgwLjF2LTguODgxNzhlLTE2YzAuNC0wLjQgMS0wLjQgMS40LDBsMS40LDEuNGMwLjQsMC40IDAuNCwxIDAsMS40bDAsMC0xNiwxNi42Yy0wLjIsMC4yLTAuNCwwLjMtMC43LDAuMy0wLjMsMC0wLjUtMC4xLTAuNy0wLjNsLTcuOC04LjQtLjItLjN6IiBmaWxsPSIjRkZGRkZGIi8+Cjwvc3ZnPgo=);
    width: inherit;
    height: inherit;
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 1;
}
/*Gehalts*/
header.top-bar {
    background: #58aa48;
    color: #fff;
    padding: 30px;
    font-weight: 700;
	display: flex;
    justify-content: space-between;
}
a.header_a {
    color: #fff;
    font-family: HelveticaNeueRegular;
    font-size: 13px;
}
body.gehalts label {
    font-family: HelveticaNeueBold;
}
.upload-note strong {
    font-family: HelveticaNeueBold;
}
table#userTable {
    font-family: HelveticaNeueRegular;
}
table#userTable tbody {
    font-size: 12px;
}
table#userTable tbody tr td {
    font-size: 12px;
    vertical-align: middle;
}
body.gehalts {
    font-family: HelveticaNeueRegular;
}
input.process_btn {
    font-size: 13px;
    padding: 5px 22px;
    background: #43c86f;
    color: #fff;
    border-radius: 4px;
    margin: 10px 0;
	float: right;
    font-family: HelveticaNeueRegular;
}
.logo-sugarpool {
    /*text-align: center;*/
    padding: 10px 0;
}
.logo-sugarpool img {
    max-width: 150px;
    margin: 0 auto;
    width: 100%;
}
.content-top {
    border-bottom: 2px solid #ddd;
    padding-top: 20px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.upload-name p {
    font-weight: 700;
    font-size: 13px;
}
.upload-name {
    padding: 17px 15px;
}
a.export-a {
    float: right;
    font-size: 13px;
    padding: 5px 10px;
    background: #43c86f;
    color: #fff;
    border-radius: 4px;
    margin: 10px 0;
    margin-bottom: 25px;
    margin-left: 10px;
    font-family: HelveticaNeueRegular;
}
a.export-a:first-child{
    margin-left: 0;
}
.control-box label {
    font-family: HelveticaNeueRegular;
    font-size: 13px;
}
.gehalts a.export-a {
	float: left;
}
body.gehalts.user-edit .form-control-box {
       width: 33.33%;
    padding: 10px;
}
body.gehalts.user-edit .form-control-box.sbmit {
    width: 100% !important;
}
.gehalts.user-edit .content-top{
	justify-content: flex-end;
}
.gehalts.user-list .content-top{
	justify-content: flex-end;
}
.gehalts.file-upload .content-top{
	justify-content: flex-end;
	margin-bottom: 0px !important;
}
.control-box {
    width: 25%;
    padding: 10px;
    font-size: 13px;
}
.content-box {
    /*height: 400px;*/
    background: #fbfbfb;
    border: 1px solid #e4e2e3;
    border-radius: 3px;
    width: 100%;
}
.content-box.process-box {
    margin-bottom: 30px;
}
.content-top-upload h3 {
    font-family: HelveticaNeueBold;
}
body.gehalts p{
    font-family: HelveticaNeueRegular;
    font-size: 14px;
}
.content-box-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px;
    font-family: HelveticaNeueBold;
}
.box-two.control-box {
    position: relative;
}
.content-box-row .typeahead, .tt-query, .tt-hint {
	line-height: 30px;
	outline: medium none;
	width: 100%;
}
.content-box-row .typeahead {
	background-color: #FFFFFF;
}
.content-box-row .typeahead:focus {
	/*border: 1px solid #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);*/
}
.content-box-row .tt-query {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.content-box-row .tt-hint {
	color: #999999;
}
.content-box-row .tt-menu {
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 6px;
	padding: 8px 0;
	width: 100%;
    padding-left: 10px;
}
/*.content-box-row .tt-suggestion {
	font-size: 22px;  
	padding: 3px 20px;
}*/
.align-date,
.align-center
{
	text-align:center;
}
.align-right {
  text-align: right;
}

.black-font {
  color: black;
}

.white-font {
  color: white;
}

.content-box-row .tt-suggestion:hover {
	cursor: pointer;
	background-color: #1A73E8;
	color: #FFFFFF;
}
.content-box-row .tt-suggestion p {
	margin: 0;
}
.box-two.control-box label {
    width: 100%;
}
span.twitter-typeahead{
    width: 100%;
}
span.input-group-addon {
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
}
.content-box .input-group .form-control:last-child {
    border-left: none;
}
.content-box-row input:focus, .content-box-row select:focus {
    box-shadow: none !important;
    border-color: #ccc;
}
.bor_left{
    border-left: 1px solid #d4dee8;
    padding-left: 20px;
}
.bor_bottom{
    border-bottom: 1px solid #d4dee8;
}
.control-box-ftr span{
    font-size: 11px;
    color: #ccc;
}
.control-box-ftr span{
    position: relative;
    padding-right: 5px;
    padding-left: 3px;
}
.control-box-ftr span:before {
    width: 1px;
    height: 10px;
    background: #ccc;
    right: 0;
    content: "";
    position: absolute;
    top: 2px;
}
.control-box-ftr span:last-child:before{
    width: 0;
}
.content-box-2{
    display: table;
    font-size: 13px;
    font-weight: 600;
    padding: 30px 0;
    border-collapse: collapse;
    width: 100%;
    margin-top: 40px;
    border: 1px solid #f1f1f1
}
.report_row{
    display: table-row;
    border-bottom: 1px solid #ece6e6;
}
.report_cell{
    display: table-cell;
    padding: 16px 10px;
    color: #000;
    font-family: HelveticaNeueBold;
}
.report_row:nth-child(odd){
    background-color: #f7fbf9;
}
.report_row:nth-child(1){
    background-color: #43c86f;
}
.report_row:nth-child(1) .report_cell span{
    color: #ffffff;
}


span.report_heading{
    text-transform: uppercase;
    color: #666;
}
.content-top-upload {
    padding: 23px 0;
    clear: both;
    padding-bottom: 32px;
}
.content-main-upload{
    
}
.content-upload{
    display: flex;
    align-items: center;
}
.content-main-upload input{
    font-size: 1em;
    margin-left: 10px;
}
.upload-note {
    padding: 20px 0;
}
input.upload_btn{
    font-size: 13px;
    padding: 5px 22px;
    background: #43c86f;
    color: #fff;
    border-radius: 4px;
    margin: 10px 0;
}
input.upload_btn:focus{
    border-bottom: none;
}
.input-group.date input{
    padding: 6px 0;
}
.content-box-row .form-control{
    font-size: 12px;
    height: 32px;
}
header.top-bar p{
    margin: 0;
}
.process_div {
   width: 100%;
	 padding-right: 15px;
}
.process_div.small {
    width: 25%;
    padding-top: 24px;
    padding-left: 15px;
}

.process_div.small input {
    float: left;
}
.error_msg {
    padding: 9px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
	color: red;
    font-weight: bold;
}
.error_msg a.export-a {
    margin-bottom: 0;
}
.table-head-items{
	font-weight:bold;
}
.table-foot-items{
	font-weight:bold;
  font-size: 12px;
}
/*body.gehalts .content-top p {
    font-family: HelveticaNeueBold;
    color: #8b8b8a;
    font-size: 11px;
    text-transform: uppercase;
}*/
.report_row .report_cell:last-child {
    font-family: HelveticaNeueRegular;
    font-weight: normal;
}
body.gehalts .content-top p,
body.gehalts p.note {
    font-family: HelveticaNeueBold;
    color: #8b8b8a;
    font-size: 11px;
    text-transform: uppercase;
}
body.gehalts p.note {
  text-align: center;
}
.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
    overflow-x: auto;

}

/* -----------------------------------*/
/* -------->>> Data Table <<<---------*/
/* -----------------------------------*/
table{
    width: 100% !important;
}
.table>thead>tr>th {
    /* vertical-align: bottom; */
    /* border-bottom: 1px solid #e4e7ea; */
}
th {
    color: #666666;
    font-weight: 500;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 15px 5px;
}
.dataTable tr td i.fa-edit{
    color: #42ab2d;
}
.dataTable tr td i.fa-trash{
    color: #ef724a;
}
tbody {
    color: #797979;
}
.table-striped>tbody>tr:nth-of-type(odd), .table-hover>tbody>tr:hover, .table>thead>tr>td.active, .table>tbody>tr>td.active, .table>tfoot>tr>td.active, .table>thead>tr>th.active, .table>tbody>tr>th.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>tbody>tr.active>td, .table>tfoot>tr.active>td, .table>thead>tr.active>th, .table>tbody>tr.active>th, .table>tfoot>tr.active>th {
    background-color: #f7fbf9;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{
    bottom:15px;
}
.pagination>li>a, .pagination>li>span{
    color: #333333;
    outline: 0;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #58aa48;
    border-color: #58aa48;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    color: #1cab00;
    background-color: #f7fbf9;
}
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before{
    top: 15px;
    left: 5px;
    background-color: #43c86f;
    width: 15px;
    height: 15px;
    line-height: 16px;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{
    background-color: #D33333;
}
table.dataTable>tbody>tr.child ul.dtr-details{
    width: 100%;
}
/*-------------------------------*/


/*         Media Queries         */


/*-------------------------------*/

@media(max-width:1600px) {

}

@media(max-width:1440px) {

}

@media(max-width:1366px) {

}

@media(max-width:1350px) {

}
@media(max-width:1270px) {
    .content-box{
        width: 100%;
    }

}
@media(max-width:1199px) {
	body.gehalts.user-edit .form-control-box {
		width: 97%;
		margin-bottom: 13px;
	}
	body.gehalts.user-edit .content-box-row{
		padding-top: 20px;
	}
	body.gehalts.user-edit .form-control-box label{
		margin-bottom: 10px;
	}
}

@media (min-width: 1025px) {

}

@media(max-width:1024px) {
	.control-box {
        width: 50%;           
    }
    .content-top.tab-only{
        display: block;
    }
    .content-top-a {
        display: block;
        margin-bottom: 10px;
    }
    a.export-a{
        float: none !important;
    }
}

@media(max-width:991px) {

}
@media(max-width:970px) {
	.content-top{
/*		flex-direction: column;*/
		justify-content: flex-start;
		align-items: start;
	}	

}
@media(max-width:920px) {
    
    .content-box-row{
        justify-content: space-between;
    }
	/*input.process_btn{
		float:left;
	}*/
	.process_div {
		padding-left: 11px;
	}
}

@media(max-width:900px) {

}

@media(max-width:768px) {

}

@media(max-width:767px) {
    .upload-name{
        padding-bottom: 0;
    }
    a.export-a{
        float: left;
        margin-top: 0;
    }
    .bor_bottom{
        border: none;
    }
    .bor_bottom_mobile{
        border-bottom: 1px solid #d4dee8;
    }
    .bor_left{
        border: none;
        padding-left: 15px;
    }
	.control-box {
		width: 100%;
	}
	input.process_btn{
		float:left;
	}
    .table-responsive{
        padding-top: 15px;
    }
}

@media(max-width:700px) {

}
@media(max-width:645px) {
    .control-box {
        width: 100%;           
    }
}

@media(max-width:425px) {
    .content-top{
        display: block;
    }
    a.export-a{
        margin-bottom: 10px;
        margin-left: 0;
        text-align: center;
        width: 100%;
        display: block;
    }
    a.export-a:last-child{
        margin-left: 0;
        margin-bottom: 25;
    }
    .content-top-a {
        flex-flow: column;
        display: flex;
    }
}

@media(max-width:460px) {
    .control-box {
        width: 100%;           
    }
    .content-upload {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .content-main-upload input{
        margin-left: 0;
        margin-top: 10px;
    }
}
@media(max-width:500px) {

}

@media(max-width:414px) {

}

@media(max-width:375px) {

}

@media(max-width:320px) {

}