/*
    File Name       : dcs_styles.css
    Description     : DCS content specific styles
    Author          : Eranga Tennakoon - GQCD86 
    Release Notes   :
        05/12/2024 - Tab controls added for code segments (Objective C and Swift for iOS SDK)
*/

/*
    Common table style for all the content
*/

table.hovertable {
    /*font-family: verdana,arial,sans-serif;
    font-size:11px;*/
    color:#333333;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
}

table.hovertable th {
    background-color:#d1d4d5;
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #000000;
    text-align: center;
}

table.hovertable tr {
    /*background-color:#d4e3e5;*/
}

table.hovertable td {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #000000;
    vertical-align: top;
}

table.tbl_mini {
    /*font-family: verdana,arial,sans-serif;
    font-size:11px;*/
    color:#333333;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
}

table.tbl_mini th {
    background-color:#d1d4d5;
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #000000;
    text-align: left;
}

table.tbl_mini tr {
    /*background-color:#d4e3e5;*/
}

table.tbl_mini td {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #000000;
    vertical-align: top;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
    Arrange the support scanners list in two columns for a clear visibility.
    IE not supporting (avoiding JSs) and list in a single column.
*/
ul#scanners_list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.tile-img {
    height: 200px;
    border: 2px solid #2A95BE;
    border-radius: 10px;
    background-size: cover;
    -ms-behavior: url(/backgroundsize.min.htc);
    /* max-width: 1200px;*/
}

.tile-title {
    border-bottom: #000000;
}

.tile-description {
    height: 70px;
    overflow: hidden;
    margin-bottom: 5px;
}

.tile-background {
    margin-bottom: 12px;
    padding: 13px;
    background: #eeeeee;
    border: 2px solid #eeeeee;
    transition: border-color 400ms;
    -webkit-transition: border-color 400ms;
    height: 420px;
}

.msg_warning {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    margin: 1.5rem !important; 
    padding: 15px;
    border-radius: 5px; 
    box-sizing: border-box;
    border: 1px solid #cccccc;
}

.msg_info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #f5c2c7;
    margin: 1.5rem !important; 
    padding: 15px;
    border-radius: 5px; 
    box-sizing: border-box;
    border: 1px solid #cccccc;
}

/*
    Following sections defines the styles in tab pages.
*/

/* Style tab links */
.tablink {
    background-color: white;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    /*width: 25%;
    border: 2px solid #eeeeee;*/
  }
  
  .tablink:hover {
    background-color: white;
    border-bottom: 2px solid #777;
  }
  
  /* Style the tab content (and add height:100% for full page content) */
  .tabcontent {
    /*color: white;*/
    display: none;
    padding: 0px 20px;
    height: 100%;
  }

  .container_sections{
    /*padding-left: 225px;*/
    /*margin: 0px;
  position: absolute;
  top: 22%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
  width: 50%;
  margin: 0 auto;
  }
  
  #tab_windows {}
  #tab_linux {}
  #tab_android {}
  #tab_ios {}

  #sections_inner {
    width:100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
  }

  #sections_outer {

  }

  .verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform-origin:50% 50%;
    transform: rotate(90deg);

}
.verticalTableHeader:before {
    content:'';
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
.important_text {
    font-family: Consolas,monaco,monospace;
    /* font-size: .875rem; */
    color: #f0506e;
    white-space: nowrap;
    padding: 2px 6px;
}

/*
    Following section defines the styles for tab controls for multiple code segments.
*/

.tab-container {
    margin-bottom: 20px;
}
.tab-header {
    display: flex;
}
.tab {
    cursor: pointer;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s;
    font-weight: bold;
}
.tab.active {
    background-color: #000;
    color: #fff;
}
.tab-content {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 0 5px 5px 5px;
    display: none;
    /*background-color: #ccc;*/
}
.tab-content.active {
    display: block;
}

/*
    Following section defined the styles of the 'Copy' and 'Download' options/buttons of code snippets.
*/

.code-container {
    position: relative;
    border-radius: 5px;
}

.button {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: #f8f8f2;
    color: #000000;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.copy-button {
    top: 10px;
    margin-right: 35px;
}

.copy-button:hover {
    /* background-color: #000000;
    color: #ffffff; */
}

.download-button {
    right: 10px;
    top: 10px;
}

.button img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

/*
    Following section defines the styles for page redirect text.
*/
.redirect-container {
   transform: translate(-50%, -50%); /* Shift back by half its size for true centering */
   text-align: center; /* Center text inside the div */
   padding: 20px;
   background-color: #ffffff;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   margin-left: 50%;
   margin-top: 15%;
}
.redirect-container p {
   font-size: 15px;
   margin: 10px 0;
   color: #333;
}
.redirect-container a {
   color: #0066cc;
   text-decoration: none;
}
.redirect-container a:hover {
   text-decoration: underline;
}

/*
    Following section defines the styles to format individual columns of tables.
*/

/*
    Path - iot-connector/about/
    Columns - Windows, Linux
*/
.tblCentered-IoT-COM tr th:nth-child(2), 
.tblCentered-IoT-COM tr td:nth-child(2),
.tblCentered-IoT-COM tr th:nth-child(3),
.tblCentered-IoT-COM tr td:nth-child(3) {
    text-align: center;
}

/*
    Path    - maui/getting-started/
    Table   - No 4
    Columns - Attribute Values
*/
.tblCentered-Battery-Stats tr th:nth-child(2), 
.tblCentered-Battery-Stats tr td:nth-child(2) {
    text-align: center;
}

/*
    Path    - datawedge-windows/about/
    Table   - No 1
    Columns - Windows Support
*/
.tblCentered-DWS-COM tr th:nth-child(2), 
.tblCentered-DWS-COM tr td:nth-child(2) {
    text-align: center;
}

.tblCentered-ADF tr td:nth-child(3),
.tblCentered-ADF tr td:nth-child(4),
.tblCentered-ADF tr td:nth-child(5) {
    text-align: center;
}

/*.tblCentered-appendix-criteria tr td:nth-child(3),
.tblCentered-appendix-criteria tr td:nth-child(4) {
    text-align: center;
    width: 140px;
}*/

.tblCentered-appendix-criteria td.centered {
    text-align: center;
    width: 140px;
}


/*
    The following section defines the basic HTML tag formatting.
*/

.center-bold-italic {
  text-align: center;    /* Center horizontally */
  font-weight: bold;     /* Bold */
  font-style: italic;    /* Italic */
}