@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
   box-sizing: border-box;
   scroll-behavior: smooth;
}


body {
   color: var(--clr-dark);
   font-family: 'Poppins', sans-serif;
   line-height: 1.5;
   font-size: 14px;
}

:root {
   --clr-dark: #1c2434;
   --clr-white: #fff;
   --clr-primary: #3aaefe;
   --clr-primary-gredient: linear-gradient(90deg, rgb(29, 205, 254) 0%, rgba(120, 55, 218, 1) 100%);
   --clr-pink: #CB67FF;
   --clr-secondary: #1DCDFE;
   --bglight: #f1f5f9;
   --textlight: #b8bac3;
   --clr-input-border: #e2e8f0;
   --divider-gredient: linear-gradient(145deg, rgb(120, 55, 218) 0%, transparent 100%);
}

strong {
   color: var(--clr-primary);
}

strong.secondary {
   color: var(--clr-secondary);
}

tbody, td, tfoot, th, thead, tr {
   border-color: inherit;
   border-style: solid;
   border-width: 0;
   border-bottom: 1px solid #ccc;
}

#varientsData .first-td {
   padding-top: 8px;
}

.badge {
   padding: 2px 10px;
   font-size: 10px;
   line-height: normal;
   font-weight: 600;
   background: var(--clr-primary-gredient);
   border-radius: 3px;
}
.sidebar-menus li a:hover, .sidebar-menus li a.active {
   background: #333a48;
   color: var(--textlight);
}
a {
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   color: var(--clr-primary);
}
.center-text-mobile {
   display: flex;
   justify-content: center;
   position: relative;
   top: 17px;
   width: 50%;
   left: 25%;
}

#viewTrackingdetail_model .modal.show .modal-dialog {
   transform: none;
}
#viewTrackingdetail_model .modal-content {
   border: 0;
   border-radius: 15px;
   box-shadow: 0px 12px 23px 0px rgb(139 199 64 / 4%);
}
#viewTrackingdetail_model .table tbody td {
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 14px;
   vertical-align: middle;
   white-space: nowrap;
   font-family: "Jost", sans-serif!important;
}
.center-text-mobile p {
   font-size: 15px;
   font-weight: 700;
}
a:hover {
   text-decoration: none;
}

ul, ol {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

img {
   max-width: 100%;
}

.breadcrumb {
   margin: 0;
   align-items: center;
}

.breadcrumb .breadcrumb-item {
   display: flex;
   align-items: center;
   font-size: 14px;
}

.breadcrumb .breadcrumb-item.active:before {
   content: '';
   width: 1px;
   height: 10px;
   background: #1c2434;
   margin-right: 10px;
   padding: 0;
}

.breadcrumb a {
   display: flex;
   align-items: center;
   justify-content: center;
}

.breadcrumb a i {
   font-size: 18px;
}

/* scrollbar*/

::-webkit-scrollbar {
   -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
   width: 5px;
}

::-webkit-scrollbar:horizontal {
   height: 5px;
}

::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, .2);
}



/* scrollbar*/

/* header css  */

header {
   width: calc(100% - 250px);
   position: fixed;
   left: 250px;
   top: 0;
   transition: all .3s ease;
   z-index: 9;
}

.header-navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 70px;
   padding: 15px 20px;
   background: var(--clr-white);
   box-shadow: 0px 12px 23px 0px rgb(139 199 64 / 4%);
}

.header-navigation .brandLogo .logoTagline {
   color: var(--clr-dark);
}
.table thead th {
  
    background: var(--bglight);
   
}
tbody#varientsData {
    border: none!important;
}
tr#id- {
    border-bottom: 1px solid #ccc;
}
#nfcmenu2 {
   padding: 0 15px;
}
.menu-navigation {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

.menu-items {
   display: flex;
   align-items: center;
   gap: 30px;
   margin-left: auto;
}

.menu-items li {
   display: flex;
   align-items: center;
}

.menu-items .profile-menu {
   border: 0;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
   gap: 5px;
}

.menu-items .profile-menu .profileIcon {
   position: relative;
   width: 40px;
   height: 40px;
   background-color: #22b9ff;
   font-size: 1.5rem;
   font-weight: 500;
   color: #fff;
   border-radius: 550PX;
   display: flex;
   align-items: center;
   justify-content: center;
}

.menu-items .profile-menu h6 {
   font-size: 14px;
   margin: 0;
}

.menu-items .profile-menu i {
   font-size: 22px;
}

.menu-items .profile-menu img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 100%;
}

.menu-items .profile-menu .active-status {
   width: 10px;
   height: 10px;
   border-radius: 100%;
   background: #00e676;
   display: block;
   position: absolute;
   right: 0;
   bottom: 0;
   border: 2px solid var(--clr-white);
}

