/* Tipo y tamaño de fuente del sitio */

:root
{
  --maincolor: #DCDCDC;
  --secondcolor: #1C66B3;
  --thirdcolor: #912884               ;
  --fourthcolor: #838BB6;
  --fifthcolor: #67CEB0;
  --sixthcolor: #f7f7fe;
  --seventhcolor: #2061E1;
  --eighthcolor: #FF5065;
  --ninethcolor: #3579E1;
  --tenthcolor: #3A31B0;
  --mainfontfamily: -apple-system,BlinkMacSystemFont, "Segoe UI" ,Roboto, "Helvetica Neue" ,Arial,sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji";
}

.btn-default 
{
  background-color: var(--tenthcolor);
  color: white;
  font-size: 22px;
  padding: 6px 10px;
  font-weight: bold;
}

.modal-footer 
{
  text-align: center;
}

.notif-badge
{
  float: right;
  margin-right: 10px;
  font-size: 10px;
  margin-top: -20px;
  background-color: Red;
}

#general-panel 
{
  text-align: right;
  padding-right: 1px;
  margin-top: 3px;
  color: var(--thirdcolor);
  border-style: solid;
  border-width:thin;
  border-color: var(--thirdcolor);
  background-color: var(--thirdcolor);
}

hr 
{
  margin-top: 0px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid var(--secondcolor);
}

.span-title1
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
}

.span-title2
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
  font-size: 0px;
}

.span-title3
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
  font-size: 0px;
}

#usercard-options
{
  background-color: var(--thirdcolor);
}

#usercard-options > li > a
{
  color: White;
  font-weight: bold;
  background-color: transparent;
}

#usercard
{
  background-color: transparent;
}

#bs-sidebar-navbar-collapse-1
{
  background-color: var(--seventhcolor);
}

#header-container
{
  height: 100px;
  background-color: var(--seventhcolor);
}

.navbar-default
{
  background-color: var(--seventhcolor);
}

.modal-title
{
  font-weight: bold; /*text-transform: uppercase;*/
}

.login-box
{
  margin-top: 100px;
}

/* */
.panel
{
  margin-bottom: 0px;
}

.modal1 > .modal-dialog
{
  width: 30% !important;
}

.modal2 > .modal-dialog
{
  width: 50% !important;
}

.modal3 > .modal-dialog
{
  width: 100% !important;
}

.modal80
{
  width: 80% !important;
}

.btn-primary
{
  color: #fff;
  background-color: #0434A6;
  border-color: #123795;
}

.btn-back
{
  color: White;
  background-color: var(--fifthcolor);
  border-color: White;
}

.btn btn-primary toggle-on
{
  font-weight: bold;
}

.btn btn-default active toggle-off
{
  font-weight: bold;
}

#menu:last-child
{
  margin-bottom: 100px;
}

.uppercase
{
  text-transform: uppercase;
}

/* Botones de navegación en modo mobile */

