/* Basic reset & styling */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #ffffff;
      color: #333;
    }
    h1, h2, h3 {
      margin: 0;
    }

.m__calculator *,
.m__calculator ::after,
.m__calculator ::before {
    box-sizing: border-box
}

.m__calculator *, .modal-backdrop * {
    font-family: inherit;
    font-family: 'Inter', sans-serif;
}



    .container {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      /* padding: 20px; */
      background: #fff;
      /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
      border-radius: 4px;
    }

    /* Top bar */
    .top-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      /* background: #1a2fa8; */
      z-index: 3;
    }
    .top-bar img {
      width: 140px;
      height: 140px;
      object-fit: cover;
    }

    /* Summary + Chart layout */
    .summary-chart-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      /* margin-bottom: 20px; */
      background: rgb(70 159 255 / 16%);
      /* border: 2px solid #1a2fa8; */
      padding: 15px;
      border-radius: 6px;
      max-width: 400px;
      width: 100%;
      z-index: 3;
      color: #ffffff;
    }
    .summary-container {
      flex: 1;
      margin-left: 20px;
    }
    .summary-container p {
      margin: 10px 0 0;
      font-size: 13px;
    }
    .chart-container {
      flex: 1;
      text-align: center;
      max-width: 128px;
    }

    /* Buttons container */
    .buttons-container {
      text-align: left;
      float: left;
      padding: 0 20px;
      margin-bottom: -5px;
      z-index: 9;
      display: inline-block;
      position: relative;
    }
    .buttons-container button {
      margin-right: 3px;
      padding: 7px 15px;
      border: none;
      background: #007BFF;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .buttons-container button:hover {
      background: #0056b3;
    }

    /* DataTable styles */
    #jobsTable_wrapper {
      margin-top: -50px;
      padding: 10px 20px;
      display: inline-block;
      width: 100%;
    }
    .currency-cell {
      text-align: left;
      /* min-width: 38px !important; */!i;!;
    }

    /* Modal styling */
    .modal-backdrop {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 999;
      align-items: center;
      justify-content: center;
      overflow: auto;
      /* min-height: 418px; */
      /* height: 100vh; */
    }
    .modal {
      background: #fff;
      padding: 20px;
      width: 100%;
      max-width: 800px;
      /* max-width: 90%; */
      border-radius: 4px !important;!i;!;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      /* min-height: 220px; */
      height: 90%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .modal h2 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 18px;
      color: #0d1754;
    }
    .modal .form-group {
      margin-bottom: 0;
    }
    .modal .form-group label {
      display: inline-block;
      width: 120px;
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 4px;
    }
    .modal .form-group input,
    .modal .form-group select {
      padding: 8px;
      width: calc(100% - 125px);
      box-sizing: border-box;
      outline: none;
      border: 1px solid #6e6e6e;
      font-size: 13px;
    }
    .modal-actions {
      text-align: right;
      margin-top: 10px;
    }
    .modal-actions button {
      margin-left: 2px;
      padding: 8px 14px;
      border: none;
      border-radius: 4px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .close-btn {
      background: #ccc;
      color: #000;
    }
    .save-btn {
      background: #0d1754;
      color: #fff;
    }

    /* Analytics Table */
    .analytics-table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      font-size: 12px;
      /* min-height: 400px; */
    }
    .analytics-table th, .analytics-table td {
      border: 1px solid #5f5f5f;
      padding: 8px 10px;
      text-align: center;
    }


    table.dataTable thead th, table.dataTable tfoot th {
    font-weight: bold;
    background: #1a2fa8;
    color: white;
    font-size: 12px;
    max-width: 92px;
    min-width: 60px;
    text-wrap: inherit;
}

table.dataTable thead>tr>th.sorting:before{
  margin: 1px 0px;
}

.header_block {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 20px;
    gap: 10px;
}

.header_block>div {
    /* flex-basis: 33%; */
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 4px 6px;
    font-size: 13px;
}


table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

button.remove-btn, button.edit-btn {
    border: 0;
    outline: none;
    width: 37px;
    height: 30px;
    border-radius: 4px;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

button.remove-btn svg, button.edit-btn svg {
    width: 18px;
    color: white;
}

button.remove-btn {
    background: #b80000;
}

button.edit-btn {
    background: #000000;
}

h3 {
    font-size: 17px;
}

.buttons-container button svg {
    width: 20px;
    margin-right: 6px;
}

.top-bar h2 {
    font-size: 33px;
    font-weight: 800;
    line-height: 1;
    color: white;
}

.dataTables_wrapper .dataTables_filter {
    font-size: 14px;
    background: rgb(0 123 255 / 23%);
    color: white !important;
    padding: 6px 8px;
    border-radius: 4px;
    margin-left: auto;
    margin-bottom: 10px;
}
.m

div#jobsTable_filter label {}

div#jobsTable_filter label {
    display: flex;!i;!;
    align-items: center;!i;!;
    justify-content: center;
    /* width: 100%; */
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ffffff;
    outline: none;
    border-radius: 4px;
    padding: 8px 6px;
    background-color: #ffffff;
    min-width: 250px;
    margin-left: 15px;
}

.top-bar h2 span {
    font-size: 20px;
    font-weight: 600;
    color: #59c200;
    font-style: italic;
}

.magicpattern {
  width: 100%;
  height: 100%;
  /* background-size: contain; */
  /* background-position: top center; */
  /* background-repeat: repeat; */
  /* background-image: url("data:image/svg+xml;utf8,%3Csvg width=%222000%22 height=%221400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%232238b3%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%235969c6%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22b%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%232a40be%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%235f6fce%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22c%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%233249ca%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%236576d7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22d%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%233b52d5%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%236c7ddf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22e%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23435ae0%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%237283e7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22f%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%234b63eb%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23788af0%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22g%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23536cf6%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%237e90f8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22h%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23627afc%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23899bfc%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22i%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23798dfd%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%239aa9fd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22j%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%238fa0fd%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23abb7fd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22k%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23a5b3fd%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23bbc6fd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22l%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23bcc6fe%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23ccd4fe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22m%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23d2d9fe%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23dde2fe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22n%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23e9ecff%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23eef0ff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id=%22o%22 gradientTransform=%22rotate(90)%22%3E%3Cstop offset=%225%25%22 stop-color=%22%23fff%22%2F%3E%3Cstop offset=%2295%25%22 stop-color=%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill=%22%231a2fa8%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cpath d=%22M0 87c99.344-2.009 198.689-4.018 282-10s150.59-15.938 223-13c72.41 2.938 149.954 18.77 227 27 77.046 8.23 153.595 8.857 245 9 91.405.143 197.665-.199 293-9 95.335-8.801 179.744-26.062 256-30 76.256-3.938 144.359 5.446 222 12 77.641 6.554 164.82 10.277 292 14l-40 1313H0Z%22 fill=%22url(%23a)%22%2F%3E%3Cpath d=%22M0 175c97.824 1.181 195.648 2.362 275 10s140.234 21.732 214 13c73.766-8.732 160.418-40.29 253-46 92.582-5.71 191.095 14.429 276 17 84.905 2.571 156.201-12.424 223-19 66.799-6.576 129.1-4.732 225 1s225.4 15.352 320 20 154.3 4.324 254 4l-40 1225H0Z%22 fill=%22url(%23b)%22%2F%3E%3Cpath d=%22M0 262c69.034-5.265 138.068-10.53 233-17 94.932-6.47 215.76-14.147 293-9 77.24 5.147 110.889 23.117 194 24 83.111.883 215.685-15.321 310-18 94.315-2.679 150.373 8.169 228 8 77.627-.169 176.823-11.353 260-10 83.177 1.353 150.336 15.244 228 21 77.664 5.756 165.832 3.378 294 1l-40 1138H0Z%22 fill=%22url(%23c)%22%2F%3E%3Cpath d=%22M0 350c74.534 9.198 149.067 18.396 225 25 75.933 6.604 153.265 10.615 245-1 91.735-11.615 197.874-38.855 287-43 89.126-4.145 161.238 14.804 241 18 79.762 3.196 167.173-9.36 245-17 77.827-7.64 146.069-10.365 234 0 87.931 10.365 195.552 33.818 286 39 90.448 5.182 163.724-7.91 277-21l-40 1050H0Z%22 fill=%22url(%23d)%22%2F%3E%3Cpath d=%22M0 437c86.267 7.15 172.533 14.3 264 14 91.467-.3 188.134-8.048 264-13 75.866-4.952 130.93-7.109 209-8s179.149-.518 256 3 129.476 10.18 224 13c94.524 2.82 230.949 1.798 319 1 88.051-.798 127.729-1.37 197-3s168.136-4.315 307-7l-40 963H0Z%22 fill=%22url(%23e)%22%2F%3E%3Cpath d=%22M0 525c72.326-11.332 144.653-22.665 233-16 88.347 6.665 192.716 31.326 272 32 79.284.674 133.485-22.64 210-26 76.515-3.36 175.345 13.232 276 10 100.655-3.232 203.134-26.289 285-26 81.866.289 143.118 23.924 211 33s142.395 3.593 229 0c86.605-3.593 185.303-5.297 324-7l-40 875H0Z%22 fill=%22url(%23f)%22%2F%3E%3Cpath d=%22M0 612c78.979 4.047 157.958 8.094 244 2 86.042-6.094 179.149-22.33 261-15 81.851 7.33 152.448 38.225 226 36 73.552-2.225 150.06-37.571 231-49 80.94-11.429 166.314 1.06 258 8 91.686 6.94 189.685 8.33 275 15s157.947 18.62 240 20c82.053 1.38 173.526-7.81 305-17l-40 788H0Z%22 fill=%22url(%23g)%22%2F%3E%3Cpath d=%22M0 700c100.403 1.666 200.805 3.333 269 0s104.18-11.665 193-7c88.82 4.665 230.471 22.327 323 26 92.529 3.673 135.935-6.643 201-13s151.79-8.756 238-11c86.21-2.244 171.902-4.335 258 2 86.098 6.335 172.6 21.096 259 23s172.7-9.048 299-20l-40 700H0Z%22 fill=%22url(%23h)%22%2F%3E%3Cpath d=%22M0 787c100.982-6.086 201.964-12.172 279-6 77.036 6.172 130.125 24.603 215 32 84.875 7.397 201.534 3.76 290-3 88.466-6.76 148.738-16.643 215-21 66.262-4.357 138.514-3.189 230 1 91.486 4.189 202.208 11.397 288 10 85.792-1.397 146.655-11.4 223-15 76.345-3.6 168.173-.8 300 2l-40 613H0Z%22 fill=%22url(%23i)%22%2F%3E%3Cpath d=%22M0 875c69.855 10.664 139.71 21.327 217 16 77.29-5.327 162.016-26.646 262-28 99.984-1.354 215.227 17.255 297 28 81.773 10.745 130.077 13.625 213 4s200.464-31.755 285-40c84.536-8.245 136.067-2.604 209-2 72.933.604 167.266-3.827 257-1 89.734 2.827 174.867 12.914 300 23l-40 525H0Z%22 fill=%22url(%23j)%22%2F%3E%3Cpath d=%22M0 962c96.795.503 193.59 1.006 269 0s129.433-3.522 206-3c76.567.522 175.676 4.081 267 9 91.324 4.919 174.863 11.196 262 9 87.137-2.196 177.872-12.867 261-14 83.128-1.133 158.65 7.272 245 5 86.35-2.272 183.529-15.22 267-18 83.471-2.78 153.236 4.61 263 12l-40 438H0Z%22 fill=%22url(%23k)%22%2F%3E%3Cpath d=%22M0 1050c62.99-8.852 125.98-17.704 220-16 94.02 1.704 219.069 13.964 306 24 86.931 10.036 135.745 17.848 209 15 73.255-2.848 170.952-16.357 262-19 91.048-2.643 175.446 5.58 260 7s169.265-3.964 247-10c77.735-6.036 148.496-12.725 230-13 81.504-.275 173.752 5.862 306 12l-40 350H0Z%22 fill=%22url(%23l)%22%2F%3E%3Cpath d=%22M0 1137c69.878 10.901 139.757 21.803 220 19 80.243-2.803 170.852-19.31 261-19 90.148.31 179.835 17.434 262 13 82.165-4.434 156.81-30.429 248-26 91.19 4.429 198.927 39.28 279 37 80.073-2.28 132.481-41.69 203-43 70.519-1.31 159.148 35.483 250 45 90.852 9.517 183.926-8.242 317-26l-40 263H0Z%22 fill=%22url(%23m)%22%2F%3E%3Cpath d=%22M0 1225c84.864-8.25 169.728-16.499 252-14 82.272 2.499 161.953 15.745 242 23 80.047 7.255 160.461 8.52 248 8 87.539-.52 182.202-2.821 264-11s150.73-22.233 241-17c90.27 5.233 201.88 29.755 282 35 80.12 5.245 128.748-8.787 202-16 73.252-7.213 171.126-7.606 309-8l-40 175H0Z%22 fill=%22url(%23n)%22%2F%3E%3Cpath d=%22M0 1312c94.483 12.325 188.966 24.65 280 17 91.034-7.65 178.619-35.272 256-39 77.381-3.728 144.558 16.439 224 24 79.442 7.561 171.149 2.518 261 0s177.847-2.51 263-7c85.153-4.49 167.464-13.478 235-10 67.536 3.478 120.296 19.422 198 24 77.704 4.578 180.352-2.211 323-9l-40 88H0Z%22 fill=%22url(%23o)%22%2F%3E%3C%2Fsvg%3E"); */
}


