/* NOTE: Do not remove var names (Ex: var(--body-bg-color)),, If you remove them then you will not be able to see the changes
    editing from edit elements (CSS Elements)
*/

/* --------------------------------------------------------common-------------------------------------------------- */
.fw-main-wrapper{
    margin-bottom: 100px;
}
body{
    background-color: var(--body-bg-color);
    font-family: var(--body-font-family) !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font-family);
}
dl, ol, ul{
    margin-bottom: 0px;
}
.Layout__oneColumn, .Layout__twoColumn, .Layout__twoColumn2, .Layout__twoColumnReverse {
    padding-top: 2.125rem;
    padding-bottom: 3.125rem;
    background-color: var(--body-main-content-bg-color);
}

/* ------------------------------------------------------header.html----------------------------------------------- */
.container-fluid{
    width: 90%;
}
.Header__navbar {
    background-color: var(--header-navbar-bg-color) !important;
}
.header-nav{
    box-shadow: none;
}
.navbar-toggler-icon-bar{
    color: white;
    text-shadow: #000 0.0625rem 0.0625rem 0.0625rem;
}
.search_remove{
    justify-content: end !important;
}
.navbar-nav .nav-item{  
    margin-right: 10px;
    margin-top: 5px;
    display: flex;
    align-items: center;
}
.Header__tabs__link {
    color: var(--header-tabs-link-color) !important;
    display: flex;
    align-items: center;
    padding: 6px 9px !important;
}
.navigation_bar{
    justify-content: end;
}
.Header__tabs__link:hover{
    color: var(--header-tabs-link-hover-color) !important;
    background: var(--header-tabs-link-hover-bg-color) !important;
    border-radius: 5px;
}
.user_profile_icon i{
    font-size: 25px;
}
.user_profile_icon{
    margin-bottom: 4px;
}
.user_profile_icon:hover{
    color: var(--header-tabs-link-hover-color) !important;
    background: var(--header-tabs-link-hover-bg-color) !important;
    margin-bottom: 4px;
    padding: 0px;
    border-radius: 5px;
}
.dropdown-toggle::after{
    display: none;
}
.Header__logo{
    background-color: var(--header-brand-logo-bg-color) !important;
    border-radius: 18px;
    padding: 1px;
    margin-right: 10px;
}
.Header_tab_active {
    background-color: var(--header-tab-active-bg-color) !important;
    color:var(--header-tab-active-color) !important;
    border-radius: 5px;
    padding: 6px 9px !important;
}

.Header__homeContent .Header__searchSection {
    padding: 6.25rem 0;
    display: block;
}
#headerContent{
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
    z-index: 3;

}
#headerContent2{
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
    z-index: 3;
}
.AppContainer__breadCrumbsBox{
    text-align: center;
    margin-top: 7px;
}
.Header__container {
    padding: 0 0.9375rem;
    margin: auto;
    max-width: 50%;
    transition: all 250ms ease;
}
.Header__searchTitle {
    font-size: 2.25rem;
    margin-bottom: -10px;
    letter-spacing: 0.0625rem;
    text-align: center;
    font-weight: 400;
}
.Header__searchTitle, .Header__description {
    color: var(--header-text-color);
}
.Header__name {
    color: var(--header-site-name-color);
}
.Header__description {
    width: 80%;
    font-size: 1rem;
    text-align: center;
    margin: 1rem auto 1rem;
}
.Header__globalSearch {
    position: relative;
    /* width: 60%; */
    margin: 0 auto;
    border: 0.0625rem solid transparent;
}
.Header_search_input::placeholder { 
    font-weight: 300; 
    }