#myBtn
{
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 50px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: Gray; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover
{
  background-color: #555; /* Add a dark-grey background on hover */
}

#myBtn2
{
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  top: 50%; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: Gray; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn2:hover
{
  background-color: #555; /* Add a dark-grey background on hover */
}

/* This is to remove the arrow of select element in Explorer */
select.selector::-ms-expand
{
  display: none;
}

select.selector
{
  -webkit-appearance: none;
  appearance: none;
}

legend
{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.btn-lg
{
  font-size: 15px;
  padding: 6px 10px;
  font-weight: bold;
}

.btn-xlg
{
  font-size: 18px;
  padding: 6px 10px;
  font-weight: bold;
  border-radius: 6px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary
{
  color: var(--secondcolor);
  background-color: var(--maincolor);
  border-color: White;
}

.nav-second-level > li > a
{
  color: White;
}

.nav-second-level > li > a:hover
{
  color: #555;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover
{
  color: White; /*var(--secondcolor);*/
}

.navbar-default .navbar-nav > li > a
{
  color: White; /*var(--secondcolor);*/
  background-color: transparent;
}

.navbar-nav > li > a
{
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: transparent;
}

a
{
  text-decoration: none;
}

body
{
  font-family: var(--mainfontfamily);
  font-size: 15px;
}

.form-control
{
  font-family: var(--mainfontfamily);
  font-size: 15px;
}

.modal-xlg
{
  width: 90%;
}

.modal-xl
{
  width: 70%;
}

.modal-50
{
  width: 50%;
}

#menu
{
  font-family: var(--mainfontfamily);
  background-color: var(--seventhcolor);
  font-size: 15px;
  font-weight: bold;
  width: -webkit-fill-available;
  margin-top: 0px;
}

.panel-default > .panel-heading
{
  background-color: var(--ninethcolor);
}

.panel-primary
{
  background-color: transparent;
  border-color: transparent;
  margin-top: -45px;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 2px;
}

.panel-default
{
  border-color: var(--ninethcolor);
}

.span-titulo-sistema
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
}

.span-titulo-sistema-2
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
}

.span-titulo-sistema-3
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
}

.Style1
{
  color: White; /*var(--secondcolor);*/
  font-size: 25px;
  font-weight: bold;
}

.span-usuario
{
  font-style: normal;
  color: White; /*var(--secondcolor);*/
  font-size: 12px;
  font-weight: bold;
}

.btn-primary, btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover
{
  color: White;
  background-color: var(--tenthcolor);
  border-color: White;
}

.span-rol
{
  color: White; /*var(--secondcolor);*/
  font-size: 10px;
}

label
{
  font-family: var(--mainfontfamily);
  color: var(--secondcolor);
  font-size: 100%;
}

.table-bordered
{
  border: 1px solid var(--maincolor);
}

.panel-title
{
  font-family: var(--mainfontfamily);
  color: White;
  font-weight: bold;
}

.modal-content
{
  height: 100%;
  border-radius: 15px;
  position: relative;
}

.dropdown-menu
{
  font-family: var(--mainfontfamily);
  color: var(--maincolor);
  width: -webkit-fill-available;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover
{
  color: var(--secondcolor);
  background-color: var(--maincolor);
}

.img-logo
{
  margin-top: 5px;
  /*width: 120px;*/
  margin-left: 0px;
  height: 90px;
}

#iuser
{
  color: White; /*var(--secondcolor);*/
}

#icaret
{
  color: White /*var(--secondcolor);*/;
}

#inotif
{
  color: White; /*var(--secondcolor);*/
}

/* jscroll table */
.jscroll-thead-tr
{
  background-color: var(--ninethcolor);
  font-family: var(--mainfontfamily);
  color: White;
  font-size: small;
}

.jscroll-td
{
  font-family: var(--mainfontfamily);
}

table.tablesorter thead tr .header
{
  border-style: none;
}

#divNavbarBrand
{
  color: White;
  font-weight: bold;
  text-transform: uppercase;
}

.navbar-menu
{
  font-size: 18px;
  font-weight: bold;
}

.dropdown-menu-size
{
  font-size: 15px;
}

.dropdown-toggle
{
  height: 50px;
  padding-top: 7px;
}

#aDropdownToogle
{
  margin-top: 10px;
  color: white;
  text-decoration: none;
}

.px-checkbox
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  padding: 10px;
}

.navbar-title
{
  background-color: #0434A6;
  margin-bottom: 3px;
}

.form-horizontal .control-label-left
{
  padding-top: 7px;
  margin-bottom: 0;
  text-align: left;
}

.panel-body-modal
{
  padding-top: 0px;
}

.panel-body
{
  background-color: var(--sixthcolor);
}

#divTitleContainer
{
  background-color: var(--thirdcolor);
}

@media (max-width: 547px)
{
  .span-title1
  {
    font-size: 0px !important;
  }

  .span-title2
  {
    font-size: 0px !important;
  }

  .span-title3
  {
    font-size: 0px !important;
  }
}

@media (min-width: 547px) and (max-width: 640px)
{
  .span-title1
  {
    font-size: 0px !important;
  }

  .span-title2
  {
    font-size: 0px !important;
  }

  .span-title3
  {
    font-size: 25px !important;
  }
}

@media (min-width: 641px) and (max-width: 767px) 
{
  .span-title1 
  {
    font-size: 0px !important;
  }

  .span-title2 
  {
    font-size: 25px !important;
  }

  .span-title3 
  {
    font-size: 0px !important;
  }
}

@media (max-width: 767px)
{
  .panel-primary
  {
    margin-top: 40px;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 2px;
  }

  #menu:last-child
  {
    margin-bottom: 0px;
  }

  #usercard
  {
    background-color: var(--seventhcolor);
  }

  .dropdown
  {
    margin-top: -3px;
  }

  .navbar-nav > li > a
  {
    padding-top: 8px;
  }

  #siteMasterBody 
  {
    background-size: contain;
  }

  #general-panel 
  {
    margin-top: 66px;
    margin-right: 7px;
    margin-left: 7px;
  }
}

/* Tamaño normal o más grande */

@media (min-width: 768px)
{
  .panel-primary
  {
    margin-top: 10px;
    margin-left: -33px;
    margin-right: -38px;
    margin-bottom: 2px;
  }

  .menuHeader
  {
    display: none;
  }

  .panel-primary
  {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: -76px;
  }

  #siteMasterBody 
  {
    /*background-size: 620px 300px;*/
  }

  #general-panel 
  {
    margin-right: 4px;
    margin-left: 49px;
  }
}

/* Manejo de barra lateral. */
@media (min-width: 768px)
{
  .panel-primary {
    margin-top: 35px;
  }
}

@media (min-width: 955px)
{
  .panel-primary {
    margin-top: 2px;
  }
}

@media (min-width: 1330px)
{
  .panel-primary
  {
    margin-top: 2px;
    margin-left: -70px;
    margin-right: 130px;
    margin-bottom: 2px;
  }

  #general-panel 
  {
    margin-right: 4px;
    margin-left: 284px;
  }
}