/**
 *      General
 * -------------------
 */

.black {
    color: #212529;
    transition: color 0.1s linear;
}

.text-sm {
    font-size: 0.8rem !important;
}

.text-sm .btn {
    font-size: .8rem !important;
}


/**
  *     Menu
  * -----------------
 */
/**
 If one submenu item has a long text it gets hidden after the
 right border of the sidebar. With this the icon that opens the sidebar
 will remain in place and the text will go under it.
 */
.sidebar li.nav-item {
    max-width: 100% !important;
}

.nav-icon.small-txt {
    margin-left: 0.2rem !important;
    margin-top: 0.2rem !important;
}

.nav-separator > div {
    border-top: solid 1px #c2c7d0;
    width: 90%;
    margin: 4px auto;
}

.main-header.navbar .navbar-nav.navbar-left {
    flex-wrap: wrap;
}

.main-header.navbar .nav-link {
    padding: 0.35rem 0.35rem;
}

/**
  ATK DARK SIDEBAR SKIN
 */
.sidebar-dark-atk .nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.sidebar-dark-atk .nav-treeview > .nav-item > .nav-link.active,
.sidebar-dark-atk .nav-treeview > .nav-item > .nav-link.active:focus,
.sidebar-dark-atk .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.sidebar-dark-atk .nav-item.last_active_item > .nav-link.active,
.sidebar-dark-atk .nav-item.last_active_item > .nav-link.active:focus,
.sidebar-dark-atk .nav-item.last_active_item > .nav-link.active:hover {
    background-color: #3c8dbc;
    color: white;
}


/**
 * SELECT2
 * -----------------------
 */
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    box-shadow: none !important;
    border-bottom: solid 1px #80bdff !important;
}

/** line height */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding-top: 2px !important;
}

.select2-container .select2-selection--single {
    height: 31px !important;
    width: 100%;
}

.d-inline-block .select2-container {
    display: inline-block;
}

.select2-selection__rendered > .select2-selection__clear {
    margin-top: 0.15rem;
    padding-top: 0.07rem;
    padding-left: 0.16rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    margin-top: 0;
}

.prepend-ui-item .select2-container--bootstrap4 {
    width: 100%;
}

.select2-selection.select2-selection--multiple.MultiSelectListAttribute.form-control.form-control-sm {
    padding-top: 1px;
    margin: 0;
    padding-left: 0;
}

.select2-selection__rendered{

}


.select2-container .select2-search--inline .select2-search__field {
    margin-top: 3px;
}

.select2-search.select2-search--inline {
    height: 100%;
}

.select2-search.select2-search--inline input{
    margin: 0;
    padding: 2px 0 0;
}


.ListAttribute .select2-selection__clear {
    display: none;
}

.MultiSelectListAttribute.select2-selection--multiple {
    overflow: hidden !important;
    height: auto !important;
}

.MultiSelectListAttribute > .select2-selection__rendered > .select2-selection__choice {
    margin-top: 5px;
}

.select2-selection.select2-selection--multiple.form-control.form-control-sm {
    height: auto;
    padding-bottom: 0;
    min-width: 120px;
}

.select2-selection.select2-selection--multiple.form-control.form-control-sm .select2-selection__choice {
    margin-top: 2px;
    width: max-content;
}


/**
  * Tables
  * ---------------------
  */

/* Table actions */
table.recordList tr td .actions .btn {
    /* min-width: 25px;
     min-height: 25px;
     margin: 1px; */
}

.recordList {
    white-space: nowrap;
}

.recordListTdFirst.row-type-actions,
.recordListTd.row-type-actions {
    text-align: center;
}

.recordListTdFirst.row-type-actions  .btn-group > .btn-group > .dropdown-toggle::after {
    margin-left: 0 !important;
}

table thead th {
    vertical-align: middle !important;
    white-space: nowrap;
}

.recordList-header-row {
    text-align: center;
}

.recordList-header-row a {
    color: #212529;
}

.list-header {
    padding-left: 0 !important;
}

.row-type-actions, .row-type-mra {
    background-color: white;
}

/*
 * Calendar.js
 */

/* The main calendar widget.  DIV containing a table. */
.calendar {
    position: relative;
    display: none;
    cursor: default;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: 0;
}