.Header_search_input{
    height: 36px;
    background-color: var(--header-search-input-bg-color) !important;
    font-size: 14px;
}
#searchContainer2{
    margin-top: 16px;
    position: relative;
}
.search_results{
    position: absolute !important;
    color: var(--article-search-results-text-color) !important;
    background-color: var(--article-search-results-bg-color) !important;
    padding: 15px !important;
    display: none;
    border: 1px solid #e1e1ee;
    border-radius: 5px;
    margin-top: -15px;
    box-shadow: 0 0.125rem 0 0 rgb(0 0 0 / 10%);
    z-index: 99;
    height: 231px;
    overflow-y: scroll;
}
#search_results1{
    width: 100%;
}
#search_results2{
    width: 100%;
}
#articles_search_input_1{
    height: 45px;
}
@media (max-width: 1200px) {
    .container-fluid{
        width: 100%;
    }
    .navbar-brand {
        font-size: 1rem;
        line-height: inherit;
        white-space: nowrap;
      }
}
@media (max-width: 380px) {
    .container-fluid{
        width: 100%;
    }
    .navbar-brand {
        font-size: 0.9rem;
        line-height: inherit;
        white-space: nowrap;
      }
      .breadcrumb_bg{
        font-size: 14px;
      }
      .Header__container {
        padding: 0 0.9375rem;
        margin: auto;
        max-width: 100%;
        transition: all 250ms ease;
      }
}
@media (max-width: 1000px){
    .Header__container {
        padding: 0 0.9375rem;
        margin: auto;
        max-width: 75%;
        transition: all 250ms ease;
      }
}
/* ---------------------------------------------footer.html-------------------------------------------------------- */
.footer{
    background-color: var(--footer-bg-color) !important;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    overflow:auto;
    position: absolute;
}
.footer-link{
    color: var(--footer-link-color) !important;
}
.footer-link:hover{
    color: var(--footer-link-hover-color) !important;
}
.footer-text{
    color: var(--footer-text-color) !important;
}
/* ---------------------------------------------------home_page.html------------------------------------------------- */
.articles{
    margin-bottom: -16px; 
    margin-top: 30px;
}
.article_list{
    font-family: var(--body-font-family) !important;
    font-weight: 500;
    color: var(--article-link-color) !important;
    margin-top: 5px;
}
.article_list:hover{
    color: var(--article-link-hover-color) !important;
    text-decoration: underline;
}
.brief_text{
    text-overflow: ellipsis;
    width: 100%;
    color: var(--article-brief-text-color) !important;
    font-size: 14px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0px 70px 0px 0px;
}
.published_date{
    margin-top: 10px;
    color: #000000c4;
}
.select2{
    line-height: 27px !important;
    width: 100% !important;
}
.select2-selection--multiple{
    background-color: #FFFFFF !important;
}
.select2-selection__choice{
    line-height: 25px !important;
    margin-top: 8px !important;
    border: 1px solid #00bcd4 !important;
    border-radius: 15px !important;
    background-color: #00bcd4 !important;
    color: white !important;
}
.select2-selection__choice__remove{
    color: white !important;
}
/* -----------------------------------------------------article_home_page.html--------------------------------------------- */
.category_name{
    background-color: var(--category-normal-bg-color);
    border: 1px solid var(--category-border-color);
    color: var(--category-normal-text-color);
    border-radius: 7px;
    padding: 20px 30px;
    margin-bottom: 10px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    transition: .35s ease-in-out;
}
.category_name:hover {
    color: var(--category-hover-text-color) !important;
    background-color: var(--category-hover-bg-color) !important;
}
.category_records{
    margin-top: 20px !important;
}
.all_articles{
    margin-top: 60px;
}

/* ------------------------------------------breadcrumbs.html--------------------------------------------------- */
.breadcrumb{
    margin-top: 10px;
}
.breadcrumb .hidden_categories{
    display:flex;
}
.breadcrum_current_page{
    color: var(--breadcrumb-current-page-color);
}
.breadcrum_active_tags{
    color: var(--breadcrumb-active-tag-color) !important;
}
.breadcrum_active_tags:hover{
    color: var(--breadcrumb-active-tag-hover-color) !important;
}
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: var(--breadcrumb-bg-color);
}
.hide {
    display: none;
}
.breadcrumb_bg{
    background-color: var(--breadcrumb-bg-color);
}
.fa-caret-right{
    display: inline;
    margin-left: 2px;
    margin-right: 2px;
    color: var(--breadcrumb-arrow-color);
}
/* ---------------------------------------------------article_data.html---------------------------------------------- */
.article_content_div figure.image {
    margin: 0 2px 0 1px;
}
.article_content_div figure.align-left {float: left;}
.article_content_div figure.align-right {float: right;}
.article_content_div figure.image figcaption {
    margin: 6px 8px 6px 8px;
    text-align: center;
}
.article_content_div figure.align-center {
    display: contents !important;
}
.article_content_div a {color:#0361db;}
.article_content_div a:hover{
    color:#0361db;
    text-decoration: underline;
}
.article_content_div p{
    color: #2f3245;
    font-family: inherit;
}
#article_status{
    color: #999;
}


