/* 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;
}

/* Inside an input-group the control shares its row with the button next to it,
   and Bootstrap makes that work by giving the field a token width and letting
   flex hand out what is left. Select2 writes its own full width on the box it
   draws, so that box claimed the whole row and pushed the search button onto
   the line below, where it reads as a control of its own. The width is written
   on the element, so the rule needs the priority to reach it. */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

/* 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;
}

/* The help of a field opens to the left of its icon. At 900px it stopped
   fitting there whenever the icon sits mid screen on a notebook, so the
   positioning library pinned the box against the edge of the content and
   pushed it down, away from the icon that opened it and over the fields
   below. Two sentences of help never needed that width. The rule also asked
   for a fixed position, which never applied: the theme loads after this sheet
   and positions every popover absolutely. */
.popover {
    max-width: 400px !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;
}

/* Eleven content types make this menu taller than the room left under its
   button, so the positioning library flips it above — and there the fixed
   header, which paints over it, swallows the first entries for good, because
   the header does not scroll away. Capped, the menu fits under its button and
   scrolls in place. The ceiling is the one the variables menu uses, so both
   action menus of the platform measure the same. */
.sf-campaign-types-menu {
    max-height: 18em;
    overflow-y: auto;
}