/* header */
#top { height: 90px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: auto; }
#top .navbar-brand { font-family: sans-serif; font-size: x-large; font-weight: 600; padding-left: 30px!important; padding-right: 30px!important; }
#top .container-fluid {margin-top: 1%;}
.usr { font-weight: 600; }
/* !header */
/* section */
section { min-height: calc(100vh - 100px); }
/* !section */
/* footer */
.ft { background-color: #222222; padding: 40px; }
.ft-ul { list-style-type: none!important; }
.toTopWrap { float: right; width: 50px; height: 50px; }
.toTopWrap>a { position: relative; font-size: 45px; color: #2aabd2!important; animation-name: toTop; animation-duration: 3s; animation-iteration-count: infinite; }
@keyframes toTop { 0% {top: 0px;} 10% {top: -15px;} 20% {top: 0px;} 27% {top: -9px;} 33% {top: 0px;} 100% {top: 0px;} }
/* !footer */
/* Login page */
.login-form { margin: 40px auto; max-width: 400px; }
/* !Login page */
/* Admin page */
.admin-section { margin-top: auto!important; background-color: rgba(36,36,36,0.15); }
#menu { position: absolute; top: 70px; left: 0; height: 100%!important; width: 15%; }
.adm-menu { padding-top: 10px; padding-bottom: 10px; background-color: #222222; font-weight: 600; }
.adm-menu > h3 { color: #b9b9ba; }
.adm-menu div[class*="panel"] { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border-color: transparent; color: gray; background-color: transparent; }
.adm-menu li a { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
.adm-menu li a span { display: inline-block; position: relative; transition: 0.3s; }
.adm-menu li a:hover { color: black; -webkit-transition: all 0.6s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear; }
.adm-menu li a:hover span { padding-right: 25px; }
.adm-menu li a:hover span:after { opacity: 1; right: 0; }
.adm-menu li a span:after { content: '»'; font-size: 20px; position: absolute; opacity: 0; top: -20px; right: -20px; padding-right: 10px; trasition: all 0.3s linear;}
.kgroup { display: inline;}
.ugControl, .bControl { float: right; }
.bControl { margin-left: 6px; margin-bottom: 6px; }
span[data-remove-user-group] { color: red; }
span[data-edit-user-group] { color: darkcyan; margin-right: 10px;}
td>div>ul>li { height: 50px!important; }
#contentModal .modal-lg { width: 90%!important; }
.actTr { background-color: rgba(45, 202, 244, 0.5); transition: all 0.3s;}
#searchWr { border: solid 2px grey; border-radius: 24px; padding: 0 15px 6px 15px;}
.btn-group>.btn-default, td>.btn-default { background-color: rgba(153,0,255,0.7); border-color: #8000d2;}
.btn-group>.btn-default:hover, td>.btn-default:hover { background-color: rgba(153,0,255,1);}
/* !Admin page*/
/* Customers page */
.cu-right-side { position: relative; left: 50%;}
.bt_hide { margin-bottom: 30px; position: relative; left: 70%;}
.cu-thead { background-color: rgba(158, 248, 255, 0.05);}
.cu-search-form { margin-bottom: 20px;}
#search { min-width: 400px;}
.dr { max-width: 25px;}
.cu-remove-btn { padding: 6px;}
.cu-remove-btn:hover { background-color: #d0d0d0; border-radius: 25%; transition: all 0.6s;}
.delBox { z-index: 100;}
#barcodeInput { max-width: 45%;}
.addedProdWrap { padding-top: 40px!important;}
.in_progress { background-color: #efac4e!important; border-radius: 2%;}
.b_ready { background-color: #5cb75c!important; border-radius: 2%;}
.in_pr { background-color: #f8f1cb;}
.in_pr:hover { background-color: #ebe4be;}
.rd { background-color: #cfe8c5;}
.rd:hover { background-color: #c2dbb8;}
.clickable { cursor: pointer;}
.rmbadge { float: right!important; margin-left: 15px; color: red; font-size: 20px;}
.rmbadge:active { border: 2px solid #909090; border-radius: 50%; font-size: 18px; background-color: #909090; margin-top: -2px; transition: 0.1s all;}
.lgi-quantity { background-color: #3398fe!important; font-size: 14px;}   
.lgi-weight { background-color: #3b5977!important; font-size: 14px;}
.lgi-partNumber { color: #ff423a;}
.lgi-order { color: green;}
.spbtnh { display: none;}
.spbtnv { display: inherit; width: 100%!important;}
/* !Customers page */
/* New page*/
.new-form-wrap { margin: 40px auto;}
/* !New page*/
/* 404 Page Not Found */
.pnf { background-color: #f4f4f4 !important;}
.err-404 { font-weight: 600;}
.img-404-container { max-width: 371px; margin: 20px auto;}
.err-block-return { margin: 20px auto 40px auto;}
/* !404 Page Not Found */
/* Breadcrumbs */.breadcrumb {margin-bottom: auto;}
.breadcrumb-text {font-weight: 600;}
/* !Breadcrumbs */
.error { font-size: 20px; color: #ff3e3e!important;}
/* For modal window */
.overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9);overflow-y: hidden; transition: 0.5s;}
.closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px !important;}
.ng-modal-overlay { /* полупорозрачный DIV, который охватывает весь экран */ position:absolute; z-index:9999; top:0; left:0; width:100%; height:100%;background-color:#000000; opacity: 0.8;}
.ng-modal-dialog { /* Отцентрированный даилог с тенью */ z-index:10000; position: absolute; width: 50%; /* Центрирование */ top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #fff; box-shadow: 4px 4px 80px #000;}
.ng-modal-dialog-content { padding:10px; text-align: left;}
.ng-modal-close { position: absolute; top: 3px; right: 5px; padding: 5px; cursor: pointer; font-size: 120%; display: inline-block; font-weight: bold; font-family: 'arial', 'sans-serif';}
/* For modal window */
@media screen and (min-width: 767px) { #top {height: auto!important;text-align: center; }}
@media screen and (min-width: 320px) {#top {height: auto!important;text-align: center;}.adm-menu {text-align: center!important; }}
a.col-sm-3 {transition: all 0.3s;}
a.col-sm-3:hover {box-shadow: #2aabd2 0px 1px 30px 2px;}
.pallet-list-group-item > a, .pallet-list-group-item > button {display: inline!important;}

/* The Overlay (background) */
.overlayBlock {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: scroll;
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 20%; /* 25% from the top */
    width: 100%; /* 100% width */
    /*height: auto;*/
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay-content .list-group-item {  min-height:50px!important;}

/* The navigation links inside the overlay */
.overlayBlock a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlayBlock a:hover, .overlayBlock a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlayBlock .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlayBlock a {font-size: 20px}
    .overlayBlock .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/* Базовий контейнер для перемикача */
.switch {
  position: relative;
  display: inline-block;
  width: 60px; /* Ширина тугла */
  height: 34px; /* Висота тугла */
  margin: 0; /* Прибираємо зовнішні відступи, якщо вони є */
}

/* Приховуємо стандартний чекбокс */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Сам "повзунок" (slider) - неактивний стан */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* Сірий колір, коли вимкнено */
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px; /* Робимо круглі краї */
}

/* "Ручка" (кнопка, що рухається) */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px; /* Відступ зліва */
  bottom: 4px; /* Відступ знизу */
  background-color: white; /* Білий колір ручки */
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%; /* Робимо її круглою */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тінь для 3D-ефекту */
}

/* Зміна кольору повзунка, коли чекбокс активований */
input:checked + .slider {
  background-color: #007bff; /* Яскраво-синій (або інший колір) для активного стану */
  /* Можна використовувати колір primary з Bootstrap: #337ab7 */
}

/* Ефект тіні/фокусу, коли повзунок у фокусі (для доступності) */
input:focus + .slider {
  box-shadow: 0 0 1px #007bff;
}

/* Рух "ручки" праворуч, коли чекбокс активований */
input:checked + .slider:before {
  -webkit-transform: translateX(26px); /* Зсув на 26px (60 - 34) */
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* СТИЛІ ДЛЯ СТАНУ "DISABLED" (як у вашому прикладі) */
input[disabled] + .slider {
    cursor: not-allowed;
    background-color: #e9ecef; /* Світліший сірий */
    opacity: 0.6; /* Зробити напівпрозорим */
}

input[disabled] + .slider:before {
    background-color: #adb5bd; /* Темніший колір ручки */
    box-shadow: none;
}