body, html {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  font-size: 13.75px;  
  margin: 0;
  padding: 0;
  background-color: #efefef;
  overflow-x: hidden;
  color: #2a3b4c; //#333;
  scroll-behavior: smooth;
  //background-color: #E8F8FC;
   /* Fondo degradado estilo MedlinePlus */
  background: linear-gradient(#feffff 0%, #ddf1f9 20%, #a0d8ef 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%; /* necesario para que los hijos hereden */
  width: 100%; /* necesario para que los hijos hereden */
  margin: 0;
}

a {

  text-decoration: none;
  color: #326fcc; //#0096D2;
  
}

a:link {

  text-decoration: none;
  color: #326fcc; //#0096D2;
  
}

a:active {

  text-decoration: none;
  color: red !important;
  
}

a:hover {

  text-decoration: none;
  color: red !important;
  
}

a:visited {

  text-decoration: none;
  color: #326fcc; //#0096D2;
  
}

jump {

  text-decoration: none;
  color: #17305E !important;
  
}

jump:active {

  text-decoration: none;
  color: #17305E !important;
  
}

jump:hover {

  text-decoration: none;
  color: #17305E !important;
  
}

jump:visited {

  text-decoration: none;
  color: #17305E !important;
  
}

.minitext {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  font-size: 11.5px;  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mark {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  color: #2a3b4c; //#333;
  background-color: #ffffbf;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.form {
  display: inline;
}

.loginbg {
  background: rgba(255, 255, 255, 0.95); /* blanco casi sólido */
  padding: 0px;
  margin: 0px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  backdrop-filter: blur(6px); /* efecto cristal suave */
}

.loginbgmask {
  width: 100%; 
  height: 100%; 
  min-height: 294px; 
  z-index: 10; 
  background:rgba(255, 255, 255, 0.32);
  padding: 0px;
  padding-top: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.loginlink {
  color: #555 !important;
}

.loginlink:active {
  color: #ff0000 !important;
}

.loginlink:hover {
  color: #0096D2 !important;
}

.loginlink:visited {
  color: #555 !important;
}

.loginmaintable {
  position: relative; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: auto;
}

.loginbg2 {
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: auto; 
  min-height: 326px; 
  z-index: 0; 
  opacity: 0.15; 
  background-image: url("images/homebg.jpg"); 
  overflow: hidden;
}

.logincontainer {
  position: relative; 
  z-index: 1; 
  padding-top: 6px; 
  padding-bottom: 6px;
}

.logindescription {
  height: auto; 
  padding-top: 10px;
  padding-bottom: 10px; 
  padding-left: 7px; 
  padding-right: 7px; 
  line-height: 1.6; 
  font-size: 15px; 
  border-bottom-right-radius: 16px; 
  border-bottom-left-radius: 16px; 
  background-color: #d2eef8;
}

.logindirectory {
  height: auto; 
  padding: 10px; 
  margin-top: 10px;
  line-height: 1.6; 
  font-size: 15px; 
  border-bottom-right-radius: 16px; 
  border-bottom-left-radius: 16px; 
  background-color:#e6f4ff;
}

.title {
  color: #17305E;
  margin: 0px;
  padding: 0px;
  font-size: 35px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.title2 {
  color: #17305E;
  margin: 0px;
  padding: 0px;
  font-size: 25px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.subtitle {
  color: #dfdfdf;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.subtitle2 {
  color: #2a3b4c;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tokentitle {
  color: #efefef;
  padding: 0px;
  margin: 0px;
  font-size: 25px;
}

.tokensubtitle {
  color: #efefef;
  padding: 0px;
  margin: 0px;
  font-size: 15px;
}

.textfield {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  height: 37px; 
  font-size: 13.75px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 5px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
}

.textfield:focus {
  outline: none !important;
  border: 1.5px solid #007ACC;
  box-shadow: 0 0 10px #007ACC;
}

.disabledtextfield {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  background-color: #E5E5E5;
  color: #4C4C4A;
  height: 37px; 
  font-size: 13.75px;
  vertical-align: middle;
  padding: 5px;
  border: 1.5px solid #CCC;
  border-radius: 6px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.checkbox {
  height: 27px;
  width: 27px;
  padding: 5px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
}

.checkbox:focus {
  outline: none !important;
  border: 1.5px solid #007ACC;
  box-shadow: 0 0 10px #007ACC;
}

.button {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 78px;
  font-size: 13.75px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.button:hover {
  background-color: #ddd;
}

.passbutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 0px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 35px;
  width: 78px;
  font-size: 13.75px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.passbutton:hover {
  background-color: #ddd;
}

.greenbutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 78px;
  font-size: 13.75px;
  vertical-align: middle;
  background-color: #2f946f;
  color: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.greenbutton:hover {
  background-color: #2C8C69;
  color: #fff;
}

.redbutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 78px;
  font-size: 13.75px;
  vertical-align: middle;
  background-color: #ff0000;
  color: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.redbutton:hover {
  background-color: #aa0000;
  color: #ddd;
}

.blackbutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 78px;
  font-size: 13.75px;
  vertical-align: middle;
  background-color: #464a50;
  color: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.blackbutton:hover {
  background-color: #394651;
  color: #fff;
}

.basicinfobutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 100%;
  max-width: 260px;
  font-size: 13.75px;
  vertical-align: middle;
  background-color: #4370af;
  color: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-left: 3px;
  margin-right: 3px;
}

.basicinfobutton:hover {
  background-color: #275590;
  color: #fff;
}

.specialtiesinfobutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 100%;
  max-width: 260px;
  font-size: 13.75px;
  vertical-align: middle;
  background-color: #2f946f;
  color: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-left: 3px;
  margin-right: 3px;
}

.specialtiesinfobutton:hover {
  background-color: #2C8C69;
  color: #fff;
}

.hospitalsinfobutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  border-radius: 6px;
  border: 1px solid #aaa;
  cursor: pointer;
  height: 37px;
  width: 100%;
  max-width: 260px;
  font-size: 13.75px;
  vertical-align: middle;
  background-color: #0b2356;
  color: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-left: 3px;
  margin-right: 3px;
}

.hospitalsinfobutton:hover {
  background-color: #062863;
  color: #fff;
}

.disabledbutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  background-color: #bbb;
  border-radius: 6px;
  border: 1px solid #aaa; /* cambio aquí para que combine */
  cursor: not-allowed; /* mejor que pointer para disabled */
  color: #444;
  font-size: 13.75px;
  height: 37px;
  width: 78px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.disabledgreenbutton {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  background-color: #2f4d60;
  border-radius: 6px;
  border: 1px solid #aaa; /* cambio aquí para que combine */
  cursor: not-allowed; /* mejor que pointer para disabled */
  color: #ccc;
  font-size: 13.75px;
  height: 37px;
  width: 78px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.searcharea {
  width: 100%; 
  height: auto;
  display: flex;           /* Activa flexbox */
  flex-wrap: wrap;
  gap: 3px;
}

.searchchild {
  display: flex;
  width: auto; 
  height: 40px;
}

.caps  {
  padding: 6px;
  margin: 0px; 
  background-color: #FFF6A8;
}

table, th, td {
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  font-size: 13.75px;  
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

table {
  border: none; 
  border-collapse: collapse;
}

table, td, th {
  padding: 0;
}

.dwarning {
  width: 100%;
  height: auto;
  background-color: #FFF6A8;
  color: black;
  padding: 3px;
  margin: 0px;
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  font-size: 13.75px;  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.unlockcontainer {
  padding: 0px; 
  margin: 0px; 
  border-style: solid;
  border-width: 1px;
  border-color: #777;
  width: 99%; 
  height: 37px; 
  max-height: 37px;
}

.document {
  background-color: #efefef;
}

.separator {
  background-color: #299AA3;
  height: 10px;
}

.separator2 {
  width: 100%;
  height: 10px;
}

.miniseparator2 {
  width: 100%;
  height: 5px;
}

.socialnetworksimg {
  border-radius: 8px;
}

.socialnetworks {
}

.socialnetworks:hover {
  opacity: 0.7;
}

.header {
  //background: linear-gradient(180deg, #7fb6e6 0%, #69aee0 50%, #4f9fd6 100%);
  background: linear-gradient(180deg, #0089ff 25%, #326fcc 100%);
  box-shadow: 0 2px 6px rgba(25, 50, 80, 0.08);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.footer {
  background-color: #003758;//#00142C;
  color: #efefef;
}

.footer a {
  color: #98c0f6;
}

.footer a:hover {
  color: #5589c4 !important;
}

.headerimg {
  width: 100%;
  height: 190px; /* usa un alto fijo si quieres que quede centrada verticalmente */
  max-height: 190px;
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente */
  overflow: hidden;
  background-color: #f0f0f0; /* opcional, para ver el contenedor */
}

.headerimg img {
  max-width: 100%;
  height: auto;
  object-fit: cover; /* ajusta el recorte visual */
}


.headerlink {
  color: #efefef !important;
}

.headerlink:hover {
  color: #fff !important;
}

.imgheaderlink {
}

.imgheaderlink:hover {
  opacity: 0.7;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fa-square-check {
  color: #28a745;   /* verde tipo "success" */
  margin-right: 6px;
}

.fa-circle-check {
  color: #28a745;   /* verde tipo "success" */
  margin-right: 6px;
}

.benefited {
  background-color: #0B4A78;
  color: #efefef;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 80px;
  max-height: 120px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.benefited h2{
  margin: 0px; padding: 0px;
  font-size: 25px;
}

.benefited h3{
  margin: 0px; padding: 0px;
  font-size: 18px;
  text-transform: uppercase;
}

.benefits {
  width: 80%; 
  max-width: 1100px;
  margin: auto;
  background-color: #efefef;
  height: auto;
  padding: 20px;
  display: flex;           /* Activa flexbox */
  flex-wrap: wrap;         /* Permite saltar de línea si no caben */
  justify-content: center; /* Centra los hijos */
  gap: 20px;               /* Espacio entre hijos */
}

.benefits-child {
  padding: 6px;
  width: 100%;
  max-width: 300px; 
  height: auto;
  display: flex; 
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #e0d4c8;
  color: #222;
}

.benefits-extra {
  width: 100%;
  margin: auto;
  background-color: #efefef;
  height: auto;
  padding: 0px;
  display: flex;           /* Activa flexbox */
  flex-wrap: wrap;         /* Permite saltar de línea si no caben */
  justify-content: center; /* Centra los hijos */
  gap: 0px;               /* Espacio entre hijos */
}

.benefits-extra-child {
  padding: 0px;
  width: 45%; 
  height: auto;
  display: flex; 
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #efefef;
  color: #333;
}

.benefits-child-doctor {
  max-width: 220px;
}

.dashboard {
  width: 100%; 
  max-width: 1100px;
  margin: auto;
  height: auto;
  padding: 0px;
  display: flex;           /* Activa flexbox */
  flex-wrap: wrap;         /* Permite saltar de línea si no caben */
  justify-content: center; /* Centra los hijos */
  gap: 10px;               /* Espacio entre hijos */
  cursor: pointer;
}

.dashboard-child {
  padding: 0px;
  width: 100%;
  max-width: 250px; 
  height: 100px;
  display: flex; 
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #e0d4c8;
  color: #222;
}

.dashboard-link {
  color: #efefef;
  font-weight: bold;
}

.dashboard-link:hover {
  color: #D3D3D3;
  font-weight: bold;
}

.child1 {
  background-color: #11C4EF; 
  color: #efefef;
}

.child1:hover {
  background-color: #11BBDD; 
  color: #eee;
}

.child2 {
  background-color: #0DA85A; 
  color: #efefef;
}

.child2:hover {
  background-color: #3AA56E; 
  color: #eee;
}

.child3 {
  background-color: #FA920B; 
  color: #efefef;
}

.child3:hover {
  background-color: #F99E2F; 
  color: #eee;
}

.child4 {
  background-color: #6868B7; 
  color: #efefef;
}

.child4:hover {
  background-color: #5B5AA0; 
  color: #eee;
}

.child5 {
  background-color: #F73625; 
  color: #efefef;
}

.child5:hover {
  background-color: #E52F22; 
  color: #eee;
}

.child6 {
  background-color: #12D0CE; 
  color: #efefef;
}

.child6:hover {
  background-color: #13DDDA; 
  color: #eee;
}

.system {
  width: 100%;
  margin: 0px;
  height: 100%; /*100vh;*/
  padding: 0px;
  gap: 0px;
}

.system-sidebar {
  padding: 0px;
  margin: 0px;
  width: 17%;
  height: 100%;
  float: left;
  color: #efefef !important;
  background-color: #00b3d3;
  border-right: 3px solid #2f4d60;
}

.system-sidebar a {
  color: #efefef !important;
}

.system-sidebar a:hover {
  color: #fff !important;
}

.system-sidebar table,
.system-sidebar td,
.system-sidebar th {
  color: #efefef !important;
  padding: 2px;
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  font-size: 13.75px;  
}

.system-dashboard {
  padding: 0px;
  margin: 0px;
  width: 82%;
  height: 100%;
  float: left;
}

.sidebar {
  width: 100%;
  height: 100%;
  background-color: #00b3d3;
  border-right: 3px solid #2f4d60;
}

.sidebar a {
  color: #efefef !important;
}

.sidebar a:hover {
  color: #fff !important;
}

.sidebar table,
.sidebar td,
.sidebar th {
  color: #efefef !important;
  padding: 2px;
  font-family: 'Roboto', 'Ubuntu', Arial, Tahoma;
  font-size: 13.75px;  
}

.sidebarcell {
  padding-top: 4px !important; 
  padding-bottom: 4px !important; 
  padding-left: 10px !important;
}

.sidebargraytext {
  color: #777 !important;
}

.profilesection {
  background-color: #eee !important;
  height: 34px;
  color: #333 !important;
}

.profilesectiontext {
  color: #333 !important;
}

.profiletype {
  background-color: #2f4d60;
}

.mark {
  background-color: #fff7a1;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

.nomark {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.dcell
{

  float: left;
  width: 100%; 
  max-width: 160px; 
  padding-bottom: 10px; 
  padding-right: 10px;
  
}

.dcell2
{

  float: left;
  width: 100%; 
  padding-bottom: 10px; 
  padding-right: 10px;
  
}

@media only screen and (max-device-width: 1023px) {  

  body, html {
    font-size: 15.75px;  
  }
  
  .logindescription {
    font-size: 16px;
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
  }
  
  .logindirectory {
    font-size: 16px;
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
  }

  .title2 {
    font-size: 25px;
  }
  
  .subtitle {
    font-size: 15px;
  }
  
  .subtitle2 {
    font-size: 15px;
  }
  
  .tokentitle {
    font-size: 26px;
  }

  .tokensubtitle {
    font-size: 16px;
  }

  .textfield {
    height: 44px; 
    font-size: 15.75px;
    border-radius: 0px;
  }
  
  .disabledtextfield {
    height: 44px; 
    font-size: 15.75px;
    border-radius: 0px;
  }

  .button {
    height: 44px;
    font-size: 15.75px;
    border-radius: 0px;
  }

  .passbutton {
    height: 42px;
    font-size: 15.75px;
    border-radius: 0px;
  }

  .greenbutton {
    height: 44px;
    font-size: 15.75px;
    border-radius: 0px;
  }

  .redbutton {
    height: 44px;
    font-size: 15.75px;
    border-radius: 0px;
  }

  .disabledbutton {
    font-size: 15.75px;
    height: 44px;
    border-radius: 0px;
  }

  .disabledgreenbutton {
    font-size: 15.75px;
    height: 44px;
    border-radius: 0px;
  }

  table, th, td {
    font-size: 15.75px;  
  }

  .dwarning {
    font-size: 15.75px;  
  }

  .unlockcontainer {
    height: 44px; 
    max-height: 44px;
  }

  .socialnetworksimg {
    border-radius: 0px;
  }
  
  .footer {
    background-color: #00142C;
    color: #efefef;
    font-size: 15.75px;
  }
  
  .sidebar table,
  .sidebar td,
  .sidebar th {
    font-size: 15.75px;  
  }

  .profilesection {
    height: 41px;
  }
  
  .sidebar a {
    font-size: 15.75px;
  }
  
  .system-sidebar {
    width: 25%;
  }
  
  .system-sidebar table,
  .system-sidebar td,
  .system-sidebar th {
    font-size: 15.75px;  
  }
  
  .system-dashboard {
    width: 70%;
    margin: auto;
  }
  
}

.bigrow {
  padding-top: 20px; 
  padding-left: 14px; 
  padding-right: 14px; 
  padding-bottom: 20px; 
  line-height: 1.6; 
  font-size: 15px;
}

@media (orientation: portrait) {

  .loginbg2 {
    min-height: 474px; 
  }
  
  .system {
    height: auto;
  }
  
  .system-sidebar {
    width: 100%;
    height: auto;
    border-right: 0px solid #1A6066;
  }
  
  .system-dashboard {
    width: 100%;
    height: auto;
    margin: auto;
    padding: 0px;
  }
  
  .dashboard-child {
    max-width: 97%; 
  }

  .headerimg {
    height: 90px;
    max-height: 90px;
  }
  
  .bigrow {
    padding-left: 1px;
    padding-right: 1px;
  }

  #logo {
    display: none;
  }

  #maintable {
    max-width: 373px;
  }
  
  #maintable2 td{
    max-width: 373px;
  }
  
  #profilesection {
    margin-left: 3px !important;
    margin-right: 3px !important;
  }

}

@media (orientation: landscape) {

  #nowrapcell {
    white-space: nowrap;
  }
  
  #headercell {
    width: 30%;
  }
  
  #maintable {
    max-width: 650px;
  }
  
  #maintable1 {
    max-width: 622px;
  }
  
}

@media only screen and (max-device-width: 699px)  
{

  .alertify  
  {
  
	  position: fixed; z-index: 99999;
	  top: 50px; left: 10%;
	  max-width: 80%;
	  opacity: 1;
  
  }
  
}

@media (orientation: landscape) and (max-width: 721px) {

  .dashboard-child {
    width: 100%;
    max-width: 220px !important; 
  }
  
}

@media (orientation: landscape) and (max-width: 768px) {

  .headerimg {
    height: 90px;
    max-height: 90px;
  }
  
}

@media (orientation: portrait) and (min-width: 768px) {

  .dashboard-child {
    width: 100%;
    max-width: 250px !important; 
  }
  
}