/*TAB CONTENT STYLES*/
/* Style the tab */
.tab {
  overflow: hidden;
  /*border: 1px solid #F33F35;*/
  border-bottom: none;
  /*border-radius: 0.25rem;*/
  background-color: #171414;
  /*border-bottom-left-radius: 0;*/
  /*border-bottom-right-radius: 0;*/
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.6em 2em;
  margin-right: 0.2em;
  transition: 0.3s;
  font-size: 0.9em;
  color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ff5b52;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #F33F35;
}

/* Style the tab content */
.tabcontent {
  /*border-top-left-radius: 0;*/
  /*border-top-right-radius: 0;*/
  display: none;
  padding: 1.5em 1.5em;
  /*border: 1px solid #F33F35;*/
  border-top: none;
  background-color: #211e1e;
}
.tabcontent p {
  margin: 0.5em 0em;
}
.tabcontent h3 {
  margin: 0em 0em;
}
#tabMaster h2, #tabMaster h4, #tabMaster ul{
  margin: 0.2em 0em;
}
#tabMasterGuide h2 {
  margin: 0.2em 0em;
}











/*MODAL CONTENT*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  /*padding-top: 100px;  Location of the box */
  padding: 5em 0em;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(20, 20, 20, 0.3); /* Black w/ opacity */
}


/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  border-radius: 0.75rem;
}
@media only screen and (max-width: 600px) {
  .modal-content {
    margin: auto;
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    margin: 0em 0em;
    font-size: 0.7em;
  }
}
/*@media only screen and (min-width: 1000px) {
  .modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  border-radius: 0.75rem;
  }
}*/
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  line-height:1em;
  text-align: left;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}


/* The Close Button */
.close {
  position: relative;
  /*top: 15px;*/
  /*right: 35px;*/
  color: #f1f1f1;
  /*font-size: 2em !important;*/
  font-weight: bold;
  transition: 0.3s;
  float: right !important;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.close-daily {
  top: 15px !important;
  right: 35px !important;
  position: absolute !important;
  font-size: 2em;
}








/*# COLLASPIBLE*/
.collapsible {
  background-color: none;
  color: white;
  cursor: pointer;
  border: none;
  text-align: left;
  font-size: 0.85em;
  font-weight: 100;
  font-family: Roboto Light;
  padding-left: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.collapsibleEmpty {
  background-color: none;
  color: white;
  cursor: pointer;
  border: none;
  text-align: left;
  font-size: 0.85em;
  font-weight: 100;
  font-family: Roboto Light;
  padding-left: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.collapsibleEmpty:hover {
  background-color: #FF3D3D;
  padding: 7px;
  width: 100%;
  color:  white;
  font-weight: normal !important;
}
.collapsibleEmpty:hover .spancircle {
  background-color: #171414;
}
.c-name {
  max-width: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}
.c-name a {
  white-space: nowrap;
}
.c-cnt {
  padding-top: 0.5em !important;
}
.c-info {
  font-size: 0.85em; 
  font-weight: 100;
  font-family: Roboto Light;
}
.activeCollapse, .collapsible:hover {
  background-color: #FF3D3D;
  padding: 7px;
  width: 100%;
  color:  white;
  font-weight: normal !important;
}
.collapsibleContent {
  color: #cfcfcf;
  font-size: 13px; 
  font-weight: 100;
  font-family: Roboto Light;
  display: none;
}


/*TABLE BOAT STYLE*/
/*containers*/
.modal-boats {
  width: 80%;
  background-color: #171414;
  /*padding: 1em 1.5em;*/
  /*padding-bottom: 5em;*/
  max-width: 65em !important;
}
.modal-boats h1 {
  margin: 0em 0em;
}
@media only screen and (max-width: 700px) {
  .modal-boats {width: 100% !important;}
}
.modal-boats a:hover {
  text-decoration: none;
}
.modal-boats .btn2 {
  background-color: #F33F35;
  color: white;
  padding: 0.3em 1em;
  border-radius: 0.2em;
}
.modal-boats .btn2:hover {
  font-weight: normal !important;
  -webkit-box-shadow:inset 0px 0px 0px 1px white;
  -moz-box-shadow:inset 0px 0px 0px 1px white;
  box-shadow:inset 0px 0px 0px 1px white;
}
#tabGbots {
  padding: 1em 1em 3em !important;

}
#tabRbots {
  padding: 1em 1em 3em !important;

}
.boat-container {
  
  
}

/*tabless*/ 
.myTable {
  color: whitesmoke;
  border-collapse: collapse;
  font-family: Roboto Th;
  border-collapse: collapse;
  width: 100%;
  background-color: #211E1E;
  transition: 0.3s;
  table-layout:fixed;
  padding: 0em 3em;
 }
 @media only screen and (max-width: 700px) { 
  .c-info {
    font-size: 0.8em !important;
  }
  .btn2 {
    font-size: 0.8em;

  }

}
 @media only screen and (max-width: 500px) {
  .collapsible {
    font-size: 0.8em !important;
  }
  .c-info {
    font-size: 0.5em !important;
  }
  .btn2 {
    font-size: 0.3em !important;
     padding: 2em 1em !important;
  }
  .myTable th {
    font-size: 0.5em;
  }
  .myTable_paginate {
    font-size: 0.5em;
  }
  .myTable_info {
    font-size: 0.8em;
  }
}

.myTable td, .myTable th {
  text-align: left;
  padding: 5px;
  width: -moz-fit-content;
  width: fit-content;
}
.myTable th {
  background-color: #171414;
}
.myTable tr:nth-child(even) {
  background-color: #171414;
}
.myTable tr:hover {
  border-radius: 3px;
  -webkit-box-shadow:inset 0px 0px 0px 1px #ff3d3d;
  -moz-box-shadow:inset 0px 0px 0px 1px #ff3d3d;
  box-shadow:inset 0px 0px 0px 1px #ff3d3d;
}
.myTable th:hover {
  border-radius: 0;
  border: none;
  cursor: pointer;
}
.dataTables_filter label input {
  background-image: url('./img/search3.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  transition: 0.5s;
  border: none;
}
.dataTables_filter label input:focus{
  outline: none;
  -webkit-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  -moz-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
 }
.dataTables_filter label input:hover {
  -webkit-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  -moz-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
}


/*BUTTONS*/
.btn2 {
  word-wrap: break-word;
  width: 100% !important;
}
.svgbtn {
  display: inline-block;
  border: none;
  padding: 0.7em 0.7em;
  transition: 0.8s;
  background-size: cover;
  background-image: url("./img/feedback.svg");
  top: 0;
}
.svgbtn:hover {
  cursor: pointer !important;
  background-image: url("./img/feedbackhover.svg");
  stroke: white;stroke-width: 2px;stroke-dasharray: 2,2;cursor: pointer;
}
.current {
  background-color: #F33F35;
}
.paginate_button{
  color: white;
  padding: 6px 6px;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 1em;
  font-family: Roboto Th;
  transition: 0.3s;
  border-bottom: 1px solid white;
}
.paginate_button:hover {
  background-color: #FF3D3D;
  border-bottom: none;
}
.dataTables_paginate {
  margin: 10px;
}
.myTable_length {
  float: left;
  margin-bottom: 10px;
}
.myTable_length select {
  width: 50px;
  font-family: "Roboto Condensed Light";
  border-radius: 0.2rem;
  outline: none;
}

.dataTables_info {
  margin-top: 10px;
  font-family: Roboto Th;
  float: left;
}
#gTable_paginate, #rTable_paginate {
  float: right !important;
  font-size: 0.8em; 
}
.spancircle {
  background-color: #F33F35;
  border-radius: 1em;
  padding: 0.2em 0.5em;
  font-size: 0.7em;
}
.spancircle2 {
  background-color: #F33F35;
  border-radius: 1em;
  padding: 0.2em 0.5em;
  font-size: 0.7em;
  color: white;
  font-weight: normal;
}
a:hover .spancircle2 {
  font-weight: normal !important;
}




/*# IMAGE*/
#img01 {
  /*width: auto;*/
  /*height: 100%;*/
  /*float: left;*/
}
#modalDaily .modal-content {
  width: 80%;
}
#tabGift p {
  margin: 0.4em 0em;
}
 @media only screen and (max-width: 800px) {
  #img01 {
    width: 100%;
    height: auto;
  }
  #modalDaily .modal-content {
    width: 100%;
  }
}
.modal-mini {
  padding: 3em 3em !important;
}







