styles.scss

/* Import Bootstrap 4 */

// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Optional
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/utilities";

/* Import ngx-toastr bootstrap 4 alert styled design */
@import '~ngx-toastr/toastr-bs4-alert';

/* Import ng-select styled design */
@import "~@ng-select/ng-select/themes/default.theme.css";

/* Import datepicker ngx bootstrap styled design */
@import '~ngx-bootstrap/datepicker/bs-datepicker.css';

/* Import prismjs styled design */
@import "~prismjs/themes/prism-okaidia";
// @import "~prismjs/themes/prism-tomorrow";

// Prism.js line numbers plugin
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 15px;
    font-size: 100%;
    left: 0;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid rgb(179, 179, 179);
    user-select: none;
    background-color: #272822;
}
  
.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}
  
.line-numbers-rows > span:before {
content: counter(linenumber);
    color: rgb(219, 219, 219);
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

/* Global styles */
main {
    margin-top: 100px;
}

.ng-select-container {
    height: 38px !important;
}

.ng-select.ng-select-disabled>.ng-select-container {
    background-color: #e9ecef !important;
}

.custom-switch label, .custom-radio label {
    cursor: pointer;
}

.card-add {
    background-color: #A8C96E;
    transition: font-size 0.3s;
    height: 289px;
}

.card-add:hover {
    background-color: #9dc25b;
    font-size: 20px;
}

.card.abstract-accordion,
.card.abstract-accordion .card-header,
.panel.abstract-accordion, .btn .abstract-accordion,
.panel.abstract-accordion .panel-body,
.abstract-accordion .btn {
    background-color: inherit;
    color: inherit;
    border: none;
    padding: 0;
}

/* Angular forms */
input.ng-valid, select.ng-valid, .ng-select.ng-valid div.ng-select-container, textarea.ng-valid, editor.ng-valid {
    border-left: 5px solid #42A948; /* green */
}
  
input.ng-invalid, select.ng-invalid, .ng-select.ng-invalid div.ng-select-container, textarea.ng-invalid, editor.ng-invalid {
    border-left: 5px solid #a94442; /* red */
}

/* Utilities */
.pointer {
    cursor: pointer;
}

.disabled {
    cursor: not-allowed !important;
}

.operator_readonly {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color:#495057;
}