/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/


/**
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
**/

/***********************************************/
/*           Cable Compatibility Page           /
/***********************************************/


.cable-compatibility-hero {
  margin-top:100px;
  padding:80px;
 
}
.cable-compatibility-hero h1 {
  font-weight:100;
}


.cable-dropdown  {
  padding-left:70px;
 
}

/* Style the select element (dropdown) */
.cable-dropdown select {
  width: 200px !important; /* Set the width of the dropdown */
  padding: 10px !important; /* Add padding to improve visual appearance */
  margin-right: 20px;
  font-family: Arial, sans-serif; /* Set the font family */
  font-size: 16px; /* Set the font size */
  border: 1px solid #969ba2; /* Set the border color and style */
  background-color: #f2f2f2; /* Set the background color */
  color: #969ba2; /* Set the text color */
  text-transform: uppercase;
  height: auto !important;
}

.cable-dropdown select#purchase-year {
  width: 270px; /* Set the width of the dropdown */
}

.cable-dropdown select#intrinsically-safe {
  width: 250px; /* Set the width of the dropdown */
}

/* Style the dropdown arrow (if needed) */
.cable-dropdown select::-ms-expand {
  display: none; /* Hide the default arrow for IE */
}
.cable-dropdown select::-webkit-select {
  display: none; /* Hide the default arrow for WebKit browsers */
}

/* Style the dropdown options */
.cable-dropdown select option {
  font-family: "Helvatica", Arial, sans-serif; /* Set the font family for options */
  font-size: 16px; /* Set the font size for options */
  background-color: #FFF; /* Set the background color for options */
  color: #333; /* Set the text color for options */
}

/* Style the submit button */
.cable-dropdown button[type="submit"] {
  background-color: #002a55; /* Button background color */
  color: #fff; /* Text color */
  font-size: 16px; /* Font size */
  text-transform: uppercase;
  font-weight: normal;
  padding: 10px 20px; /* Padding to increase button size */
  border: none; /* Remove the default button border */
  border-radius: 0; /* Add rounded corners */
  cursor: pointer; /* Change the cursor on hover */

}

/* Style the submit button on hover */
.cable-dropdown button[type="submit"]:hover {
  color:FFF;
  background-color: #0455a7; /* Change background color on hover */
  padding: 10px 20px; /* Padding to increase button size */
}


