/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

.modal-wrapper.styled .wp-post-modal .close-modal {
    background: transparent;
    position: absolute;
    top: -6px;
    right: 10px;
    font-size: 2em;
    color: #333;
    cursor: pointer;
    z-index: 1;
    padding: 0.5em 1em;
    font-size: 1em;
}

.enrollment.open {color: green;}
.enrollment.closed {color: orange;}

.course-list {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 30px;
}

.course-heading-title h2 { text-align: center; margin: 15px;}
.course-item {
    /* list-style: none;
    margin-left: 0 !important; */
    border: 1px solid #eee;
    padding: 20px;
	margin-bottom: 30px;
    /*width: 48%;
    margin-right: 2%;
    float: left; */
}

@media screen and (max-width:767px) {
    /* .course-item {
        display: block;
        width: 100%;
        float: none;
    } */
    .course-list {
        grid-template-columns: auto;
    }
}

.cover-image {
    min-height: 300px; 
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: none !important;
}

.course-category, .course-grade, .course-price, .course-register {text-align: left; margin: 15px;}

.course-category, .course-grade {
	color: #7a7a7a;
    font-size: 14px !important;
}

.course-price {
    overflow: hidden;
    position: relative;
    padding: 14px 0 10px;
    display: block;
    margin: 0;
    font-weight: bold;
}

.course-price:before {
	background: #caa654;
    content: '';
    width: 30px;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #000;
    z-index: 10;
}

input.cmflf-filter-input {
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    border: 3px solid #DDD;
    font-family: 'Roboto Slab';
    font-weight: 400;
    text-align: left;
    font-style: italic;
}

.course-register {
    margin: 5px;
    margin-top: 15px;
    display: inline-block;
}

.course-register a {
    /* padding: 10px 20px;
    background: #caa654;
    color: white !important;
    border-radius: 10px; */
}

.course-register a:hover {
    background: #e1b346;
    color: white; 
}

.course-heading-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3%;
    text-align: center;
    padding-bottom: 20px;
  }

.course-heading-title h2 {color: white;}

.bottom-action {
      bottom: 0;
      width: 100%;
      position: fixed;
      z-index: 999999;
      padding: 20px;
      margin: 0 !important;
      left: 0;
      bottom: 0;
      text-align: center;
      background: linear-gradient(0deg,#DDD,#BBB);
  }

@media screen and (max-width:400px) { 

    .bottom-action { 
        padding: 0px;
    }
      
}

@media screen and (max-width: 600px) {
    span.image-choices-choice-image-wrap {
        height: auto !important;
    }
}

  .bottom-action .course-register a {
    border-radius: 10px;
    padding: 15px;
    font-weight: bold;
    font-size: 0.8em;
}

.hide {display: none !important;}
.show {display: block !important;}

ul.user-table-section {margin-left: 0;}

.user-table-section li {
    list-style-type: none;
    padding: 20px;
    background: white;
    border-radius: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.user-table-section li item {
    width: 20%;
    display: block;
    margin-bottom: 5px;
    /* border-bottom: 1px solid #DDD; */
    /* padding-bottom: 20px; */
    min-height: 75px;
    padding: 5px;
}

.user-table-section li item label {
    font-size: 12px;
    text-transform: uppercase;
}

.user-table-section li item.main-title {
    flex: 0 0 100%;
}

.image-choices-choice label {
    white-space: initial !important;
    overflow: visible;
}

button.tingle-modal__close {
    padding: 5px;
}

.gform_body.gform-body {
    padding-bottom: 1px !important;
}

.consent {
    padding: 15px;
    background: #DDD;
    padding-top: 15px !important;
    border-radius: 10px;
}

.gfield_consent_description {
    height: 80px !important;
    background: #efefef;
    padding: 10px !important;
}

.ginput_container.ginput_container_consent {
    font-weight: bold;
}

.image-choices-choice-price span.ginput_price {
    display: none !important;
}

/*Post Container*/

.container__title {
    font-weight: 700;
    font-size: 14px;
    color: #8fa6b3;
  }

#program-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));;
    grid-gap: 20px;
  }
  
  .post {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    margin-top: 12px;
    min-height: 300px;
    height: auto;
  }

  .post:hover {
    box-shadow: 0px 1px 10px #9a9a9a;
  }
  
  .post-title {
    font: 700 18px/1.4em system-ui, Roboto, Arial, sans-serif;
    color: #4a4a4a;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .post-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
  }
  
  .post-preview {
    overflow: hidden;
    width: 100%;
    text-align: center;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #e1e8ed;
    line-height: 0;
    height: 200px;
  }
  
  .post-tag {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 8px;
    color: #717171;
    border: 1px solid #9b9b9b;
    border-radius: 25px;
    white-space: nowrap;
  }
  
  .post-footer {
    text-align: right;
    margin-top: auto;
  }

  .post-footer button {
    width: 100% !important;
    margin-top: 25px;
  }
  
  .post-level {
    font: 700 12px/1 system-ui, Roboto, Arial, sans-serif;
    text-transform: uppercase;
    display: inline-block;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #0085b6;
  }
  
  .filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 10px;
    padding: 16px 0 32px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 16px;
  }
  
  .filter-button {
    transition: background-color 200ms, color 200ms;
    background-color: transparent;
    font: inherit;
    cursor: pointer;
    display: inline-block;
    padding: 0 8px;
    color: #717171;
    border: 1px solid #9b9b9b;
    border-radius: 25px;
    font-size: 14px;
    white-space: nowrap;
    padding: 0.5em 1em !important;
  }
  
  .filter-button:hover {
    background-color: #f3f3f3;
    color: #3a3a3a;
  }
  
  .filter-button.is-active {
    background-color: #0085b6;
    border-color: #0085b6;
    color: #fff;
  }

  table, .table-responsive {
    width: 100% !important;
  }

  #field_7_32 .program-container, #field_25_26 .program-container {
    border: 1px solid gray;
    width: 100%;
    padding: 1em;
}
  .program-container .title {
    font-size: 1.2em;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    margin: 10px 0;
    padding-bottom: 10px;
}

#input_7_32 label, #field_25_26 label {
    width: 100%;
    margin-bottom: 10px;
}

#gform_fields_7_2 .gfield-choice-input, #field_25_26 .gfield-choice-input {
    vertical-align: top;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
   .modalspinner {
    display:    none;
    position:   fixed;
    z-index:    1000000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('https://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modalspinner {
    overflow: hidden !important;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modalspinner {
    display: block !important;
}