:root {
    --white: #FFFFFF;
    --purple-100: #FA00FF;
    --purple-200: #692D8D;
    --purple-300: #3E0860;
    --purple-400: #2E0249;
    --purple-500: #230137;
    --purple-light: #9747FF;
    --purple-boxes: #594068;
    --purple-lila: #8F72A0;
    --gray-100: #EAEAEA;
    --gray-200: #C2C1C1;
    --gray-300: #858384;
    --light-red: #F4C6CB;
    --red: #FF0020;
    --dark-red: #C7071F;
    --light-green: #EDF5D0;
    --green: #5CEF29;
    --dark-green: #43BA1A;
    --shadow-green: #43ba1a80;
    --blue: #00C2FF;
    --orange: #FFA800;
    --purple-gradient: linear-gradient(to left, var(--purple-100), var(--purple-light));
    --purple-light-gradient: linear-gradient(to bottom, var(--purple-lila), var(--purple-boxes));
    --purple-dark-gradient: linear-gradient(to bottom, var(--purple-boxes), var(--purple-400));
    --blue-gradient: linear-gradient(to bottom, var(--blue),var(--purple-100));
    --green-purple-gradient: linear-gradient(to bottom, var(--green),var(--purple-100));
    --orange-gradient: linear-gradient(to bottom, var(--orange),var(--purple-100));
    --green-gradient: linear-gradient(to bottom, var(--dark-green),var(--shadow-green));
}

body {
    background-color: var(--purple-500);
    color: white;
    margin-top: 5rem;
    font-family: 'Nunito', sans-serif;
}
h2{
    font-weight: 600;
}
label.form-control-label{
    font-size: 14px;
    font-weight: 600;
    padding-left: 16px;
    margin-bottom: 8px;
}
label.form-check-label-check{
    font-size: 18px;
}
input.form-check-input:checked{
    background-color: var(--purple-100);
    border-color: var(--purple-100);
}
input.form-check-input:focus{
    border-color: var(--purple-100);
    box-shadow: none;
}
input.form-control{
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    color: var(--purple-400);
    margin-bottom: 16px;
}
input.form-control:focus{
    border-color: var(--purple-100);
    box-shadow: none;
    color: var(--purple-300);
}
select.form-control:focus{
    border-color: var(--purple-100);
    box-shadow: none;
    color: var(--purple-300);
}
.login-bottom-box{
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.btn.primary-button{
    background: var(--purple-gradient);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 25px;
    border: none;
    padding: 12px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 147px;
}
.btn.btn-secondary{
    background-color: white;
    color: var(--purple-500);
    border: 1px solid var(--purple-100);
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 147px;
 }
 .btn-tertiary{
    background-color: var(--purple-500);
    color: white;
    border: 2px solid var(--purple-100);
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 147px;
 }
 .btn:focus {
    box-shadow: none;
    border: none;
    color: initial;
 }
.site-header .navbar-nav a.nav-link:first-of-type{
    margin-top: 15%;
}
.btn-inside-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15%;
 }
 .btn-inside-menu img{
    margin-left: 8px;
    width: 16px;
    margin-bottom: 3px;
 }
 .btn-inside-menu .btn.btn-secondary::after{
    content: '';
    border-radius: 4px;
    position: absolute;
    z-index: -1;
    width: 157px;
    height: 30px;
    background-image: var(--purple-gradient);
    filter: blur(20px);
    transition: 0.5s ease;
 }
 .hidden{
    display: none;
 }
.top-menu{
    background-color: var(--purple-500);
}
.options-menu{
    background-color: white;
}
.navbar-toggler:focus{
    box-shadow: none;
    border: none;
}
.site-header .navbar-nav{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 71px);
    padding: 0 16px;
}
.site-header .navbar-nav a.nav-link{
    color: var(--purple-500);
    font-size: 24px;
    line-height: 2;
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
}
.site-header .navbar-nav a.nav-link:last-of-type,
.site-header .navbar-nav a.nav-link.last{
    border-bottom: none;
}
.site-header .navbar-nav a.nav-link:hover {
    color: var(--purple-100);
}
.site-header .navbar-collapse{
    position: fixed;
    z-index: 999;
    background-color: #fff;
    top: 71px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.title_menu{
    font-family: 'Roboto Slab', serif;
}
.bg-steel {
    background-color: #5f788a;
}

.site-header .navbar-nav .nav-link.active {
    font-weight: 500;
}

.content-section {
    padding: 10px 20px;
    margin-bottom: 20px;
}
.content-section.border-box{
    background-image: var(--purple-dark-gradient);
    border-radius: 25px;
    border: 1px solid var(--purple-lila);
}
.final-space{
  margin-bottom: 120px;
}
.article-title {
    color: #444444;
    text-decoration: none;
}

a.article-title:hover {
    color: #428bca;
    text-decoration: none;
}

.article-content {
    white-space: pre-line;
}

.article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
}

