[Sis. Contable Style] Default style #bonita #siscontable

style.css

:root {
    --main-color: #233DF9;

    --primary-color: #233df9;
    --primary-font-color: #FFF;
    --primary-border-color: #b5bdf9;
    --primary-light-color: #F2F3FF;
    --primary-transparent-color: #233df90F;

    --seconday-color: #000000;
    --seconday-font-color: #FFF;
    --seconday-border-color: #e8e8e8;
    --seconday-light-color: #fdfdfd;
    --seconday-transparent-color: #0000000F;

    --success-color: #179B22;
    --success-font-color: #FFF;
    --success-border-color: #d6e9c6;
    --success-light-color: #EEF8EF;
    --success-transparent-color: #179b220F;

    --info-color: #00A8E8;
    --info-font-color: #FFF;
    --info-border-color: ##bce8f1;
    --info-light-color: #f0fafe;
    --info-transparent-color: #00A8E80F;

    --warning-color: #FFA500;
    --warning-font-color: #fff;
    --warning-border-color: #faebcc;
    --warning-light-color: #FFFAF0;
    --warning-transparent-color: #FFA5000F;

    --danger-color: #FA3C23;
    --danger-font-color: #FFF;
    --danger-border-color: #ebccd1;
    --danger-light-color: #FFF3F2;
    --danger-transparent-color: #FA3C230F;
}
/* Add margin bottom and top to each widgets */
.component {
    margin-bottom: 3px;
    margin-top: 3px;
}

/* Set cursor to pointer on table with selectable rows */
.table-hover tr {
    cursor: pointer;
}

/* Set a red border to invalid input fields in forms */
input[type='text'].ng-invalid.ng-dirty, input[type='email'].ng-invalid.ng-dirty,
input[type='number'].ng-invalid.ng-dirty, input[type='password'].ng-invalid.ng-dirty {
  border-color: #C00;
  border-width: 1px;
}


/* Add a red star after required inputs */
.control-label--required:after {
  content: " *";
  color: #C00;
}
.btn-invalid{
    border-color: #C00;
    border-width: 1px;
}

.bonita-modal{
    overflow-y: auto;
}

.modal-open .datepicker,
.modal-open .timepicker {
    z-index: 9999;
}

.main {
    margin: 15px auto 10px auto;
    padding: 15px 50px;
    border: 1px solid #eee;
}

.addButton {
    margin-top: 25px;
}

.action-table {
    margin-top: 10px;
}

.title p {
    color: #111111;
    font-size: 4rem;
    font-weight: bold;
    margin: 0;
}

.title-line {
    width: 150px;
    margin: 5px 0;
    border-top: 4px solid var(--main-color);
}

.modal-container {
    padding: 20px;
}

.modal-title {
    background-color: var(--main-color);
    padding: 15px 25px;
}

.modal-title p {
    color: #fff;
    font-size: 3.2rem;
    font-weight: bold;
    margin: 0;
}

.modal-line {
    width: 120px;
    margin: 5px 0;
    border-top: 4px solid #ffffff55;
}

.info-btn button {
    background-color: var(--info-font-color);
    border: 1px solid var(--info-color);
    color: var(--info-color);
    transition: all .2s;
}

.info-btn button:hover {
    background-color: var(--info-color);
    /*border: 1px solid var(--info-font-color);*/
    color: var(--info-font-color);
}

.info-btn button:focus {
    background-color: var(--info-color);
    /*border: 1px solid var(--info-font-color);*/
    color: var(--info-font-color);
}

.info-btn button:active {
    background-color: var(--info-color) !important;
    /*border: 1px solid var(--info-font-color);*/
    color: var(--info-font-color);
}



.secondary-btn button {
    background-color: var(--seconday-font-color);
    border: 1px solid var(--seconday-color);
    color: var(--seconday-color);
    transition: all .2s;
}

.secondary-btn button:hover {
    background-color: var(--seconday-color);
    /*border: 1px solid var(--seconday-font-color);*/
    color: var(--seconday-font-color);
}

.secondary-btn button:focus {
    background-color: var(--seconday-color);
    /*border: 1px solid var(--seconday-font-color);*/
    color: var(--seconday-font-color);
}

.secondary-btn button:active {
    background-color: var(--seconday-color) !important;
    /*border: 1px solid var(--seconday-font-color);*/
    color: var(--seconday-font-color);
}

