/* 
    custom styles that get applied over bootstrap
    remember to add !important to make sure your new style for each attribute gets applied
    e.g. background-color: #000 !important;
    
    >> primary colourss
    > #285365 darker blue
    > #346b82 blue
    > #6db7cc light blue
    
    >> secondary colours
    > #854979 purple
    > #cc514d red
    > #96b239 green
    > #e17f25 dark yellow/orange
    > #ecbf38 yellow
    */

    /*	Main elements	*/
    body {
      /* Margin bottom by footer height */
      /* margin-bottom: 80px !important; */
      display: flex;
      flex-flow: column;
      height: 100vh;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {}

    img {
      image-rendering: -webkit-optimize-contrast;
    }

    a {
      transition: 0.3s !important;
    }

    a:hover {
      text-decoration: none;
      color: #6db7cc;
    }

    input {
      transition: 0.3s !important;
    }

    /*	Override bootstrap	*/
    .form-control:focus {
      border-color: #e17f25;
    }

    .btn {
      transition: 0.3s !important;
    }

    .navbar-inverse {
      border-radius: 0px !important;
    }

    .navbar {}

    .navbar-inverse .navbar-nav>li>a {}

    .navbar-inverse .navbar-nav>.active>a {}

    .navbar-inverse .navbar-nav>li>a:hover {}

    .navbar-inverse .navbar-toggle {}

    .navbar-inverse .navbar-toggle {}

    .navbar-inverse .navbar-toggle:focus,
    .navbar-inverse .navbar-toggle:hover {}

    .navbar-toggle {}

    .nav-pills>li>a {}

    .nav-pills>li>a:hover {}

    .nav-pills>li.active>a,
    .nav-pills>li.active>a:focus,
    .nav-pills>li.active>a:hover {}


    .nav-tabs>li>a {}

    .nav-tabs>li>a:hover {}

    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {}

    .glyphicon-small {
      font-size: 0.6em !important;
    }

    .glyphicon-regular {
      font-size: 1em !important;
    }

    .glyphicon-large {
      font-size: 2em !important;
    }

    .glyphicon {
      text-decoration: none !important;
    }

    /*PRIMARY BUTTON*/

    .btn-primary {
      background-color: #854979;
      border-color: #854979;
    }

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:focus {
      background-color: #955087 !important;
      outline: none !important;
    }

    .panel-primary {
      border-color: #346b82 !important;
    }

    .panel-primary>.panel-heading {
      background: #346b82 !important;
      border-color: #346b82 !important;
      color: white !important;
    }



    /*	Our Own !!	*/
    /* CUSTOM SIDE BAR */

    .sidenav-toggle {
      margin-left: -5px;
      margin-top: -5px;
      border-radius: 0px 0px 5px;
      background-color: #eceed8;
      color: #ffffff !important;
      margin-bottom: 9px;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 10;
      border: none;
    }

    .sidenav-toggle:focus,
    .sidenav-toggle:active,
    .sidenav-toggle.active,
    .sidenav-toggle:hover {
      outline: none !important;
      box-shadow: none !important;
      background-color: #eceed8 !important;
    }

    .sidenav-toggle:hover {
      background-color: #eceed8 !important;
    }

    .right-label {
      margin-right: -5px;
      margin-top: -5px;
      border-radius: 0px 0px 0px 5px;
      cursor: default;
      background-color: #eceed8;
      color: #FFFFFF !important;
      margin-bottom: 9px;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 10;
      float: right;
      border: none;
    }

    .right-label:focus,
    .right-label:active,
    .right-label:hover {
      outline: none !important;
      box-shadow: none !important;
      background-color: #eceed8 !important;
    }

    .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
    }


    /* ---------------------------------------------------
    SIDEBAR STYLE
    ----------------------------------------------------- */

    .wrapper {
      display: flex;
      flex: 2;
      align-items: stretch;
      /*border-top: 9px solid #eceed8;*/
    }

    #sidebar {
      min-width: 250px;
      max-width: 250px;
      background: #eceed8;
      color: #ffffff;
      transition: all 0.3s;
    }

    #sidebar a,
    #sidebar a:hover,
    #sidebar a:focus {
      color: inherit;
    }

    #sidebar.active {
      margin-left: -250px;
    }

    #sidebar .sidebar-header {
      padding: 20px;
      background: #eceed8;
    }

    #sidebar ul.components {
      padding: 20px 0;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }

    #sidebar ul p {
      color: #fff;
      padding: 10px;
    }

    #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
      color: #365253 !important;
    }





    #sidebar ul li.active>a,
    #sidebar[aria-expanded="true"] {
      color: white !important;
      font-weight: bold;
      /*background: #e7e4df;*/
      /*text-decoration: underline;*/
    }

    a[data-toggle="collapse"] {
      position: relative;
    }

    .nav-section[aria-expanded="false"]::before,
    .nav-section[aria-expanded="true"]::before {
      content: '\e259';
      display: block;
      position: absolute;
      right: 20px;
      font-family: 'Glyphicons Halflings';
      font-size: 0.6em;
    }

    .nav-section[aria-expanded="true"]::before {
      content: '\e260';
    }

    ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #eceed8;
      color: #ffffff
    }

    ul ul a:hover {
      background: #f59338;
    }

    ul ul a.active {
      background: #eceed8;
      color: #fff !important;
    }

    ul.CTAs {
      padding: 20px;
    }

    ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
    }

    a.download {
      background: #fff;
      color: #7386D5;
    }

    a.article {
      background: #e17f25 !important;
      color: #fff !important;
    }

    a.article:hover {
      background: #0061A0 !important;
    }


    /* ---------------------------------------------------
    CONTENT STYLE
    ----------------------------------------------------- */

    #content {
      padding: 5px;
      min-height: 75.7vh;
      transition: all 0.3s;
      width: 100%;
      background-color: white;
      /* border-bottom: 1px solid #dddddd; */
      padding-bottom: 35px;
      background: url(/Assets/Default/Images/background.jpg);
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
    }

    #content p a {
      /* color: */
    }


    /* ---------------------------------------------------
    MEDIAQUERIES
    ----------------------------------------------------- */

    @media (max-width: 768px) {
      #sidebar {
        margin-left: -50%;
        min-width: 50%;
        max-width: 50%;
      }

      #sidebar.active {
        margin-left: 0;
      }

      #sidebarCollapse span {
        display: none;
      }
    }

    /* CUSTOM SIDE BAR */

    /* BOTTOM STICKY CONTAINER */
    .sticky-bottom {
      position: -WEBKIT-STICKY;
      position: -moz-sticky;
      position: -ms-sticky;
      position: -o-sticky;
      position: sticky;
      bottom: 0px;
      z-index: 7;
      padding: 5px;
      background-color: whitesmoke;
      border: 1px solid #dddddd;
      border-radius: 4px;
      margin-bottom: 15px;
    }

    /* BOTTOM STICKY CONTAINER */

    /* ACTION BUTTON (PART OF STICKY BOTTOM) */
    .actions-area-primary {
      background-color: #3379B7 !important;
      border: 1px solid #336998 !important;
      box-shadow: inset 0 1px 1px #336998 !important;
      padding: 7px;
      width: 100%;
      margin-bottom: 0px !important;
      color: white !important;
      border-radius: 4px !important;
    }

    .actions-area-primary:hover {
      background-color: #336998 !important;
      border: 1px solid #2c4f6d !important;
      box-shadow: inset 0 1px 1px #2c4f6d !important;
    }

    .actions-area-primary:active {
      outline: none;
    }

    .actions-area-default {
      background-color: #FFFFFF !important;
      border: 1px solid #CCCCCC !important;
      box-shadow: inset 0 1px 1px #CCCCCC !important;
      padding: 7px;
      width: 100%;
      margin-bottom: 0px !important;
      color: #333333 !important;
      border-radius: 4px !important;
    }

    .actions-area-default:hover {
      background-color: #E6E6E6 !important;
      border: 1px solid #B5B5B5 !important;
      box-shadow: inset 0 1px 1px #B5B5B5 !important;
    }

    .actions-area-default:active {
      outline: none;
    }

    .actions-area-success {
      background-color: #E43295 !important;
      border: 1px solid #B72878 !important;
      box-shadow: inset 0 1px 1px #B72878 !important;
      padding: 7px;
      width: 100%;
      margin-bottom: 0px !important;
      color: white !important;
      border-radius: 4px !important;
    }

    .actions-area-success:hover {
      background-color: #B72878 !important;
      border: 1px solid #8C1F5B !important;
      box-shadow: inset 0 1px 1px #8C1F5B !important;
    }

    .actions-area-success:active {
      outline: none;
    }

    /* ACTION BUTTON (PART OF STICKY BOTTOM) */

    /* CUSTOM LOADING SPINNER ANIMATION */
    .spinner {
      margin: 20px auto;
      width: 50px;
      height: 40px;
      text-align: center;
      font-size: 10px;
      margin-top: 120px;
    }

    /* background-color: #333; */
    /* height: 100%; */
    /* width: 6px; */
    /* display: inline-block; */

    /* -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; */
    /* animation: sk-stretchdelay 1.2s infinite ease-in-out; */
    /* } */

    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    @-webkit-keyframes sk-stretchdelay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4)
      }

      20% {
        -webkit-transform: scaleY(1.0)
      }
    }

    @keyframes sk-stretchdelay {

      0%,
      40%,
      100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }

      20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }

    /* CUSTOM LOADING SPINNER ANIMATION */

    .center-both {}

    .header-custom {
      background-color: #eceed8;
      border-bottom: 4px solid #587a7b;
      padding: 0px 8px 15px;
    }

    .header-custom h2 {
      color: black;
    }

    html {
      position: relative !important;
      min-height: 100% !important;
    }

    .spinner {
      margin: 20px auto;
      width: 50px;
      height: 40px;
      text-align: center;
      font-size: 10px;
      margin-top: 120px;
    }

    .spinner>div {
      background-color: #333;
      height: 100%;
      width: 6px;
      display: inline-block;

      -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
      animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    @-webkit-keyframes sk-stretchdelay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4)
      }

      20% {
        -webkit-transform: scaleY(1.0)
      }
    }

    @keyframes sk-stretchdelay {

      0%,
      40%,
      100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }

      20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }

    .footer {
      /* position: absolute !important; */
      /* Set the fixed height of the footer here */
      background-color: #346b82 !important;
      border-top: 1px solid #587a7b !important;

    }

    .footer-content {
      color: #fff;
      font-size: small;
      text-align: center;
      margin-top: 15px;
    }

    .footer-content a {
      color: #fff !important;
    }

    footer-content a:hover {
      text-decoration: underline;
    }

    #scroll-links {
      position: fixed;
      top: initial;
      left: inherit;
      z-index: 1001;
      display: none;
      background-color: rgb(70, 70, 71);
      background-color: rgba(70, 70, 71, 1);
      padding: 10px;
    }

    #button-fixed {
      position: fixed;
      top: 50px;
      z-index: 1001;
      background-color: rgb(255, 255, 255);
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
    }

    .affix {
      top: 0;
      width: 100%;
      z-index: 9999 !important;
    }

    .affix+.container-fluid {
      padding-top: 70px;
    }

    .fluid-background {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top;
      background-attachment: fixed;
    }

    .fluid-padding {
      padding-top: 20px;
    }

    .reduce-h1-padding {
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }