/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */

html {
    font-size: 11px;
}

body {
    margin: 0px;
    font-family: NewM_SLondon, Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333;
    background: #FFF;
}

main {
    height: 100vh;
    width: 100vw;
}

main section {
    width: 100%;
    height: calc(100vh - 70px);
    overflow: auto;
}

header {
    height: 40px;
    background-color: #1d1d1d;
}

footer {
    height: 30px;
    width: 100%;
    background-color: #333333;
    text-align: center;
    color: white;
    line-height: 30px;
}

/* light */
@font-face {
    font-family: NewM_SLondon;
    font-weight: 200;
    src: url('NewM_SLondon-W-Light.woff2') format("woff2"), url('NewM_SLondon-W-Light.woff') format("woff");
}

/* regular */
@font-face {
    font-family: NewM_SLondon;
    font-weight: normal;
    src: url('NewM_SLondon-W-Regular.woff2') format("woff2"), url('NewM_SLondon-W-Regular.woff') format("woff");
}

/* bold */
@font-face {
    font-family: NewM_SLondon;
    font-weight: bold;
    src: url('NewM_SLondon-W-Bold.woff2') format("woff2"), url('NewM_SLondon-W-Bold.woff') format("woff");
}


/* ds-manage */

.ds-update-btn {
    text-align: right;
    width: 100%;
    margin-bottom: 1em;
    position: absolute;
    top: 8.5px;
    right: 50px;
    width: 350px;
}

.ds-update-btn button {
    background-color: transparent;
    border: 1px solid #898989;
    color: #cccccc;
    height: 23px;
    cursor: pointer;
}

.ds-manage-title {
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin: 12px 0;
}

.ds-manage button {
    border: 1px solid #b3adad;
    padding: 5px 10px;
    cursor: pointer;
    background: #f9f9f9;
}

.ds-manage button.delete-btn {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.ds-manage button.success-btn {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.ds-manage textarea:focus,
.ds-manage select:focus,
.ds-manage button:focus,
.ds-manage input:focus {
    outline: none
}

.ds-manage input[type="text"] {
    border: 1px solid #afa5a5;
    padding: 5px;
    box-sizing: border-box;
}

.ds-manage .ds-manage-new {
    border: 1px solid #dedede;
    border-radius: 5px;
    overflow: hidden;
}

.ds-manage-new .submit-btns {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background: #dddddd;
}

.ds-manage .ds-manage-list {
    border: 1px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.ds-manage .ds-manage-list.darker {
    border-color: #ccc;
    background-color: #ddd;
}

.ds-manage .message-text a, 
.ds-manage .message-text a:active {
    color: #00707f;
}

/**/

/* Util Classes */

.hide {
    display: none;
}

.error-msg {
    color: #dc3545;
    line-height: 26px;
    margin-right: 5px;
}

.ui-button {
    color: #ffffff;
    background-color: #1d1d1d;
    border-radius: 2px;
    height: 23px;
    padding: .25em 1em;
    margin: 0px 5px;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}

.ui-button.btn-primary {
    background-color: #eeeeee;
    border: none;
    color: #1d1d1d;
}

.cursor-pointer {
    cursor: pointer;
}

::selection {
    color: #ffffff;
    background: #888888;
}

.theme-checkbox {
    --toggle-size: 16px;
    appearance: none;
    width: 6.25em;
    height: 3.125em;
    background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat;
    background-size: 205%;
    background-position: 0;
    transition: 0.4s;
    border-radius: 99em;
    position: relative;
    cursor: pointer;
    font-size: var(--toggle-size);
  }
  
  .theme-checkbox::before {
    content: "";
    width: 2.25em;
    height: 2.25em;
    position: absolute;
    top: 0.35em;
    left: 0.438em;
    background: linear-gradient(to right, #cccccc 50%, #333333 50%) no-repeat;
    background-size: 205%;
    background-position: 100%;
    border-radius: 50%;
    transition: 0.4s;
  }
  
  .theme-checkbox:checked::before {
    left: calc(100% - 2.25em - 0.438em);
    background-position: 0;
  }
  
  .theme-checkbox:checked {
    background-position: 100%;
  }
  
  .smooth-shadow {
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
      6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
      12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
      22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
      41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
      100px 100px 80px rgba(0, 0, 0, 0.07);
  }

  /* Scroll View*/  
  ::-webkit-scrollbar {
    width: 5px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  

/*# sourceMappingURL=styles.css.map*/