/* ==============================
   GENERAL STYLES
   ============================== */

/* Removes focus outline for all elements */
*:focus {
    outline: none;
}

/* Apply outline only for elements focused via keyboard */
*:focus-visible {
    outline: 2px solid lightgray;
}

/* Prevents text decoration when hovering over certain links */
a.hover-no-underline:hover {
    text-decoration: none;
}

/* Sets a specific font style for elements with 'focusedText' class */
.focusedText {
    font-family: Helvetica, Arial, sans-serif;
}

.grid-actions{
    padding-bottom: 0;
}

#pc_title{
    margin: 10px 0 20px 0;
}

/* Customizes font and alignment for elements with the 'my_pcn' ID */
#my_pcn {
    font-family: 'Roboto Slab', 'Impact', 'Arial Black', sans-serif;
    text-align: right;
    margin-right: 15px;
}

/* Removes top and bottom margins for <h3> elements inside '.table_label' class */
.table_label h3 {
    margin-top: 0;
    margin-bottom: 0;
}

/* Removes the border for '.row' class elements inside '.prod-reg-container' */
.prod-reg-container .row {
    border: none;
}

/* Removes the bottom border for elements with 'section-title' class inside a 'legend' tag */
legend.section-title {
    border-bottom: none;
}

/* ==============================
   FOOTER STYLES
   ============================== */

/* Overrides default bootstrap class to remove padding from footer */
.footer-bottom {
    padding: 0;
}

/* Changes the footer's position to relative and adjusts its padding and background */
.flk-fixed-footer {
    position: relative;
    padding: 20px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e0e0e0 !important;
}

/* ==============================
   CONTAINER STYLES
   ============================== */

/* Sets min height for various containers to ensure footer sticks to the bottom */
.min-height-container {
    min-height: 100%;
    min-height: calc(100vh - 123px);
    margin-bottom: 15px;
}

/* Set the min heigh on the search results page */
#ContentContainer_MainContent_SearchResults {
    min-height: 100%;
    min-height: calc(100vh - 123px);
}

/* Container for en-US/my-products/activate-premium-care/, which I can't find the correct template */
.container div#mainContent{
    min-height: 100%;
    min-height: calc(100vh - 123px);
}

/* ==============================
   PAGINATION STYLES
   ============================== */

/* General styling for pagination links */
.pagination li a {
    border: 1px solid #e5ad00;
    padding: 5px 10px;
    border-radius: 0;
    margin: 0 2px;
    transition: background-color 0.3s;
}

/* Styling for active/hover states of pagination links */
.pagination li.active a, 
.pagination li a:hover {
    background-color: #ffc20e;
    border-color: #ffc20e;
    color: #22221E;
}

/* Styling for disabled pagination links */
.pagination li.disabled a {
    pointer-events: none;
    cursor: default;
}

/* Further pagination styling for active states within certain containers */
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > a,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > a:focus,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > a:hover {
    background-color: #ffc20e !important;
    border-color: #ffc20e !important;
    color: #22221E;
}

/* Overrides for border radius of pagination links */
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > a,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > a:hover,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > a:focus,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > span,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > span:hover,
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > .active > span:focus {
    border-radius: 0 !important;
}

/* Hides disabled pagination items */
.pagination > li.disabled {
    display: none !important;
}

/* Flexbox styling for centering content inside pagination links */
.container.min-height-container .view-pagination .jquery-bootstrap-pagination .pagination > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}

/* Styling for individual numbered page links in a fixed table pagination context */
.fixed-table-pagination .pagination .page-item a.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}
.fixed-table-pagination{
    padding-top: 15px;
}

/* Styling for search result pagination, using a different syntax */
#ContentContainer_MainContent_SearchResults .pagination li.active a, 
#ContentContainer_MainContent_SearchResults .pagination li a:hover {
    background-color: #ffc20e !important;
    border-color: #ffc20e !important;
    color: #22221E !important;
}

/* Styling for active pagination links, including border color and style */
.pagination>.active>a, .pagination>.active>a:hover, .pagination>.active>a:focus, .pagination>.active>span, .pagination>.active>span:hover, .pagination>.active>span:focus {
    border-color: #ffc20e !important;
    border-radius: 0;
    border: solid 1px;
}

