@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700");

      :root {
        --font: Montserrat;
        --alt-font: Montserrat;
        --accent-color: #6f1111;
        --secondary-color: #e46d1e;
        --link-color: #fc3c3c;
        --accent-highlight-color: #6f1111;
        --accent-highlight-background-color: #fce9e9;
        --accent-tinted-color-70: #d4b8b8;
        --accent-tinted-color-80: #e2cfcf;
        --accent-tinted-color-90: #f1e7e7;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #9b1818;
        --secondary-hover-color: #b95716;
        --secondary-contrast-color: #111;
        --link-hover-color: #fea0a0;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/9fae2ece-08e2-433f-a25c-dfcdaa2849cf/5nugu4hbr8yk-MicrosoftTeams-image.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/*---Pano Dashboard---*/
.panorama-dashboard .large-8.columns.text-right {display:none;}

.webinar__dates, .course__detail__runs {
  display:none!important;
}
.negative-margins {
  padding-top: 0px!important;
  margin-top: -50px!important;
}
.top-bar-section ul li>a {
  font-size: 14px!important;
}
/* Start - Correct "new Manager Interface Experience" container max size. TDE entered 04/15/2024*/
.max-w-\[768px\] {
    max-width: 100% !important;
}
/* home page dropdown menu on hover */
.has-dropdown ul li:hover {
        display: block!important;
    }
/* end of hover code */
.enroll--learning-path .course__detail__runs
{
  display:none;
}
.btn {
      border-radius: 20px!important;
}
/* page formatting classes */
.gray-back {
  background: #e7e7e7!important;
}
.red-back {
  background: #FF0B00!important;
  padding-bottom: 0px!important;
}
.bottom-pad {
  padding-bottom:50px!important;
}
.top-pad {
  padding-top:100px!important;
}
.padding-right {
  padding-right:30px!important;
}
.zero-top-padding {
  padding-top:0px!important;
}
.zero-bottom-padding {
  padding-bottom:0px!important;
}
.layout__content .hero {
    margin-bottom: 0rem;
}
.ember-view.row.widget.widget--title.widget--title_standard.ital.wid-title {
  margin-top: 0rem!important;
  margin-bottom: -2rem!important;
  padding-bottom:0rem!important;
  padding-top:0rem!important;
}
.ital {
  font-style:italic!important;
}
/* footer CSS */
.tg-7zrl {
  color:white!important;
}
.tg .tg-7zrl {
  background-color:black;
  border: none!important;
  border-width : 0!important;
}
.tg-bold {
  font-weight:700;
}
.footer__company__info {
  display:none!important;
}
/*CSS to Hide Testimonials*/ 
/* .sidebar__testimonial__rating{display: none !important;} */
/* .sidebar__testimonial textarea {display: none !important;} */
/* unbold "Already a member? Sign In" on redemption page */
#i18n-9, #i18n-10, #i18n-16, #i18n-17 {
  font-weight:400!important;
}
/* hide course image from course page */

.course__detail__asset {

  display:none!important;

}
/* remove link to catalog from "Fire Tech Productions" in header */
/*.company__beta-logo {
  pointer-events: none;   
}*/
/* added more space below course detail header on course page */
.course__detail__header {
  margin-bottom:50px!important;
}
/* accordion code for Onboarding Survey */
label[for="title1"], label[for="title2"], label[for="title3"] {
  display: block;    
	padding: 8px 22px;
  margin: 0 0 1px 0;
	cursor: pointer;
	background: #6F1111;
	border-radius: 3px;
	color: #FFF;
	transition: ease .5s;
	position: relative;
}
label[for="title1"]:hover, [for="title2"]:hover, label[for="title3"]:hover {
	background: grey;
}
label[for="title1"]::after, label[for="title2"]::after, label[for="title3"]::after {
    content: '+';
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 2px;
}

input:checked + label[for="title1"]::after, input:checked + label[for="title2"]::after, input:checked + label[for="title3"]::after {
    content: '-';
    right: 14px;
    top: 3px;
}
.onboard-content {
  background: #E2E5F6;
  padding: 10px 25px;
  border: 1px solid #A7A7A7;
	margin: 0 0 1px 0;
	border-radius: 3px;
}

input + .onboard-content {
	display: none;
}

input:checked + .onboard-content {
	display: block;
}

input[id="title1"], input[id="title2"], input[id="title3"] {
	display: none;
}

.footer a {
  color:white!important;
}

.footer a:hover {
  color:lightgray!important;
}
/* Callout box - fixed position at the bottom of the page */
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

/* Callout header */
.callout-header {
  padding: 25px 35px;
  background: #ffffff;
  font-size: 30px;
  color: #6f1111;
}

/* Callout image */
.callout img

