/* here you can put your own css to customize and override the theme */

/* Esto es para que tome todo el ancho el contenedor */
.container, .container-fluid  {
    width: 100%;
}

/* Esto es para que tome todo el ancho el contenedor */
.container, .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.page-header.navbar {
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	height: 50px;
	min-height: 50px;
	filter: none;
	background-image: none;
}

.page-header.navbar .page-top {
	height: 50px;
    background: #ffffff !important;
}

/* hacemos la parte donde esta el logo con fondo blanco */
.page-header.navbar .page-logo {
    /* IE10 */
    display: -ms-flexbox;
    -ms-flex-align: center;

    background: #FFF none repeat scroll 0% 0%;
    height: 50px;
}

.page-header.navbar .page-logo .logo-default {
    margin: auto;
    display: block;
    width: 250px;
}

.page-logo > a {
    width: 100%;
}

.page-header.navbar .page-logo {
    width: auto;
    padding-right: 0px;
}

/* Notificaciones */
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>img {
	float: left;
	margin-top: -5px;
	margin-right: 5px;
	height: 29px;
	display: inline-block;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle {
	padding: 16px 6px 13px 8px;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown {
	margin: 0;

	padding: 0 4px;
	height: 50px;
	display: inline-block;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown>.dropdown-toggle {
	padding: 19px 10px 10px;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown>.dropdown-toggle>.badge {
	font-family: var(--sf-font-body);
	position: absolute;
	top: 10px;
	right: 20px;
	font-weight: 300;
	padding: 3px 6px;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu .dropdown-menu-list>li>a:hover {
	text-decoration: none;
}

.page-header-fixed .page-container {
	margin-top: 50px;
}


/* Modulos, phishing, newsletters del Dashboard */
.mt-actions .mt-action .mt-action-body {
	padding-left: 0px;
}

.mt-comments .mt-comment .mt-action-icon>i {
	color: #3498db;
	display: inline-block;
	float: left;
	width: 30px;
	/*top: 10px;*/
	font-size: 25px;
}

.mt-comments .mt-comment {
	border-bottom: 1px solid #f7f8f9;
}

/* Dashboard */

.dashboard-content-icon>i {
	color: #3498db;
	display: inline-block;
	float: left;
	width: 30px;
	/*top: 10px;*/
	font-size: 25px;
}

.dashboard-content-group {
	color: #060606;
	font-weight: 500;
}

.dashboard-content-info {
	vertical-align: top;
	display: block ; /* table-cell; */
	text-align: center;
	width: 100%;
    word-wrap: break-word;
	padding: 15px;
	color: #060606;
    font-weight: 300;
}

.dashboard-content-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50% !important;
	margin-left: 10px;
	margin-right: 5px;
}

.table tbody>tr>td.vert-align, .table tbody>tr>th.vert-align{
    vertical-align: middle;
}

.table tbody>tr>td.horiz-align, .table thead>tr>th.horiz-align {
	text-align: center;
	font-weight: 800;
}

.add-content {
	margin-top: 8px;
}

/* Dashboard table */
/*.table-bordered,
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
	border: 1px solid #9a9b9c;
}*/

.table-bordered>tbody>tr>td hr {
	margin: 5px 0
}

table.dataTable.no-footer {
    border-bottom-color: none;
}

table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child{
    border-left:none;
}
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td:last-child{
    border-right: none;
}
.table-scrollable {
    border: none;
}

.form .form-actions, .portlet-form .form-actions {
    padding: 20px;
    margin: 0;
    background-color: inherit !important;
}


/* Tags */
.bootstrap-tagsinput {
	display: block;
}

/* Footer */
.page-boxed .page-footer {
	padding: 8px 10px 5px;
}

/* Footer */
.page-footer {
    height: auto;
}

/* Form in line Campaigns */
.form-control.help-button-text {
	width:95%;
}

.form-control.help-button-text-phishing {
	width:80%;
}

/* Select2 Placeholder fix */
.select2-container .select2-search-field,
.select2-container .select2-input {
  width: 100% !important;
}

/* El campo de busqueda inline de un select multiple ocupa todo el ancho para que
   se lea el placeholder completo, pero solo mientras no hay nada elegido: select2
   vacia el placeholder al agregar una opcion, y sin esta condicion el campo sigue
   reclamando el ancho entero, no entra al lado del chip y la caja crece a dos
   lineas con una sola opcion elegida. */
.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field:not([placeholder='']) {
    width: 100% !important;
}

/* El del desplegable es otro: ahi siempre ocupa el ancho del panel. */
.select2-container .select2-search--dropdown .select2-search__field {
    width: 100% !important;
}

/* Select2 groups AJAX: show typed search text in multi-select (Select2 uses a tiny width by default). */
.select2-groups-ajax .select2-search--inline .select2-search__field {
  min-width: 10em !important;
}

/* Truncate long select2 multi-select choices instead of wrapping inside the chip. */
.select2-selection__choice {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Select2 wraps long choices onto multiple rows (see the rule above), but
   Select2's own JS still scrolls this container horizontally as if it
   were a single-row layout with horizontal overflow. With multiple rows,
   that scrollLeft has no sensible target and just hides the start of
   every row (remove button included). Not being scrollable makes that
   assignment a no-op.
   Both axes must be set: the CSS spec forces overflow-x back to `auto`
   (still scrollable) if overflow-y isn't also `visible`. */
.select2-selection--multiple .select2-selection__rendered {
    overflow: visible !important;
}

/* The rule above stops the parent from clipping/scrolling its content,
   which also revealed a pre-existing issue: the inline search box (forced
   to width:100% by the rule above the chip-truncation comment) can be
   wider than the room left on its row, poking out past the field's own
   right/bottom border. Cap it like the chips so it wraps to a new row
   instead of overflowing past the border. */
.select2-selection--multiple .select2-search--inline {
    max-width: 100%;
    box-sizing: border-box;
}

/* Page content and page bar */
.page-bar {
    margin-bottom: 0px;
    position: relative;
    display: block;
    text-align: right;
}

.page-content-wrapper .page-content {
    padding:0px;
}

.portlet {
    margin-top: 0;
    margin-bottom: 0px;
    padding: 0;
    border-radius: 4px;
}

.page-content-full {
    margin-left: 0px;
    min-height: 411px;
    background-color: #eef1f5;
}


/*
*/
/*Campaign tipes*/
/*
*/

.oculto{
	display: none;
}

.btn-campania{
	width: 100%;
}

.margen{
	margin-top: 10px;
}

.page-header.navbar .page-logo{
    margin: auto;
    display: flex;
    align-items: center;
}

/*
*/
/*Loader*/
/*
*/

/* include this only once */
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

#loader-wrapper {
    /*position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;*/
    /* IE10 */
    display: -ms-flexbox;
    -ms-flex-align: center;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

#loader {
    display: block;

    width: 150px;
    height: 150px;
    margin: 0 auto;
    z-index: 1500;

    border: 3px solid transparent;
    border-top-color: var(--sf-blue);

    border-radius: 50% !important;

    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;

    border: 3px solid transparent;
    border-top-color: #1BBC9B;

    border-radius: 50%;

    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;

    border: 3px solid transparent;
    border-top-color: #525E64;

    border-radius: 50%;

    -webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}


/*
*/
/*adjust page's width*/
/*
*/

.row{
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
}



/*
*/
/*Alerts*/
/*
*/

.alert{
    /*margin-bottom: 10px;
    margin-top: 10px;*/
    position: fixed;
    z-index: 10000;
    right: 20px;
    top: 20px;
    padding:20px 20px 20px 50px;
    width: 30%;
    height: auto;
}

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

.alert-danger{
    /*font-weight: bold;*/
}

.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: -10px;
    right: -10px;
    color: inherit;
}

.alert-message{

}

.fa-lg{
    font-size: 2em;
    top: 40%;
    position: absolute;
    margin-left: -40px;
}

button.close{
    position: relative;
    top: -10px;
    right: -10px;
    color: inherit;
}

/*
.fa-column{
    position: absolute;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    float: none;
    line-height: normal;
}

.message-column{
    margin: 0;
    margin-left: 35px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.fa-alert{
    font-size: 25px;
}*/

/*
*/
/*modal-footer button position*/
/*
*/

/*.modal-content .modal-footer {
    text-align: right;
    border-top: none;
    margin-top: 0;
}*/

.button-previous{
    display: none;
}
.button-submit{
    display: none;
}

/*
*/
/*Import users*/
/*
*/

.import-result{
    margin-top: -30px;
}

.modal-import-users-size {
    width: 90% !important;
}

/*
*/
/*TinyMCE full screen*/
/*
*/

div.mce-fullscreen {
    z-index: 10000;
}

/*
*/
/*New campaign*/
/*
*/

.select-new-campaign{
    width: 100%;
}

input[type="radio"] {
  vertical-align: middle;
}

.margin-new-campaign{
    margin-top: 20px;
}

.form-horizontal .form-group {
    margin-left: 0px;
    margin-right: 0px;
}

.button-align-new-campaign{
    text-align: right;
}

.portlet.light.bordered > .portlet-title {
    border-bottom: 1px solid #eee !important;
}

.portlet > .portlet-title {
    border-bottom: 1px solid #eee !important;
}

/*form .form-actions, .portlet-form .form-actions {
    border-top: 2px solid #eee !important;
}*/

hr {
    border-top: 1px solid #eee;
}

.filtros{
    display: none;
}


.option_form_choice_text {
    padding-top: 10px; border: 1px solid var(--sf-blue);
}

.drag_drop_bucket_items {
    padding-top: 10px; border: 1px solid var(--sf-blue);
}

.help-field {
    font-size: 22px !important;
    color: var(--sf-blue) !important;
}

.sf-cell-help {
    font-size: 1.2rem !important;
    color: var(--sf-blue) !important;
    cursor: help;
}

.children-ul-not-left-paddng > ul {
    padding-left: 0px !important;
}

.asteriskField {
    color: #e02222;
    font-size: 12px;
    padding-left: 2px;
}

/* PORLETS Espacio general para los porlets en todo el sitio */
.vertical-margin-20 > div > div.row, .vertical-margin-20 > div > div > div.row, .vertical-margin-20 > .row{
    padding-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 0px;
}
.vertical-margin-20 > div {
    padding-bottom: 18px;
}

/*Estas clases son para las separaciones de los portlest con 2 y 4 columnas */
.reset-first-last-padding-col .col-md-3:last-child,.reset-first-last-padding-col .col-md-6:last-child,.reset-first-last-padding-col .col-md-12:last-child{
    padding-right: 0;
}

.reset-first-last-padding-col .col-md-3,.reset-first-last-padding-col .col-md-6,.reset-first-last-padding-col .col-md-12{
    padding-left: 0 !important;
    padding-right: 18px;
}
/********************************************************/

.dashboard-stat2 .display .number small{
    font-weight: 400;
    text-transform: inherit;
}
.page-header.navbar .page-logo{
    padding-left: 15px;
}
.leyend-integrated-by{
    font-size: 11px;
}

.page-header-inner{
    border-bottom: 1px solid #eee;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-menu>li>a{
    font-family: var(--sf-font-body);
    font-weight: 400;
}
.page-bar .page-breadcrumb{
    display: inherit;
    float: none;
    padding-left: 0;
}

.page-bar{
    text-align: left;
}

.font-subtitle {
    font-size: 14px !important;
}

.label-form {
    padding-bottom: 10px;
    padding-left: 20px;
}

.info-icon {
    color: #398bdf;
    font-size: 22px;
    padding-top: 10px;
}

.info-icon-form {
    color: #398bdf;
    font-size: 22px;
}

.inline-help-info {
    vertical-align: top;
    display: block ; /* table-cell; */
    text-align: center;
    width: 100%;
    white-space: nowrap;
    color: #A6A8A8;
}

.inline-help-info:hover {
    background-color: #dfe6ec;
}

.popover {
    position:fixed;
    max-width: 900px !important;
}

.form-subtitle {
    padding-left:20px;
    padding-top: 15px;
}

.form-btn-padding {
    padding-bottom: 15px;
}

/*
 * The three heading levels of a help window.
 *
 * The blue opens a section; what nests inside it steps down in size and takes
 * the reading colour, so the accent marks the top of a block instead of
 * repeating at every level until it stops meaning anything. The weight is what
 * carries the distance between levels: the theme gives every heading the same
 * one, and with two levels two pixels apart the two read as the same heading.
 *
 * The sizes are relative because the interface sets its own root, and they stay
 * under the title of the dialog: a section of the help cannot look larger than
 * the window that contains it.
 */
.oh-title-3 {
    color: var(--sf-blue) !important;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    border-bottom: 1px solid var(--sf-neutral-200);
    padding: 0px 0px 10px;
    margin-top: 28px;
}

.oh-title-4 {
    color: var(--sf-text) !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 20px;
}

.oh-title-5 {
    color: var(--sf-text) !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 16px;
}

.oh-p {
    margin: 0px 0px 20px;
    text-align: justify;
}

.oh-p.blue {
    color: var(--sf-blue);
}

table.oh-table {
    border-color: #333;
}
table.oh-table>thead>tr>th {
    color: white;
    background-color: var(--sf-blue);
    border-color: #333;
}
table.oh-table>tbody>tr>th {
    font-weight: normal;
    border-color: #333;
}

.jstree-default .jstree-search {
    font-style: italic;
    color: #5C9EE4 !important;
    font-weight: 700;
}

@media (min-width: 768px) and (max-width: 991px) {
    .text-md-left {
        text-align: left !important;
    }
    .col-md-12.text-md-left {
        padding-left: 15px !important;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .text-sm-left {
        text-align: left !important;
    }
    .col-sm-12.text-sm-left {
        padding-left: 15px !important;
    }
}

.note-fullwidth-margins{
    margin: 0 16px;
}

@media screen and (min-width: 1200px) and (max-width: 1366px) {
    div#totalizers > div .card span.font-size-h5,
    div#totalizers-small > div .card span.font-size-h5,
    #simulation-indicators .font-size-h5 {
        font-size: 0.8em !important;
    }
    div#totalizers > div .card .symbol-label,
    div#totalizers-small > div .card .symbol-label {
        width: 40px;
        height: 40px;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
    div#totalizers > div .card span.font-size-h5,
    div#totalizers-small > div .card span.font-size-h5,
    #simulation-indicators .font-size-h5 {
        font-size: 1em !important;
    }
}

.badge-thumbnail {
    max-width: 80px;
    max-height: 80px;
}


/* SF-5169: keep each flag glued to its icon and pulse the "+" for missing translations */
.flag-link {
    display: inline-block;
    white-space: nowrap;
}
.pulse-missing {
    display: inline-block;
    animation: pulse-missing 1.8s ease-in-out infinite;
}
@keyframes pulse-missing {
    0%, 100% { color: var(--sf-blue); }
    50%      { color: #999999; }
}
@media (prefers-reduced-motion: reduce) {
    .pulse-missing { animation: none; }
}

.card.card-custom > .card-header > .card-title.title-with-path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.card.card-custom > .card-header > .card-title.title-with-path .card-label {
    margin: 0;
}

.breadcrumb.breadcrumb-over-title {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
}

.breadcrumb.breadcrumb-over-title .breadcrumb-item,
.breadcrumb.breadcrumb-over-title .breadcrumb-item a {
    color: var(--sf-text-muted);
}

.breadcrumb.breadcrumb-over-title .breadcrumb-item a:hover {
    color: var(--sf-blue);
}

.table.sf-table {
    color: var(--sf-text);
}

.card.card-custom .table.sf-table thead th,
.table.sf-table thead th {
    background-color: var(--sf-gray);
    color: var(--sf-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    white-space: nowrap;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--sf-neutral-200);
    border-left: 0;
    border-right: 0;
}

.table.sf-table thead th:first-child {
    border-top-left-radius: 0.42rem;
    border-bottom-left-radius: 0.42rem;
}

.table.sf-table thead th:last-child {
    border-top-right-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
}

.table.sf-table tbody td,
.table.sf-table tbody th {
    vertical-align: middle;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--sf-neutral-200);
}

.table.sf-table tbody tr:last-child td,
.table.sf-table tbody tr:last-child th {
    border-bottom: 0;
}

.table.sf-table tbody tr:hover td,
.table.sf-table tbody tr:hover th {
    background-color: var(--sf-gray);
}

.table.sf-table tbody tr.active td,
.table.sf-table tbody tr.active th,
.table.sf-table tbody tr.active:hover td,
.table.sf-table tbody tr.active:hover th {
    background-color: var(--sf-blue-bg);
}

.table.sf-table.sf-table-bordered {
    border: 1px solid var(--sf-neutral-200);
}

.table.sf-table.sf-table-bordered thead th {
    border-bottom: 1px solid var(--sf-neutral-200);
    border-right: 1px solid var(--sf-neutral-200);
}

.table.sf-table.sf-table-bordered thead th:last-child {
    border-right: 0;
}

.table.sf-table.sf-table-bordered thead th:first-child,
.table.sf-table.sf-table-bordered thead th:last-child {
    border-radius: 0;
}

.table.sf-table.sf-table-bordered tbody td,
.table.sf-table.sf-table-bordered tbody th {
    border-right: 1px solid var(--sf-neutral-200);
}

.table.sf-table.sf-table-bordered tbody td:last-child,
.table.sf-table.sf-table-bordered tbody th:last-child {
    border-right: 0;
}

.table.sf-table.sf-table-bordered tbody tr:last-child td,
.table.sf-table.sf-table-bordered tbody tr:last-child th {
    border-bottom: 0;
}

.table.sf-table.table-checkable thead th:first-child,
.table.sf-table.table-checkable tbody td:first-child {
    overflow: visible;
    text-overflow: clip;
}

.table.sf-table thead tr {
    background-color: var(--sf-gray);
    border-bottom: 1px solid var(--sf-neutral-200);
}

.table.sf-table thead tr.filter,
.table.sf-table thead tr.filter th,
.table.sf-table thead tr.filters,
.table.sf-table thead tr.filters th,
.card.card-custom .table.sf-table thead tr.filter th,
.card.card-custom .table.sf-table thead tr.filters th,
.table.sf-table tfoot th,
.table.sf-table tfoot td {
    background-color: var(--sf-gray);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 400;
    vertical-align: middle;
}

.table.sf-table thead tr.filter th,
.table.sf-table thead tr.filters th,
.card.card-custom .table.sf-table thead tr.filter th,
.card.card-custom .table.sf-table thead tr.filters th,
.table.sf-table tfoot th,
.table.sf-table tfoot td {
    padding: 0.5rem 0.1rem;
    border-top: 0;
}

.table.sf-table thead th .input-group,
.table.sf-table thead th .form-control,
.table.sf-table thead th .select2-container,
.table.sf-table tfoot .form-control,
.table.sf-table tfoot .select2-container {
    width: 100% !important;
    margin: 0;
}

/* The rule above is for the control the reader sees, and it reaches one more
   element than it means to: the original <select> that Select2 hides, which
   carries `form-control` too. Select2 parks it at one pixel and clips it, and
   the width above wins by specificity — three classes against one — so the
   hidden element ends up as wide as the container it is positioned against.
   Clipped, so invisible, and still occupying that width: the table scrolled
   hundreds of pixels past its own last column, with nothing to show there.
   Its width goes back to what the library asks for. */
.table.sf-table thead th .select2-hidden-accessible,
.table.sf-table tfoot .select2-hidden-accessible {
    width: 1px !important;
}

.table.sf-table thead th .select2-selection--single,
.table.sf-table tfoot .select2-selection--single,
.card.card-custom .table.sf-table thead th .select2-selection--single,
.card.card-custom .table.sf-table tfoot .select2-selection--single {
    height: calc(1.5em + 1.3rem + 2px) !important;
    border-color: var(--sf-neutral-200);
    border-radius: 0.42rem;
}

.table.sf-table thead th .select2-selection--single .select2-selection__rendered,
.table.sf-table tfoot .select2-selection--single .select2-selection__rendered,
.card.card-custom .table.sf-table thead th .select2-selection--single .select2-selection__rendered,
.card.card-custom .table.sf-table tfoot .select2-selection--single .select2-selection__rendered {
    padding-left: 1rem;
    line-height: calc(1.5em + 1.3rem);
    color: var(--sf-neutral-700);
}

.table.sf-table thead th .select2-selection__placeholder,
.table.sf-table tfoot .select2-selection__placeholder,
.card.card-custom .table.sf-table thead th .select2-selection__placeholder,
.card.card-custom .table.sf-table tfoot .select2-selection__placeholder {
    color: var(--sf-text-muted);
    line-height: inherit;
}

.table.sf-table thead th .form-control::placeholder,
.table.sf-table tfoot .form-control::placeholder,
.card.card-custom .table.sf-table thead th .form-control::placeholder,
.card.card-custom .table.sf-table tfoot .form-control::placeholder {
    color: var(--sf-text-muted);
    opacity: 1;
}

.table.sf-table thead th .select2-selection__arrow,
.table.sf-table tfoot .select2-selection__arrow {
    display: none;
}

.table.sf-table tbody tr.component-heading td {
    font-weight: 600;
    color: var(--sf-text);
}

.card.card-custom > .card-header > .card-toolbar:last-child {
    margin-left: auto;
}

/* El spinner del tema se dibuja con un pseudo-elemento sobre un span sin caja, así
   que sin texto al lado necesita una: sin esto el círculo queda medio afuera del
   punto donde se lo posiciona. */
.blockMsg > .spinner {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.sf-filter-label {
    color: var(--sf-text-muted);
}

.sf-column-filter-dropdown .select2-results__option {
    padding: 0.3rem 0.6rem;
}

/* The list of variables of a field is long, and a menu that does not fit below
   its button gets moved by the positioning library to wherever it does fit —
   inside a dialog that meant covering the header, far from the control that
   opened it. Capped, it scrolls in place and stays next to its button.
   The ceiling is the one the dropdown panels use, so both lists agree. */
.sf-variables-menu .dropdown-menu {
    max-height: 18em;
    overflow-y: auto;
}

/* The contracted components of the Clients table are a long run of badges. The
   auto layout gives that column its share of the table width, which squeezes
   the badges into one per line and grows every row to the tallest cell, so the
   column gets a floor and the table scrolls inside its container instead. */
#sample_1 .sf-clients-permissions {
    min-width: 420px;
}

/* Attention chip of an instance scheduled for deletion, in the Clients table.
   The colour lives here and not in the HTML the view builds because the CSP
   forbids inline style attributes. */
#sample_1 .sf-clients-marked-for-deletion {
    background-color: var(--sf-warning-soft);
    color: var(--sf-warning-ink);
}

/* The filters of the Clients table mix select2 controls with plain inputs. The
   inputs keep the size the theme gives every form control, which is the size
   the unified select2 boxes copy; what the theme does not share with them is the
   grey of the border and of the placeholder, so those two take the same tokens
   the select2 sheet reads and a text field and a dropdown look alike. */
#clients-filter-form input.form-control {
    border-color: var(--sf-neutral-200);
}

#clients-filter-form input.form-control::placeholder {
    color: var(--sf-text-muted);
    opacity: 1;
}