.article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
    color: #333;
    text-decoration: none;
}

.article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
}

.account-heading {
    font-size: 2.5rem;
}

.no-decoration{
    text-decoration: none;
}

a{
    text-decoration: none !important;
}

.form-control-lg{
    margin-bottom: 1rem;
    font-size: 16px;
}

.label_select{
    margin-right: 0.5rem;
}

.custom-select-lg{
    padding: 0.1rem;
}

.priority{
    float: right;
    padding-right: 0.3rem;
}

.custom-margin{
    margin-top: 3.3rem;
}

.side-list:hover {
    box-shadow: 0 0 11px rgba(37, 130, 153, 0.425);
  }

  .nav_padding{
      padding-right: 18.5%;
  }

  .ws_inputs{
      margin-right: 4%;
      margin-bottom: 2%;
  }
.delay_box{
  margin-right: 4%;
  margin-bottom: 2%;
}
  .speed_inputs{
      margin-right: 4%;
  }
  .speed_label_m{
      margin-right: 4%;
  }
  .table-thead-grabber{
      background-color: black;
      color: white;
  }
  .blank_row{
    height: 10px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}
.table-center{
    text-align: center;
    font-size: 1.7vh;
}
.stop_button_margin{
    margin-right: 1%;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
#wscheck:first-child {
    color: lime;
}
.font-size-7-label{
    font-size: 1.9vh;
}
#end_time.onerror {
    border-color:red;
 }
 .btn-settings{
     float: right;
 }
 .span_email_label{
     font-size: 1rem;
     color: black;
     font-weight: normal;
 }
 .legend_email{
     font-size: 1.1rem;
     border-bottom: 1px solid var(--purple-lila);
     padding: 16px 0;
 }
 .size-buttons button{
     font-size: 0.9rem;
 }
 .settings-title{
     padding-top: 0.3rem;
 }
 .select-font{
    font-size: 0.9rem;
 }
 .margin_button_rigth{
     margin-right: 0.1rem;
 }

 .modal h5{
    color: var(--purple-500);
    font-weight: 700;
    font-size: 24px;
    padding-left: 6px;

 }
 .modal button.close{
    background-color: white;
    border: none;
 }
 .modal .modal-header,
 .modal .modal-footer{
    border: none;
 }
 .modal .modal-footer{
    justify-content: space-around;
 }
 .modal .modal-dialog .modal-content .content{
    padding: 0.75rem;
 }
 .modal .modal-dialog .modal-content .content p{
    font-weight: 300;
    color: var(--purple-500);
    padding: 0 16px;
    margin: 0;
    font-weight: 600;
 }
.flat-btn{
    padding: 8px 20px!important;
 }
 .modal button span{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
 }
 .modal button.btn-secondary img{
    width: 14px;
    margin-right: 8px;
 }
 .modal button.primary-button img{
    width: 14px;
    margin-left: 8px;
 }

 .box_inside select,
 .filters-box select{
    color: var(--purple-500);
    border-radius: 25px;
    background: white;
    border: 1px solid var(--gray-300);
    width: 100%;
}

#depositsModal .box_deposits{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
    color: var(--purple-500);
    font-weight: 600;
    font-size: 16px;
}

#depositsModal .box_deposits:last-of-type{
    margin-bottom: 0;
}
#depositsModal .box_deposits label.form-control-label{
    display: flex;
    width: 75%;
}
#depositsModal .box_deposits label.switch{
    display: flex;
}
#depositsModal .content{
    padding: 16px;
}
#depositsModal h5{
    padding-left: 0;
}
#depositsModal .slider {
    background-color: var(--gray-100);
}
#depositsModal .slider:before {
    background-color: white;
}
#depositsModal input:checked + .slider {
    background-color: var(--purple-100);
}
#depositsModal input:checked + .slider:before {
    background-color: white;
}
.sticky_box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
}
.fixed_btns{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    height: 100px;
    align-items: center;
    background-color: var(--purple-500);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid var(--purple-200);
}