tags.tagify {
    width: calc(100% - 125px);
    box-sizing: border-box;
    outline: none;
    border: 1px solid #6e6e6e;
    font-size: 14px;
    background: white;
}

.loader  div{
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.loader div::after,
.loader div::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #FFF;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
.loader div::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0%{
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}


.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #1a2fa8;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.maintable {
    width: 100%;
    overflow: auto;
    display: inline-block;
}

input#clientNameInput {}

.analytics-table th {
    background: #0d1754;
    color: white;
}

.summary-container span {
    font-weight: 800;
    color: #ffffff;
    display: inline-block;
    background: rgb(141 255 61 / 30%);
    padding: 2px 10px;
    border-radius: 4px;
    margin-top: 2px;
}


@media all and (max-width:800px) {
  .header_block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    background-size: cover;
}
.buttons-container {
    text-align: center;
    float: none;
    padding: 0 15px;
    margin-bottom: 0;
    display: flex;
}
.top-bar {
justify-content: center;
margin-bottom: 10px;
}
.summary-chart-container {max-width: 100%;}


#jobsTable_wrapper {
    margin-top: 0;
    padding: 5px 15px;
    display: inline-block;
    width: 100%;
}
.buttons-container button{
  
flex-basis: 33%;
  
display: flex;
  
flex-direction: column;
}

.buttons-container button svg{
  
margin: 5px 0;
}
.top-bar img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.top-bar h2 {
    font-size: 20px;
}

.top-bar h2 span {
    font-size: 13px;
    font-weight: 600;
    color: #92a2ff;
    font-style: italic;
}
}

    button.logout {
      background: #c31921 !important;!i;!;
    }
    button.logout:hover {
      background: #a2080f !important;!i;!;
    }

.summary-chart-container.exp_block2 .summary-container p {
    margin: 4px 0;
}

.mflex_ {
    display: flex;
    flex-wrap: wrap;
}

.mflex_ p {
    width: 50%;
    /* display: flex; */
    /* flex-direction: column; */
    margin: 5px 0px;
    font-weight: 300 !important;!i;!;
}

