@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Yaldevi:wght@600&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');

  body {
    background-color: #ffffff;
    color: #444444;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10pt;
    text-align:center;
    padding:0px;
    margin:0px;
  }

  H1 {
    font-size:14pt;
  }
  h2 {
    font-size:13pt;
  }
  p {
    font-size:10pt;
    text-align:justify;
  }
  li {
    font-size:10pt;
    text-align:justify;
  }

  #top {
    position:fixed;
    background-color:#eeeeee;
    width:100%;
    height:80px;
    top:0px;
    left:0px;
    padding:0px;
    z-index:1000;
  }

  #dlogo {
    width:320px;
    top:20px;
    left:10px;
    padding:5px;
  }

  #drest {
    position:absolute;
    right:0px;
    width:700px;
    float:right;
    top:0px;
    padding:8px;
    text-align:right;
    font-size:9pt;
  }

  #drest a {
    text-decoration:none;
    color:#444444;
  }

  #menu {
    position:fixed;
    background-color:#025E09;
    width:100%;
    height:34px;
    min-height:34px;
    top:80px;
    left:0px;
    text-align:left;
    padding:0px;
    z-index:100;
  }

  #all {
    position:fixed;
    top:100px;
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow: scroll;
  }

  #general {
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
  }

  #content {
    display:inline-block;
    width:100%;
    height:inherit;
    min-height:500px;
    background-color:#ffffff;
    padding:0px;
    text-align:left;
  }

  #bwrapper {
    display:inline-block;
    height:inherit; 
  }

  #htwrapper {
    font-family: "Acme", sans-serif;
    display:block;
    padding:25px;
    max-width:1000px;
    min-height:350px;
  }

  #htwrapper p {
    font-size:15pt;
    padding: 4px;
  }

  #containersl {
    left:0px;
    margin: 0px;
    width: 100%;
    position:absolute;
  }

  #bottom {
    background-color:#025E09;
    background-image:url('/images/bottom.jpg');
    background-size: cover;
    color:#ffffff;
    width:100%;
    height:450px;
    left:0px;
    bottom:0px;
  }

  #bottoml {
    float:left;
    width:400px;
    /* border:1px solid black; */
    padding:10px 10px 10px 140px;
    color:#ffffff;
    text-align:left;
  }

  #bottoml a {
    font-size:10pt;
    color: #ffffff;
    text-decoration:none;
  }

  #bottoml p {
    font-size:10pt;
    color: #ffffff;
    text-decoration:none;
  }

  #bottomr {
    float:left;
    text-align:left;
    /* border:1px solid black; */
    width:400px;
    padding:10px;
    color:#ffffff;
  }

  #menu a {
    display:block inline;
    position:relative;
    color:#ffffee;
    font-family: 'Ubuntu', Verdana, Sans-serif;
    text-shadow:2px 2px #335533;
    font-size:12pt;
    text-decoration:none;
    padding:6px;
    margin:6px;
    top:9px;
  }
   
  #map {
    width:350px;
    height:250px;
  }

  #menu a.cselected {
    display:block inline;
    position:relative;
    color:#ffffff;
    background-color:#002B03;
    font-family: 'Ubuntu', Verdana, Sans-serif;
    text-shadow:2px 2px #000000;
    font-size:12pt;
    text-decoration:none;
    padding:6px;
    margin:6px;
    top:9px;
  }

  #menu a.reserva {
    display:block inline;
    color:#ffffcc;
    text-shadow:2px 2px #335533;
    font-size:12pt;
    text-decoration:none;
    padding:6px;
    margin:6px;
    position:relative;
    top:9px;
  }

  #menu a:hover {
    background-color:#004c06;
    text-shadow:2px 2px #002200;
  }

  .smallbutton  {
    margin:6px 0px 6px 6px;
    background-color:#004c06;
    color:#ffffff;
    text-decoration:none;
    padding:6px;
    text-shadow:2px 2px #002200;
    border-radius:6px;
    cursor:pointer;
  }

  .smallbutton:hover  {
    background-color:#00aa06;
    text-shadow:2px 2px #002200;
  }

  .smallbuttonpres  {
    background-color:#008806;
    color:#ffffff;
    text-decoration:none;
    padding:6px;
    text-shadow:2px 2px #002200;
    border-radius:6px;
    font-weight: bold;
  }


  input[type=submit], input[type=button] {
    font-weight:bold;
    padding:5px;
    border-radius:6px;
    background-color: #003004;
    color:#eeeeee;
  }

  input[type=submit]:hover, input[type=button]:hover {
    background-color: #006600;
    color:#ffffff;
  }
   
  input[type=text], input[type=password], input[type=number],textarea, select {
    border-radius:4px;
    padding:4px;
  }

  input.topts {
    margin:4px;
    padding:4px;
  }
  select.topts {
    margin:4px;
    padding:4px;
  }
  textarea.topts {
    margin:4px;
    padding:4px;
  }

  .photosl {
    display:block;
    position: absolute;
    animation: round 20s infinite;
    width:100%;
    height:0;
    opacity: 0;
  }

  @keyframes round {
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  
  img:nth-child(1) {
    height:auto;
    animation-delay: 20s;
  }
  
  img:nth-child(2) {
    height:auto;
    animation-delay: 15s;
  }
  
  img:nth-child(3) {
    height:auto;
    animation-delay: 10s;
  }
  
  img:nth-child(4) {
    height:auto;
    animation-delay: 5s;
  }

  img:nth-child(5) {
    height:auto;
    animation-delay: 0s;
  }

  #currentphoto {
    transition: 2s;
  }

  .treservations {
    background-color:#025E09; 
    color:#ffffff;
    font-size:10pt;
    border-radius:9px;
    padding:6px;
    vertical-align:middle;
  }
  .treservations td {
    font-size:10pt;
    vertical-align:middle;
  }
  .noway {
    font-size:10pt;
    padding:0px;
  }

  #rooms {
    clear:both;
    width:590px;
    background-color:#eeeeee;
    padding:8px;
    margin:8px;
    text-align: left;
  }

  #rooms div {
    background-color:#ffffff;
    width:120px;
    height:90px;
  }

  #rooms img {
    opacity:60%;
    border: 1px solid #444444;
    transition: 0.4s;
  }
  #rooms img:hover {
    opacity:100%;
  }
  #rooms img.sel {
    opacity:100%;
  }
   
  #photowrap {
    clear:both;
    padding:10px;
    top:0px;
  }

  #photowrap img {
    border: 1px solid #666666;
  }

  .lrbut {
    transition:0.4s;
    opacity:60%;
  }

  .lrbut:hover {
    opacity:100%;
  }

  .icons {
    padding:6px;
    vertical-align:top;
  }
  .realcontact td {
    padding:6px;
  }
 
  table.contact th {
    text-align:left;
    font-weight:bold;
    font-size:9pt;
    padding:10px 28px 0px 6px;
  }

  table.contact td {
    text-align:left;
    padding:6px 30px 4px 8px;
  }

  table.contact td.endtable {
    text-align:center;
    padding:10px;
    font-size:10pt;
  }

  table.contact td.endtable input, table.contact td.endtable submit {
    padding:10px;
    font-size:10pt;
  }

  table.contact td input,table.contact td textarea ,table.contact td select {
    text-align:left;
    font-size:9pt;
    padding:6px;
  }

  .table {
    -moz-border-radius: 6px;
    border-radius: 6px;
    border:1px solid #443333;
    background: #ffffff;
    min-width: 300px;
  }
  table.login input {
    font-size:12pt;
    padding:6px;
    font-weight:normal;
    border:0px;
    background-color: #ffddcc;
  }

  table.login td {
    font-size:12pt;
    padding:6px 6px 2px 2px;
    font-weight:bold;
  }

  tr.strl td {
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }

  .trth, .trth td {
    background-color: #006600;
    color: #ffffff;
    font-size:12pt;
    font-family: 'LeelawadeeRegular',Verdana,Tahoma,Helvetica,sans-serif;
    font-weight:bold;
    padding: 4px;
  }

  .th {
    background-color: #006600;
    color: #ffffff;
    font-size:11pt;
    font-family: Verdana,Tahoma,Helvetica,sans-serif;
    /* font-weight:bold; */
    padding: 4px;
  }

  .th a {
    color: #ffffff;
    text-decoration:none;
  }
   
  .td {
    background-color: #ffffff;
    color: #444444;
    padding:6px;
    font-family: Verdana,Tahoma,Helvetica,sans-serif;
  }

  .tru {
    color: #444444;
    padding:4px;
    text-align: center;
    font-family: Verdana,Tahoma,Helvetica,sans-serif;
  }

  a.plusb {
    border:2px solid #222222;  
    background-color: #008800;
    font-family:Monospace;
    cursor:pointer;
    outline-offset:2px;
    color: white;
    width:14px;
    height:6px;
    padding: 1px 7px 1px 7px;
    text-decoration:none;
    border-radius:12px;
    font-weight:bold;
    font-size:13pt;
  }
  a.plusb:hover {
    background-color: #00aa00;
  }

  a.ubutton {
    border:2px solid #222222;  
    background-color: #008800;
    cursor:pointer;
    outline-offset:2px;
    color: white;
    width:86px;
    height:9px;
    padding: 2px 7px 2px 7px;
    text-decoration:none;
    border-radius:12px;
    font-size:11pt;
  }
  a.ubutton:hover {
    background-color: #00aa00;
  }

  a.anclang {
    text-decoration:none;
    icon:pointer;
    font-weight:bold;
    color:#444444;
  }

  a.anclang:hover {
    color:#229922;
  }

  .selopt {
    padding:6px;
    margin:4px;
  }

  #optStatus option[value="0"] {
    background-color:#886600;
    color:#ffffff;
  }
  #optStatus option[value="1"] {
    background: #006600;
    color: #eeeeee;
  }
  #optStatus option[value="2"] {
    background-color:#009900;
    color:#ffffff;
  }
  #optStatus option[value="3"] {
    background-color:#442200;
    color:#ffffff;
  }

  td.strl {
    padding:4px;
    font-family: 'Verdana',sans-serif;
    font-size: 8pt;
  }
  tr.strl {
    background-color: #ffffff;
    color: #444444;
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  tr.strl:hover > td {
    background-color: #Ffffbb;
    color: #000000;
    padding:4px;
    border-bottom: 1px solid #dddd33;
    border-right: 1px solid #dddd33;
  }
  tr.strl td {
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  td.trl {
    padding:4px;
    font-family: 'Verdana',sans-serif;
  }
  tr.trl {
    background-color: #ffffff;
    color: #444444;
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  tr.trl:hover > td {
    background-color: #Ffffbb;
    color: #000000;
    padding:4px;
    border-bottom: 1px solid #dddd33;
    border-right: 1px solid #dddd33;
  }
  tr.trl td {
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  /* Rojos */
  tr.trlred {
    background-color: #ffcccc;
    color: #444444;
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  tr.trlred > td {
    background-color: #ffcccc;
    color: #444444;
    padding:4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  tr.trlred:hover > td {
    background-color: #ffccaa;
    color: #000000;
    padding:4px;
    border-bottom: 1px solid #dd9933;
    border-right: 1px solid #dd9933;
  }

  .menu{
      height: 32px;
      font-family: Verdana,Helvetica,sans-serif;
      font-size:10pt;
      min-width:680px;
      width:auto;
      border:1px solid #000000;
      color:#ffffff;
      background-color:#006600;
      text-align:left;
  }
  .menu li{
      list-style: none;
      display: block;
      float: left;
      font-size:10pt;
      height: 30px;
      position: relative;
      text-shadow:2px 2px #000000;
  }
  .menu li a {
      padding: 0px 5px 0px 10px;
      margin: 0px 0;
      line-height:26px;
      font-family: Verdana,Helvetica,sans-serif;
      height: 30px;
      font-size:10pt;
      /* font-weight:bold; */
      color: #ffffff;
      text-decoration:none;
      text-shadow:2px 2px #000000;
  }
  .menu li a:hover  {
      padding: 0px 5px 0px 10px;
      margin: 0px 0;
      height: 36px;
  }
  .menu ul{
      padding: 0px;
      width:160px;
      color:#ffffff;
      background-color:#006600;
  }
  .menu .site-name,.menu .site-name:hover {
      padding-left: 0px;
      padding-right: 10px;
      width: 160px;
  }
  .menu .site-name a {
      width: 148px;
      overflow:hidden;
  }
  .menu li a{
      width: 148px;
      display: block;
      text-decoration:none;
  }
  .menu ul li {
      border-right:none;
      width:160px;
      height:29px;
  }
  .menu ul li:hover {
      border-right:none;
      width:160px;
      height:29px;
      background-color:#228800;
      /* border-right: 1px solid #000000; */
  }
  .menu ul li:hover > a {
      color:#ffffff;
  }

  .menu ul li a {
      border-right: none;
  }

  /* Sub menus */
  .menu ul{
      display: none;
      visibility:hidden;
      position: absolute;
      top: 30px;
  }
  /* Third-level menus */
  .menu ul ul{
      top: 0px;
      left:158px;
      display: none;
      visibility:hidden;
      /* border-top: 2px solid ".BUTTONBG."; */
  }
  /* Fourth-level menus */
  .menu ul ul ul{
      top: 0px;
      left:158px;
      display: none;
      /*border-top: 2px solid ".BUTTONBG.";*/
      visibility:hidden;
  }
  .menu ul li{
      display: block;
      visibility:visible;
  }
  .menu li:hover > ul{
      display: block;
      visibility:visible;
  }

  #presupuesto ol li {
    line-height: 1.6;
  }

  .wa-message-us {
    display: inline-block;
    position: fixed;
    z-index: 2;
    bottom: 10px;
    right: 10px;
    transition: bottom .5s;
  }

  table.tservices tr td {
    padding:10px;
    width:300px;
    text-align:center;
    vertical-align:middle;
    line-height:1.8;
  }

  table.tservices tr td p {
    text-align:center;
  }

  .servtitle {
    font-family: "Yaldevi", Tahoma, sans-serif;
    font-size:14pt;
    font-weight:bold;
  }

  .cal {
    font-size: 9pt;
    border: 2px solid #777777;
    border-radius:6px;
    background-color:#999999;
    margin:2px;
    cursor: normal;
  }
  .cal td {
    padding: 2px;
    text-align:center;
    background-color:#ffffff;
    cursor: pointer;
  }
  .cal td input[type=checkbox] {
    border-radius:4px;
    transition: box-shadow .3s;
    background: lightgreen;
    cursor: pointer;
  } 
  .cal td input[type=checkbox]:checked {
    box-shadow: inset 0 0 0 30px green;
    cursor: pointer;
  } 
  .cal td.normal {
    border: 1px solid #dddddd;
    padding: 2px;
    text-align:center;
    border-radius:4px;
  }
  .cal td.normal:hover {
    background-color:#eeeeee;
    border: 1px solid #222222;
  }
  .cal td.normald {
    border: 1px solid #eeeedd;
    background-color: #ffff99;
    color: #000000;
    text-shadow: 1px 1px #999999;
    padding: 2px;
    text-align:center;
    border-radius:4px;
  }
  .cal td.tdselected {
    border: 1px solid #aabb55;
    background-color:#aacc55;
    text-align:center;
    padding: 2px;
  }
  .cal td.tdselected:hover {
    background-color:#bbdd77;
  }
  .cal td.tdclosed {
    background-color:#bb9922;
    padding: 2px;
  }
  .cal td.tdclosed:hover {
    background-color:#ccaa33;
  }
  .cal td.tdfull {
    background-color:#ffaaaa;
    color:#000000;
    padding: 2px;
  }
  .cal td.tdfull:hover {
    background-color:#ffcccc;
  }

  .cal td.tdoccu {
    background-color:#99ff99;
    color:#000000;
    padding: 2px;
  }
  .cal td.tdoccu:hover {
    background-color:#bbffbb;
  }

  .cal td.tdnon {
    background-color:#999999;
    border:none;
    /* border:1px solid #dddddd; */
  }
  .cal td.tdtitleright {
    font-weight:bold;
    padding:4px 6px 4px 6px;
    text-align:left;
    border:1px solid #dddddd;
    border-radius:0px 6px 6px 0px;
  }
  .cal td.tdtitleleft {
    font-weight:bold;
    padding:4px 6px 4px 6px;
    text-align:left;
    border:1px solid #dddddd;
    border-radius:6px 0px 0px 6px;
  }

  /* Tooltip container */
  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    display:block;
    opacity: 0;
    transition: opacity 1s;
    background-color: darkgreen;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 12px 12px 12px 0px; 
    box-shadow: #222222 3px 3px;
    text-shadow: none;
    font-size:10pt;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    top: -45px;
    left: 21px;
    z-index: 1;
  }
  
  .tooltip .tooltiptextdisabled {
    visibility: hidden;
    width: 220px;
    display:block;
    opacity: 0;
    transition: opacity 1s;
    background-color: #cccc00;
    color: #000;
    text-align: center;
    padding: 5px 0;
    border-radius: 12px 12px 12px 0px; 
    box-shadow: #222222 3px 3px;
    text-shadow: none;
    font-size:10pt;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    top: -65px;
    left: 21px;
    z-index: 1;
  }

  .tooltip .tooltiptextfull {
    visibility: hidden;
    width: 220px;
    display:block;
    opacity: 0;
    transition: opacity 1s;
    background-color: #ff7777;
    color: #000;
    text-align: center;
    padding: 5px 0;
    border-radius: 12px 12px 12px 0px; 
    box-shadow: #222222 3px 3px;
    text-shadow: none;
    font-size:10pt;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    top: -45px;
    left: 21px;
    z-index: 1;
  }

  .tooltip .tooltiptextoccu {
    visibility: hidden;
    width: 220px;
    display:block;
    opacity: 0;
    transition: opacity 1s;
    background-color: #44ff44;
    color: #000;
    text-align: center;
    padding: 5px 0;
    border-radius: 10px 10px 10px 0px; 
    box-shadow: #222222 3px 3px;
    text-shadow: none;
    font-size:10pt;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    top: -45px;
    left: 21px;
    z-index: 1;
  }

  .tooltip:hover .tooltiptext, .tooltip:hover .tooltiptextdisabled, .tooltip:hover .tooltiptextfull, .tooltip:hover .tooltiptextoccu {
    opacity: 1;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .tooltip:hover .tooltiptextdisabled {
    visibility: visible;
  }
  .tooltip:hover .tooltiptextfull {
    visibility: visible;
  }
  .tooltip:hover .tooltiptextoccu {
    visibility: visible;
  }

  .disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }