@import url("guidelines_variables.css");

/* ********************************************
*  TYPOGRAPHY set in variable-overrides.less
* ********************************************* */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin-top: 0;
	margin-bottom: 0;
}

/* ****************
*   BUTTONS
* **************** */

.btn-work-wrapper button,
.btn-work,
.btn-default {
    background-color: var(--button4-inactive-bg);
    margin-right: 10px;
	font-weight: bold;
}

.btn-work-wrapper button:hover,
.btn-work:hover,
.btn-default:hover
 {
    background-color: var(--button1-hover-bg);
}

.block-popup-api a,
.block-analytics a,
.button_yellow,
.nav > li > a.button_yellow
{
	border: 2px solid transparent;
	/*background: transparent linear-gradient(180deg, var(--btn-gradient-color1) 0%, var(--btn-gradient-color2) 100%) 0% 0% no-repeat padding-box;*/
	background: var(--button1-inactive-bg);
	border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	padding: 10px 25px;
	color: var(--button1-inactive);
    z-index: 10;
    position: relative;
}

.block-popup-api a,
.block-newanalytics a,
.button_yellow {
	text-transform: uppercase;
	text-align: center;
  	white-space: nowrap;
}

.form-submit:disabled {
  background: var(--button3-active-bg) !important;
  color: var(--button3-active) !important;
  border: var(--button3-active-border) !important;
}

a.button_black {
	border: 2px solid var(--button1-inactive-border);
}

.btn_req {
	width: max-content;
}

/*
* File explorer button in input type file
* https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink
*/
input::-webkit-file-upload-button {
	border: 1px solid;
	border-radius: 2px;
	font-size: 12px;
	padding: 2px 5px;
	margin: 0;

}


/* YELLOW BUTTON */
button.button_yellow:hover,
a.button_yellow:hover,
.block-popup-api a:hover,
.nav > li > a.button_yellow:hover {
	/*background: transparent linear-gradient(180deg, var(--btn-gradient-color1) 0%, var(--btn-gradient-color2) 100%) 0% 0% no-repeat padding-box;*/
	border: 2px solid;
	color:  var(--white_color);
	border-color: var(--button1-hover-border);
}








button.button_yellow:focus,
button.button_yellow:active:hover,
button.button_yellow:active:focus,
a.button_yellow:focus,
a.button_yellow:active,
.nav > li > a.button_yellow:focus,
.nav > li > a.button_yellow:active,
.block-popup-api a:focus,
.block-popup-api a:active {
	color: var(--button1-active);
	background-color: var(--button1-active-bg);
	border: 3px solid;
	border-color: var(--button1-active-border);
}

.btn:active,
.btn.active {
	-webkit-box-shadow: none;
	box-shadow: none;
}




/* BLACK BUTTON */
button.button_black,
.nav > li > a.button_black,
input::-webkit-file-upload-button {
	border-color: var(--button3-inactive-border);
	padding: 5px 20px;
	color: var(--button3-inactive);
	/*border-radius: 4px;*/
	background-color: var(--button3-inactive-bg);
}

button.button_black,
.nav > li > a.button_black,
input::-webkit-file-upload-button {
	border-color: var(--button3-inactive-border);
	padding: 5px 20px;
	color: var(--button3-inactive);
	border-radius: 4px;
	background-color: var(--button3-inactive-bg);
}

button.button_black:hover,
.nav > li > a.button_black:hover,
input::-webkit-file-upload-button:hover
{
	background-color: var(--button3-hover-bg);
	color:  var(--button3-hover);
	font-weight: bold;
}

button.button_black:focus,
button.button_black:active,
.nav > li > a.button_black:focus,
.nav > li > a.button_black:active,
input::-webkit-file-upload-button:focus,
input::-webkit-file-upload-button:active
{
	color: var(--button2-active);
	/*outline: none;*/
	border-color: var(--button2-active-border);
	background-color: var(--button2-active-bg);
}

/* WHITE BUTTON */
.button_white,
.header-carousel-link a {
	color: var(--white_color);
	border: 2px solid var(--white_color);
	font-size: 16px;
	width: 100%;
	height: 58px;
	padding: 7px 30px;
	border-radius: 38px;
}

.button_white:hover,
.header-carousel-link a:hover {
	background-color: var(--white_color);
	color: #23B4C3;
}



/* HOMEPAGE HEADER CAROUSEL */

