/*
Theme Name: Gurbani Sangeet
Theme URI: #
Template: generatepress
Author: DGN Webs
Author URI: www.dgnwebs.com
Description: Custom theme
Tags: custom-theme
Version: 3.2.2.1668642904
Updated: 2022-11-16 23:55:04
*/

:root {
  /* Colors */
  --color-1: #4B64E7;
  --color-2: #3636C5;
  --color-3: #393939;
  --color-4: #efefef;

  --color-base: #16558a;

  /* Spacing */
  --space-base: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;
  --space-xxl: 3rem;
  
}

/* Extras */

/* hiding re-captcha */
.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
}

/* Category Post Archive for Raags */
body.archive.category main {
  padding-top: var(--space-xl);
}
body.archive.category main .generate-columns-container .post:not(:last-child):not(.is-loop-template-item) {
  padding-bottom: 26px;
}
.gn_button {
  background: var(--accent-button);
  padding: calc(var(--space-base) / 2) var(--space-base);
  color: #FFFFFF !important;
}
.spacer-base {
  padding: var(--space-base);
}

/* #############################################################################
   #################### Custom Page - Layout / Structure #######################
############################################################################# */

.gn-page-wrap {
  width: 100%;
  padding: 0;
  margin: 0;
}

.gn-page-wrap .gn-page-header-banner {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.gn-page-wrap .gn-page-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 52px 0;
}

nav {
  padding: 0 0 30px 0;
  box-shadow: 0 1em 1em -1em rgba(0, 0, 0, .25);
}


div.site.grid-container {
  margin-top: 26px;
}

/* ###############################################################################
############################ Raag Listing Styling ################################
############################################################################### */

.generate-columns.grid-33, .grid-sizer.grid-33 {
  width: 33.3333%;
}

.gn-raag-col-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.gn-raag-col-container .gn-raag-content-inside {
  min-height: 313px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
  max-width: 400px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.gn-raag-content-inside::before {
  content: "";
  background-image: url('https://www.gurbanisangeet.com/wp-content/uploads/2021/04/banner.jpg.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: inherit;
  pointer-events: none;
  opacity: 0.39;
}

.gn-raag-content-inside .gn-content-inside-wrap {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  z-index: 1;
  position: relative;
}

.gn-content-inside-wrap .gn-right-arrow-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  clear: both;
}

.gn-right-arrow-btn a.gn-right-arrow-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-button-hover);
  color: #ffffff;
  text-align: center;
  padding: 15px 20px;
}

.gn-right-arrow-btn a.gn-right-arrow-btn-link .gb-icon {
  font-size: 1.5em;
  line-height: 0;
}

.gn-right-arrow-btn a.gn-right-arrow-btn-link:hover,
.gn-right-arrow-btn a.gn-right-arrow-btn-link .gb-icon:hover {
  background-color: #222222;
  color: #ffffff;
}

.gn-right-arrow-btn a.gn-right-arrow-btn-link .gb-icon svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
}

.gn-raag-cat-container {
  border-left-style: solid;
  border-left-width: 13px;
  border-color: var(--accent-button-hover);
}

.gn-raag-cat-container .gb-inside-container {
  padding-top: 25px;
  padding-bottom: 13px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.gn-raag-cat-container .gb-inside-container .gb-headline {
  display: flex;
  align-items: center;
  color: var(--base-3);
  font-size: 16px;
  line-height: 0.8em;
  letter-spacing: -0.02em;
  padding-left: 13px;
}

.gb-inside-container .gb-headline .gb-icon {
  line-height: 0;
  padding-right: 0.5em;
}

.gb-inside-container .gb-headline .gb-headline-text {
  color: var(--base-3);
  font-size: 18px;
  font-weight: 700;
}

.gb-inside-container .gb-headline .gb-headline-text a {
  color: var(--base-3);
}

/* ###########################################
######### Advanced raag search page styles ########
############################################## */
.adv-raag-search-btn-div {
  text-align: right;
  padding: 26px 26px 0 0;
}

.adv-raag-search-btn-div a { 
  background-color: var(--accent-button);
  color: var(--base-3);
  padding: 10px 22px;
  margin-top: 10px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.adv-raag-search-btn-div a:hover {
  text-decoration: none;
  cursor: pointer;
}

#gn-raagsearchform #showloader {
  display: none;
}

#gn-raagsearchform .raag-search-filters {
  font-size: 21px;
}

.raag-search-filters strong {
  display: inline-block;
  background-color: var(--wp--preset--color--accent-button);
  padding: 6px;
  font-size: 18px;
  color: #FFFFFF;
}

.raag-search-filters select {
  padding-left: 10px;
  padding-right: 10px;
  color: #666666;
  border: #c1c1c1 solid 1px;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: window;
  background-color: #f4f4f4;
  width: 213px;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.raag-search-filters select:focus {
  outline: 1px solid rgba(70, 70, 70, 0.8);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 70, 70, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 70, 70, 0.6);
}

body.page-template-template-advanced-search .raag-search-response {
  padding: 13px;
  border: #666666 solid 1px;
  margin: 13px 0;
  width: auto;
  display: inline-block;
  font-size: 21px;
}

/* ###############################################################################
############################ Raag Landing Page ################################
############################################################################### */

.raag-parichae .raag-info ul {
  margin: 0 0 1.5em 1.5em;
}

.gn-tabs {
  min-width: 320px;
  max-width: 800px;
  padding: 0;
  margin: 0 auto;
  background: #fff;
}

.gn-tabs .raag-parichae {
  border-top: 1px solid #ddd;
}

.gn-tabs .raag-info {
  display: none;
  padding: 20px 0 0;
}

.gn-tabs input {
  display: none;
}

.gn-tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.gn-tabs label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

.gn-tabs label:hover {
  color: #888;
  cursor: pointer;
}

.gn-tabs input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid var(--color-base);
  border-bottom: 1px solid #fff;
}

.gn-tabs #pb:checked ~ .raag-parichae .raag-col1,
.gn-tabs #en:checked ~ .raag-parichae .raag-col2 {
  display: block;
}

@media screen and (max-width: 650px) {
  .gn-tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  .gn-tabs label {
    padding: 15px;
  }
}

/* ###############################################################################
#################### Tabla Course & Tabla Lesson Styling #########################
############################################################################### */
article.tabla_courses-kaida-and-palta .gb-inside-container .gb-headline .gb-headline-text,
article.tabla_courses-kaida-and-palta .gb-inside-container .gb-headline .gb-headline-text a,
article.tabla_courses-taal .gb-inside-container .gb-headline .gb-headline-text,
article.tabla_courses-taal .gb-inside-container .gb-headline .gb-headline-text a {
  color: var(--color-3);
}
.palta_wrap {
  margin-top: var(--space-base);
}
.palta_wrap h3 {
  margin-bottom: cal(var(--space-base) / 2);
}
.kaida_bol_wrap, .palta_wrap {
  display: grid;
}
.kaida_bol_wrap > div,
.palta_wrap > div {
  margin-bottom: var(--space-base);
  border: var(--color-3) solid 1px;
  padding: var(--space-base);
  /* display: inline-block; */
  /* display: flex; */
  align-items: center;
}
.kaida_bol_wrap > div.kaida_aroh,
.palta_wrap > div.palta_aroh {
  align-items: baseline;
  background-color: #fafafa;
}
.palta_wrap > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.kaida_bol_wrap > div.kaida_avroh,
.palta_wrap > div.palta_avroh {
  background-color: #efefef;
}
.kaida_bol_wrap .bol,
.palta_wrap .bol {
  display: inline-block;
  padding: calc(var(--space-base) / 2);
  border-left: var(--color-2) solid 1px;
  margin-bottom: 7px;
}
.bol_group .bol {
  line-height: 0.5rem;
  border-left: var(--color-3) solid 1px;
}
.kaida_bol_wrap .bol:first-child,
.palta_wrap .bol:first-child {
  border-left: none;
}
.palta_wrap div.bol_group {
  background-color: #cfcfcf;
  padding-right: calc(var(--space-base) / 2);
  /* border-left: none; */
}
.bol_group .bol:last-child,
.bol_group .bol:nth-child(2) {
  border-left: none;
}
.tabla_bol.no-border {
  border-left:  none;
  padding-right: 0;
  padding-left: 0;
  font-size: var(--space-base);
}
.tabla_bol.gap-extra-pad {
  padding-left: var(--space-base);
  padding-right: var(--space-base);
}
.bol.bol_break {
  border-left: none;
}
.bol.tall {
  border: none;
}

/* Tabla Courses Page */
.cptloop_header {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  background-color: var(--color-4);
  padding: var(--space-base);
}
.cptloop_header > div {
  flex: 1;
}
.cptloop_left h2,
.cptloop_left h3 { 
  margin-bottom: 0;
}
.cptloop_right { 
  text-align: right;
}

/* ###################################################################
######################### Taal Layout ############################## */

.taal_wrap {
  overflow-x: auto;
}

.taal_table {
  border-collapse: collapse;
  width: 100%;
}

.taal_table th, .taal_table td {
  text-align: center;
  white-space: nowrap;
  border-width: 0 0 1px 1px;
}

.taal_table td:last-child {
  border-right-width: 1px;
}

.taal_table td.no-border {
  border-left: none;
}

td.tall_partition { 
  border-right: var(--color-3) solid 1px;
}

/* #######################################################################
################### LOGIN PAGE STYLING BEGINS ############################
####################################################################### */

.login-wrap {
  padding: 2rem;
  max-width: 313px;
  margin: 0 auto !important;
}

/* #######################################################################
################### CONTACT FORM STYLING ############################
####################################################################### */
/*
div.wpcf7 { }
div.wpcf7 form { }
*/
.wpcf7-form-control-wrap input[type='text'],
.wpcf7-form-control-wrap input[type='email'],
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea {
  background-color: rgba(214,214,214,0.65);
  width: 100%;
  border: 1px solid #ffbc30;
  border-radius: 5px;
  padding: 5px 7px;
  max-width: 100%;
}

@media (min-width: 769px) {
  body.page-template-template-advanced-search div.gn-raag-col-container {
    gap: 3rem 0;
  }
}

@media (max-width: 1080px) {
  body.page-template-template-advanced-search div.gn-raag-col-container {
    gap: 3rem 1.5rem;
  }

@media (max-width: 991px) {
  body.page-template-template-advanced-search div.gn-raag-col-container {
    gap: 3rem 1.5rem;
  }
  .generate-columns.mobile-grid-100,
	.grid-sizer.mobile-grid-100 article {
		width: 47%;
    margin: 13px auto;
	}
}

@media (max-width: 768px) {
  div#page {
    padding: 0 13px;
  }
  .palta_wrap > div > div.bol:not(.bol_group) {
    flex-basis: 39px;
  }
  .palta_wrap div.flx_break {
    flex-basis: 100%;
    height: 0;
  }
  .cptloop_header > div > span {
    display: block;
  }
  .raag-search-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .raag-search-filters select {
    width: auto;
  }
  .generate-columns.mobile-grid-100,
	.grid-sizer.mobile-grid-100 {
		width: 100%;
    margin: 13px auto;
	}
}

@media (max-width: 480px) {
  h1, h1.gb-headline  { font-size: 2rem !important; }
  .cptloop_header > div {
    flex-basis: 100%;
  }
}