/* ==============================================================================================
Theme Name: WebEd9 Production Template
Author: Interactive Partners
Author URL: https://www.interactivepartners.com.au
Created: June 2020
Version: 1.5.9
=================================================================================================*/

/*===============================================================================================

Table of contents - Start

0 - Reset ( This is needed to minimise compatibility issues accross different browsers )

I - This will contain styling for mobile ( We will use mobile first approach )
1. Brand - This will contain brand styling ( e.g. fonts, colours etc. )
2. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
3. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
4. Curly Brackets or Objects - This will contain styling for curly brackets.
5. Others - this will be the styling for modifiers only (e.g. bold, text-center etc. )

II - this will contain styling for larger phones  ( min-width: 480px )  !== Optional ==!
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

III - this will contain styling for tablets ( min-width: 768px )
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

IV - this will contain styling for desktops ( min-width: 992px )
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

V - this is optional for screen sizes larger than desktops ( min-width: 1400px or 1200px )
1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )
2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )
3. Curly Brackets or Objects - This will contain styling for curly brackets.

Table of contents - End

===================================================================================================== */

/* ==================================================================================================
0 - Reset - Start

This reset is based on normalize.css
https://necolas.github.io/normalize.css/

Important:
This( Reset Section ) will set default values across different browsers.
This is needed to minimise cross browser issues.

Note:
Please change them as needed.
Before making a change please consider carefully as this will affect the whole site.

===================================================================================================== */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    width: 100%;
    scroll-behavior: smooth;
    overflow-y: scroll;
    display: flex;
    align-content: center;
    background: #b5c5c5;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    width: 100%;
    height: auto;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
  }

  main {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }

  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  a {
    background-color: transparent;
  }

  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }

  b,
  strong {
    font-weight: 800;/*bolder;*/
  }


  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  img {
    border-style: none;
    margin-left: auto;
    margin-right: auto;
  }

  .page-content img {
    border-style: none;
    /* margin-left: auto;
    margin-right: auto; */
    width:100%;
    height:auto;
    box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.15);
    border-radius: 5px;
  }

  @media (min-width: 768px) {
    .page-content img {
        max-width: 900px;
    }
  }