.header-carousel-title {
	text-align: left;
	/*width: 65%;*/
	color: var(--home-head-title);
}

.header-carousel-body {
	color: var(--white_color);
}

.views-field-field-header-article-link {
	top: 60%;
}

/* CARDs OVERLAY */
.overlay {
	background: var(--eapi-card-hover-bg);
}
.overlay-in-progress {
	background: var(--eapi-card-hover-in-progress-bg);
}

/*   FILE WIDGET */

.field--type-file {
	text-align: center;
}

.file > span {
	background: var(--button5-inactive-bg);
}

.file > span:hover{
	background: var(--button5-hover-bg);
}

.file > span:active{
	background: var(--button5-active-bg);
}

.file-icon {
	opacity: 1;
}

.file-link {
	border-radius: 0 4px 4px 0;
	padding-right: 12px;
}

/* ****************
*   PRIMARY MENU
* **************** */

/* SITE LOGO */
a.logo.navbar-btn.pull-left img {
   max-width: 100%;
}

.sitebranding {
	padding: 15px 0px;
}


#navbar li a {
	color: var(--main_menu_color);
	font-size: 14px;
}

#navbar .active {
	border-bottom: 4px solid var(--primary-menu-underline);
}

#navbar li a:hover {
	background: transparent;
	color: var(--primary-menu-hover);
}

#navbar .active a {
	background: none;
	color: var(--primary-menu-active);

}

/* *******************
*   SIDEBAR FILTERS
* ******************** */
.region-sidebar-first .view-api-published,
.region-sidebar-first .view-id-showcases,
.region-sidebar-first .block-square-filter-side-block  {
    padding-top: 14px;
    background: var( --filter-search-bg);
}

/* reset tag button  */
.btn-reset {
  display: flex;
  margin-bottom: 20px;
}

.btn-reset a {
  color: var(--filter-search-reset-btn);
  background-color: var(--filter-search-reset-btn-bg);
  padding: 6px 12px;
  font-size: 15px;
  border-radius: 4px;
}

.btn-reset a:hover {
  color: var(--filter-search-reset-btn-hover);
  background-color: var(--filter-search-reset-btn-bg-hover);
}

.btn-reset a:active {
  color: var(--filter-search-reset-btn-active);
  background-color: var(--filter-search-reset-btn-bg-active);
}
/* end reset tag button */

.panel-body .btn-info {
    background-color: #5bc0de;
    border-color: #46b8da;
}

.region-sidebar-first .panel {
	box-shadow: none;
}

.region-sidebar-first .panel-default
{
	border: none;
}

.mainLevel .panel-heading
{
  padding: 0px 0 10px 20px;
	border: none;
	text-align: center;
	position: relative;
}

.mainLevel > .panel-heading > a,
a.thirdLevel {
	width: fit-content;
	font-size:18px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
  color: var(--filter-search);
}

.mainLevel > .panel-heading > a:hover,
a:hover.thirdLevel {
  color: var(--filter-search-hover);
}

.mainLevel > .panel-heading > a:active,
a:active.thirdLevel {
  color: var(--filter-search-active);
}

.square-side-tag-multi-form .panel-heading,
.square-side-multi-form  .panel-heading{

	border: none;
	background:transparent

}

.mainLevel {
	background: var( --filter-search-bg);
	border: none;
}
.secondLevel{
	background: var( --filter-search-bg);
}

.panel-default > .panel-heading {
	background-color: var( --neutral_1);
}

.secondLevel a {
	font-size:  16px;
	text-align: left;
}

a.thirdLevel,
.style-api-tags {
	font-size:  13px;
}

a.thirdLevel {
	/*line-height: 42px;*/
  	padding-left: 40px;
  	display: block;
  	width: 100%;
    text-align: left;
	font-size:18px;
	margin: 0;
	text-transform: uppercase;
	color: var(--filter-search);
}

a.thirdLevel.btn-bold {
  background-color: var(--filter-search-underline);
}

#tagside {
    padding-top: 20px;
    padding-left: 20px;
}


.arrow-side >.panel-heading a.panel-title[aria-expanded="false"]::after{
	content:'\003E';
	color: var(--filter-search-arrow);
	position: absolute;
	right: 0;
	margin-right: 9%;
	transform: rotate(0deg);
}