.menu-items li .dropdown-menu .profileTitle {
   padding: 15px;
   position: relative;
   background: url(../img/bg-1.jpg) center no-repeat;
   background-size: cover;
}

.menu-items li .dropdown-menu .profileTitle .userCard {
   display: flex;
   align-items: center;
   gap: 15px;
   position: relative;
   z-index: 1;
}

.profileTitle .userLogo {
   width: 40px;
   min-width: 40px;
   padding: 10px;
   background: var(--clr-white);
   border-radius: 5px;
   box-shadow: 0 3px 15px -3px rgb(0 0 0 / 15%);
}

.profileTitle .userLogo img {
   width: 100%;
}

/* .menu-items li .dropdown-menu .profileTitle .userCard .userThumb {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.1);
   font-size: 24px;
   color: #1dc9b7;
   border-radius: 5px;
} */

.menu-items li .dropdown-menu .profileTitle .userCard h5 {
   font-size: 16px;
   color: var(--clr-white);
   margin: 0;
}

.menu-items li .dropdown-menu {
   animation-name: downAnimation;
}

@keyframes downAnimation {
   from {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
   }

   to {
      opacity: 1;
      transform: translate3d(0, 50px, 0);
   }
}


/* header css end */

/* main body  */

.mainBody {
   width: calc(100% - 250px);
   margin-left: auto;
   margin-top: 70px;
   /* min-height: calc(100vh - 124px); */
   transition: all .3s ease;
   background: var(--bglight);
   padding: 20px;
}

/* main body end */

/* sidebar  */

.sidebar {
   display: flex;
   flex-direction: column;
   width: 250px;
   position: fixed;
   top: 0;
   left: 0;
   backface-visibility: hidden;
   min-height: 100vh;
   transition: all .3s ease;
   overflow: hidden;
   background: var(--clr-dark);
   z-index: 999;
}

.sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 15px 20px;
   transition: all 0.3s ease-in-out;
   min-height: 70px;
}

.brandLogo {
   display: flex;
   width: 100%;
   align-items: center;
   gap: 10px;
}

.brandLogo img {
   width: 40px;
   transition: all 0.3s ease-in-out;
}

.brandLogo .logoTagline {
   font-size: 24px;
   font-weight: 500;
   margin: 0;
   transition: all 0.3s ease-in-out;
}

.sidebar-header .brandLogo .logoTagline {
   color: var(--clr-white);
}

.sidebar-menus {
   width: 100%;
   overflow: auto;
   overflow-x: hidden;
   padding: 20px 0;
   flex: 1;
}

.sidebar-menus::-webkit-scrollbar {
   -webkit-appearance: none;
}

.sidebar-menus::-webkit-scrollbar:vertical {
   width: 5px;
}

.sidebar-menus::-webkit-scrollbar:horizontal {
   height: 5px;
}

.sidebar-menus::-webkit-scrollbar-thumb {
   border-radius: 8px;
   border: 0;
   background-color: rgb(187 165 239);
}

.sidebar-menus li {
   margin-bottom: 10px;
   padding: 0 20px;
   transition: all 0.3s ease-in-out;
}

.sidebar-menus li a {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 10px;
   border-radius: 3px;
   color: var(--textlight);
   white-space: nowrap;
   position: relative;
}

.sidebar-menus li a.collapse-menu:after {
   content: "expand_more";
   position: absolute;
   right: 15px;
   top: 50%;
   font-family: 'Material Icons';
   font-size: 24px;
   transform: translateY(-50%);
   transition: all 0.3s ease-in-out;
}

.sidebar-menus li a.collapse-menu[aria-expanded="true"]:after {
   transform: translateY(-50%) rotate(180deg);
}

.sidebar-menus li a i {
   transition: all 0.3s ease-in-out;
   color: var(--textlight);
}

.sidebar-menus li a span {
   transition: all 0.3s ease-in-out;
}

.sidebar-menus li a:hover,
.sidebar-menus li a.active {
   background: #333a48;
   color: var(--textlight);
}

/* .sidebar-menus li.active a i {
   color: var(--clr-dark);
} */

.sidebar-menus li.active a:after,
.sidebar-menus li.active a:before {
   opacity: 1;
   /* background: var(--clr-primary); */
}

/* sidebar end */

/* footer  */

footer {
   padding: 16px 35px;
   background: var(--clr-white);
   margin-top: auto;
   box-shadow: 0px -12px 23px 0px rgb(139 199 64 / 4%);
}

footer p {
   margin: 0;
   font-size: 14px;
   line-height: normal;
   text-align: right;
}

/* footer end */

/* toggle switch  */

.toggleSwitch {
   width: 27px;
   height: 27px;
   position: relative;
   border: none;
   background: transparent;
   padding: 0;
}