.primary-btn button {
    background-color: var(--primary-font-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    transition: all .2s;
}

.primary-btn button:hover {
    background-color: var(--primary-color);
    /*border: 1px solid var(--primary-font-color);*/
    color: var(--primary-font-color);
}

.primary-btn button:focus {
    background-color: var(--primary-color);
    /*border: 1px solid var(--primary-font-color);*/
    color: var(--primary-font-color);
}

.primary-btn button:active {
    background-color: var(--primary-color) !important;
    /*border: 1px solid var(--primary-font-color);*/
    color: var(--primary-font-color);
}

.danger-btn button {
    background-color: var(--danger-font-color);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    transition: all .2s;
}

.danger-btn button:hover {
    background-color: var(--danger-color);
    /*border: 1px solid var(--danger-font-color);*/
    color: var(--danger-font-color);
}

.danger-btn button:focus {
    background-color: var(--danger-color);
    /*border: 1px solid var(--danger-font-color);*/
    color: var(--danger-font-color);
}

.danger-btn button:active {
    background-color: var(--danger-color) !important;
    /*border: 1px solid var(--danger-font-color);*/
    color: var(--danger-font-color);
}

.warning-btn button {
    background-color: #FFF;
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
    transition: all .2s;
}

.warning-btn button:hover {
    background-color: var(--warning-color);
    /*border: 1px solid var(--warning-font-color);*/
    color: var(--warning-font-color);
}

.warning-btn button:focus {
    background-color: var(--warning-color);
    /*border: 1px solid var(--warning-font-color);*/
    color: var(--warning-font-color);
}

.warning-btn button:active {
    background-color: var(--warning-color) !important;
    /*border: 1px solid var(--warning-font-color);*/
    color: var(--warning-font-color);
}

.success-btn button {
    background-color: #FFF;
    border: 1px solid var(--success-color);
    color: var(--success-color);
    transition: all .2s;
}

.success-btn button:hover {
    background-color: var(--success-color);
    /*border: 1px solid var(--success-font-color);*/
    color: var(--success-font-color);
}

.success-btn button:focus {
    background-color: var(--success-color);
    /*border: 1px solid var(--success-font-color);*/
    color: var(--success-font-color);
}

.success-btn button:active {
    background-color: var(--success-color) !important;
    /*border: 1px solid var(--success-font-color);*/
    color: var(--success-font-color);
}

.pagination>li>a, .pagination>li>span {
    color: var(--seconday-color);
    transition: all .2s;
}

.paginaton>li>a, .pagination>li>span:hover {
    color: #444444;
}

.pagination>.active>a {
    background-color: var(--seconday-color);
    border-color: var(--seconday-color);
    color: var(--seconday-font-color);
    transition: all .2s;
}

.pagination>.active>a:hover {
    background-color: #333333;
    border-color: #333333;
}

/*.left-table {
    padding: 10px;
    border: 1px solid #233DF9ee;
}*/

.left-table .table>tbody>tr {
    background-color: #FFF;
}

.left-table .table>tbody>tr:hover {
    background-color: #FFF;
}

.left-table .table>tbody>tr>td {
    display: flex;
    justify-content: center;
    border: 1px solid #FFF;
    margin: 5px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    transition: all .1s;
}

.left-table .table>tbody>tr>td:hover {
    display: flex;
    justify-content: center;
    padding: 13px 0;
    background-color: #FFF;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    box-shadow: none;
}

.left-table .table-hover>tbody>tr.info>td,
.left-table .table-hover>tbody>tr.info>th,
.left-table .table-hover>tbody>tr>.info,
.left-table .table-hover>tbody>tr>td.info,
.left-table .table-hover>tbody>tr>th.info {
    background-color: var(--main-color);
    border: 0;
    padding: 15px 0;
    color: #FFF;
}

.left-table .table-hover>tbody>tr.info:hover>td,
.left-table .table-hover>tbody>tr.info:hover>th,
.left-table .table-hover>tbody>tr:hover>.info,
.left-table .table-hover>tbody>tr>td.info:hover,
.left-table .table-hover>tbody>tr>th.info:hover {
    background-color: var(--main-color);
    color: #FFF;
}

.btn-default.disabled,
.btn-default.disabled.active,
.btn-default.disabled.focus,
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled],
.btn-default[disabled].active,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover, fieldset[disabled]
.btn-default, fieldset[disabled]
.btn-default.active, fieldset[disabled]
.btn-default.focus, fieldset[disabled]
.btn-default:active, fieldset[disabled]
.btn-default:focus, fieldset[disabled]
.btn-default:hover {
    background-color: #fff;
    border-color: #ccc;
    color: #aaa;
}