.arrow-side >.panel-heading a.panel-title[aria-expanded="true"]::after{
	content:'\003E';
	color: var(--filter-search-arrow);
	position: absolute;
	right: 0;
	margin-right: 9%;
	transform: rotate(90deg);
}

.arrow-sideSmall >.panel-heading a.panel-title[aria-expanded="false"]::after{
	content:'\003E';
	color: var(--filter-search-arrow);
	position: absolute;
	right: 0;
	margin-right: 9%;
	transform: rotate(0deg);
}

.arrow-sideSmall >.panel-heading a.panel-title[aria-expanded="true"]::after{
	content:'\003E';
	color: var(--filter-search-arrow);
	position: absolute;
	right: 0;
	margin-right: 9%;
	transform: rotate(90deg);
}

.arrow-side >.panel-heading a.panel-title[aria-expanded="true"] {
	border-bottom: 4px solid var(--filter-search-underline);
}

a.panel-title[aria-expanded="true"] {
	/*font-weight: bold;*/
    text-align: left;
}

.style-api-tags{
	letter-spacing: 0;
	border-radius: 3px;
	background-color: var(--filter-tag-inactive-bg);
	color: var(--filter-tag-inactive);
	text-align: center;
	padding: 6px;
}

.style-api-tags > div {
    margin: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.style-api-tags:hover{
	background-color: var(--filter-tag-hover-bg);
	color: var(--filter-tag-hover);
}

/* ***************************************************************** */

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vm {
	border-color: var(--button2-inactive-border);
	color: var(--button2-inactive);
	background: var(--button2-inactive-bg);
}

.vm:hover {
	border-color: var(--button2-hover-border);
	background: var(--button2-hover-bg);
}

.vm:hover a {
	color: var(--button2-hover);
}

.bg_img {
	background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* *******************
*   SEARCH PAGE
* ******************** */
.searchHeader {
	background-color: var(--bg-search-head);
}

.searchHeaderText,
.searchModule input,
.searchModule input::placeholder  {
	color: var(--search-title);
	font-style: normal;
}

.searchModule input {
	background-color: rgba(255, 255, 255, 0.2);
}

/* *******************
*   guidelines section
* ******************** */

.guidelines_search {
    background-color: var(--bg-guidelines-head);
    padding: 40px 0 60px 0;
    margin-top: -22px;
}

.guidelines_breadcrumbs {
	text-transform: capitalize;
	padding-top: 25px;
}

.block-views-exposed-filter-blockguidelines-guideline-articles h3 {
	color: var(--guidelines-title);
}

#exp_filter input {
	height: 50px;
    border: none;
    border-radius: unset;
	color: var(--guidelines-title);
	background: transparent;
	float: left;
    width: 92%;
    padding-left: 0;
	-webkit-box-shadow: none;
    box-shadow: none;
}

#exp_filter input::placeholder {
	color: #25303B;
	opacity: 1;
}

#exp_filter .txt_search {
  	background-color: rgba(255, 255, 255, 0.3);
}

#exp_filter svg {
    float: left;
    width: 50px;
    color: var(--guidelines-title);
    height: 50px;
    padding: 18px 0;
}

#exp_filter ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--guidelines-title) !important;
  opacity: 1; /* Firefox */
}

#exp_filter :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--guidelines-title) !important;
}

#exp_filter ::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--guidelines-title) !important;
}

/* *******************
*   GRADIENTS
* ******************** */

.showcases-row-catalog .views-field,
.showcases-column-frontpage .views-field {
	z-index: 90;
    position: relative;
}

.showcase-card-gradient {
	background: linear-gradient(var(--showcase-card-gradient1), var(--showcase-card-gradient2));
	opacity: 0.7;
    position: absolute;
    height: inherit;
    width: 100%;
    top: 0;
}

.showcase-card-gradient.rounded {
	border-radius: 5%;
}

.header-catalog-eapi-image {
	/*background: linear-gradient(var(--eapi-overlay-gradient1), transparent);*/
}

.header-catalog-showcases-image {
	background: linear-gradient(var(--showcase-overlay-gradient1), transparent);
}

.views-field-field-e-api:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  /*background: var(--primary-menu-bg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;*/
}
.views-field-field-top-showcases:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* *******************
*   COLORS OVERRIDINGS
* ******************** */

.view-header-detail-api- .field-api-detail-title a,
.view-header-detail-api- .views-field-uid {
	color: var(--api-detail-title);
}

.showcases-header {
	color: var(--showcase-detail-title);
}