.toggleSwitch span {
   display: block;
   background: var(--clr-dark);
   width: 100%;
   height: 2px;
   margin: 5px 0;
   transition: all 0.3s ease-in-out;
}

.toggleSwitch span:first-child {
   width: 20px;
}

.toggleSwitch span:last-child {
   width: 22px;
}

.toggleMenu {
   width: 30px;
   height: 30px;
   position: relative;
   border: none;
   background: transparent;
   padding: 0;
}

.line-toggle {
   display: block;
   background: var(--clr-white);
   width: 100%;
   height: 3px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   margin: 5px 0;
}

/* toggle switch end */

/* layout  */

.sidebar-collapsed header {
   width: calc(100% - 84px);
   left: 84px;
}

.sidebar-collapsed .mainBody {
   width: calc(100% - 84px);
}

.sidebar-collapsed .sidebar {
   width: 84px;
}

.sidebar-collapsed .sidebar-header .logoTagline {
   opacity: 0;
}

.sidebar-collapsed .toggleSwitch span:first-child {
   transform: translate3d(16px, 7px, 0) rotate(45deg);
   transform-origin: right top;
   width: 10px;
   box-shadow: none;
}

.sidebar-collapsed .toggleSwitch span:nth-child(2) {
   height: 2px;
}

.sidebar-collapsed .toggleSwitch span:last-child {
   transform: translate3d(16px, -7px, 0) rotate(-45deg);
   transform-origin: right bottom;
   width: 10px;
   box-shadow: none;
}

.sidebar-collapsed .sidebar-brandLogo a img:last-child {
   display: none;
}

.sidebar-collapsed .sidebar-menus li a span {
   opacity: 0;
}
#iphoneLeft .img-fluid {
   max-width: 100%;
   height: 200px;
   object-fit: contain;
}

.sidebar-collapsed .sidebar-menus li a:before {
   width: 20px;
   border-radius: 0 0 10px 0;
}

.sidebar-collapsed .sidebar-menus li a:after {   
   width: 20px;
   border-radius: 0 10px 0 0;
}

@media (min-width: 1181px) {
   .sidebar-collapsed .sidebar:hover {
      width: 250px;
   }

   .sidebar-collapsed .sidebar:hover .sidebar-header .logoTagline {
      opacity: 1;
   }

   .sidebar-collapsed .sidebar:hover .sidebar-brandLogo a img:last-child {
      display: block;
   }

   .sidebar-collapsed .sidebar:hover .toggleSwitch {
      display: block;
   }

   .sidebar-collapsed .sidebar:hover .sidebar-menus li a span {
      opacity: 1;
   }

   .toggleSwitch:hover span {
      width: 100%;
   }
}

/* layout end */

/* dropdown */

.dropdown-menu {
   box-shadow: 0px 0px 10px -3px rgb(0 0 0 / 50%);
   border-radius: 4px;
   padding: 0;
   animation-name: dropdownAnimation;
   animation-duration: 0.3s;
   animation-fill-mode: both;
   border: 0;
   overflow: hidden;
}

@keyframes dropdownAnimation {
   from {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
   }

   to {
      opacity: 1;
      transform: translate3d(0, 38px, 0);
   }
}

.dropdown-menu a {
   padding: 15px;
   font-size: 14px;
   border-bottom: 1px solid #ddd;
   display: flex;
   align-items: center;
   gap: 12px;
}

.dropdown-menu a .icon-btn {
   width: 32px;
   min-width: 32px;
   height: 32px;
   overflow: hidden;
   box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
   border-radius: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-primary);
}

.dropdown-menu a .icon-btn i {
   font-size: 18px;
   color: var(--clr-white);
}

.dropdown-menu li:last-child a {
   border-bottom: 0;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
   background: var(--bglight);
   color: var(--clr-dark);
}

.dropdown-menu a .details h5 {
   font-size: 14px;
   margin: 0;
}

.dropdown-menu a .details p {
   margin: 0;
   font-size: 13px;
   color: var(--textlight);
}

.dropdown-menu a .details .right-arrow {
   margin-left: auto;
}

.dropdown-toggle::after {
   border-top: 0.3em solid var(--clr-primary);
}

/* dropdown */

/* Input Style */

.form-group {
   margin-bottom: 15px;
}

.form-group label {
   margin: 0 0 5px 0;
   font-size: 14px;
}

.form-control {
   min-height: 40px;
   padding: 0;
   border: 0;
   border-bottom: 1px solid var(--clr-input-border);
   background: transparent;
   color: var(--clr-dark);
   transition: all 0.3s ease-in-out;
   border-radius: 0;
   font-size: 14px;
}

.form-control:focus {
   box-shadow: none;
   border-color: var(--clr-primary);
   background: transparent;
}

.form-control::placeholder {
   font-weight: normal;
   opacity: 0.5;
}

/* Input Style */

/* card  */

.card {
   border: 1px solid var(--clr-input-border);
   border-radius: 5px;
   box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 5%);
}

.card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--clr-input-border);
   background: var(--clr-white);
   padding: 20px;
   border-radius: 1.25rem 1.25rem 0 0 !important;
}

.card-header h6 {
   margin: 0;
   text-transform: capitalize;
}

.card-header .counting {
   font-size: 14px;
   color: var(--clr-primary)
}

.card-body {
   padding: 20px;
}

.card-header span {
   font-size: 13px;
   font-weight: normal;
   font-family: 'Jost', sans-serif;
}

.card-border {
   box-shadow: none;
   border: 1px solid var(--clr-input-border);
}

.progress-bar {
   background: var(--clr-primary-gredient);
}

.progress-bar {
   border-radius: 2px;
}

.progress {
   border-radius: 2px;
}

/* card end */

/* button  */

.btn-box {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 15px;
}

.ThemeBtn {
   padding: 5px 15px;
   border-radius: 3px;
   border: 1px solid transparent;
   background: var(--clr-primary);
   color: var(--clr-white);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   min-width: 100px;
   min-height: 40px;
   font-size: 14px;
   font-family: 'Poppins', sans-serif;
   position: relative;
   transition: all .5s ease-in-out;
   box-shadow: 0 2px 10px -3px rgb(0 0 0 / 40%);
   overflow: hidden;
   backface-visibility: hidden;
}

.ThemeBtn:after {
   position: absolute;
   content: "";
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: all .5s ease-in-out;
   background: var(--clr-primary);
}

.ThemeBtn:before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: all .5s ease-in-out;
   border-radius: 3px;
   background: var(--clr-primary);
}

.ThemeBtn:hover {
   color: var(--clr-primary);
   border: 1px solid var(--clr-primary);
   background: transparent;
}

.ThemeBtn:hover:after {
   width: 0;
   opacity: 1;
   visibility: visible;
}

.ThemeBtn:hover:after,
.ThemeBtn:hover:before {
   width: 0;
   opacity: 1;
   visibility: visible;
}

.ThemeBtn i {
   font-size: 16px;
}

.ThemeBtn-outline {
   padding: 5px 20px;
   background: transparent;
   border: 1px solid var(--clr-primary);
   border-radius: 3px;
   color: var(--clr-primary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   line-height: normal;
   min-width: 100px;
   min-height: 40px;
   font-size: 14px;
   font-family: 'Poppins', sans-serif;
   position: relative;
   transition: all .5s ease-in-out;
   backface-visibility: hidden;
   box-shadow: 0 2px 7px -3px rgb(0 0 0 / 30%);
}

/* button end */

/* Page title  */

.pageTitle {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   align-items: center;
   justify-content: space-between;
   margin: 0 0 20px;
}

.pageTitle h2 {
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-size: 18px;
   font-weight: 600;
   margin: 0;
   color: var(--clr-dark);
}

.iconBox {
   color: var(--clr-white);
   background: var(--clr-primary);
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 3px;
   box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
   border: 0;
   transition: all 0.3s ease-in-out;
}

.iconBox i {
   font-size: 16px;
   color: var(--clr-white);
}

.pageTitle h2 i {
   font-size: 16px;
   color: var(--clr-white);
   background: var(--clr-primary);
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 2px;
   box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
}

.pageTitle h2 strong {
   color: var(--clr-primary);
}

.subTitle {
   font-size: 15px;
   margin: 0 0 20px;
   position: relative;
   padding-bottom: 10px;
}

.subTitle:after {
   content: '';
   position: absolute;
   width: 30px;
   height: 2px;
   background: var(--divider-gredient);
   bottom: 0;
   left: 0;
}

/* Page title end */

/* date input  */

.dateInput {
   position: relative;
}

.dateInput:after {
   content: '\ebcc';
   font-family: 'Material Icons';
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--clr-dark);
}

/* date input end  */

/* swiper  */

.swiper-arrows div {
   width: 40px;
   height: 30px;
   border-radius: 3px;
   background: var(--clr-dark);
   box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
   transition: all 0.3s ease-in-out;
   top: 50%;
   transform: translateY(-50%);
   margin: 0;
}

.swiper-arrows div:after {
   font-size: 12px;
   color: var(--clr-white);
}

.swiper-arrows div.swiper-button-prev {
   left: -20px;
   justify-content: flex-end;
   padding-right: 8px;
}

.swiper-arrows div.swiper-button-next {
   right: -20px;
   justify-content: flex-start;
   padding-left: 8px;
}

.swiper-arrows div.swiper-button-disabled {
   opacity: 0;
}

/* swiper end */

/* fill Radio */

.fillRadio {
   display: flex;
   align-items: center;
   gap: 15px;
}

.radioBox input {
   display: none;
}

.radioBox label {
   padding: 5px 15px;
   border: 1px solid var(--clr-input-border);
   text-align: center;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   border-radius: 3px;
   font-size: 13px;
}

.radioBox input[type=radio]:checked+label {
   background: var(--clr-primary);
   color: var(--clr-white);
   border-color: var(--clr-primary);
   box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
}

/* fill Radio end */

/* checkbox  */

.custom-checkbox {
   position: relative;
}

.custom-checkbox input {
   display: none;
}

.custom-checkbox label {
   width: 22px;
   min-width: 22px;
   height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--clr-input-border);
   border-radius: 2px;
   cursor: pointer;
}

.custom-checkbox label:after {
   content: 'check';
   font-size: 16px;
   font-family: 'Material Icons';
   transition: all 0.3s ease-in-out;
   font-weight: normal;
   opacity: 0;
}

.custom-checkbox input[type='checkbox']:checked+label:after {
   opacity: 1;
   color: var(--clr-white);
}

.custom-checkbox input[type='checkbox']:checked+label {
   background: var(--clr-primary);
   border-color: var(--clr-primary);
   box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.8);
}

/* checkbox end */


/* data table  */

.dataTables_wrapper .row:first-child {
   margin: 0 0 15px !important;
}

.dataTables_wrapper .dataTables_length label {
   display: flex;
   align-items: center;
   text-transform: capitalize;
}

.dataTables_wrapper .dataTables_length label select {
   border-radius: 0;
   width: fit-content;
   outline: none;
   margin: 0 10px 0 5px;
   background-color: transparent;
   padding-top: 5px;
   padding-bottom: 5px;
}

.dataTables_wrapper .dataTables_length label select:focus {
   box-shadow: none;
}

.dataTables_filter label {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 5px;
}

.dataTables_filter label input {
   min-height: auto;
   padding: 5px 10px;
   font-size: 14px;
   border: 1px solid var(--clr-input-border);
}

.dataTables_wrapper table {
   margin-top: 0 !important;
}

.dataTables_wrapper table thead th {
   padding: 15px 10px ;
   background: var(--bglight);
   font-weight: 500;
   white-space: nowrap;
}

.dataTables_wrapper table thead th.sorting_asc::before,
.dataTables_wrapper table thead th.sorting_desc::after {
   opacity: 1 !important;
}

.dataTables_wrapper table thead th.sorting_asc::after,
.dataTables_wrapper table thead th.sorting_desc::before {
   opacity: 0.3 !important;
}

.dataTables_wrapper table tbody tr.odd {
   background: var(--clr-white);
}

.dataTables_wrapper table tbody tr.even {
   background: var(--bglight);
}

.dataTables_wrapper table tbody td {
   padding: 10px;
}

.dataTables_wrapper .page-link {
   border-radius: 0 !important;
}

.dataTables_wrapper .page-item.active .page-link {
   background: var(--clr-primary);
   border-color: var(--clr-primary);
}

/* data table end */

/* social grid  */

.socialInfo-box {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.socialInfobox-grid {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 15px;
   border-bottom: 1px solid var(--clr-input-border);
}

.socialInfobox-grid:last-child {
   border: 0;
}

.socialBrand {
   display: flex;
   align-items: center;
   gap: 15px;
}

.socialBrand img {
   width: 30px;
}

.socialBrand h6 {
   font-size: 14px;
   margin: 0;
   font-weight: 400;
}

.social-counter {
   margin: 0;
   font-size: 14px;
   color: var(--clr-primary);
}


/* social grid  */

.hide {
   display: none;
}
.iconBox.danger{background: #dc3545;margin-left: 8px;}

ul.sidebar-menus .accordion-item {
   background: none;
}
div#product_menu {
   padding: 0 15px;
}

#LineChart::after, #nfcLineChart::after {
   content: "";
   position: absolute;
   background: white;
   width: 59px;
   height: 31px;
   bottom: 24px;
}
button.close,
button.close {
  background: #71797c;
  border: none;
  color: #ffff;
  font-size: 19px;
  padding: 0px 9px;
  border-radius: 2px;
}

@media screen and (max-width: 1128.99px) {
   #LineChart::after, #nfcLineChart::after {
      height: 31px;
      bottom: 42px;
  }
}
@media screen and (max-width: 991px) {
   #LineChart::after, #nfcLineChart::after {
      bottom: 30px;
  }
}
@media screen and (max-width: 878.99px) {
   #LineChart::after, #nfcLineChart::after {
      bottom: 42px;
  }
}
@media screen and (max-width: 767.99px) {
   #LineChart::after, #nfcLineChart::after {
      bottom: 4px;
  }
}


/* apple */

#apple-logo{
   position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  padding-top: 20px;
  text-align: center;
  width: 100%;
  font-size: 40px;
  color: #222;
 }
 
 
 #overlay{
   position: fixed;
   z-index: 999;
   opacity: 0.5;
   margin-left: -4000px;
   margin-top: -5px;
   border: 1px solid black;
   opacity: 0;
 }
 .outer-button{
   background: -webkit-gradient(left top, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
   background: -webkit-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
   background: -o-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
   background: -ms-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
   background: linear-gradient(to right, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
 }
 
 
 
 .outer-button-reversed{
 background: rgba(19,19,19,1);
 background: -moz-linear-gradient(left, rgba(19,19,19,1) 0%, rgba(28,28,28,1) 9%, rgba(43,43,43,1) 24%, rgba(17,17,17,1) 40%, rgba(0,0,0,1) 49%, rgba(44,44,44,1) 50%, rgba(71,71,71,1) 61%, rgba(102,102,102,1) 75%, rgba(89,89,89,1) 88%, rgba(76,76,76,1) 100%);
 background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,19,19,1)), color-stop(9%, rgba(28,28,28,1)), color-stop(24%, rgba(43,43,43,1)), color-stop(40%, rgba(17,17,17,1)), color-stop(49%, rgba(0,0,0,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(61%, rgba(71,71,71,1)), color-stop(75%, rgba(102,102,102,1)), color-stop(88%, rgba(89,89,89,1)), color-stop(100%, rgba(76,76,76,1)));
 background: -webkit-linear-gradient(left, rgba(19,19,19,1) 0%, rgba(28,28,28,1) 9%, rgba(43,43,43,1) 24%, rgba(17,17,17,1) 40%, rgba(0,0,0,1) 49%, rgba(44,44,44,1) 50%, rgba(71,71,71,1) 61%, rgba(102,102,102,1) 75%, rgba(89,89,89,1) 88%, rgba(76,76,76,1) 100%);
 background: -o-linear-gradient(left, rgba(19,19,19,1) 0%, rgba(28,28,28,1) 9%, rgba(43,43,43,1) 24%, rgba(17,17,17,1) 40%, rgba(0,0,0,1) 49%, rgba(44,44,44,1) 50%, rgba(71,71,71,1) 61%, rgba(102,102,102,1) 75%, rgba(89,89,89,1) 88%, rgba(76,76,76,1) 100%);
 background: -ms-linear-gradient(left, rgba(19,19,19,1) 0%, rgba(28,28,28,1) 9%, rgba(43,43,43,1) 24%, rgba(17,17,17,1) 40%, rgba(0,0,0,1) 49%, rgba(44,44,44,1) 50%, rgba(71,71,71,1) 61%, rgba(102,102,102,1) 75%, rgba(89,89,89,1) 88%, rgba(76,76,76,1) 100%);
 background: linear-gradient(to right, rgba(19,19,19,1) 0%, rgba(28,28,28,1) 9%, rgba(43,43,43,1) 24%, rgba(17,17,17,1) 40%, rgba(0,0,0,1) 49%, rgba(44,44,44,1) 50%, rgba(71,71,71,1) 61%, rgba(102,102,102,1) 75%, rgba(89,89,89,1) 88%, rgba(76,76,76,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#4c4c4c', GradientType=1 );
 }
 
 .iphone-shadow{
   margin-top: -20px;
   margin-left: -80px;
   width: 500px;
   height: 100px;
   background: rgba(18,18,18,0.24);
 background: -moz-radial-gradient(center, ellipse cover, rgba(18,18,18,0.64) 0%, rgba(18,18,18,0.44) 22%, rgba(64,64,64,0.05) 64%, rgba(64,64,64,0) 70%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(18,18,18,0.64)), color-stop(22%, rgba(18,18,18,0.44)), color-stop(64%, rgba(64,64,64,0.05)), color-stop(70%, rgba(64,64,64,0)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(18,18,18,0.64) 0%, rgba(18,18,18,0.44) 22%, rgba(64,64,64,0.05) 64%, rgba(64,64,64,0) 70%);
 background: -o-radial-gradient(center, ellipse cover, rgba(18,18,18,0.64) 0%, rgba(18,18,18,0.44) 22%, rgba(64,64,64,0.05) 64%, rgba(64,64,64,0) 70%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(18,18,18,0.64) 0%, rgba(18,18,18,0.44) 22%, rgba(64,64,64,0.05) 64%, rgba(64,64,64,0) 70%);
 background: radial-gradient(ellipse at center, rgba(18,18,18,0.64) 0%, rgba(18,18,18,0.44) 22%, rgba(64,64,64,0.05) 64%, rgba(64,64,64,0) 70%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121212', endColorstr='#404040', GradientType=1 );
 }
 
 #centered-container {
     margin-left: auto;
     margin-right: auto;
     position: absolute;
     top: 0; left: 0; bottom: 0; right: 0;
     width: 1000px;
     height: 800px;
     border: 0px solid #e8e8e8;
     padding: 0px;
     background: rgba(255,255,255,.0);
     transition:  0.5s;
 }
 
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-height: 600px){
   #centered-container{
   transform: scale(0.5);
   transform-origin: 0 0;
   }
 }
 
 @media only screen and (max-width: 600px){
   #centered-container{
   transform: scale(0.5);
   transform-origin: 0 0;
   }
 }
 
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   #centered-container{
   transform: scale(0.6);
   transform-origin: 0 0;
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
   #centered-container{
   transform: scale(0.7);
   transform-origin: 0 0;
   }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
   #centered-container{
   transform: scale(1.0);
   transform-origin: 0 0;
   }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
   #centered-container{
   transform: scale(1.1);
   transform-origin: 0 0;
   }
 }
 .iphone {
   display: block;
   border: solid 10px #000;
   width: 270px;
   height: 550px;
   padding: 0px;
   border-radius: 50px;
   background: #fff;
   -webkit-box-shadow: 0px 0px 0px 5px #131313;
   -moz-box-shadow: 0px 0px 0px 5px #131313;
   box-shadow: 0px 0px 0px 5px #131313;
   position: fixed;
}
 
 .silence-switch{
   position: absolute;
   margin-left: -19px;
   margin-top: 90px;
   width: 4px;
   height: 30px;
   border-bottom-left-radius: 10px;
   border-top-left-radius: 10px;
 }
 .volume-rocker-top{
   position: absolute;
   margin-left: -19px;
   margin-top: 140px;
   width: 4px;
   height: 50px;
   border-bottom-left-radius: 10px;
   border-top-left-radius: 10px;
 }
 .volume-rocker-bottom{
   position: absolute;
   margin-left: -19px;
   margin-top: 200px;
   width: 4px;
   height: 50px;
   border-bottom-left-radius: 10px;
   border-top-left-radius: 10px;
 }
 .power-button {
   position: absolute;
   margin-left: 264px;
   margin-top: 200px;
   width: 4px;
   height: 70px;
   border-bottom-right-radius: 10px;
   border-top-right-radius: 10px;
}
 
 .top-section{
   background:#f6f6f7;
   height:75px;
   margin: 0px;
   border-top-right-radius: 40px;
   border-top-left-radius: 40px;
   border-bottom: #e6e6e6 1px solid;
 }
 
 .top-section-time{
   position: absolute;
   margin-left: 30px;
   margin-top: 8px;
   font-size: 12px;
   font-weight: bold;
 }
 
 .top-section-middle {
   margin: auto;
   width: 85px;
   background: black;
   height: 24px;
   /* border-bottom-left-radius: 20px; */
   /* border-bottom-right-radius: 20px; */
   padding-top: 5px;
   position: relative;
   top: 6px;
   border-radius: 20px;
   left: 5px;
}
 .top-section-user-pic {
   margin: auto;
   margin-top: 20px;
   width: 30px;
   height: 40px;
   border-radius: 100%;
   background-color: none;
   font-size: 40px;
   color:#999999 ;
 }
 .clip-circle {
   clip-path: circle(20px at center);
 }
 .top-section-user-name{
   margin: auto;
   margin-top: 0px;
   background: none;
   height: 10px;
   width: 100px;
   font-size: 10px;
   text-align: center;
 }
 /* .speaker{
   width:60px;
   height: 8px;
   background: #2e2e2e;
   margin-left: 55px;
   border-radius: 10px;
 } */
 .front-camera {
   height: 8px;
   width: 8px;
   background: #0a3d49ad;
   border-radius: 100%;
   margin-left: 70px;
   margin-top: 4px;
}
 