/*# FEEDBACK STYLE*/
#fname {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  background-color: #171414;
  color: white;
  font-family: "Roboto Condensed Light" !important;
}
#bname {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  background-color: #171414;
  color: white;
  font-family: "Roboto Condensed Light" !important;
}
#feedbackarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  background-color: #171414;
  color: white;
  font-family: "Roboto Condensed Light" !important;
}


#feedbackarea:focus, #bname:focus, #fname:focus {
  border: none;
  outline: none;
  -webkit-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  -moz-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
}
.form-a-submit {
  background-color: #F33F35;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center !important;
  display: block !important;
  -webkit-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  -moz-box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  box-shadow:inset 0px 0px 0px 1.5px #FF3D3D;
  width: 100%;
}

input[type=submit]:hover {
  background-color: #F33F35;
}

.container {
  border-radius: 5px;
  background-color: #211E1E;
  padding: 20px;
}





/*# RATING*/
.rating {
  display: inline-block;
  position: relative;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
}
.rating label {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  cursor: pointer;
}
.rating label:last-child {
  position: static;
}
.rating label:nth-child(1) {
  z-index: 5;
}
.rating label:nth-child(2) {
  z-index: 4;
}
.rating label:nth-child(3) {
  z-index: 3;
}
.rating label:nth-child(4) {
  z-index: 2;
}
.rating label:nth-child(5) {
  z-index: 1;
}
.rating label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.rating label .icon {
  float: left;
  color: transparent;
  font-size: 1em;
}
.rating label:last-child .icon {
  color: #171414;
}
.rating:not(:hover) label input:checked ~ .icon,
.rating:hover label:hover input ~ .icon {
  color: #F33F35;
}
.rating label input:focus:not(:checked) ~ .icon:last-child {
  color: #000;
  text-shadow: 0 0 5px #09f;
}