/* Styling for active pagination links, including background color and margin adjustments */
.pagination>.active>a, .pagination>.active>a:hover, .pagination>.active>a:focus, .pagination>.active>span, .pagination>.active>span:hover, .pagination>.active>span:focus {
    background-color: #ffc20e !important;
    margin-left: 2px;
}

/*Styling for Pagination Alignment*/
 .pagination{
   display:flex;
 }

/* ==============================
   MODAL STYLES
   ============================== */

/* Styling for modals */
.modal {
    text-align: center;
    padding: 0!important;
}

/* Creates a pseudo-element for vertical alignment in the modal */
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px; /* Adjusts margin to align correctly */
}

/* Styles for the modal dialog box, making it inline and vertically aligned */
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

/* Additional styling for the modal content, including border appearance */
.modal-content {
    border-radius: 5px; /* Rounded corners for the modal */
    border-color: transparent; /* Transparent border */
}


/* ==============================
   TABLE STYLES
   ============================== */

/* Table for support requests https://fluke-techsupport.powerappsportals.com/en-US/support/ */
tr[data-entity="incident"] td {
    vertical-align: middle !important;
}

/* Adjusts table cell to break words in cells with 'sort-enabled' class */
td.sort-enabled {
    word-break: break-word;
}
.prod-reg-container td {
    word-break: break-word; /* Applies word breaking to all td elements within '.prod-reg-container' */
}

/* Styles for the last child cell in a row with 'sort-enabled' class */
tr td.sort-enabled:last-child {
    border: none !important; /* Removes the border from the last td */
    text-align: justify;
    vertical-align: middle; /* For vertical alignment */
}
tr td.sort-enabled:last-child a{
    margin-right: 3%;
}

/* Adds borders to the top and bottom of each table row */
tr {
    border-top: 1px solid #ddd;    /* Adds top border to tr */
    border-bottom: 1px solid #ddd; /* Adds bottom border to tr */
}

.prod-reg-header-table {
    background-color: white;
}

/* Match support tables to the site's styling, with modifications */
.min-height-container table.table-striped {
    box-shadow: none;    
    border-width: 0px;
}
.min-height-container table.table-striped td {
    border: 1px solid #ddd; /* Sets border style for td elements in striped tables */
    border-width: 0px;
}
/* Prevent extra borders on pages like this https://fluke-techsupport.powerappsportals.com/en-US/view-support/?id=25e31986-21ac-ee11-92bd-000d3a311856
   TODO: We probably should remove all the borders from tables, and only add them to the ones that required it. There are lots of tables in tables in the app
*/  
.crmEntityFormView tr {
    border-top: none;    /* Adds top border to tr */
    border-bottom: none; /* Adds bottom border to tr */
}

/* ==============================
   CARD STYLES
   ============================== */

/* General card style with padding and shadow */
.flk-card-1 {
    padding: 10px 10px 15px 48px;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

/* Another card style with different padding and shadow */
.flk-card-2 {
    padding: 20px;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

.flk-card-2 h3 {
    margin: 10px 20px;
}

/* Adjustments for cards on smaller screens */
@media (max-width: 767px) {
    .flk-card-1 {
        padding: 10px 10px 5px 15px;
    }
}

@media screen and (max-width: 991px) {
    .flk-card-1 {
        padding: 10px 10px 5px 20px;
    }
}

/* ==============================
   BACKGROUND COLORS
   ============================== */

.whitebk {
    background-color: #FFF;
}

.graybk {
    background-color: #DDD;
}

/* ==============================
   SIGN IN BUTTON STYLES
   ============================== */

/* Styles for user sign-in elements, setting background color, border radius, and transition effect */
.user-sign-in {
    background-color: #336699; /* Dark blue background */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
}

/* Styles for hover state of user sign-in links in the navigation menu */
nav.menu-bar .nav.navbar-nav.weblinks li a.user-sign-in:hover {
    color: white; /* Changes text color to white on hover */
    background-color: #003b78; /* Changes background color to a darker blue on hover */
}

/* ==============================
   POP ANIMATION STYLES
   ============================== */

/* Styles for elements with pop-animation class, including shadow and transition effects */
.pop-animation {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5); /* Initial box shadow */
    transition: 0.3s; /* Transition effect for properties like box-shadow */
    border-radius: 5px; /* Rounded corners */
}

/* Minimum height styling for elements with pop-animation-description class */
.pop-animation-description {
    min-height: 40px; /* Ensures a minimum height */
}

/* Hover effect for elements with pop-animation class, enhancing the box-shadow */
.pop-animation:hover {
    cursor: pointer; /* Changes cursor to pointer to indicate clickability */
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.7); /* Darker and larger box-shadow on hover */
}

