/* ====================================================================== *
      REMOVE PANEL STYLE
 * ====================================================================== */

.panel{
    padding:0 !important;
    border:0 !important;
}
.panel-body{
    padding: 0 !important
}

/* ====================================================================== *
      SET SOME DEFAULTS
 * ====================================================================== */

body{
    padding-right: 0px;
    overflow-y: scroll;
    width: 100%;
}

.no-margin{
    margin: 0 !important;
}

.panel{
    padding: 3px 5px !important;
    margin-bottom: 0;
}

.panel-body>*:last-child{
    margin-bottom: 0 !important;
}

.main-content{
    position: relative;
}

.main-content>h2{
    margin-top:0 !important;
}

.tile-stats{
    margin-bottom: 17px !important;
}
.links-list {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: 0 !important;
}

@media only screen and (max-width: 768px) {
    .departamentos-usuario{
        margin: 5px 0 !important;;
    }
}

a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
}

.position-relative{
    position: relative !important;
}

.sidebar-menu-inner{
    top: 0;
    background: inherit !important;
}

/*
.sidebar-menu-inner{
    top: 0;
    background: #303641 !important;
}

.main-menu .opened a{
    background: #2b303a !important;
}
*/

.main-menu .opened a i{
    color: white !important;
}

@media only screen and (min-width: 768px) {
    .main-menu>li:last-child{
        margin-bottom: 250px !important;
    }
    
    .modal-width-variable {
        width: var(--modalsize);
    }
}

.blockUI.blockOverlay {
    background-image: none !important;
}
.blockMsg{
    color: rgb(101, 100, 100) !important;
    font-size: 15px !important;
    position: absolute !important;
    top: 10px !important;
    left: 0 !important;
    width: 100% !important;
}    

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.ng-table thead th{
    text-align: left;
}
.ng-table th.sortable.sort-asc, .ng-table th.sortable.sort-desc {
    background: rgb(245, 245, 246) !important;
}
.text-right{
    text-align: right !important;
}

.nowrap{
    white-space: nowrap !important;
}

.pre-wrap{
    white-space:pre-wrap;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
    z-index: 999999;
}

body.page-body input.form-control,
body.page-body .selectboxit-container .selectboxit,
body.page-body .select2-container .select2-selection,
body.page-body .dpifs-fake-input{
    border-color: #e0dfdf !important;
    border-radius: 0 !important;
}

@media only screen and (max-width: 768px) {
    .page-container {
        display: table;
    }
    
    .modal-width-variable {
        width: auto;
    }
}

@media only screen and (max-width: 767px) {
    .page-container {
        display: block;
    }
}

.menu-btn{
    margin-bottom: 20px;
}

.btn-big-icon{
    text-align: left;
}

.btn-big-icon .btn-fa{
    display: inline-block;
    font-size: 26px;
    margin-right: 5px;
    vertical-align: top;
}

.btn-big-icon .btn-txt{
    font-size: 9px;
    line-height: 10px;
    display: inline-block;
    margin-top: 3px;
}

.open > .dropdown-toggle.btn-success{
    background-color: #007338 !important;
    border-color: #004f27 !important;
}

.right-dropdown .dropdown-menu{
    right: 0 !important;
    left: auto !important;
}

.input-inline-sm{
    display: inline-block !important;
    width: 160px;
    max-width: 100%;
    height: 20px;
    padding: 5px 5px !important;
    font-size: 11px;
}

.swal-overlay{
  z-index: 9999999999;
}

.dropdown-menu.dropdown-black > li:hover a, .dropdown-menu.dropdown-black > li:active a,
.dropdown-menu.dropdown-black > li a:hover, .dropdown-menu.dropdown-black > li a:active, .dropdown-menu.dropdown-black > li a:focus{
    background-color: #383838;
    color: #fff;
}

/* ====================================================================== *
      DATEPICKER IN FULLSCREEN
 * ====================================================================== */

.dpifs-fake-input{
    height: 31px !important;
    line-height: 31px !important;
    border-color: #ebebeb !important;
    background-color: #eeeeee !important;
    border-radius: 3px !important;
    color: #555555 !important;
}

.datepicker-in-fullscreen>.datepicker{
    padding: 0;
    border: 0;
}

.datepicker-in-fullscreen-controls>a{
    width: 50% !important;
}

.vcenter{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ====================================================================== *
      ALERT THAT SHOWS IN THE TOP RIGHT CORNER
 * ====================================================================== */

.alerts-container{
    z-index: 1000002;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
}

.alerts-container-global{
    z-index: 1002;
    position: absolute;
    top: 65px;
    right: 5px;
    width: 300px;
}

.alerts-container-global .alert{
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}

/* ====================================================================== *
      SET DATERANGE PICKER TO THE SAME HEIGHT
 * ====================================================================== */

.daterange-inline {
    padding: 4.5px 6px;
}

/* ====================================================================== *
      DATEPICKER 
 * ====================================================================== */

div.datepicker thead th:hover {
    background: #eeeeee;
    cursor: pointer;
}

/* ====================================================================== *
      CHANGE SELECTBOXIT
 * ====================================================================== */

.page-body .selectboxit-container .selectboxit .selectboxit-text{
    color: #555555;
}

.selectboxit-container{
    clear: both;
}

/* ====================================================================== *
      CHANGE SELECT2
 * ====================================================================== */

.select2-selection__rendered>div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-selection__choice div{
    display: inline-block !important;
}

/* select 2 multiple */

.select2-selection--multiple .select2-selection__choice{
    color: #404040 !important;
    background: #ebebeb !important;
}
.select2-selection--multiple .select2-selection__choice span{
    color: #404040 !important;
}

.select2-selection--multiple{
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.select2-selection--multiple{
    height: auto !important;
    line-height: normal !important;
}
.select2-selection--multiple .select2-search--inline input{
    height: 27px !important;
    line-height: 27px !important;
}
.select2-selection--multiple .select2-selection__choice{
    margin: 3px 5px 3px 0px !important;
}


/* ====================================================================== *
      MODAL WITH FULL WIDTH AND HEIGHT (WELL ALMOST...)
 * ====================================================================== */

.modal.fade .modal-dialog{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.modal-backdrop.in{
    opacity: 1 !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.modal-backdrop{
    background-color: rgba(48, 54, 65, .7);
}

.modal-full{
    /*padding: 10px !important;*/
}

.modal-full .modal-dialog {
    min-height: 500px !important;
    width: 100% !important;
    height: 100% !important;
}

.modal-full .modal-content {
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.modal-subheader{
    position: relative;
    padding: 15px;
}

.modal-width-80{
    width: 80%;
}

@media only screen and (max-width: 678px) {
    .modal-width-80{
        width: auto;
    }
}

.modal-full-autoheight .modal-dialog,
.modal-full-autoheight .modal-body{
    height: auto !important;
}

.modal .modal-header{
    position: relative
}

/* CLOSE MODAL */

.modal .modal-header .close{
    position: absolute;
    z-index: 9999;
    top: 15px;
    right: 15px;
    float: none;
}

/* MODAL */

.modal-open .modal {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

.modal-dialog {
    margin: 0 auto !important;
    padding: 10px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .modal-dialog {
        padding: 5px;
    }
    
}

/* ====================================================================== *
      JQUERY UI DIALOG
 * ====================================================================== */

.ui-widget-overlay {
    background: #aaa;
    opacity: .3;
    z-index: 99999;
}

.ui-dialog{
   z-index: 99999;
   background: white;
   border: 1px solid #c5c5c5;
}

.ui-dialog .ui-dialog-titlebar{
    padding: 15px;
    padding-bottom: 0;
    font-weight: bold;
}

.ui-dialog .ui-dialog-content{
    min-height: auto !important;
    padding: 15px;
}

.odonto_dialog .table{
    margin-bottom: 0;
}

.ui-dialog .ui-dialog-titlebar-close{
    border-radius: 1px;
    border: 0;
    text-align: center;
    font-size: 15px;
    line-height: 15px;
    width: 20px;
    height: 20px;
    color: white;
    font-weight: bold;
    background: #303641;
}
.ui-dialog .ui-dialog-titlebar-close:after{
    content: 'x';
}

/* ====================================================================== *
      JQUERY UI SORTABLE STYLE
 * ====================================================================== */

.jquery-ui-sortable{
    padding: 0;
    margin: 0;
}

.jquery-ui-sortable li{
    list-style: none !important;
    display: block;
    margin: 0px 0;
    padding: 5px 10px;
    background: #fafafa;
    border: 1px solid #ebebeb;
    margin-bottom: 5px;
    cursor: ns-resize;
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.jquery-ui-sortable li:last-child{
    margin-bottom: 0 !important;
}

/* ====================================================================== *
      POINTER IN ALL ANCHORS WITH NG-CLICK
 * ====================================================================== */

*[ng-click],
*[ng-click] .selectboxit{
    cursor: pointer !important;
}

/* ====================================================================== *
      STRIPED TABLES WHEN THE TBODY ELEMENT IS THE ONE THAT REPEATS (INSTEAD OF ONLY THE TR INSIDE)
 * ====================================================================== */

.table-striped-tbody tbody{
    border: 0 !important;
}
.table-striped-tbody tbody:nth-child(even) {
    background: #f9f9f9;
}

.table-borderless td, .table-borderless th {
    border: none !important;
    padding: 1px 5px !important;
}

/* ====================================================================== *
      RECIBO
 * ====================================================================== */

.invoice{
    font-size: 12px;
}

.invoice-header h4{
    margin: 0 0 5px 0 !important;
}
.invoice-header img{
    display: block;
}
.invoice-title{
    color: #303641;
    font-weight: bold;
    width: 100px;
    display: inline-block;
}
.invoice table{
    margin: 0 !important;
}

@media print {
    .invoice table, .invoice body{
            font-size: 10px !important;
    }
}

/* ====================================================================== *
      NO PRINT
 * ====================================================================== */

.only_on_print{
    display: none;
}

@media print {
    .no_print{
        display: none;
    }
    .only_on_print{
        display: block;
    }
    .badge{
        border: 1px solid #e5e5e5;
    }
}

/* ====================================================================== *
      ANGULAR UI SWITCH PLUGIN
 * ====================================================================== */

.switch{
    display: block !important;
}

.switch.checked {
    background: #303641 !important;
    border-color: #303641 !important;
}

.switch.wide {
    width: 82px !important;
}

.wide .switch-text .off {
    right: 26% !important;
    top: 19% !important;
}

.wide .switch-text .on {
    top: 19% !important;
    left: 25% !important;
}

/* medium */

.switch.medium {
    width: 62px !important;
}

.switch.medium.checked small {
    left: 32px;
}

.switch.medium .switch-text .off {
    right: 16% !important;
    top: 20% !important;
}

.switch.medium .switch-text .on {
    top: 19% !important;
    left: 19% !important;
}

/* small */

.switch-small .switch{
    width: 40px;
    height: 18px;
}

.switch-small .switch small{
    width: 18px;
    height: 18px;
}

/* inline-block */

.switch-inline .switch,
.switch-inline span{
    display: inline-block !important;
    vertical-align: middle;
}

/* ====================================================================== *
      ADD FADE EFFECT TO NG-SHOW
 * ====================================================================== */

.ng-show-fade {
    transition: all linear 300ms;
    opacity: 1;
    visibility: visible;
}

.ng-show-fade.ng-hide {
    opacity: 0;
    visibility: hidden;
    display: block !important;

} 

/* ====================================================================== *
      TIMELINE
 * ====================================================================== */

.cbp_tmtimeline > li .cbp_tmlabel h2 {
    border-bottom: 0 !important;
}

.bg-gray{
    background: #95a5a6 !important;
    color: #fff !important;
}

.bg-blue{
    background: #263c94 !important;
    color: #fff !important;
}

.bg-orange{
    background: #ce6132 !important;
    color: #fff !important;
}

.bg-orange{
    background: #ff9600 !important;
    color: #fff !important;
}

.bg-purple{
    background: #8e44ad !important;
    color: #fff !important;
}

@media only screen and (max-width: 500px) {
    .cbp_tmlabel .timeline_actions{
        position: initial !important;
        margin-bottom: 5px;
    }
    .cbp_tmlabel .pull-right{ 
       float: none !important;
        display: block;
        margin-top: 5px;
    }
}

@media only screen and (min-width: 1440px) {
    .cbp_tmtimeline > li .cbp_tmtime{
        padding-right: 120px !important;
    }
}

/* ====================================================================== *
      VERTICAL SPACE BETWEEN COLUMNS (USEFUL FOR MOBILE)
 * ====================================================================== */

.vertical-space-columns>[class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

@media (min-width: 1200px) {
    .vertical-space-columns>[class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
}
@media (min-width: 992px) {
    .vertical-space-columns>[class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
}
@media (min-width: 768px) {
    .vertical-space-columns>[class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
}
@media (min-width: 200px) {
    .vertical-space-columns>[class*="col-xs-"] + [class*="col-xs-"] {
        margin-top: 0;
    }
}

/* ====================================================================== *
      PRINT DESIGN
 * ====================================================================== */

@media print {
    
    /* POPUP */

    body.popup-open *{
        visibility: hidden;
    }
    body.popup-open .popup-modal, 
    body.popup-open .popup-modal *{
        visibility: visible;
    }
    body.popup-open .popup-modal {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: scroll !important;
        top: 0 !important;
        left: 0 !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }
    .popup-modal .fa-window-close{
        display: none;
    }
    body.popup-open .modal{
        display: none !important;
    }
    
    .page-container .main-content{
        position: initial !important;
    }

    /* REMOVE LINK URL */
    
    .popup-modal > a[href]:after {
        content: none !important;
    }
}

/* ====================================================================== *
      SCAN BARCODE 
 * ====================================================================== */

    .scan_barcode{
        width: 300px;
        margin: auto;
    }
    .scan_barcode img{
        width: 100%;
        opacity: .2;

        -webkit-transition: .2s ease all;
           -moz-transition: .2s ease all;
                transition: .2s ease all;
    }
    .scan_barcode.is_focus img{
        opacity: 1;
    }

    .scan_barcode input{
       opacity: 0;
        height: 0;
    }
    
/* ====================================================================== *
      LABEL
 * ====================================================================== */    

.label-block{
    font-size: 100%;
    display: block;
}

.label-orange{
    background: #ff9600 !important;
    color: #fff !important;
}

/* ====================================================================== *
      DARKER COLORS
 * ====================================================================== */

/*
.calendar-env .calendar-body .fc-header .fc-button.fc-state-active,
.calendar-env .calendar-body .fc-content .fc-view table thead tr th,
.calendar-env .fc .fc-view-container .fc-view table thead tr th,
.page-body .main-content .cbp_tmtimeline:before,
.page-body .main-content .cbp_tmtimeline > li .cbp_tmlabel,
.timeline-centered:before,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after,
.comments-list > li:nth-child(even){
    background: #e0e0e0;
}

.page-body .main-content .cbp_tmtimeline > li .cbp_tmicon,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon  {
  -moz-box-shadow: 0px 0px 0px 5px #e0e0e0;
  -webkit-box-shadow: 0px 0px 0px 5px #e0e0e0;
  box-shadow: 0px 0px 0px 5px #e0e0e0;
}

.page-body .main-content .cbp_tmtimeline > li .cbp_tmlabel:after {
  border-right-color: #e0e0e0;
}

@media screen and (max-width: 47.2em) {
  .page-body .main-content .cbp_tmtimeline > li .cbp_tmlabel:after {
    border-bottom-color: #e0e0e0;
  }
  .page-body .main-content .cbp_tmtimeline > li .cbp_tmlabel.empty {
    background: #e0e0e0;
  }
}

.label-default{
    background: #c7c7c7;
}
*/

body{
    color: rgba(0,0,0,.87) !important;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small{
    color: rgba(0,0,0,.68) !important;
}

/* INPUTS, SWITCH */

body.page-body input.form-control, 
body.page-body .dpifs-fake-input,
.switch,
.form-control,
.daterange-inline {
    border-color: rgba(0,0,0,.24) !important;
    color: rgba(0,0,0,.87) !important;
}

/* TABLE */

.table-bordered > thead > tr > th, 
.table-bordered > tbody > tr > th, 
.table-bordered > tfoot > tr > th, 
.table-bordered > thead > tr > td, 
.table-bordered > tbody > tr > td, 
.table-bordered > tfoot > tr > td {
    color: rgba(0,0,0,.87) !important;
}

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* SELECT 2 */

.select2-container--default .select2-selection--single .select2-selection__rendered,
.page-body .select2-dropdown .select2-search .select2-results__option, 
.page-body .select2-dropdown .select2-results .select2-results__option,
.page-body .select2-dropdown .select2-search input{
    color: rgba(0,0,0,.87) !important;
}

body.page-body .select2-container .select2-selection{
    border-color: rgba(0,0,0,.24) !important;
}

.page-body .select2-dropdown {
    border-color: rgba(0,0,0,.24) !important;
}

.page-body .select2-dropdown .select2-search input {
    background: #eaeaea !important;
}

.select2-container--open{
    z-index: 99999;
}

/* SELECT BOX IT */

.page-body .selectboxit-container .selectboxit .selectboxit-text,
.selectboxit-list .selectboxit-option-anchor {
    color: rgba(0,0,0,.87) !important;
}
.page-body .selectboxit-container .selectboxit .selectboxit-arrow-container {
    border-left: 1px solid rgba(0,0,0,.24) !important;
}
body.page-body .selectboxit-container .selectboxit{
    border-color: rgba(0,0,0,.24) !important;
}

.page-body .selectboxit-container .selectboxit-options {
    border-color: rgba(0,0,0,.24) !important;
}
    
/* TABS */

.nav-tabs {
    border-bottom: 1px solid rgba(0,0,0,.24) !important;;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border-color: rgba(0,0,0,.24) !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
    border-bottom-color: transparent !important; 
}

/* SELECT2 POPUP */

.select2-picker-box{
    border: 1px solid rgba(0, 0, 0, 0.24) !important;
}

/* LABEL */

.label-default{
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* SMALL FIXES */

.description,
.login-bottom-links,
.login-progressbar-indicator{
    color: white !important;
}

body.page-body .login-content input.form-control{
    color: white !important;
}

.links-list > li.sep {
    border-left: 1px solid #337ab7 !important;
}

/* ====================================================================== *
      BTN
 * ====================================================================== */

.btn{
    border: none !important;
}

.btn-login {
    border: 1px solid #454a54 !important;
}

.btn-default {
    background-color: #777b81 !important;
    color: white;
}
.btn-default:hover{
    background-color: #5a5e63 !important;
    color: white !important;
}
.btn-default.btn-icon i{
    background: #5a5e63 !important;
}

.btn-default-dark{
    background: #b5b5b5 !important;
}

.btn-group .btn-white{
    border: 1px solid rgba(0,0,0,.24) !important;
}

/* ====================================================================== *
      Columna iconos estrecha
 * ====================================================================== */
.narrow-column {
    width: 1%;
    white-space: nowrap;
}

/* ====================================================================== *
      Botones de scroll auto-hidden
 * ====================================================================== */
/* Botones de scroll */
.ir-abajo, .ir-arriba {
    display:none;
    padding:10px;
    background-color: rgba(73, 78, 81, 0.4);
    font-size:14px;
    color:#fff;
    cursor:pointer;
    position: fixed;
    bottom:20px;
    right:5px;
    border-radius: 50px;
    z-index: 10000;
}

/* ====================================================================== *
      CUSTOM CHECKBOX
 * ====================================================================== */

/* Customize the label (the container) */
.c-checkbox {
    display: inline-block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 22px;
    height: 22px;
}

/* Hide the browser's default checkbox */
.c-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.c-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.c-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.c-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.c-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.c-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.c-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ====================================================================== *
      CUSTOM RADIO BUTTON
 * ====================================================================== */

/* Customize the label (the container) */
.c-radio {
    display: block;
    position: relative;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 22px;
    width: 22px;
}

/* Hide the browser's default radio button */
.c-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.c-radio .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.c-radio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.c-radio input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.c-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.c-radio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.c-radio .checkmark:after {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* Style the spinner loader */
.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

/* Quitar outline molesto de chrome */
/* Solo elimina el outline cuando se navega con mouse (no teclado) */
:focus:not(:focus-visible) {
    outline: none;
}