.flex__modal {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.flex__modal .form-group {
    /* flex-basis: calc(50% - 15px); */
    background: #eeeeee;
    /* display: inline-flex; */
    /* flex-direction: row; */
    /* justify-content: flex-start; */
    min-height: 36px;
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
}

.line-item {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}

.modal .form-group button.remove-line-btn {
    background: red !important;!i;!;
    border: 0 !important;!i;!;
    color: white !important;!i;!ip;!i;!;
    font-weight: 700;
    border-radius: 4px;
    min-width: 23px !important;!i;!;
    text-align: center;
}

button#addMaterialExpBtn {}

.modal .form-group button {
    background: #000000;
    color: white;
    border: 0;
    padding: 4px;
    min-width: 160px;
    text-align: left;
    border-radius: 4px;
}


@media all and (max-width:800px) {
.flex__modal .form-group_col {
    flex-basis: 100% !important;!i;!;
}
}

.form-group_col {
    flex-basis: calc(50% - 15px);
    background: #eeeeee;
    /* display: inline-flex
; */
    flex-direction: row;
    /* justify-content: flex-start; */
    min-height: 36px;
    padding: 8px 5px;
}

.form-group_col .form-group:last-child {
    border: none;
}





.bg {
    background: url(https://i.ibb.co/87GbbFP/2799006.jpg) no-repeat;
    background-size: cover;
    background-position: 0 -110px;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #007bff;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0.3;
}
@keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
    }
}
@keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
    }
}
@keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
    }
}
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;
    -webkit-perspective: 600px;
    z-index: 0;
}
.star-field .layer {
    box-shadow: -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc, -91px -235px #d4d4d4, 491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 647px 423px whitesmoke, 183px 389px #c7c7c7,
        524px -237px #f0f0f0, 679px -535px #e3e3e3, 158px 399px #ededed, 157px 249px #ededed, 81px -450px #ebebeb, 719px -360px #c2c2c2, -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf, 446px 404px #c2c2c2,
        440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3, 641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, -315px -488px #e6e6e6, 952px -70px #e3e3e3,
        -869px -29px #dbdbdb, 502px 80px #dedede, 764px 342px #e0e0e0, -150px -380px #dbdbdb, 654px -426px #e3e3e3, -325px -263px #c2c2c2, 755px -447px #c7c7c7, 729px -177px #c2c2c2, -682px -391px #e6e6e6, 554px -176px #ededed,
        -85px -428px #d9d9d9, 714px 55px #e8e8e8, 359px -285px #cfcfcf, -362px -508px #dedede, 468px -265px #fcfcfc, 74px -500px #c7c7c7, -514px 383px #dbdbdb, 730px -92px #cfcfcf, -112px 287px #c9c9c9, -853px 79px #d6d6d6,
        828px 475px #d6d6d6, -681px 13px #fafafa, -176px 209px #f0f0f0, 758px 457px #fafafa, -383px -454px #ededed, 813px 179px #d1d1d1, 608px 98px whitesmoke, -860px -65px #c4c4c4, -572px 272px #f7f7f7, 459px 533px #fcfcfc,
        624px -481px #e6e6e6, 790px 477px #dedede, 731px -403px #ededed, 70px -534px #cccccc, -23px 510px #cfcfcf, -652px -237px whitesmoke, -690px 367px #d1d1d1, 810px 536px #d1d1d1, 774px 293px #c9c9c9, -362px 97px #c2c2c2,
        563px 47px #dedede, 313px 475px #e0e0e0, 839px -491px #e3e3e3, -217px 377px #d4d4d4, -581px 239px #c2c2c2, -857px 72px #cccccc, -23px 340px #dedede, -837px 246px white, 170px -502px #cfcfcf, 822px -443px #e0e0e0, 795px 497px #e0e0e0,
        -814px -337px #cfcfcf, 206px -339px #f2f2f2, -779px 108px #e6e6e6, 808px 2px #d4d4d4, 665px 41px #d4d4d4, -564px 64px #cccccc, -380px 74px #cfcfcf, -369px -60px #f7f7f7, 47px -495px #e3e3e3, -383px 368px #f7f7f7, 419px 288px #d1d1d1,
        -598px -50px #c2c2c2, -833px 187px #c4c4c4, 378px 325px whitesmoke, -703px 375px #d6d6d6, 392px 520px #d9d9d9, -492px -60px #c4c4c4, 759px 288px #ebebeb, 98px -412px #c4c4c4, -911px -277px #c9c9c9;
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 4px;
    border-radius: 2px;
}
.star-field .layer:nth-child(1) {
    animation: sf-fly-by-1 5s linear infinite;
}
.star-field .layer:nth-child(2) {
    animation: sf-fly-by-2 5s linear infinite;
}
.star-field .layer:nth-child(3) {
    animation: sf-fly-by-3 5s linear infinite;
}




.bg, .bg:before , .star-field{max-height: 260px;}








@media all and (max-width:800px) {
.bg{
background-position: 100%;
    background-size: auto;
    height: 680px;
}
.bg, .bg:before , .star-field{max-height: 714px;}
}