/*-/\\\/\\\/\\\/\\\/\\\/\\\-RESET-/\\\/\\\/\\\/\\\/\\\/\\\-*/

html, body {
    width: 100% !important;
}

body {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    background: #F5F5F5;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

.qmdj-responsive-plugin-container {
    max-width: 400px;
    width: 100%;
}

.red-message {
    color: #ff0000;
}

.title-plugin {
    font-size: 27px;
    font-weight: bold;
}

.plugin-border {
    border: 1px solid #808080;
}

.btn-block {
    font-size: 20px;
    font-weight: bold;
    margin-top: 27px;
    padding: 9px;
}

/*-/\\\/\\\/\\\/\\\/\\\/\\\-BOOTSTRAP-DATEPICKER-/\\\/\\\/\\\/\\\/\\\/\\\-*/

.hasDatepicker.form-control:disabled, .hasDatepicker.form-control[readonly] {
    background-color: #fff;
}

.datepicker {
    border: none;
    border-radius: 0;
    box-shadow: 1px 2px 7px #c7c6c6;
}

.datepicker .datepicker-days .table-condensed {
    width: 220px;
}

.datepicker .table-condensed .datepicker-switch {
    font-size: 1.1rem;
    border-radius: 0;
}

.datepicker .table-condensed .prev,
.datepicker .table-condensed .next {
    font-size: 2rem;
    border-radius: 0;
}

.datepicker .datepicker-days .table-condensed thead {
    margin-bottom: 10px;
}

.datepicker .datepicker-days .table-condensed thead tr:nth-child(2) {
    height: 33px;
}

.datepicker .datepicker-days .table-condensed thead tr:last-child {
    height: 33px;
}

.datepicker .datepicker-days .table-condensed tbody tr {
    height: 30px !important;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
    background: #426DAB !important;
    border-radius: 0;
}

.datepicker td,
.datepicker th {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
    padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
    padding-left: 5px;
}
:-moz-placeholder { /* Firefox 18- */
    padding-left: 5px;
}

.datepicker-days .table-condensed {
    border-collapse: initial;
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled {
    background-color: #d0d0d0 !important;
    background-image: none !important;
}

.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background-color: #eee !important;
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
    border-radius: 0;
}

.datepicker .table-condensed .prev, .datepicker .table-condensed .next {
    font-size: 1.5rem;
    line-height: 0px;
}

.datepicker .qman-box-select {
    display: flex;
    height: 30px;
    justify-content: space-between;
}

.datepicker .qman-box-select select.qmanYearSelected,
.datepicker .qman-box-select select.qmanMonthSelected {
    -webkit-transition: none !important;
    background: #efefef;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin: 0 2%;
    transition: none !important;
    padding-left: 5px;
    width: 45%;
}

/*-/\\\/\\\/\\\/\\\/\\\/\\\-CALCULATOR-/\\\/\\\/\\\/\\\/\\\/\\\-*/

.qmdj-responsive-plugin-container .form-control:disabled,
.qmdj-responsive-plugin-container .form-control[readonly] {
    background-color: #fff;
}

.qmdj-responsive-plugin-container input,
.qmdj-responsive-plugin-container select,
.qmdj-responsive-plugin-container textarea,
.qmdj-responsive-plugin-container .form-control {
    border-radius: 0;
    font: 400 13.3333px Arial;
    padding: 3px;
}

.qmdj-responsive-plugin-container input.form-control.hasDatepicker {
    padding-left: 4.4px;
}

/*-/\\\/\\\/\\\/\\\/\\\/\\\-FIRST TABLE-/\\\/\\\/\\\/\\\/\\\/\\\-*/

.qmdj-responsive-plugin-container .four-pillars {
    width: 100%;
}

.qmdj-responsive-plugin-container .four-pillars > tbody > tr > th,
.qmdj-responsive-plugin-container .four-pillars > tbody > tr > td {
    border: 1px solid #808080;
    text-align: center;
    padding: 3px;
    width: 25%;
}

.qmdj-responsive-plugin-container .four-pillars table {
    width: 100%;
}

/*-/\\\/\\\/\\\/\\\/\\\/\\\-SECOND TABLE-/\\\/\\\/\\\/\\\/\\\/\\\-*/

.qmdj-responsive-plugin-container .destinytable {
    font-size: 14px;
}

.qmdj-responsive-plugin-container .destinytable > tbody > tr > td {
    border: 1px solid #808080;
    text-align: center;
    width: 50%;
}

.qmdj-responsive-plugin-container .destinytable > tbody > tr:nth-child(1) > td:nth-child(1) {
    text-align: center;
}

.qmdj-responsive-plugin-container .destinytable > tbody > tr > td:nth-child(1) {
    text-align: left;
    padding-left: 3px;
}

@media (max-width: 991px) {

    /*-/\\\/\\\/\\\/\\\/\\\/\\\-BOOTSTRAP-DATEPICKER-/\\\/\\\/\\\/\\\/\\\/\\\-*/

    .datepicker .table-condensed tbody tr {
        height: 30px;
    }

    .datepicker .table-condensed thead tr:nth-child(3) {
        height: 30px;
    }
}

@media (max-width: 575.98px) {
    /*-/\\\/\\\/\\\/\\\/\\\/\\\-BOOTSTRAP-DATEPICKER-/\\\/\\\/\\\/\\\/\\\/\\\-*/

    .datepicker {
        width: 100%;
        left: 0 !important;
    }

    .datepicker .datepicker-days .table-condensed {
        width: 100%;
    }

    .table-condensed, .datepicker .datepicker-months .table-condensed,
    .datepicker .datepicker-years .table-condensed, .datepicker .datepicker-decades .table-condensed,
    .datepicker .datepicker-centuries .table-condensed {
        width: 93.5%;
        margin: 0 auto;
    }

    .datepicker-months .datepicker-switch:hover,
    .datepicker-years .datepicker-switch:hover,
    .datepicker-decades .datepicker-switch:hover {
        background: none;
        border-radius: 0;
    }

    /*-/\\\/\\\/\\\/\\\/\\\/\\\-CALCULATOR-/\\\/\\\/\\\/\\\/\\\/\\\-*/

    .qmdj-responsive-plugin-container input,
    .qmdj-responsive-plugin-container select,
    .qmdj-responsive-plugin-container textarea,
    .qmdj-responsive-plugin-container .form-control {
        font-size: 13px !important;
    }

    .qmdj-responsive-plugin-container .title-box label {
        font-size: 0.96rem;
    }

    .qmdj-responsive-plugin-container .title-box {
        font-size: 1.4rem;
        padding-right: 0;
    }

    /*-/\\\/\\\/\\\/\\\/\\\/\\\-FIRST TABLE-/\\\/\\\/\\\/\\\/\\\/\\\-*/

    .qmdj-responsive-plugin-container .four-pillars {
        font-size: 80%;
    }

    .qmdj-responsive-plugin-container .four-pillars img {
        height: 32px !important;
    }

    /*-/\\\/\\\/\\\/\\\/\\\/\\\-SECOND TABLE-/\\\/\\\/\\\/\\\/\\\/\\\-*/

    .qmdj-responsive-plugin-container .destinytable {
        font-size: 12px;
    }

    .qmdj-responsive-plugin-container .destinytable > tbody > tr:nth-child(1) > td:nth-child(1) {
        padding-left: 0;
    }
}

@media (max-width: 320px) {

    .title-plugin {
        font-size: 22px;
    }

    /*-/\\\/\\\/\\\/\\\/\\\/\\\-CALCULATOR-/\\\/\\\/\\\/\\\/\\\/\\\-*/

    .qmdj-responsive-plugin-container input,
    .qmdj-responsive-plugin-container select,
    .qmdj-responsive-plugin-container textarea,
    .qmdj-responsive-plugin-container .form-control {
        font-size: 11.5px !important;
        padding: 1px;
    }
}