﻿.paddedTop15 {
    padding-top: 15px;
}

.paddedBottom15{
    padding-bottom: 15px !important;
}

.form-control {
    border: 1px solid #9e9e9e;
}

    .form-control:focus {
        border: 2px solid rgba(72, 182, 255, 0.80);
    }

.thead-dark {
    background: #393939;
    font-weight: bold;
    color: white;
}

.btnDeleteOffset {
    margin-left: 30px;
}

.tdMidAligned {
    vertical-align: middle !important;
}

.txtSuccess {
    border: 2px solid #13a766;
}

.txtError {
    border: 2px solid #f12525;
}

.textbox {
    
}

#wrapper{
    margin: 32px auto;
    border: 1px solid black;
    width: 30%;
}

.errorMessage {
    color: #f12525;
    font-weight: bold;
}

.validation-icon {
    display: none;
    position: absolute;
    color: #13a766;
    font-size: 20px;
    font-weight: bold;
    right: 19px;
    top: 8px;
}


.validation-icon-login {
    display: none;
    position: absolute;
    color: #13a766;
    font-size: 20px;
    font-weight: bold;
    right: 19px;
    top: 12px;
}

.validation-container {
    position: relative;
}

.icon-ok {
    display: inline;
    color: #13a766;
}

.icon-fail {
    display: inline;
    color: #f12525;
}

.icon-dropdown{
    right: 30px;
}

.rowDeposit {
    background: #c3ffc3;
}

.rowExpense {
    background: #ffb3b3;
}

.rowNeutral {
    background: #fff9ad;
}

.lblAmountExpense {
    font-weight:bold;
    color: red;
}

.lblAmountDeposit {
    font-weight: bold;
    color: green;
}

.containerDash {
    width: 97%;
    margin: 2em auto;
    border: 1px solid black;
    background-color: #fff;
}

.headerDash {
    text-align: left;
    color: #ffffff;
    padding: 1.5em;
    background-color: #3598dc;
}

.containerBox{
    display:flex;
    justify-content: space-between;
    margin: 2em 1em;
}

.colBox {
    position: relative;
    width: 25%;
    height: 150px;
    background-color: aquamarine;
    border: 1px solid black;
    margin: 1em;
    padding-top: 30px;
    overflow: hidden;
}

.colBox-blue {
    background-color: #3598dc;
}

.colBox-red {
    background-color: #e7505a;
}

.colBox-purple {
    background-color: #8E44AD;
}

.colBox-yellow {
    background-color: #c49f47;
}

.containerGraph {
    display: flex;
    justify-content: space-between;
    margin: 2em 1em;
}

.graph-wide {
    margin: 1em 2em;
    border: 1px solid black;
    padding: 0px 20px;
    box-sizing: border-box;
}

.colGraph {
    width: 50%;
    padding: 0px 20px;
    border: 1px solid black;
    margin: 1em;
}

@media (max-width: 1000px) {
    .containerBox{
        flex-direction:column;
    }
    .colBox {
        width: 100%;
        margin: 0;
        margin-top: 1em;
    }
    .containerGraph {
        flex-direction: column;
    }

    .colGraph {
        width: 100%;
        margin: 0;
        margin-top: 1em;
    }
    .graph-wide{
        margin: 2em 1em;
    }
}

.colBoxItem {
    text-align: right;
    font-size: 3em;
    font-weight: 300;
    padding-right: 8px;
    margin: 0;
    color: #fff;
    position: relative;
    cursor:pointer;
}

.colGraphHead{
    margin: 1em;
    border-bottom: 1px solid black;
}

.colBoxItem i{
    position: absolute;
    font-size: 8rem;
    opacity: 0.15;
    left: -20px;
    top: 20px;
}

.boxItemSmall{
    font-size: 1.5em;
    font-weight:300;
    padding-bottom: 50px;
    margin-top: -15px;
}

.break{
    display: flex;
    flex-basis: 100%;
}

.btnHidden {
    display: none;
}

.position-btnHR{
    position: absolute;
    top: -130px;
    left: 335px;
}


.position-btnEN {
    position: absolute;
    top: -130px;
    left: 300px;
}

.linkBtn{
    color: white;
}

.linkBtn:hover {
    color: white;
}

.btnLang {
    margin-right: 10px;
}

.loginDetails {
    color: white;
    margin-right: 30px;
}

.i-adjust {
    position: absolute;
    top: 31px;
    left: 20px;
}

.a-adjust{
    padding-left:40px;
}

.activeLink {
    color: #ffb848;
}

.inactiveLink {
    border: none;
}

.pointer{
    cursor:pointer;
}

.loginLink {
    color: white;
}

.loginLink:hover{
    color: white;
}

.btn-blue {
    background-color: #27a9e3;
    color: white;
}

.checkboxRemember{
    color: white;
}

@media  (max-width: 400px) {
    .position-btnHR {
        position: relative;
        top: -285px;
        left: 250px;
    }

    .position-btnEN {
        position: relative;
        top: -285px;
        left: 240px;
    }
}

@media (max-width: 349px) {
    .position-btnHR {
        position: relative;
        top: -280px;
        left: 220px;
    }

    .position-btnEN {
        position: relative;
        top: -280px;
        left: 210px;
    }
}

.chkClass input {
    width: 17px;
    height: 17px;
    color: white;   
}
.chkClass label {
    color: white;
    padding-left: 5px;
    font-weight: 400;
    font-size: 1.1em;
    position: relative;
    top: -3px;
}

.sortAdjust{
    padding-left: 4px;
}

.btnAdjust{
    margin-top:3px;
}

.formGroupLegendAlignment {
    text-align: right;
}

@media screen and (max-width: 576px) {
    .formGroupLegendAlignment {
        text-align: left;
    }
}

.tFoot{
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}

ul li ul li {
    background: #2d3742;
}


.border-bottom {
    border-bottom: 1px solid #e9ecef !important;
}

.label-duplicate {
    text-align: center;
    border: 1px solid #9e9e9e;
    background: yellow;
}
