.box {
    background-color: rgb(238, 238, 238) !important;
}

.swal-footer, .swal-text {
    text-align: center;
}

.dataTables_wrapper .dt-buttons {
    float:none;
    text-align:center;
}

.avatar {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    top: -105px;
    left: 30%;
    box-shadow: 10px white;
}

.content-wrapper {
    background: url('../images/collect.png') no-repeat center;
}

@media (max-width: 2000px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 34.5%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 650px;
        margin: 7% auto;
        height: 500px;
        position: relative;
    }

    .content-wrapper {
        background: url('../images/collect.png') no-repeat center;
    }
}

@media (max-width: 1600px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 33%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 600px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 1400px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 33%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 600px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 1200px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 32%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 550px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 900px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 30%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 500px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 868px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 27%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 800px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 27%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 768px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 27%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 640px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 27%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 700px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 27%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }
}

@media (max-width: 668px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 27%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }

}

@media (max-width: 600px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 26%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }

}

@media (max-width: 568px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 25%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 400px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }

}

@media (max-width: 320px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 18%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 300px;
        margin: 7% auto;
        height: 50%;
        position: relative;
        margin-bottom: 40px;
        margin-top: 10px;
    }

}

@media (max-width: 414px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 18%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 300px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }

}

@media (max-width: 375px) {
    .avatar {
        font-size: 20px;
        margin-bottom: 25px;
        font-weight: 300;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        top: -110px;
        left: 18%;
        box-shadow: 10px white;
    }

    #wrapper {
        width: 300px;
        margin: 7% auto;
        height: 50%;
        position: relative;
    }

}

/**** Styling the form elements **/
#wrapper h1 {
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-weight: bold;
    text-align: center;
}

/** For the moment only webkit supports the background-clip:text; */
#wrapper h1 {
    background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93), rgb(0, 153, 204) 20px, rgb(0, 153, 204) 20px, rgb(0, 153, 204) 40px, rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#wrapper h1:after {
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background: -moz-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(147, 184, 189, 0)), color-stop(20%, rgba(147, 184, 189, 0.8)), color-stop(53%, rgba(147, 184, 189, 1)), color-stop(79%, rgba(147, 184, 189, 0.8)), color-stop(100%, rgba(147, 184, 189, 0)));
    background: -webkit-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
    background: -o-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
    background: -ms-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
    background: linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
}

input[type=text], input[type=password] {
    text-transform: uppercase;
}

#tableInput td input[type=text], th input[type=text] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

#tableInput2 td input[type=text], th input[type=text] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

#tableInput3 td input[type=text], th input[type=text] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

#tableInput td input[type=number], th input[type=number] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

#tableInput2 td input[type=number], th input[type=number] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

#tableInput3 td input[type=number], th input[type=number] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

.removeLine {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-transform: capitalize !important;
}

#tableInput td input[type=text]:hover {
    background: #d2d6de;
}

#tableInput2 td input[type=text]:hover {
    background: #d2d6de;
}

#tableInput3 td input[type=text]:hover {
    background: #d2d6de;
}

#tableInput td input[type=number]:hover {
    background: #d2d6de;
}

#tableInput2 td input[type=number]:hover {
    background: #d2d6de;
}

#tableInput3 td input[type=number]:hover {
    background: #d2d6de;
}

/*#tableInput, #tableInput2, #tableInput3 {*/
/*    font-weight: 700;*/
/*}*/

#bil {
    text-align: right;
    font-weight: bold;
    background-color: antiquewhite;
    width: 6%;
}

#billet {
    text-align: right;
    background-color: antiquewhite;
    width: 22%;
    font-weight: bold;
}

.input {
    text-align: right;
    background-color: antiquewhite;
    width: 22%;
    font-weight: bold;
}

#billeting {
    text-align: right;
    width: 25%;
    font-weight: bold;
}

#billExc {
    text-align: right;
    background-color: antiquewhite;
    width: 6%;
    font-weight: bold;
}

#billetO {
    text-align: right;
    background-color: antiquewhite;
    width: 15%;
    font-weight: bold;
}

.sumIn, .sumOut {
    font-weight: bold;
}

#bill {
    text-align: left;
    background-color: antiquewhite;
    width: 26%;
    font-weight: bold;
}

#mon1, #mon2, #mon3, #mon4, #mon5, #mon6, #mon7, #mon8, #mon9, #mon10, #mon11, #mon12 {
    text-align: right;
    background-color: antiquewhite;
    width: 10%;
    font-weight: bold;
}

.sum {
    text-align: right;
    width: 12%;
    font-weight: bold;
}

#B1Word, #B2Word, #B3Word, #B4Word, #B5Word, #P6Word, #P7Word, #P8Word, #P9Word, #P10Word, #P11Word, #P12Word {
    text-align: left;
    width: 30%;
    font-weight: bold;
}

.word {
    text-align: left;
    width: 40%;
    font-weight: bold;
}

.bilSum {
    width: 45%;
    font-weight: bold;
}

.moncode1 {
    color: blue;
    width: auto;
    font-weight: bold;
}

.moncode2 {
    width: auto;
    font-weight: bold;
}

tfoot {
    font-weight: bold;
}

.table {
    width: 100% !important;
}

table thead tr th {
    background-color: rgb(23, 146, 233) !important;
    text-align: center !important;
    color: white !important;
    font-weight: bold !important;
}

table thead tr th, table tbody tr td, table tfoot tr td {
    /*min-height: 10em !important;*/
    display: table-cell !important;
    vertical-align: middle !important;
}

.member input[type=text] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

.member input[type=number] {
    width: 100%;
    height: 100%;
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700
}

.member div {
    border: 1px solid;
}

.text-white {
    color: #fff !important
}

.bg-antiquewhite {
    background-color: antiquewhite !important;
}

.bg-purples {
    background-color: purple !important;
    color: white;
}

.text-purples {
    color: purple !important;
}

label {
    color: #111 !important;
}

.control-label {
    font-size: 15px !important;
}

.center {
    text-align: center !important;
}

.select2 {
    width: 100% !important;
}

.reg {
    width: 100%;
    border: none;
    background: transparent;
}

.cout {
    width: 12%;
}

.cin {
    width: 10%;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: white;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px;
}

::-webkit-scrollbar-thumb {
    background: #00bcd4;
}

::-webkit-scrollbar-thumb:hover {
    background: #00bcd4;
    cursor: pointer;
}

::-webkit-scrollbar-button {
    background: #00bcd4;
}