/*  ----------------------------------------signin.html-----------------------------------------------------------*/
#email_id{
    font-weight: normal;
}
#password{
    font-weight:normal;
}
#user_name{
    font-weight: normal;
}
#first_name{
    font-weight: normal;
}
#email{
    font-weight: normal;
}

.email-error{
    margin-top:5px;
    color:red;
    font-size: 14px;
}
#login-error{
    margin-top:5px;
    color:red;
    font-size: 14px;
}
.label{
    font-size:17px;
}
.label-font{
    font-size:17px;
}
.split {
    height: 100%;
    width: 70%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 100px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.label-font label:after {
    position:absolute;
    content:' *';
    color:red;
    padding:5px;
    padding-top:1px;
    font-size: 17px;
}
.caption{
	padding: 15px;
	background-color: #f5f5f5;
	margin-bottom: 5px;
}
/* -------------------------------------------------Error Page -------------------------------------------------------- */
.error-section {
    padding: 30px 30px 20px 30px;
    text-align: center;
    margin-top: 8%;
    border-top:3px solid #009cE1;
    background: #fafafa;
    box-shadow: 0 0 7px 3px #eaeaea;
}
.error-text p {
    color: rgba(0,0,0,0.9);
    font-size: 18px;
    margin-top: 0%;
    margin-bottom: 0%;
}
.error-text h4 {
    font-weight:300;
    font-size: 2rem;
    line-height: 1.1em;
    margin-bottom: 3rem;
    margin-bottom:15px;
}
.reset-btn {padding: 8px 10px 20px 0px;}
.btn-group-lg>.btn, .btn-lg {
    background-color: #3498db;
    color: #fff;
}
.btn-skin:hover, .btn-skin:focus, .btn-skin:active, .btn-skin.active {
    color: #fff;
    background-color: #456294;
    border-color: #456294;
}
.page_navtab {margin-top: 8rem;}

/* ------------------------------------------Submit ticket ------------------------------------------------------- */
.form-check-input {
    margin-top: 0rem !important;
    width: 1rem !important;
    height: 1rem !important;
}
.form-check-inline {margin-right: 1.75rem !important;}
.form-check-label {cursor: pointer}
label{font-size: 14px;margin-top : 0 !important;}
@media screen and (max-width: 768px) {
    #ticket_form_container{
        width: 100%;
        margin-left: 1%;
        margin-right:  1%;
        margin-top: 2%;
        margin-bottom: 4%;
    }
}
@media screen and (min-width: 769px) {
    #ticket_form_container{width: 75%;margin-left: 10%;margin-top: 2%;margin-bottom: 4%;}
}


/* ------------------------------------------Artcle Thumb Nail ------------------------------------------------------- */
.hover-container {
    position: relative;
    display: inline-block;
  }

  .thumbnail {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: 320px;
    height: auto;
    border: 1px solid #ccc;
  }
  .video-preview {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 10;
      width: 320px;
      height: 180px;
      border: 1px solid #ccc;
      background-color: grey;
    }

  .hover-container:hover .thumbnail {
    display: block;
  }
  
  .hover-container:hover .video-preview {
      display: block;
    }

  .article_list {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    margin: 0;
  }
  
  .article_list a {
      color: blue;
      text-decoration: underline;
      cursor: pointer;
    }
    
/* ------------------------------------------Artcle Thumb Nail ------------------------------------------------------- */
.category_img{
    background-color: var(--category-normal-bg-color);
    border: 1px solid var(--category-border-color);
    color: var(--category-normal-text-color);
    border-radius: 7px;
    padding: 0px;
    margin-bottom: 10px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    transition: .35s ease-in-out;
}