a.custom-button {
	background: #002a55;
	color: #FFF;
	font: bold 14px "Helvetica";
	padding: 12px;
	text-decoration: none;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

a.custom-button:after {
	background: #002a55;
	color: #FFF;
  border: 1.5px solid #FFF;
	content: ">";
	display: inline-block;
	font: bold 20px "Comic Sans MS";
	height: 25px;
	line-height: 23px;
	margin-left: 10px;
	text-align: center;
	width: 25px;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

/*****************************
This was causing the issue with the weird hovering. 
Not sure what is was for, but we can comment it out 
until we figure out if it's needed somewhere else.
****************************/
/* 
a:hover {
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

*/

/**/

/* Style the button */
.custom-button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 16px;
}

/* Style the circular container */
.circle {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  color: #fff;
}

/* Style the arrow */
.arrow {
  font-size: 24px;
  line-height: 1;
  transform: translateY(-3px); /* Adjust vertical alignment */
}



.grid {
    max-width: 1400px;
    min-width: 1000px;
    margin: 0 auto;
}



h1, h2, h3, h4, p, ul { -webkit-margin-before:0; -webkit-margin-after:0; }
ul { -webkit-padding-start:0; }

a.primary-button, a.secondary-button { display:block; color:#ffffff; font-weight:600; letter-spacing:.025em; padding:7px 15px; border-radius:3px; }
a.primary-button { background:#59CB59; }
.secondary-button .icon { padding-right:10px; }
a.primary-button, a.secondary-button:hover {}


a.ondark { border:1px solid #ffffff; padding:9px 15px; }
a.ondark:hover { background:#ffffff; color:#2BB656; }


.profile-image { display:block; background:#D3D6D7; border-radius:3px; }
.profile-image.big { width:80px; height:80px; }
.profile-image.medium { width:60px; height:60px; }
.profile-image.small { width:40px; height:60px; }
.profile-image.xsmall { width:25px; height:25px; }


.icon.twitter { color:#55ACEE; }
.icon.facebook { color:#3B5998; }
.icon.instagram { color:#E4405F; }
.icon.linkedin { color:#0077B5; }
.icon.google-plus { color:#DD4B39; }
.network { position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; background:#364141; border-radius:3px; }





/* ==========================================================================
   Header
   ========================================================================== */
header {
  height:83px; 
  background:#364141;
  width: 100%;
}
.header-content { width:100%; overflow:hidden; }
.branding, .group-select { float:left; background:#273333; overflow:hidden; }
.group-select { background:#364141; border-right:3px solid #273333; }


.main-nav { float:left; height:80px; list-style:none; margin:0 0 0 30px; padding:0; overflow:hidden; }
.main-nav li { display:inline-block; height:80px; margin-right:30px; }
.main-nav li a { display:block; height:80px; color:#ffffff; font-weight:600; letter-spacing:.025em; text-decoration:none; line-height:80px; }
.main-nav li a:hover { color:#2BB656; }
.main-nav li a.active { color:#2BB656; }


.utility-nav { float:right; height:auto; list-style:none; margin:20px 30px 0 0; padding:0; overflow:hidden; }
.utility-nav li { display:inline-block; margin-left:20px; }
.utility-nav li a { display:block; text-decoration:none; color:#ffffff; }
.utility-nav li a:hover, ul.utility-nav .active { color:#2BB656; }


.search-icon { background: url('../img/search-icon.png') no-repeat; }
.add-team-member-icon { background: url('../img/add-team-member-icon.png') no-repeat; }
.add-profile-icon { background: url('../img/add-profile-icon.png') no-repeat; }
.notifications-icon { background: url('../img/notifications-icon.png') no-repeat; }
.compose-icon { background: url('../img/compose-icon.png') no-repeat; }





/* ==========================================================================
   layout
   ========================================================================== */

.intercom a.button { display:block; position:absolute; bottom:25px; right:20px; width:60px; height:60px; border-radius:60px; background:#1089ED; box-shadow: 0px 0px 15px 0px rgba(67,82,94,0.2); }


.sub-nav { float:left; clear:both; width:220px; height:500px;}
.content { float:left; width: calc(100% - 352px); min-width: 428px; overflow:hidden; border-left:1px solid #DDDDDC; border-right:1px solid #DDDDDC;}
.message-stream { box-sizing:border-box; height:500px; overflow-y:scroll;}
.sidebar { box-sizing:border-box; float:left; width:350px; height:500px; overflow-y:scroll; background:#F3F4F4; /*padding-right:100px;*/}
.filters-wrap { box-sizing:border-box; background:#ffffff; /*border-right:1px solid #DEE1E1;*/ }
.search-box { position:relative; height:60px; background:#ffffff; border-bottom:3px solid #DEE1E1; outline:0; }
.search-box .icon { position:absolute; top:20px; left:20px; display:block; text-indent:0; }
.search-box input { box-sizing:border-box; height:58px; line-height:40px; border:none; outline:0; padding-left:7%; width: 100%; }
.search-box input:focus { -webkit-box-shadow: 0px 3px 15px 0px rgba(54,65,65,0.5); -moz-box-shadow: 0px 3px 15px 0px rgba(54,65,65,0.5); box-shadow: 0px 3px 15px 0px rgba(54,65,65,0.5); }


.sub-nav ul { list-style:none; margin:30px 0 0 0; padding:0 0 0 10%; }
.sub-nav ul li { font-weight:500; letter-spacing:.025em; color:#B0B6B7; margin-bottom:15px; }
.sub-nav ul li a { font-weight:600; letter-spacing:.025em; color:#364141; text-decoration:none; }
.sub-nav ul li a:hover { color:#2BB656; }
.sub-nav ul li a.active { color:#2BB656; }


.message { border-bottom:1px solid #DEE1E1; }
.message-inner { margin:0 8%; padding:20px 0; overflow:hidden;}
.message-metadata { margin-bottom:10px; overflow:hidden; }
.message-metadata p { font-size:.813em; line-height:1.641; color:#B0B6B7; }
.message-metadata p.message-type { float:left; }
.message-metadata p.timestamp {float:right; }
.message-avatar { position:relative; float:left; width:60px; padding-top:4px; margin-right:20px; }
.message-body { float:left; width:85%; line-height: 1.3;}
.message-body a { font-weight:600; letter-spacing:0.025em; color:#0797AE; text-decoration:none; }
.message-body a:hover { text-decoration:underline; }
.name { font-size:1em; margin:0 0 8px 0; }
.name a { color:#364141; text-decoration:none; }
.name a:hover { text-decoration:none; }
.name span { font-size:1em; font-weight:400; color:#929A9B; }
.message-actions { float:right; list-style:none; margin-top:20px; overflow:hidden; }
.message-actions li { float:left; margin-right:25px; }
.message-actions li a { color:#C8CCCC; text-decoration:none; padding:5px; }
.message-actions li a:hover { color:#364141; }


.third { width:33.333%; }
.tabs { list-style:none; margin:0 10%; overflow:hidden; }
.tabs li { display:block; float:left; }
.tabs li a { display:block; color:#6E797A; text-align:center; text-decoration:none; border-bottom:1px solid #DEE1E1; padding:10px 0; }
.tabs li a.active { color:#162020; font-weight:600; letter-spacing:.025em; border-bottom:4px solid #162020; padding:10px 0 10px 0; }
.tabs li a:hover { color:#162020; font-weight:600; letter-spacing:.025em; padding-bottom:14px; }
.tabs li a.active:hover { padding-bottom:10px; }


.sidebar .chart { width:100%; border-bottom:3px solid #DEE1E1; padding-top:20px; }
.sidebar .chart img { width:100%; }
.sidebar .filter-section { border-bottom:1px solid #DEE1E1; overflow:hidden; }
.sidebar .filter-section a.inner { display:block; color:#364141; text-decoration:none; padding:15px 10%; overflow:hidden; }
.sidebar .filter-section a.inner:hover { background:#F3F4F4; }
.sidebar .filter-section .icon { width:auto; float:left; margin-right:15px; }
.sidebar .filter-section h4 { float:left; }
.sidebar .expand-icon, .sidebar .collapse-icon { width:auto; float:right; font-family: 'sproutcons'; }
.sidebar .expand-icon, .sidebar .active .collapse-icon { display:block; }
.sidebar .active .expand-icon, .sidebar .collapse-icon { display:none; }
.sidebar .filter-section a.inner:hover .expand-icon, .sidebar .filter-section a.inner:hover .collapse-icon { color:#59CB59; }
.sidebar .filter-group { list-style:none; padding:0 10%; margin:10px 0 30px; }
.sidebar .filter-group li { overflow:hidden; }
.sidebar .filter-group li.title { font-size:0.813em; font-weight:600; letter-spacing:.025em; color:#B0B6B7; padding-left:30px; margin-bottom:4px; }
.sidebar .filter-group a { display:block; float:left; color:#364141; text-decoration:none; padding:3px 0 3px 30px; }
.sidebar .filter-group a:hover { color:#0797AE; }
.sidebar .filter-group .checkbox:hover { cursor:pointer; }
.sidebar .filter-group input { float:right; margin-top:5px; }

.grid-actions {
  position: fixed;
  right: 200px;
  bottom: 10px;
  opacity: 0.05;
  &:hover {
    opacity: 1;
  }
  button {
    background: #364141;
    display: inline-block;
    padding: 20px;
    color: #fff;
    border-radius: 4px;
    border: 0;
    cursor: pointer;

    &:hover {
      background: darken(#364141, 5%);
    }
  }

}

.modules {
  
  .module {
    width: calc(100% - 20px);
    min-height: 250px;
    margin: 10px;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    color: pink;
    
    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    
    &._collapsed {
      height: 100px !important;
      min-height: 100px !important;
    }
  }
}

.pods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  
  .pod {
    min-width: 225px;
    min-height: 215px;
    margin: 10px;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    color: pink;
    
    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}


/***********************************************/
/*                Career Page                  */
/***********************************************/

/**
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
**/
#companyculture {
  
}

 h2#careerheader {
   
  }
  #careerheader {
    
  }
  #careertitle {
    
  }
  .career-page {
    
  }
  .career-main-cta {
  
  }


.careercontainer .hs-landing-page .widget-type-rich_text {
  margin: 0 !important;
  padding: 0 !important;
}


@media all and (min-width: 1024px) and (max-width: 1400px) { 
   h2#careerheader {
    font-size:4em !important;
  }
  #careerheader {
    width:15em;
  }
  #careertitle {
    background-image: url("https://www.sensear.com/hubfs/sensear_career_pg_img.jpg");  
    background-color: #535456;  
    padding: 5em 3em 2em 1.5em !important; 
    background-size:cover;
  }
  #joinsensear {
    padding: 30px 90px 30px 110px;
  }

}
@media all and (min-width: 1024px) and (max-width: 1280px) { 
   h2#careerheader {
    font-size:4em !important;
  }
  #careerheader {
    width:15em;
  }
  #careertitle {
    background-image: url("https://www.sensear.com/hubfs/sensear_career_pg_img.jpg");  
    background-color: #535456;  
    padding: 5em 3em 2em 1.5em !important; 
    background-size:cover;
  }
  
  .bio-text{
    padding: 30px 50px 30px 20px;
  }

}

@media all and (min-width: 768px) and (max-width: 1024px) { 
  h2#careerheader {
    font-size:3em !important;
  }
  #careerheader {
    width:12em;
  }
  #careertitle {
    background-image: url("https://www.sensear.com/hubfs/sensear_career_pg_img.jpg");  
    background-color: #535456;  
    padding: 2em 2em .5em 1em !important; 
    background-size:cover;
  }
  
  .team-bios {
    float: right;
    left: 20%; /* or right 50% */
    position: relative;
    text-align: left;
  }
  .bio-text{
    padding: 30px 20px;
  }
}

@media all and (min-width: 480px) and (max-width: 768px) { 
    h2#careerheader {
    font-size:3em !important;
  }
  #careerheader {
    width:12em;
  }
  #careertitle {
    background-image: url("https://www.sensear.com/hubfs/sensear_career_pg_img.jpg");  
    background-color: #535456;  
    padding: 2em 2em .5em 1em !important; 
    background-size:cover;
  }
  
  .team-bios { 
    float: right;
    left: 10%; /* or right 50% */
    position: relative;
    text-align: left;
  }
   .bio-text{
    padding: 0px 30px 30px 30px !important;
  }
}

@media all and (max-width: 600px) { 
    h2#careerheader {
    font-size:2.5em !important;
  }
  #careerheader {
    width:10em;
  }
  #careertitle {
    background-image: url("https://www.sensear.com/hubfs/sensear_career_pg_img.jpg");  
    background-color: #535456;  
    padding: 2em 2em .5em 1em !important; 
    background-size:cover;
  }
  .team-bios {
    padding: 40px 20px !important;
   
  }
  .bio-text{
    padding: 30px 20px 30px 20px;
  }
}


/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ 
 
}
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ 
  
}


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

/****** Career Page Overlays ******/

.careercontainer {
  position: relative;
  width: 50%;
}

.careeroverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #091838;
}

.careercontainer:hover .careeroverlay {
  opacity: .9;
}

.careertext {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  
}

/***********************************************/
/*                 R7 Emails                   */
/***********************************************/
 .sidr-inner {
      visibility:hidden;
  }
@media (min-width: 1281px) {
  
  /* CSS */

  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1008px) and (max-width: 1280px) {
  
  /* CSS */
  
.dnd_area-row-0-padding {
    padding-top: 300px !important;
  }
  
}

@media (min-width: 960px) and (max-width: 1280px) {
  
  /* CSS */
  
.dnd_area-row-0-padding {
    padding-top: 275px !important;
  }
  
}

@media (min-width: 860px) and (max-width: 1280px) {
  
  /* CSS */
  
.dnd_area-row-0-padding {
    padding-top: 250px !important;
  }
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  
  /* 
  .dnd_area-row-0-padding {
    padding-top: -300px !important;
  }
  */

  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
/*
  .dnd_area-row-0-padding {
    padding-top: -300px !important;
  }
*/
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  h2#explore-header {
    font-size: 28px !important;
  }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
  h2#explore-header {
    font-size: 28px !important;
  }
 
}