/* Styling for form select elements, including font, padding, border, and custom dropdown arrow */
.form-select {
    font-family: Arial, sans-serif; /* Sets the font */
    padding: 8px 12px; /* Sets padding inside the select box */
    border: 1px solid #ccc; /* Defines the border */
    border-radius: 4px; /* Rounded corners for the border */
    appearance: none; /* Removes default browser styling */
    background-color: #f9f9f9; /* Background color */
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>'); /* Custom dropdown arrow */
    background-repeat: no-repeat; /* Ensures the background image doesn't repeat */
    background-position: right 10px center; /* Positions the dropdown arrow */
    background-size: 12px; /* Size of the dropdown arrow */
    transition: background-color 0.3s; /* Smooth transition for background color */
    width: 255px; /* Set width */
}

/* Hover effect for form select elements */
.form-select:hover {
    background-color: #f0f0f0; /* Slightly changes background color on hover */
}

/* Focus effect for form select elements */
.form-select:focus {
    border-color: #007bff; /* Changes border color on focus */
    outline: none; /* Removes default focus outline */
}

/* Additional padding for elements with text-muted class */
.text-muted {
    padding-left: 10px; /* Adds padding to the left */
}

/* Styling for specific element with ID EntityFormControl_025ee5be0ebdeb118236000d3a33d510 */
#EntityFormControl_025ee5be0ebdeb118236000d3a33d510 .actions {
    padding: 0 5px 0 0; /* Padding adjustments */
}

/* Styles for the close button in MessagePanel */
#MessagePanel .close {
    background-color: transparent; /* Transparent background */
    position: absolute; /* Absolute positioning */
    right: 5px; /* Position from the right */
    font-size: 16px; /* Font size for the close icon */
}

/* Margin-top styling for MessagePanel */
#MessagePanel {
    margin-top: 15px; /* Adds a margin at the top */
}

/* Adjust the input border to be more consistent with fluke.com */
.entity-grid input{
    border:  1px solid #ccc;
}
/* Adding border to button because the input has one - without this the transition is jaring */
.entity-grid .btn-default{
    border: 1px solid #e4aa00; /* 1px solid #ccc */
}

/* ==============================
   Prod Reg
   ============================== */
/* Increases top margin of the '.wt-register-product' class to add space from the navigation */
.wt-register-product {
    margin-top: 5%;
    padding: 0;
}

/* Standardizes padding across different elements within '.wt-register-product' class */
.wt-register-product .graybk,
.wt-register-product .whitebk,
.wt-register-product .xrm-attribute-value {
    padding: 10px 10px 0px 48px;
}

/* Increases bottom margin for the H1 header in '.wt-register-product' */
.wt-register-product .header h1 {
    margin-bottom: 24px;
    /* Commented out padding rule */
}

/* Removes left padding for div elements with 'header col-md-6' class */
div.header.col-md-6 {
    padding-left: 0;
}

/* Removes top margin for h3 elements in detail section of '.wt-register-product .col-md-6' */
.wt-register-product .col-md-6 .detail h3 {
    margin-top: 0 !important;
}

/* Removes left padding and adds bottom padding to '.wt-register-product .col-md-6' */
.wt-register-product .col-md-6 {
    padding-left: 0 !important;
    padding-bottom: 5%;
}

/* Styling for right column, making it a flex container aligned to the bottom */
.right-column-pr {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

/* Flex styling for the left column, spreading content evenly */
.left-column-pr {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* Removes margin from paragraphs in '.select-eligible' */
.select-eligible p {
    margin: 0;
}

/* Adds bottom margin to the insert button in '.select-eligible' */
.select-eligible #InsertButton {
    margin-bottom: 50px;
}

/* Padding for '.prod-reg-complete' class */
.prod-reg-complete {
    padding: 10px 10px 10px 48px;
}

/* Margin adjustments for an error message in '.graybk' */
.graybk #div_activation_expired_or_used_error_message {
    margin: 20px 50px 50px 0px;
}