span.confluence-embedded-file-wrapper {
    width: 100%;
    display: grid;
    place-items: center;
    padding: 2px 2px 0;
}

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

  button,
  input { /* 1 */
    overflow: visible;
  }

  button,
  select { /* 1 */
    text-transform: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }

  progress {
    vertical-align: baseline;
  }

  form label.required:after {
    content: '*';
    color: #e50000;
    margin-left: 3px;
  }

  textarea {
    overflow: auto;
  }

  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  details {
    display: block;
  }

  summary {
    display: list-item;
  }
 
  template {
    display: none;
  }

  [hidden] {
    display: none;
  }

  form {
    font-family: 'Roboto', sans-serif !important;
  }
  fieldset {
    background: #fff !important;
  }
  input, select, textarea {
    border: 1px solid #ddd !important;
  }
  form label.error {
    color: #ff0000;
  }

  .header { padding: 0; }



  /* CUSTOM SCROLLBAR */
  /* width */
  ::-webkit-scrollbar {
    width: 3px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #92CADE;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #2596BE;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #165b74;
  }
  /* CUSTOM SCROLLBAR */



  /* ==================================================================================================
  0 - Reset - End
  ===================================================================================================== */


  /* ==================================================================================================
  I - Small Mobile - Start
  ===================================================================================================== */

  @media (max-width: 350px) {

    /* ======================================
    1. Typography - Start
    ========================================= */


    /* ======================================
    1. Typography - End
    ========================================= */


    /* ======================================
    2. Objects - Start
    ========================================= */


    /* ======================================
    2. Objects - End
    ========================================= */

  }

  @media (max-width: 425px) {

  }

  /* ==================================================================================================
  I - Small Mobile - End
  ===================================================================================================== */


  /* ==================================================================================================
  I - Mobile - Start
  ===================================================================================================== */

  /* ======================================
  1. Brand - Start

  This will contain client related styles
  CSS custom properties is not supported on IE browser
  Please include an IE fallback option if possible.
  ========================================= */

  :root {
    --brand-font: 'Roboto';              /* Please set font family value */
  }

  /* ======================================
  1. Brand - End
  ========================================= */

  /* ======================================
  2. Typography - Start
  ========================================= */

  h1, h2, h3, h4, h5, h6 {
    /*font-family: 'Roboto', sans-serif !important;*/
    font-family: 'Roboto Condensed', sans-serif;
  }

  .page-content h1 {
    margin-top: 10px;
    font-family: 'Roboto Condensed', sans-serif;
  }

  .header a h2 {
    font-size: 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Roboto Condensed', sans-serif;
  }

  li, p, a, button {
  /*  font-family: 'Roboto', sans-serif;*/
      font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
  }

  li, p {
    color: #333333;
    text-decoration: none;
  }

  li {
    list-style-position: inside;
  }

  a, a:visited {
    color: #40899e;
  }

  a:hover, a:active, a:focus {
    color: #112c43  ;
    text-decoration: underline;
  }

  .link.white, .link.white:visited {
    color: #FFF;
  }
  .link.white:hover, .link.white:focus, .link.white:active {
    color: #FFF;
    text-decoration: underline;
  }

  .normal-case {
    text-transform: none !important;
  }

  .text-white {
    color: #fff;
  }

  p, ol li, ul li, a, td, th {
    font-family: var(--brand-font-content);
    font-size: 14px; /*1.1em;*/
    font-weight: 300;
    line-height: 1.7em;
    color: #333;
  }

  ol ol, ol ul, ul ol, ul ul {
    font-family: 'Roboto Condensed', sans-serif;
    padding-left: 14px; /*1.6em;*/
  }

  ul.disc-inner {
    list-style: disc;
  }
  ul.disc-inner li {
    list-style-position: inside;
  }
  ul.no-bullet li {
    list-style: none;
  }
  ul.checklist li {
    list-style: none;
  }
    ul.checklist li:before {
        content: '\f00c';
        font-family: "FontAwesome";
        color: #aBcb27;
        margin-right: 10px;
    }
  ul.list-icon li i {
    color: #aBcb27;
    margin-right: 5px;
  }
    ul.list-icon li {
        list-style: none;
    }


  .header-top-first {
      width: 18%;
  }

  .page-content ul {
    margin-left: 25px;
  }

  .breadcrumbs {
    margin-left: 0 !important;
  }

  .page-content h1, .page-content h2 {
    margin-top: 35px;
  }

  .page-content h1 {
        color: #333;
      font-size: 3.5rem;
  }

  .table-wrap table {
    margin: 0 auto 40px;
  }

  .table-wrap table img {
      margin: 0 auto;
  }

  .header-top-first a, .header-top-first a:visited {
    color: white;
    text-decoration: none;
  }
    .header-top-first a:hover, .header-top-first a:focus, .header-top-first a:active {
        color: #B3DB28;
        text-decoration: none;
    }
    .social-links li a:hover, .social-links li a:focus, .social-links li a:active {
        color: #fff !important;
    }

  /* LEFT NAVIGATION */
  .left-nav.main-navigation {
      overflow: auto !important;
      position: static;
      box-shadow: none;
  }
  nav.navbar.navbar-default {
    margin: 0;
    padding: 0 12px;
  }
  .left-nav li.menu-item {
    list-style: none;
  }
  .left-nav li.menu-item a, .left-nav li.menu-item a:visited {
    font-size: 13px;
    text-decoration: none;
  }
  /*.left-nav li.menu-item a:hover, .left-nav li.menu-item a:focus, .left-nav li.menu-item a:active {
    color: #000;
    text-decoration: none;
  }
  .dropdown-menu li > a:active {
    color: #5d9dad !important;
  }*/
  .main-navigation .navbar-default .navbar-nav > li > a {
    width: 100%;
  }
  #site-menus .dropdown.menu-item > .child {
      padding-left: 20px;
  }
  .site-header-logo {
      font-family: 'Roboto Condensed', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 23px;
      text-align: center;
      color: #000;
      margin-bottom: 10px;
  }
  .site-header-logo img {
      margin: 0 auto 15px;
  }
  .site-header-name {
      font-family: 'Roboto Condensed', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 23px;
      text-align: center;
      color: #000;
  }
  nav.navbar.navbar-default .menu-search {
      display: none;
      border: 0 !important;
      border-radius: 0;
      outline: none;
      box-shadow: none;
      font-style: italic;
      max-width: 200px;
      height: 40px;
      margin: 0 auto;
      font-size: 13px;
      line-height: 16px;
      font-weight: 400;
      color: #000;
  }
  nav.navbar.navbar-default .menu-search::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #999;
      opacity: 1; /* Firefox */
  }
  nav.navbar.navbar-default .menu-search:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #999;
  }
  nav.navbar.navbar-default .menu-search::-ms-input-placeholder { /* Microsoft Edge */
      color: #999;
  }

  .side-footer {
      margin: 30px 0 20px;
  }
  .side-footer-btn a,
  .side-footer-btn #notifyMe {
      display: block;
      color: #fff;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      width: 100%;
      max-width: 200px;
      height: 38px;
      background: #2596BE;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Roboto Condensed', sans-serif;
      margin: 0 auto;
  }
  .side-footer-btn a:hover {
      text-decoration: none;
      opacity: 0.8;
  }
  .side-footer-btn a i {
      margin-right: 5px;
  }
  .side-footer-btn #not-register-yet,
  .side-footer-btn #notifyMe {
      display: block !important;
  }
  .side-footer-btn #notifyMe {
      line-height: 38px;
      text-transform: uppercase;
  }
  .side-footer-btn #notifyMe:before {
      margin-right: 5px;
  }
  /* LEFT NAVIGATION */


  /* ======================================
  2. Typography - End
  ========================================= */

  /* ======================================
  3. Layout - Start
  ========================================= */

  .w-100,
  .w-95,
  .w-90,
  .w-85,
  .w-80,
  .w-75,
  .w-70,
  .w-65,
  .w-60,
  .w-55,
  .w-50,
  .w-45,
  .w-40,
  .w-35,
  .w-33,
  .w-30,
  .w-25,
  .w-23,
  .w-20,
  .w-15,
  .w-10,
  .w-5 {
    width: 95%;
    margin: 0 auto;
  }

  .header-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .header-top div:first-child {
    padding-right: 0;
  }
  .header-top h1 a {
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
  }

  .contact-info {
    list-style-type: none;
    margin: 0;
    background: #112C43;
    padding: 2px;
    color: white;
    width: 185px;
  }
  .contact-info li .fa {
      color: white;
  }

  .header.simple img {
    border-style: none;
    height: 30px;
    width: auto;
  }

  .page-content {
    min-height: 90vh;
  }

  #site-menus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .tree.dropdown {
    padding: 0;
  }
  .tree.dropdown .dropdown-menu {
    margin-left: 10px;
    width: 100%;
  }
  #footer {
      background-color: #E9F4F8;
      padding-left: 150px;
   }
  .footer {
    border-top: 1px solid #eee;
    background-color: #112C43;
    color: #fff;
    padding: 20px 30px;
  }

  .footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6,.footer p,.footer a{
    color: #fff;
  }
  .footer-content {

  }
  .footer-content h4,
  .footer-content h5 {
      font-size: 14px;
      text-transform: unset;
      font-weight: 400;
  }
  .footer-content .social-links li a {
    background-color: #fff;
  }
  .header-top-right {
    display: flex;
    justify-content: center;
    gap: 50px;
  }
  #header-top-second {
    flex: 1;
    padding: 0 0 0 30px;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            padding: 0 20px;
            max-width: calc(100% - 300px); */
  }
  .header-top-first .logo, .navbar-header .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            max-width: 300px;
  }
  #header-top-second .social-links {
    margin: 0 10px;
  }

  #hide input.input-custom {
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      padding: 0 15px;
      outline: none;
  }
  #hide button.button-custom {
      font-size: 14px;
      font-weight: 700;
  }
  #hide button.button-custom:hover {
      background: transparent;
  }
  #hide button.button-custom:hover i {
      color: #000;
  }
  #hide .button-custom i {
      margin-right: 8px;
  }

  .flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
  }
  .inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  /* ======================================
  3. Layout - End
  ========================================= */

  /* ======================================
  4. Curly Brackets or Objects - Start
  ========================================= */
  .page-slider__videos {
      padding: 130px 0 30px 30px;
  }
  .page-slider__videos .carousel-inner {
      background: #ddd;
      padding: 30px;
        max-width: 100%;
        width: 100%;
  }
  .page-slider__videos .carousel {
      margin-top: 40px;
         max-width: 1100px;
        margin: 0 auto;
        width: 100%;
  }
  .page-slider__videos .carousel-control.left,
  .page-slider__videos .carousel-control.right {
      z-index: 999;
        background: none;
  }
  .page-slider__videos .leftCarouselCtrlInside,
  .page-slider__videos .rightCarouselCtrlInside {
      font-size: 90px;
      top: calc(50% - 45px) !important;
      left: 8px;
  }
  .page-slider__videos .rightCarouselCtrlInside {
      left: auto;
        right:8px;
  }
  .page-slider__videos .carousel-inner .item iframe {
    display: block;
    width: 100%;
    padding-inline: 4%;
    aspect-ratio: 16/9;
    background-color: transparent;
  }
  .page-search .form-group {
    margin-bottom: 0;
  }
  .page-search .form-group #btnSearch {
    position: absolute;
    right: 15px;
    top: calc(50% - 13px);
    background-color: transparent !important;
    color: #666 !important;
    font-size: 18px;
    padding: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    outline: none;
    font-weight: 400;
    margin: 0;
  }
  .page-search .form-group #btnSearch:hover {
    opacity: 0.7;
  }
  .page-content {
    background: #fff;
  }
  .header.simple a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
  }
  .header.simple a {
    text-decoration: none;
  }
  .header.simple a h2, .header.simple a:visited h2 {
    color: #000;
    text-decoration: none;
  }
  .header.simple a:hover h2, .header.simple a:active h2, .header.simple a:focus h2 {
    color: #5D9DAD;
    text-decoration: none;
  }
  .header-container {
    width: calc(100% - 150px);
    margin-left: 150px;
    padding: 20px 0;
    position: -webkit-sticky;
    position: fixed;
    background: #fff;
    top: 0;
    z-index: 1000;
    pointer-events: none;
  }

  header .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  img.content {
    border: 1px solid #999;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .large-title {
      margin-top: 0;
      font-size: 33px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #4EAB9C;
  }

  .page-content .large-title {
      margin-top: 0;
  }

  /* LEFT NAVIGATION */
  .navbar-nav li.dropdown.menu-item {
    width: 100%;
    display: block;
  }
  .left-nav .navbar-nav li.menu-item a {
    padding: 12px 16px 12px 25px;
    line-height: 1;
    font-size: 16px;
    transition: 0.4s;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    color: #777;
  }

  .left-nav .navbar-nav li.menu-item a:hover {
    /* transform: translateX(3px);
  background: #eee; */
  }
  .left-nav .navbar-nav li.menu-item.active > a,
  .left-nav .navbar-nav li.menu-item.active > .menulinks a {
      color: #112C43 !important;
      font-weight: 700;
      background: transparent !important;
  }
  .left-nav .navbar-nav li.menu-item li.menu-item a {
    padding: 10px 20px;
    font-size: 14px;
    line-height: 2;
  }
  .left-nav .navbar-nav li.menu-item li.menu-item .parent-icon {
      height: 38px;
      left: 0;
  }
  .left-nav .navbar-nav li.menu-item li.menu-item .parent-icon::before {
      top: 14px;
      left: 0;
  }'
  .left-nav .navbar-nav li.menu-item li.menu-item .parent-icon[aria-expanded=true]::before {
      top: 12px;
  }
  .left-nav .navbar-nav li.menu-item li.menu-item a {
      position: relative;
  }
  .left-nav .navbar-nav li.menu-item li.menu-item a::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background: #777;
      top: 17px;
      left: 5px;
  }
  .left-nav .navbar-nav li.dropdown.menu-item > .menulinks a::before {
      display: none;
  }
  ul.nav.navbar-nav {
    padding-left: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .parent-icon {
      width: 20px;
      height: 40px;
      background: transparent;
      position: absolute;
      top: 0;
      left: 5px;
      font-size: 0;
  }
  .parent-icon::before {
      position: absolute;
      content: '';
      top: 18px;
      right: auto;
      left: 0;
      color: #777;
      font-size: 0;
      width: 8px;
      height: 8px;
      border-right: 2px solid #777;
      border-top: 2px solid #777;
      transform: rotate(45deg);
      transition: transform .24s ease;
  }
  .parent-icon[aria-expanded=true]::before {
      transform: rotate(135deg);
      top: 17px;
      left: 2px;
  }
  /* LEFT NAVIGATION */


  /* CUSTOM TREE NAVIGATION */
  .tree.dropdown .dropdown-menu {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    /* z-index: 1000; */
    display: block !important;
    /* float: left; */
    /* min-width: 160px; */
    /* padding: 5px 0; */
    /* margin: 2px 0 0; */
    /* background-color: #fff; */
    /* -webkit-background-clip: padding-box; */
    /* background-clip: padding-box; */
    border: none !important;
    border-radius: 0 !important;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
    box-shadow: none !important;
  }
  .main-navigation .navbar-nav > li > ul > li a, .main-navigation .navbar-nav > li > ul > li > ul > li a {
    text-transform: none;
    font-weight: 400;
  }
  .main-navigation .navbar-nav > li a {
    font-size: 16px;
  }
  #site-menus .caret {
    display: none !important;
  }
  /* CUSTOM TREE NAVIGATION */



  /* PAGE TITLE */
  .page-title__container {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    margin-bottom: 20px;
  }
  /* PAGE TITLE */


  /* ======================================
  4. Curly Brackets or Objects - End
  ========================================= */



  /* ======================================
  5. Others - Start
  ========================================= */

  /* IMAGES */
  .img-responsive {
    display: block;
    margin: 10px 0;
    width: 100%;
    height: auto !important;
  }
  .bordered {
    border: 1px solid #999;
    box-shadow: 0 0 12px -2px #d0d0d0;
  }
  /* IMAGES */

  /* FEATURE CONTENT TIPS, NOTES, ETC */
  .feature {
    border-radius: 10px;
    max-width: 700px;
    margin-bottom: 20px;
  }
  .feature span:before {
    font-size: 16px;
  }
    .tip:before { /* this is for tool tips, notes, info, etc */
        content: '\f05a';
        font-family: 'FontAwesome';
    }
    .demo:before { /* this is for demos and videos */
        content: '\f144';
        font-family: 'FontAwesome';
    }
  .feature.blue {
    background-color: rgb(228,239,241);
  }
    .feature.blue p {
        border-left: 1px solid #5d9dad;
    }
    .feature.blue span:before {
        color: #5D9DAD;
    }
  .feature.green {
    background-color: rgb(238,244,211);
  }
    .feature.green p {
        border-left: 1px solid #abcb27;
    }
    .feature.green span:before {
        color: #abcb27;
    }
  .feature span, .feature p {
    padding: 15px;
  }
  .feature p {
    margin: 0;
    font-size: 14px;
  }
  .feature a {
    text-decoration: underline;
    transition: none;
    font-size: 14px;
  }
  /* FEATURE CONTENT TIPS, NOTES, ETC */


  /* SPACERS */
  .spacer-25 {
    height: 25px;
  }
  .spacer-50 {
    height: 50px;
  }
  .spacer-100 {
    height: 100px;
  }
  /* SPACERS */


  /* ======================================
  5. Others - End
  ========================================= */


  /* ==================================================================================================
  I - Mobile - End
  ===================================================================================================== */


  /* ==================================================================================================
  II - Large Mobile - Start
  ===================================================================================================== */

  @media (max-width: 470px) {

  }

