.header {
    background-size: cover;
    background-repeat: no-repeat;
}

header {
    background-size: cover;
    background-repeat: no-repeat;
}

.header-text {
    color: #f6f3f3;
    font-size:14 ;
    -webkit-text-stroke: 0.3px black;
    text-shadow:
   2px 2px 0 #000,
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
}

.header-p-text {
    color: #f6f3f3 !important;
}

.back-to-top {
    display: none; /* 默認是隱藏的，這樣在第一屏才不顯示 */
    position: fixed; /* 位置是固定的 */
    bottom: 20px; /* 顯示在頁面底部 */
    right: 30px; /* 顯示在頁面的右邊 */
    z-index: 99; /* 確保不被其他功能覆蓋 */
    border: 1px solid #5cb85c; /* 顯示邊框 */
    outline: none; /* 不顯示外框 */
    background-color: #fff; /* 設置背景背景顏色 */
    color: #5cb85c; /* 設置文本顏色 */
    cursor: pointer; /* 滑鼠移到按鈕上顯示手型 */
    padding: 10px 15px 15px 15px; /* 增加一些內邊距 */
    border-radius: 10px; /* 增加圓角 */
}

.back-to-top:hover {
    background-color: #5cb85c; /* 滑鼠移上去時，反轉顏色 */
    color: #fff;
}

body {
    min-height: auto;
}

.collapsing {
    transition: none !important;
}

.navbar-left { max-width: 100%; }

.no-bg .navbar {
    
    margin-top: -10px;
}

@media only screen and (max-width: 479px) {
    .accordion .card-title a {
        padding: 16px 0px 16px 0px !important;
    }

    .jobboardimg {
        display: none;
    }

    .navbar-brand {
        flex-direction: row-reverse;
        position: relative;
        right: -1.2rem;
    }
}

div.dataTables_wrapper div.dataTables_filter {

    padding-bottom: 50px;
     text-align: center !important;


}

div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 5px;
    border: 1px solid #eaeff4;
    padding: 10px;
     width: 300px !important;

 }

 .footer {
     border-style: none !important;
 }

 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #8d8d8d !important;
opacity: 1; /* Firefox */
}

.by-andrey {
    left: 0;
    position: fixed;
    bottom: 0px;
    z-index: 9999;
    background-color: #00a760;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 21px;
    padding-top: 5px;
    -webkit-box-shadow: 6px -4px 63px -8px rgba(0, 0, 0, 0.75);
    box-shadow: 6px -4px 63px -8px rgba(0, 0, 0, 0.75);
    border-top: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    border-top-right-radius: 15px;
    color: white;
}

.by-andrey:hover {
    color: white;
    padding-bottom: 25px;
    background-color: #028b51;
    -webkit-box-shadow: 6px -4px 5px -8px black;
    box-shadow: 6px -4px 5px -8px black;
}