.top-section-symbols {
   position: absolute;
   margin-left: 182px;
   margin-top: 8px;
   font-size: 12px;
}
 .symbols{
   height: 14px;
   margin-left: -10px;
 }
 
 .arrow {
   position: absolute;
   border: solid #000000;
   border-width: 0 3px 3px 0;
   display: inline-block;
   padding: 5px;
   margin-top: 45px;
   margin-left: 13px;
   border-radius: 2px;
   opacity: 0.9;
}
 
 .arrow:hover{
   cursor: pointer;
   opacity: 1;
 }
 
 .left {
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
 }
 
 
 
 /**
  * Just for fun: Wifi icon with pure CSS
  */
 
 .wifi {
    padding: 1px;
   width: 10px;
   height: 10px;
 }
 
 .wifi, .wifi:before {
    display: inline-block;
    border: 10px double transparent;
    border-top-color: currentColor;
    border-radius: 50%;
 }
 
 .wifi:before {
    content: '';
    width: 0; height: 0;
 }
 
 .battery-icon {
   position: absolute;
   width: 10px;
   height: 5px;
   border-radius: 2px;
   border: 2px solid #000;
   top: 50%;
   left: 100%;
   transform: translate(-50%,-50%);
 }
 .battery-icon:before {
     content: '';
     position: absolute;
     right: -4px;
     top: 50%;
     transform: translateY(-50%);
     width: 1px;
     height: 2px;
     border-radius: 2px;
     background: #000;
 }
 .battery-icon:after {
   content: '';
   position: absolute;
   left: 0px;
   top: 0px;
   width: 70%;
   height: 4px;
   background-color: #000;
   border-radius: 2px;
 }
 
 
 
 .space-bar{
   position: relative;
   display: inline-block;
   background: #fff;
   border-radius: 6px;
   margin: 1px;
   padding:9px;
   width: 142px;
   height: 18px;
   text-align: center;
   font-weight: 600;
   border-bottom: 1px solid #88898d;
   font-size: 13px;
 }
 .back_space{
   height: 10px;
   padding: 2px;
 }
 .back_space > i{
   font-size: 14px;
 }
 .grey-key{
   position: relative;
   display: inline-block;
   background: #abafba;
   border-radius: 6px;
   margin: 0px;
   padding:9px;
   width: auto;
   height: 18px;
   text-align: center;
   font-weight: 600;
   border-bottom: 1px solid #88898d;
   font-size: 13px;
 }
 
 .grey-key:hover {
   background: #8f929c;
 }
 .home-screen-button {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-top: 85px;
   border-radius: 50px;
   width: 125px;
   height: 5px;
   background: #000;
}
 
 @keyframes fadeInOpacity {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
 }
 .message.to {
     background-color: #3478f6;
     color: #fff;
     margin-left: 80px;
   transition: width 2s;
 }
 

 #iphoneLeft  .slider {
   position: absolute;
   bottom: 100px;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
 }

 #iphoneLeft  .slider input[type="range"] {
   width: 100%;
 }

 #iphoneLeft .swipe-slider-container {
   position: relative;
   width: 100%;
   height: 200px;
   overflow: hidden;
   background: #f9f9f9;
}
.add-to-cart-button {
   position: relative;
   bottom: 66px;
   right: 0px;
   padding: 10px 20px;
   background-color: #3aaefe;
   color: #fff;
   border: none;
   border-radius: 1px;
   font-size: 16px;
   cursor: pointer;
   width: 100%;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
}
 #iphoneLeft .swipe-slider {
   display: flex;
   transition: transform 0.3s ease-in-out;
 }

 #iphoneLeft .swipe-slide {
   min-width: 100%;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   background: #ddd;
 }

 .apple-text h2 {
   font-size: 15px;
   font-weight: 700;
}
#color-select, #size-select {
   border: none;
}
.drop-items {
   padding-bottom: 15px;
}
.apple-discription h2 {
   font-size: 15px;
   font-weight: 700;
}
.apple-discription ul li {
   font-size: 13px;
   font-weight: 400;
}
.apple-main {
   padding: 12px;
   overflow-y: scroll;
   height: 160px;
}
.phone-iphone {
   position: relative;
   display: flex;
   justify-content: center;
   top: -50px;
}
@media screen and (max-width: 1399.99px) {
   .iphone {
      display: block;
      border: solid 3px #000;
      width: 230px;
      height: 445px;
      padding: 0px;
      border-radius: 35px;
      background: #fff;
      position: fixed;
  }
  .top-section-symbols {
   margin-left: 161px;
}
  .add-to-cart-button {
   bottom: 45px;
   height: 28px;
   padding: 0;
}
  
.center-text-mobile p {
   position: relative;
   top: -3px;
   font-size: 14px;
}
.arrow {
   margin-top: 40px;

}
.phone-iphone {
   top: -58px;
}
.top-section {
   height: 65px;
}
  .top-section-middle {
      width: 70px;
      height: 20px;
      padding-top: 3px;
      top: 6px;
  }
  .front-camera {
      margin-left: 54px;
      margin-top: 3px;
  }
  .power-button {
   margin-left: 231px;
   margin-top: 150px;
}
  .silence-switch {
      margin-left: -10px;
  }
  .volume-rocker-top {
      margin-left: -10px;
  }
  .volume-rocker-bottom {
      margin-left: -10px;
  }
  .home-screen-button {
      margin-top: 6px;
  }
}