/* For images with less than 700px width*/
img.small {
    width:auto;
}

  @media (min-width: 480px) {

    /* ======================================
    1. Typography - Start
    ========================================= */

    /* ======================================
    1. Typography - End
    ========================================= */

    /* ======================================
    2. Layout - Start
    ========================================= */


    /* ======================================
    2. Layout - End
    ========================================= */

    /* ======================================
    3. Curly Brackets or Objects
    - Start
    ========================================= */

    /* ======================================
    3. Curly Brackets or Objects
    - End
    ========================================= */

  }

  /* ==================================================================================================
  II - Large Mobile - End
  ===================================================================================================== */


  /* ==================================================================================================
  III - Tablets - Start
  ===================================================================================================== */

  @media (max-width: 767px) {
      .header-container {
          display: none;
      }
    .header-top.dark {
        flex-direction: column;
        gap: 4px;
    }
    .header-top-right {
        justify-content: space-between;
    }
    .flex__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding: 0;
    }
    .container-fluid>.navbar-header { margin: 0; }
    .container-fluid>.navbar-header {
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        right: 0;
    }
    .navbar-header .navbar-toggle {
      margin: 0 0 15px;
    }

    .header.simple {
        width: 100%;
    }
    .navbar.navbar-default {
        border: none !important;
    }
    .left-nav {
        width: 100%;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 9;
    }
    .page-search {
        padding: 40px 15px;
    }
    .page-slider__videos {
        padding: 30px 15px;
    }
    .page-content {
        padding: 15px;
    }
    #site-menus, .left-nav {
        background: #fafafa;
      padding: 20px;
    }
    .nav.navbar-nav {
        background: #fafafa;
    }
    #site-menus.active {
        background: #fafafa;
        padding: 0 !important;
    }
    #site-menus.active .navbar-collapse {
      margin: 20px 0px 0px;
    }
    .left-nav .navbar-nav li.menu-item a {
        line-height: 1.4;
    }
    nav.navbar.navbar-default .menu-search {
      max-width: 100%;
    }
    .side-footer {
      display: none;
    }

    /* HIDE SUBLEVEL MENUS IN MOBILE */
    .tree.dropdown .dropdown-menu {
        display: none !important;
    }
    /* HIDE SUBLEVEL MENUS IN MOBILE */

    .flex__container .right-nav {
        display: none;
    }

    h1 {
      font-size: 20px !important;
    }
    h1.large {
      font-size: 24px !important;
      margin: 0;
      display: flex;
      align-items: center;
    }
    #footer {
      padding-left: 0;
    }
  }


  @media (min-width: 768px) {


    /* ======================================
    1. Typography - Start
    ========================================= */

    /* ======================================
    1. Typography - End
    ========================================= */

    /* ======================================
    2. Layout - Start
    ========================================= */


    /* WebEd Grid */
    .w-100 {width: 100%;}
    .w-95 {width: 95%;}
    .w-90 {width: 90%;}
    .w-85 {width: 85%;}
    .w-80 {width: 80%;}
    .w-75 {width: 75%;}
    .w-70 {width: 70%;}
    .w-65 {width: 65%;}
    .w-60 {width: 60%;}
    .w-55 {width: 55%;}
    .w-50 {width: 50%;}
    .w-45 {width: 45%;}
    .w-40 {width: 40%;}
    .w-35 {width: 35%;}
    .w-33 {width: 33%;}
    .w-30 {width: 30%;}
    .w-25 {width: 25%;}
    .w-23 {width: 23%;}
    .w-20 {width: 20%;}
    .w-15 {width: 15%;}
    .w-10 {width: 10%;}
    .w-5 {width: 5%;}


    #page-start {
      /* margin-top: -60px; */
    }

    .flex__container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        background: #fff;
    }

    .navbar.navbar-default {
        background-color: transparent !important;
        border: none !important;
        margin: 0 !important;
        float: none !important;
        max-width: 300px;
        width: 100%;
    }

    /* LEFT NAVIGATION */
    .flex__container .left-nav {
        height: 100vh;
        position: sticky;
        position: -webkit-sticky;
        top: 0px;
        width: 150px;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        padding: 16px 0;
        min-height: 100%;
        max-height: 100%;
      overflow-x: hidden !important;
      overflow-y: scroll !important;
      background-color: #E9F4F8;
    }
    .flex__container .right-nav {
        height: 100vh;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        width: 130px;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-left: 10px;
        min-height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      background: #fff;
    }

    .mobilePopUp {
    display: block;
    }

    .navbar-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-nav {
        margin-top: 10px;
    }

    .navbar-collapse {
        padding-left: 0;
    }
    .navbar-collapse ul.navbar-nav {
        width: 100%;
    }

    #site-menus {
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        margin-left: 0;
    }

    .container-fluid>.navbar-header {
        padding-right: 0;
        padding-left: 0;
    }

    ul.nav.navbar-nav li a {
        line-height: 1.3 !important;
    }

    /*.navbar-default .navbar-nav > .active > a:after {
        content: '\f105';
        font-family: 'FontAwesome';
        float: right;
        margin-right: 10px;
    }

    .left-nav .navbar-nav li.menu-item li.menu-item a:before {
        content: '\f105';
        font-family: 'FontAwesome';
        margin-right: 5px;
        font-size: 10px;
    }*/

    .nav.navbar-nav > li.menu-item > a {
        /* color: #555!important; */
        /*font-size: 14px !important;*/
    }
    /* LEFT NAVIGATION */

    .page-content__overview {
        flex: 1;
    }
    .page-content__overview .page-content {
        width: auto;
    }
    .page-content__wrap {
        display: flex;
    }
    .page-content {
        flex: 1;
        background: #fff;
        border-left: 1px solid #eee;
        width: 100%;
        padding: 100px 0 40px 30px;
    }
    .page-search {
        padding: 40px 30px;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0 60px;
    }

    .page-search > form {
        flex: 1;
    }
    .page-search input[type=search] {
        height: 60px;
    }

    .page-title__container .members__toggle {
        display: none;
    }


    /* ======================================
    2. Layout - End
    ========================================= */


    /* ======================================
    3. Curly Brackets or Objects
    - Start
    ========================================= */



    /* ======================================
    3. Curly Brackets or Objects
    - End
    ========================================= */

  }

  /* ==================================================================================================
  III - Tablets - End
  ===================================================================================================== */


  /* ==================================================================================================
  IV - Desktop - Start
  ===================================================================================================== */

  @media (max-width: 991px) {

    #header-top-second ul li a span {
        display:none;
    }

  }

  @media (min-width: 992px) {
    .header-container {
      width: calc(100% - 260px);
      margin-left: 260px;
    }
    .flex__container .left-nav {
      width: 260px;
    }
    #footer {
      padding-left: 260px;
    }

      .flex__container .right-nav {
      width: 450px;
      }

    /* ======================================
    1. Typography - Start
    ========================================= */

    /* ======================================
    1. Typography - End
    ========================================= */

    /* ======================================
    2. Layout - Start
    ========================================= */


    /* ======================================
    2. Layout - End
    ========================================= */

    /* ======================================
    3. Curly Brackets or Objects
    - Start
    ========================================= */

    /* ======================================
    3. Curly Brackets or Objects
    - End
    ========================================= */

  }



  /* ==================================================================================================
  IV - Desktop - End
  ===================================================================================================== */

  /* ==================================================================================================
  V - Large Desktop - Start
  ===================================================================================================== */

  @media (max-width: 1023px) {

    /* .contact-info li a span {
        display: none;
    } */

  }
  @media (min-width: 1400px) {

    /* ======================================
    1. Typography - Start
    ========================================= */

    /* ======================================
    1. Typography - End
    ========================================= */

    /* ======================================
    2. Layout - Start
    ========================================= */

    /* ======================================
    2. Layout - End
    ========================================= */

    /* ======================================
    3. Curly Brackets or Objects
    - Start
    ========================================= */

    /* ======================================
    3. Curly Brackets or Objects
    - End
    ========================================= */

  }

  @media (max-width:1399px){

    /* ======================================
    2. Layout - Start
    ========================================= */


    /* ======================================
    2. Layout - End
    ========================================= */
  }

  /* ==================================================================================================
  V - Large Desktop - End
  ===================================================================================================== */

  @media (min-width:1400px){

  }
  /* ==================================================================================================
  IMPORTANT: Do not write below this. Kindly write or update the css above.
  ===================================================================================================== */