/* Padding adjustments for error message content within '.graybk' */
.graybk #div_activation_expired_or_used_error_message .xrm-attribute-value {
    padding: 10px;
}

/* Removes border radius from labels in '.non_interactive_activationcode' */
.non_interactive_activationcode .label {
    border-radius: 0;
}

/* Removes top margin and padding from specific labels */
label#txt_activation_code_label,
label#select_existing_registration_label,
label#eligibleModelSelect_label {
    margin-top: 0 !important;
    padding-top: 0;
}

/* Adds bottom padding to paragraphs with '.activation_already_registered' class */
p.activation_already_registered {
    padding-bottom: 15px;
}

/* ==============================
   ADDITIONAL STYLES
   ============================== */

/* On the Portal Support page (en-US/view-support), inline styles can be added with attachments. This can cause unexpected
   style issues. Adding !important to the ones I know of, but more can occur unless we fix styles being added
*/
a.addnote, span.fa-plus-circle {
    color: #211212 !important;
    text-decoration: none !important;
}
/* The same inline style was adding underlines to the main nav */
.navbar-static-top.navbar .menu-bar>.navbar-nav>li>a {
    text-decoration: none !important;
}

/*Fluke radio custom*/
.radio input {
    opacity: 0;
    position: absolute;
  }

  .radio label {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .radio .indicator {
    position: relative;
  }

  .radio .indicator:before {
    content: '';
    border: 2px solid #888;
    display: inline-block;
    vertical-align: middle;
    width: 23px;
    height: 23px;
    padding: 2px;
    margin-top: -5px;
    margin-right: 10px;
    text-align: center;
  }

  .radio input+.indicator:before {
    border-radius: 50%;
  }

  .radio input:checked+.indicator:before {
    border-color: #000000;
    background: #000000;
    box-shadow: inset 0px 0px 0px 5px #fff;
  }

  .radio input:disabled+.indicator:before {
    border-color: #ccc;
    box-shadow: inset 0px 0px 0px 5px #fff;
  }

  .radio input:checked:disabled+.indicator:before {
    border-color: #ccc;
    background: #ccc;
    box-shadow: inset 0px 0px 0px 5px #fff;
  }

  .radio input:focus+.indicator {
    outline: 0px solid #ddd;
    /* focus style */
  }

  .radio label {
    font-family: Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
  }
  /*End Fluke radio custom*/

  /*Common*/
  .panel{
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  }

  .panel-heading h3 {
    margin: 0 !important;
  }

  .panel-body h4,
  .panel-body h5 {
    font-family: Helvetica, sans-serif;
  }

  .row .page-title {
    margin: 0.8em 0.2em 0.8em 0.2em !important;
    padding: 0 !important;
  }

  #error-section .panel,
  #sug-error-section .panel
  {
    border-top: 5px solid #970213;
  }

  /*modal for loading*/
  .modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}


.parent {
    display: flex;
    justify-content: center;
    align-items: center;

}

.shapes-4 {
    width: 30px;
    height: 30px;
    display: grid;
}

.shapes-4:before,
.shapes-4:after {
    content: "";
    background: orange;
    transform-origin: left;
    animation: sp4 2s infinite;
}

.shapes-4:before {
    transform-origin: right;
    --s: -1;
}

@keyframes sp4 {

    0%,
    10% {
        transform: translate(0, 0) scale(1)
    }

    33% {
        transform: translate(calc(var(--s, 1)*50%), 0) scale(1)
    }

    66% {
        transform: translate(calc(var(--s, 1)*50%), calc(var(--s, 1)*-50%)) scale(1)
    }

    90%,
    100% {
        transform: translate(calc(var(--s, 1)*50%), calc(var(--s, 1)*-50%)) scale(0.5, 2)
    }
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  border-bottom: 4px solid #ddd;
  
 }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  border-bottom: 4px solid #ffc20e;
  font-family: Helvetica, Arial, sans-serif;
  color:black;
}

  /*End common*/