.right-title {
    font-size: 2.5rem;
    font-weight: bold;
}

.right-title hr {
    width: 120px;
    margin: 5px 0;
    border-top: 4px solid var(--main-color);
}

.tab-container .tab-content>div>div>div>div {
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 0 25px;
}

.awn-toast-icon {
    font-size: 35px;
}

.checkbox-agente {
    display: flex;
    justify-content: flex-end;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: var(--main-color);
    font-weight: bold;
}

.nav-tabs>li>a {
    color: #000;
}

.component {
    margin-bottom: 4px;
    margin-top: 4px;
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

.company-info {
    padding: 5px 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    color: #949494;
}

.currency-input input{
    text-align: right;
}

.detail-table .table>tbody>tr>td {
    text-align: right;
}

.currency-input input {
    text-align: right;
}

.left-label label {
    text-align: left !important;
}

.total-container {
    border: 1px solid #e8e8e8;
    padding: 15px;
    margin: 5px 10px;
    border-radius: 10px;
    width: 95% !important;
}

.total-fragment-container {
    padding: 15px;
}

.total-container .currency-input input {
    background-color: #f1f1f1 !important;
    border: 1px solid #fff !important;
    box-shadow: inset 0 1px 1px rgb(255 255 255 / 8%) !important;
}

.totals-checkbox input {
    width: 18px;
    height: 18px;
}

.totals-checkbox ng-bind-html {
    font-size: large;
    padding: 0 6px;
}

.totals-checkbox input:checked {
    background-color: var(--main-color) !important;
}

.copy-buttons {
    padding-top: 23px;
}

.subtitle {
    font-size: 1.6rem;
    font-weight: bold;
}

.subtitle hr {
    width: 120px;
    margin: 5px 0;
    border-top: 4px solid var(--main-color);
}

.empty-alert {
    text-align: center;
    font-size: 4rem;
}

.custom-alert {
    background-color: #fdfdfd;
    color: #777;
    border: 1px solid #e8e8e8;
}

.alert-info {
    color: var(--info-color);
    background-color: var(--info-transparent-color);
}

.alert-success {
    color: var(--success-color);
    background-color: var(--success-transparent-color);
}

.alert-warning {
    color: var(--warning-color);
    background-color: var(--warning-transparent-color);
}

.alert-danger {
    color: var(--danger-color);
    background-color: var(--danger-transparent-color);
}

.alert-primary {
    color: var(--primary-color);
	border-color: var(--primary-border-color);
    background-color: var(--primary-transparent-color);
}

/* AWN ALERTS */
.awn-toast.awn-toast-success .awn-toast-wrapper {
    border-color: var(--success-border-color) !important;
}

.awn-toast.awn-toast-success {
	background: var(--success-light-color) !important;
    color: var(--success-color) !important;
}

.awn-toast.awn-toast-danger .awn-toast-wrapper {
    border-color: var(--danger-border-color) !important;
}

.awn-toast.awn-toast-danger {
	background: var(--danger-light-color) !important;
    color: var(--danger-color) !important;
}

.awn-toast.awn-toast-info .awn-toast-wrapper {
    border-color: var(--info-border-color) !important;
}

.awn-toast.awn-toast-info {
	background: var(--info-light-color) !important;
    color: var(--info-color) !important;
}

.awn-toast.awn-toast-warning .awn-toast-wrapper {
    border-color: var(--warning-border-color) !important;
}

.awn-toast.awn-toast-warning {
	background: var(--warning-light-color) !important;
    color: var(--warning-color) !important;
}
/* AWN ALERTS END */

.company-alert {
    padding: 30px 100px;
    margin: 25px 0;
    font-size: 4rem;
    font-weight: bold;
    border: 1px solid #e8e8e8;
    border-radius: 15px;
    color: #111111;
}

.building-icon {
    text-align: center;
    font-size: 7rem;
    color: var(--danger-color);
}