.fixed_btns button{
    height: unset;
}
.data-box{
    margin-bottom: 50px;
}

.fixed_btns .btn-tertiary img{
    margin-left: 8px;
    width: 16px;
    margin-bottom: 3px;
}
.fixed_btns .primary-button img{
    margin-left: 8px;
    width: 16px;
    margin-bottom: 3px;
}
.grabber .top-status{
    position: fixed;
    left: 0;
    top: 70px;
    width: 100%;
    text-align: center;
    z-index: 1000;
    background-color: var(--purple-500);
}
.grabber .content-section.border-box.settings-box{
    margin-top: 120px;
    background-image: unset;
    border-color: var(--purple-200);
}
.grabber .content-section.border-box.current-filters-box{
    margin-top: 20px;
    background-image: unset;
    border-color: var(--purple-200);
}
.grabber .element{
    padding: 8px;
}
.grabber .element .active_filters{
    color: var(--purple-light);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 0;
}
.grabber .element .current_filters{
    color: white;
    font-size: 14px;
}
.grabber .box_filters{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.grabber .box_filters .element{
    align-items: baseline;
    display: flex;
    flex-direction: column;
    width: 48%;
}
.grabber .box_filters .element:nth-child(odd){
    margin-right: 4%;
}
.grabber .box_filters .element .sub_elements{
    margin: 0 8px;
}
.grabber .toggle-settings{
    font-size: 1.1rem;
    border-bottom: 1px solid var(--purple-lila);
    padding: 16px 0;
}
.grabber .info-settings{
    border-top: 1px solid var(--purple-lila);
}
.grabber .legend-settings{
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    line-height: normal;
}
.grabber .legend-settings p{
    margin: 0;
    font-size: 1.1rem;
}
.grabber .block-box{
    background-image: var(--purple-dark-gradient);
    border-radius: 25px;
    border: 1px solid var(--purple-lila);
    display: flex;
    flex-direction: row;
    padding: 16px;
    margin-bottom: 20px;
}
.grabber .space{
    margin-bottom: 120px;
}
.grabber .primary-button.stop{
    width: 80%;
}
.grabber .primary-button.stop img{
    width: 20px;
}
.grabber .fixed_btns{
    justify-content: space-evenly;
}
.grabber .block-box .block-col{
    flex: 1;
    margin-right: 16px;
    font-size: 12px;
    font-weight: 600;
}
.grabber .block-box .block-col:last-of-type{
    flex: 3;
    margin-right: 0;
}

.grabber .block-box.text-grabbed{
    background-image: var(--green-gradient);
    border: 1px solid var(--dark-green);
}
.grabber .block-box.text-sleep{
    border: 1px solid var(--blue);
    font-weight: 600 ;
}
.grabber .block-box.text-awake{
    border: 1px solid var(--orange);
    font-weight: 600 ;
}
.grabber .block-box.text-sleep .status{
    color: var(--blue)!important;
}
.grabber .block-box.text-awake .status{
    color: var(--orange)!important;
}
.grabber .current-filters-box .filter-box .border-line{
    border-bottom: 2px dashed var(--purple-100);
    padding: 16px 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}
.grabber .current-filters-box .filter-box .border-line:last-of-type{
    padding-bottom: 0;
    border: none;
}
.grabber .current-filters-box .filter-box .border-line .element{
    display: flex;
    flex-direction: column;
    width: 48%;
}
.grabber .current-filters-box .filter-box .border-line .element:nth-child(odd){
    margin-right: 4%;
}

p.deposits-list{
  padding-left: 16px;
}

div.email_title{
  display: flex;
  justify-content: center;
  font-weight: bold;
}

#loading-overlay-layout {
  position: absolute;
  width: 100%;
  height:100%;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  background-color: #000;
  z-index: 999;
  opacity: 0.5;
}
.loading-icon-layout{
  position:absolute;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  border-left:2px solid #767676;
  border-radius:25px;
  width:25px;
  height:25px;
  margin:0 auto;
  position:absolute;
  left:50%;
  margin-left:-20px;
  top:50%;
  margin-top:-20px;
  z-index:4;
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.alert {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.alert .close-alert{
  color: inherit;
  font-size: large;
  padding: 0;
  margin-right: 5%;
}