.os {font-family: "Open Sans", sans-serif;}
.bold { font-weight: 700;}


.login-page {
    background-size:cover
}

.login-logo {
    color: #fff;
    margin-top: 50px;
    margin-bottom: 50px;
    line-height: 72px;
    text-shadow: 0px 1px 1px #333;
    font-weight: bold;
    font-size: 64px;
}

.login-logo a {
    color: #00a65a;
}

.login-logo a:hover {
    color: #fff;
}

.login-page input:focus {
    border-color: #00a65a;
}

a {
	color: #00a65a;
}

a:hover, a:active, a:focus {
    color: #008d4c;
}

.clear {
	clear: both;
}

.bottomLine {
	margin-bottom: 15px;
}

#observer {
	padding-bottom: 15px;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	background-color: #00a65a;
    border-color: #00a65a;
}

.datepicker table tr td.active.active {
    background-image: none;
    background-color: #00a65a;
}

.datepicker table tr td span.active.active {
    background-image: none;
    background-color: #00a65a;
}

.datepicker table tr td.active.active:hover {
    background-color: #008d4c;
}

.datepicker table tr td span.active.active:hover {
    background-color: #008d4c;
}

.datetimepicker table tr td.active.active {
	background-image: none;
	background-color: #00a65a;
}

.datetimepicker table tr td span.active.active {
	background-image: none;
	background-color: #00a65a;
}

.datetimepicker table tr td.active.active:hover {
	background-color: #008d4c;
}

.datetimepicker table tr td span.active.active:hover {
	background-color: #008d4c;
}

span.button {
    position: absolute;
    top: 25px;
    right: 15px;
    width: 77px;
    height: 34px;
    color: #fff;
    text-align: center;
    padding: 7px;
    background-color: #00a65a;
}

input[type="file"] {
    position: absolute;
    top: 25px;
    height: 34px;
    cursor: pointer;
    opacity: 0;
}

input.inline {
    display: inline-block;
}

label[for="full-control"] {
    margin-top: 15px;
}

label span, label input {
    vertical-align: middle;
    margin-right: 3px;
}

.onoffswitch {
    position: absolute; 
    top: 7px;
    right: 30px;
    width: 30px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    height: 20px; 
    padding: 0; 
    line-height: 36px;
    border: 2px solid #CCCCCC; 
    border-radius: 10px;
    background-color: #FF0000;
    transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
    content: "";
    display: block; 
    width: 20px;
    height: 20px; 
    margin: 0px;
    background: #FFFFFF;
    position: absolute; 
    top: 0; 
    bottom: 0;
    right: 10px;
    border: 2px solid #CCCCCC; 
    border-radius: 36px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:not(:checked) + .onoffswitch-label {
    background-color: #FF0000;
}
.onoffswitch-checkbox:not(:checked) + .onoffswitch-label, .onoffswitch-checkbox:not(:checked) + .onoffswitch-label:before {
   border-color: #FF0000;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #00a65a;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #00a65a;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
}

.divide {
    display: flex;
    padding-left: 0px;
}

.divide button {
    width:45px;
    margin-right: 3px;
}

#meeting h5 {
    text-align: center;
}

.document {
    position: relative;
    background-color: gainsboro;
    margin-bottom: 10px;
    height: 40px;
}

.document:hover {
    cursor: pointer;
}

.remove-document {
    position: absolute;
    top: 10px;
    right: 10px;
}

.error-help-block {
    display: none;
    width: 100%;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 3px;

    /* Position the tooltip */
    position: absolute;
    top: -5px;
    /*right: 15px;*/
    z-index: 1;
}

.col-lg-2 .error-help-block,
.col-lg-3 .error-help-block {
    width: 80%;
}

.error-container {
    height: 130px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.content .error-title {
    text-align: center;
    font-size: 36px;
}

.content .error-login {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
}

.content .error-login:hover {
    cursor: pointer;
}

#monthly-expense .responsive {
    display: none;
}

#monthly-expense #datepicker, #monthly-expense .datepicker {
    text-align: center;
}

.top10 {
    margin-top:10px;
}

.top20 {
    margin-top:20px;
}

.text-center a {
    vertical-align: middle;
}

@media only screen and (min-width: 1200px) {
    .document {
        width: 24%;
        margin-right: 0.3%;
    }

    .documents .document:nth-child(4n+1){
        margin-left: 0.3%;
    }

    .documents .document:nth-child(4n-1) {
        margin-left: 2.5%;
    }

    #monthly-expense .number, #monthly-expense .taxes, #monthly-expense .past, #monthly-expense .total {
        width: 11%;
    }

    #monthly-expense .number {
        height: 34px;
        padding: 4px 15px;
    }
}

@media only screen and (max-width: 1600px) {
    input.inline {
        width: 80%;
    }

    #object .divide:nth-child(2n) {
        clear: both;
        margin-top: 5px;
    }

    #monthly-expense .onoffswitch {
        right: -5px;
    }
}

@media only screen and (max-width: 1280px) {
    input.inline {
        width: 80%;
    }

    #object .divide {
        margin-left: -15px;
    }

    #monthly-expense .onoffswitch {
        right: -15px;
    }
}

@media only screen and (max-width: 1200px) {
    #monthly-expense .desktop {
        display: none;
    }

    #monthly-expense .responsive {
        display: block;
    }

    #monthly-expense .number .responsive {
        text-align: center;
    }

    #monthly-expense input.text {
        width: 55%;
        margin-bottom: 10px;
    }

    #monthly-expense .onoffswitch {
        top: 1px;
        left: 15px;
    }

    #monthly-expense .apartments .taxes:nth-child(5) .onoffswitch-label, .apartments .taxes:nth-child(5) .onoffswitch-label:before {
        margin-top: 83%;
    }

    #monthly-expense .apartments {
        margin-bottom: 40px;
    }

    #monthly-expense .totals .taxes input {
        float: left;
    }

    #monthly-expense .totals .taxes .divide {
        margin-right: 0px;
        display: inline;
    }
    
    #monthly-expense .divide button {
        width: 40px;
        margin: 0 auto;
    }

    .responsive-clear {
        clear: both;
    }

    #monthly-expense .datepicker {
        margin-left: 20%;
    }
}