.calendar table {
    margin: 5px;
}

.calendar table td {
    padding: 2px;
}

/* Header part -- contains navigation buttons and day names. */
.calendar .button {
    /* "<<", "<", ">", ">>" buttons have this class */
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}

.calendar thead .title {
    /* This holds the current "month, year" */
    font-weight: bold;
    text-align: center;
}

.calendar .button[colspan="4"] {
    font-size: 12px;
}

.calendar thead .headrow {
    /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames {
    /* Row <TR> containing the day names */
    border-bottom: 1px solid #ccc;
}

.calendar thead .daynames .wn {
    visibility: hidden;
}

.calendar thead .name {
    /* Cells <TD> containing the day names */
}

.calendar thead .weekend {
    /* How a weekend day name shows in header */
}

.calendar thead .hilite {
    /* How do the buttons in header appear when hover */
}

.calendar thead .active {
    /* Active (pressed) buttons in header */
}

/* The body part -- contains all the days in month. */
.calendar tbody .day {
    /* Cells <TD> containing month days dates */
    text-align: right;
    cursor: pointer;
}

.calendar table .wn {
    background-color: #ccc;
    color: #fff;
}

.calendar tbody td.hilite {
    /* Hovered cells <TD> */
}

.calendar tbody td.active {
    /* Active (pressed) cells <TD> */
}

.calendar tbody td.selected {
    /* Cell showing selected date */
    font-weight: bold;
}

.calendar tbody td.weekend {
    /* Cells showing weekend days */
}

.calendar tbody td.today {
    /* Cell showing today date */
}

.calendar tbody .disabled {
    color: #ccc;
}

.calendar tbody .emptycell {
    /* Empty cells (the best is to hide them) */
    visibility: hidden;
}

.calendar tbody .emptyrow {
    /* Empty row (some months need less than 6 rows) */
    display: none;
}

/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow {
    /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip {
    /* Tooltip (status bar) cell <TD> */
    font-size: 11px;
    text-align: center;
}

.calendar tfoot .hilite {
    /* Hover style for buttons in footer */
}

.calendar tfoot .active {
    /* Active (pressed) style for buttons in footer */
}


.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table td span
{
    height: 20px;
    line-height: 20px;
    width: 20px;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-size: 0.9rem;
}


    /**
     * Checkbox style
     */
input[type = checkbox].form-control {
    max-width: 30px !important;
}


/**
    Loading overlay
 */
.overlay {
    flex-direction: column;
    visibility: hidden;
}


.action-buttons-buttons > button {
    margin-left: 2px;
    margin-right: 2px;
}


.shuttle-buttons-container > .btn-group > .btn {
    width: 30px;
}

.recordListTd > ul {
    border: none !important;
    background-color: transparent !important;
    height: auto !important;
}


.fieldset-form-group.required > .control-label:after,
.form-group.required > .control-label:after, span.required:after {
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    vertical-align: super;
    font-size: 8px;
    content: "\f069";
    color: #c70000;
    font-weight: bold;
}


/**
 * Error fields
 */

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #dc3545;
}

.has-error .form-control {
    border-color: #dc3545;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .form-control:focus {
    border-color: #dc3545;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #E77480;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #E77480;
}

.has-error .input-group-addon {
    color: #dc3545;
    border-color: #dc3545;
    background-color: #f2dede;
}

.has-error .form-control-feedback {
    color: #dc3545;
}

.has-error .select2-dropdown,
.has-error .select2-selection {
    border-color: #dc3545;
}

.has-error .select2-container--focus .select2-selection,
.has-error .select2-container--open .select2-selection {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #E77480;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #E77480;
    border-color: #dc3545;
}

.has-error.select2-drop-active {
    border-color: #dc3545;
}

.has-error.select2-drop-active.select2-drop.select2-drop-above {
    border-top-color: #dc3545;
}


/**
    Border radius for atk date group buttons
 */

.atk-date-group,
.atk-time-group {
    display: flex;
}

.atk-date-group > .select2-container--bootstrap4 .select2-selection--single,
.atk-date-group > input,
.atk-date-group > span {
    border-radius: 0;
    border-right: none;
}

.atk-date-group > .select2-container--bootstrap4 .select2-selection--single.atk-date-left,
.atk-date-group > input.atk-date-left {
    border-radius: 0.2rem 0 0 0.2rem;
}

.atk-date-group > .select2-container--bootstrap4 .select2-selection--single.atk-date-single-item,
.atk-date-group > input.atk-date-single-item {
    border-radius: 0.2rem;
    border-right: 1px solid #ced4da;
}

.atk-date-group > .atk-date-right {
    border-radius: 0 0.2rem 0.2rem 0;
    border-right: 1px solid #ced4da;
}

/**
 * Atk Time Group
 */
.atk-time-group > .select2-container--bootstrap4 .select2-selection--single,
.atk-time-group > input,
.atk-time-group > span {
    border-radius: 0;
    border-right: none;
}

.atk-time-group > .select2-container--bootstrap4 .select2-selection--single.atk-time-left,
.atk-time-group > input.atk-date-left {
    border-radius: 0.2rem 0 0 0.2rem;
}

.atk-time-group > span.atk-time-right {
    border-radius: 0 0.2rem 0.2rem 0;
    border-right: solid 1px #dddddd;
}

.has-error .atk-date-right,
.has-error .atk-time-right {
    border-right: solid 1px #dc3545 !important;
}


.table td, .table th {
    vertical-align: middle;
}


.atkdateattribute {
    min-width: 130px;
}

.atk-date-group .select2-container {
    min-width: 120px;
}


/**
 * iCheck dimensions
 */
.icheck-primary[class*="icheck-"] > label {
    padding-left: 22px !important;
    line-height: 18px;
}

.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before {
    width: 18px;
    height: 18px;
    border-radius: .2rem;
    margin-left: -22px;
}

.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after,
.icheck-primary[class*="icheck-"] > input:first-child:checked + label::after {
    top: -2px;
    width: 6px;
    height: 10px;
    left: -0.1rem;
}


#atk_debugging_div {
    font-family: monospace;
    font-size: 11px;
    white-space: nowrap;
    text-align: left;
    padding: 2px 2px 2px 10px;
    overflow: scroll;
}