/* Callout container/body */
.callout-container {
  padding: 35px;
  background-color: #f0f0f0;
  color: #000000
}

/* Close button */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: #000000;
  font-size: 30px;
  cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
  color: lightgrey;
}

.callout-container .learn-more-button {
  background-color: #6f1111;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* website button - solid color */
button1 {
  --color: #6F1111;
  font-family: inherit;
  display: inline-block;
  width: 6em;
  height: 2.6em;
  line-height: 2.5em;
  overflow: hidden;
  cursor: pointer;
  margin: 20px;
  font-size: 17px;
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 6px;
  position: relative;
}

button1::before {
  position: absolute;
  content: "";
  background: var(--color);
  width: 150px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
}

button1:hover {
  color: white;
}

button1:before {
  top: 100%;
  left: 100%;
  transition: 0.3s all;
}

button1:hover::before {
  top: -30px;
  left: -30px;
}

/* website button - white */
button2 {
  --color: #6F1111;
  font-family: inherit;
  display: inline-block;
  width: 6em;
  height: 2.6em;
  line-height: 2.5em;
  overflow: hidden;
  cursor: pointer;
  margin: 20px;
  font-size: 17px;
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 6px;
  position: relative;
}

button2::before {
  position: absolute;
  content: "";
  background: var(--color);
  width: 150px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
}

button2:hover {
  color: white;
}

button2:before {
  top: 100%;
  left: 100%;
  transition: 0.3s all;
}

button2:hover::before {
  top: -30px;
  left: -30px;
}
/* Maximize Manager User container full screen. added by TDE 5.07.24 */
.manager .section-container {   
max-width
:
1298
px;   
margin-left
: auto;   
margin-right
: auto; }.flex-table__col--tooltip {   
white-space
: normal;}.tag-pill {   
display
: inline-block;
/* or display: block; *//* Optionally, you can also set a maximum width or width to control the wrapping behavior */
max-width
:
100
%;}
/* width: 100%; */
}.user-table__container {   
display
: word-wrap; }.flex-table__col .flex-table__col__wrapper {   
/* Allow the content to wrap */
white-space
: normal;   
/* Expand the height of the row to fit the content */
display
: inline-block;   
/* Optionally, you can also set a maximum width or width to control the wrapping behavior *//* max-width: 100%; *//* width: 100%; */
}.flex-box {   
display
: flex;}

/* Combined Card Styles */
:root {
  --title-font-size: clamp(10px, 1.4vw, 36px); 
  --description-font-size: clamp(8px, 1.1vw, 24px);
}

.card {
  position: relative;
  width: calc(100% + var(--title-font-size)); /* Adjust width based on font size */
  max-width: calc(600px + var(--title-font-size)); /* Set maximum width based on font size */
  height: auto; /* Let height adjust based on content */
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  perspective: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color, #1f1f1f69); /* Add border with color variable */
  margin: 0 auto; /* Center horizontally */
}

.card:hover {
  transform: scale(1.0);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-color: #00000038;
  color: #ffffff;
}

.card__content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%) rotateX(-90deg);
  width: 100%;
  height: 110%;
  padding-top: 10%; /* Adjust padding as needed */
  padding-left: 10%;
  padding-right: 10%;
  box-sizing: border-box;
  background-color: rgb(28, 28, 28);
  transform-origin: center;
  transition: all 0.3s cubic-bezier(0.5, 1, 0.5, 1);
  opacity: 0;
}

.card:hover .card__content {
  transform: translate(-50%, -100%) rotateX(0deg);
  opacity: 1;
}

.card__title {
  margin: 0;
  font-size: var(--title-font-size); /* Use CSS variable for font size */
  color: rgb(255, 255, 255);
  font-weight: 700;
}

.card__description {
  margin: 2% 0 0; /* Adjust margin as needed */
  font-size: var(--description-font-size); /* Use CSS variable for font size */
  color: rgb(255, 255, 255);
  line-height: 1.2;
}

.card:hover svg {
  transform: scale(0);
}

/* Make the dropdown a block so the label sits above it */
#ember2847 select[aria-label="Shipping Method"] {
  display: block;
}

/* Preferred (modern browsers): add label to the <p> that contains the select */
#ember2847 .small-6.columns p:has(> select[aria-label="Shipping Method"])::before {
  content: "Choose Shipping:";
  display: block;
  font-weight: normal;
  color: #333;
  font-size: 15px;
  margin-bottom: 6px;
}

/* Fallback if :has() isn’t supported: target the 2nd column in this panel */
#ember2847 .small-6.columns:nth-of-type(2) p::before {
  content: "Choose Shipping:";
  display: block;
  font-weight: normal;
  color: #333;
  font-size: 15px;
  margin-bottom: 6px;
}

}