.super-button {
    left: 1.2em;
    position: fixed;
    bottom: 1.2em;
    z-index: 99;
      display: inline-block;
      padding-left: 1.2em;
    padding-right: 1.2em;
    padding-bottom: 0.6em;
    padding-top: 0.6em;
    margin-top: 20px;
      text-decoration: none;
      text-align: center;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      color: white;
    }
    .super-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;


      background-color: rgba(200, 251, 255, 0.315);
      border-radius: 20px;
      transition: box-shadow .5s ease, -webkit-transform .2s ease;
      transition: box-shadow .5s ease, transform .2s ease;
      transition: box-shadow .5s ease, transform .2s ease, -webkit-transform .2s ease;
      will-change: transform;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
              transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
    }


    a {
        color: #fbbc04;
    }

    a:hover,a:focus {
        color: #fbbc04;
    }



    .super-button:hover {
      bottom: 1.6em;

    }

    .super-button::after {
      position: relative;
      display: inline-block;
      content: attr(data-title);
      transition: -webkit-transform .2s ease;
      transition: transform .2s ease;
      transition: transform .2s ease, -webkit-transform .2s ease;
      font-weight: bold;
      letter-spacing: .01em;
      will-change: transform;
      -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
              transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
    }

    .avatar {
        min-width: 48px;
    }


    input[name="search"] {
        background-color: white !important;
       color: black !important;
    }

    





    /* ----------------------------------------------------------------------------- */
    /* <Filters and Search Style> */

        .form-control:not(.search-bar) {
            background-color: #fbbc04;
            border: 1px solid #fbbc04;
            font-weight: 400;
            color: #ffffff
        }

        .selected-option-class:not([disabled]) {
            color: #fbbc04 !important;
            background-color: #ffffff !important;
        }

        select[disabled] {
         background-color: #e9ecf0 !important;
         border-color: #e9ecf0 !important;
         color: white;
         }

        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            background-color: #fbbc04;
            color: #ffffff !important;
        }

        .nav-link
        {
          cursor: pointer;
          color: inherit;
          pointer-events: auto;
        }
        .nav-link.active
        {
          color: inherit;
          pointer-events: none;
        }



        .input-group {
            background-color: white;
            box-shadow: 1px 1px 14px -1px rgba(0, 0, 0, 0.2)!important;
            color: #fbbc04;
        }

        .filter-count-text {
            font-weight: 600;
            color: #fbbc04;
        }

        #load_more_btn {
            background-color: #fbbc04;
            color: #ffffff;
            margin-bottom: 3rem;
        }
    /* </Filters and Search Style> */
    /* ----------------------------------------------------------------------------- */

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: 'Lobster' ;
    }

    #email {
        box-shadow: -3px 1px 10px 3px rgba(0,0,0,0.35);
    }



    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(238, 231, 222);
        overflow-x: hidden;
        transition: 0.5s;
        text-align: center;
        position: fixed;
      }

      .sidenav-button{
        display: inline-block;
        width: 155px;
        height: auto;
        font-size: 20px;
        font-family: Arial;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #fcc736;
        border: none;
        border-radius: 5px;
        box-shadow: 0 2px #999;
        margin: 10px 5px 0px 5px;
      }

      .sidenav-button:hover{
        background-color: #dfb648;
        transition: 0.3s;
      }

      .sidenav-button:active{
        background-color: #dfb648;
        
        transform: translateY(2px);
      }

      .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.5s;
      }
      
      .sidenav a:hover {
        color: #f1f1f1;
      }
      
      .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
      }
      @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
      }

      .ham {
        width: 80px;
        height: 50px;
        border-radius: 5px;
        cursor: pointer;
        display: block;
        position: relative;
      }
      
      .ham-origin {
        position: absolute;
        top: 30px;
        left: 30px;
      }
      
      .ham-bar {
        height: 2.5px;
        width: 26px;
        position: absolute;
        background: rgb(0, 0, 0);
        margin: 5px 0 0 -10px;
        transition: all .5s;
      }
      
      .ham-bar--top {
        transform: translateY(-6px);
      }
      
      .ham-bar--bottom {
        transform: translateY(6px);
      }

      .hamtext {
        position: absolute;
        top: 20px;
        left: -12px;
        font-size: large;
        width: 30px;
        background-color: #eaeff4;
        text-align:center;
        
      }
      
      #nav-toggle {
        display: none;
      }
      
      #nav-toggle:checked ~ .ham .ham-bar--middle {
        opacity: 0;
      }
      
      #nav-toggle:checked ~ .ham .ham-bar--top {
        transform: rotate(-45deg);
      }
      
      #nav-toggle:checked ~ .ham .ham-bar--bottom {
        transform: rotate(45deg);
      }

      .announcement {
        font-size:18px;
        font-weight: 450;
        line-height: 26px;
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: 2px;
      }
      
      .selected-option-class {
        font-weight: 400;
       }

       .disabled {
         pointer-events: none;
         cursor: default;
       }
       .jobboard-card-child {
          border-style: solid;
          border-width: 1px;
          border-color: #ececec;
          border-left: none;
          border-right: none;
          border-top: none;
        }


        .mat-card {
          transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
          display: block;
          position: relative;
          padding: 16px;
          border-radius: 4px;
      }
      .mat-card {
        background: #fff;
        color: rgba(0,0,0,.87);
    }
    .mat-elevation {
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    }

    .mat-elevation:hover{
      box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
    }



    .btn {
      font-size: 11px;
      padding: 8px 10px 6px;
      letter-spacing: 1.7px;
      text-transform: uppercase;
      border-radius: 2px;
      outline: none;
      -webkit-transition: .15s linear;
      transition: .15s linear;
      }