.atkDebugBlock .atkDebugToggle {
    display: block;
    margin-top: 0px;
    text-decoration: none;
    background-position: 2px 3px;
    background-repeat: no-repeat;
    padding: 2px;
    padding-left: 0px;
    cursor: pointer;
}

.atkDebugBlock .atkDebugData {
    margin-top: 2px;
    margin-left: 0px;
    margin-bottom: 10px;
    padding-left: 10px;
}

.atkDebugExpanded .atkDebugData {
    display: block;
}

.atkDebugCollapsed .atkDebugData {
    display: none;
}

.atkDebugBlockContainsErrors .atkDebugToggle,
.atkDebugBlock .atkDebugError,
.atkDebugBlock .atkDebugError A {
    color: red;
}

.atkDebugRedirect {
    margin-bottom: 10px;
}

div.rounded-circle {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    color: #212529;
    text-align: center;
    padding-top: 0.16rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    background-color: #c2c7d0;
    text-transform: uppercase;
}

img.rounded-circle {
    width: 1.6rem;
    height: 1.6rem;
}

/** State Color Attribute **/
.state-color-attribute {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 1px;
}

.state-color-attribute.shape-round {
    border-radius: 50%;
}


.state-color-attribute.shape-fluid {
    width: 100% !important;
    border-radius: 5px;
    display: block;
}

.state-color-attribute.bordered {
    border: solid 1px;
}

.state-color-attribute.sm {
    width: 15px;
    height: 15px;
}

.state-color-attribute.lg {
    width: 25px;
    height: 25px;
}

.btn-group > .btn .btn-sm {
    padding: .25rem 0.5rem;
}

.DateAttribute.atkbutton {
    min-width: 30px;
}


/* The main calendar widget.  DIV containing a table. */
.calendar {
    position: relative;
    display: none;
    cursor: default;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: 0;
}

.calendar table {
    margin: 5px;
}

.calendar table td {
    padding: 2px;
}

/* Header part -- contains navigation buttons and day names. */
.calendar .button {
    /* "<<", "<", ">", ">>" buttons have this class */
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}

.calendar thead .title {
    /* This holds the current "month, year" */
    font-weight: bold;
    text-align: center;
}

.calendar .button[colspan="4"] {
    font-size: 12px;
}

.calendar thead tr:first-child {
}

.calendar thead .headrow {
    /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames {
    /* Row <TR> containing the day names */
    border-bottom: 1px solid #ccc;
}

.calendar thead .daynames .wn {
    visibility: hidden;
}

.calendar thead .name {
    /* Cells <TD> containing the day names */
}

.calendar thead .weekend {
    /* How a weekend day name shows in header */
}

.calendar thead .hilite {
    /* How do the buttons in header appear when hover */
}

.calendar thead .active {
    /* Active (pressed) buttons in header */
}

/* The body part -- contains all the days in month. */
.calendar tbody .day {
    /* Cells <TD> containing month days dates */
    text-align: right;
    cursor: pointer;
}

.calendar table .wn {
    background-color: #ccc;
    color: #fff;
}

.calendar tbody td.hilite {
    /* Hovered cells <TD> */
}

.calendar tbody td.active {
    /* Active (pressed) cells <TD> */
}

.calendar tbody td.selected {
    /* Cell showing selected date */
    font-weight: bold;
}

.calendar tbody td.weekend {
    /* Cells showing weekend days */
}

.calendar tbody td.today {
    /* Cell showing today date */
}

.calendar tbody .disabled {
    color: #ccc;
}

.calendar tbody .emptycell {
    /* Empty cells (the best is to hide them) */
    visibility: hidden;
}

.calendar tbody .emptyrow {
    /* Empty row (some months need less than 6 rows) */
    display: none;
}

/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow {
    /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip {
    /* Tooltip (status bar) cell <TD> */
    font-size: 11px;
    text-align: center;
}

.calendar tfoot .hilite {
    /* Hover style for buttons in footer */
}

.calendar tfoot .active {
    /* Active (pressed) style for buttons in footer */
}

.atkAttrRowHidden {
    visibility: hidden;
    position: absolute;
}

.bg-green-light {
    background-color: #cef3da !important;
    border-color: #b0d5bc !important;
}

.bg-green-strong {
    background-color: #98DDB8 !important;
    border-color: #7abf9a !important;
}

.bg-blue-light {
    background-color: #5dbbfe !important; /* TODO: check */
    border-color: #3f9de0 !important;
}

.bg-blue-strong {
    background-color: #0177cb !important; /* TODO: check */
    border-color: #0059ad !important;
}

.bg-cyan-light {
    background-color: #caf0f8 !important;
    border-color: #acd2da !important;
}

.bg-cyan-strong {
    background-color: #5dd2ea !important;
    border-color: #3fb4cc !important;
}

.bg-red-light {
    background-color: #f0a8ab !important;
    border-color: #d28a8d !important;
}

.bg-red-strong {
    background-color: #dc2e36 !important;
    border-color: #be1018 !important;
}

.bg-yellow-light {
    background-color: #fff5c2 !important;
    border-color: #e1d7a4 !important;
}

.bg-yellow-strong {
    background-color: #ffdd47 !important;
    border-color: #e1bf29 !important;
}

.bg-orange-ultra-light {
    background-color: #ffdc85 !important;
    border-color: #e1be67 !important;
}

.bg-orange-light {
    background-color: #ffd085 !important;
    border-color: #e1b267 !important;
}

.bg-orange-strong {
    background-color: #ff7900 !important; /* TODO: check */
    border-color: #e15b00 !important;
}

.bg-disabled {
    background-color: #ced4da !important;
    border-color: #b0b6bc !important;
}

.legenda-box {
    font-weight: 400;
    font-size: 14px;
}

.admin-header {
    color: #6c757d;
    padding: 10px 4px 10px 0;
}

.badge-secondary.badge-link:hover {
    background-color: #545b62;
}

.badge-secondary a {
    color: #fff;
}

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

@media (min-width: 1000px) {
    #helpModal .modal-dialog {
        max-width: 700px;
    }
}

@media (min-width: 1300px) {
    #helpModal .modal-dialog {
        max-width: 900px;
    }
}