/*=========================================================
	01 -> General
===========================================================*/

/*----------------------------*\
	Theme vars
\*----------------------------*/
:root,
[data-bs-theme="light"] {
  --bs-primary: #7555ff;
  --bs-primary-hover: #6348d9;
  --bs-primary-active: #5e44cc;
  --bs-primary-subtle: #e3ddff;
  --bs-primary-subtle-hover: #cfc4ff;
  --bs-primary-subtle-active: #c8bbff;
  --bs-primary-emphasis: #463399;
  --bs-primary-emphasis-hover: #352673;
  --bs-primary-border-subtle: #c8bbff;
  --bs-primary-rgb: 117, 85, 255;
  --bs-text-on-primary: #ffffff;
  --bs-border-color: #e9ecef;
  /* --bs-border-radius: 0.375rem; */
  --bs-border-radius: 1.3rem;
  --bs-border-radius-sm: 1.5rem;
  --bs-border-radius-lg: 1.3rem;
  --bs-border-width: 1px;
  --bg-nav: #f5f5f5;
  --bs-form-field-bg: #fff;
  /* --bs-body-font-family: 'Roboto', Helvetica, Arial, sans-serif; */
  --bs-body-font-family: Arial, sans-serif;

  --bs-light-hover: #eeeeee;

  --bs-secondary-color: #808080;
  
  /* --bs-primary-action: #0d57a0;
  --bs-primary-action: #5441a7; */
  --bs-primary-action: #4623c5;
  --bs-primary-action-hover: var(--bs-primary-subtle-hover);
  
  --bs-secondary: #d63384;
  --bs-secondary-hover: #b62b70;
  --bs-secondary-active: #ab296a;
  --bs-secondary-subtle: #f7d6e6;
  --bs-secondary-subtle-hover: #f1b8d4;
  --bs-secondary-subtle-active: #efadce;
  --bs-secondary-emphasis: #801f4f;
  --bs-secondary-emphasis-hover: #60173b;
  --bs-secondary-border-subtle: #efadce;
  --bs-secondary-rgb: 214, 51, 132;

  /* custom */
  --cu-card-shadow-1: 1px 1px 8px rgba(0, 0, 0, .1);
  --cu-card-shadow-2: 1px 1px 8px rgba(0, 0, 0, .2);
}

[data-bs-theme="dark"] {
  --bs-primary: #a591ff;
  --bs-primary-hover: #b7a7ff;
  --bs-primary-active: #c0b2ff;
  --bs-primary-subtle: #2f2266;
  --bs-primary-subtle-hover: #352673;
  --bs-primary-subtle-active: #463399;
  --bs-primary-emphasis: #c1b3ff;
  --bs-primary-emphasis-hover: #baaaff;
  --bs-primary-border-subtle: #463399;
  --bs-primary-rgb: 165, 145, 255;
  --bs-text-on-primary: #000000;
  --bg-nav: #1a1a1a;
  --bs-secondary-color: #808080;
}

.btn {
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 16px;
  --bs-btn-line-height: 26px;
  --bs-btn-font-weight: 500;
}

.btn-light {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
}

.btn-group-sm > .btn,
.btn-sm {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
  --bs-offcanvas-width: 300px;
}

.form-floating {
  --bs-form-field-color: var(--bs-emphasis-color);
  --bs-form-field-bg: #fff;
  --bs-form-field-hover-bg: #fff;
  --bs-form-field-border-color: #7c7c7c;
  --bs-form-field-active-border-color: var(--bs-primary-hover);
  --bs-form-field-border-radius: var(--bs-border-radius);
}

.text-body{
  color: #555 !important;
}

input:disabled{
  background-color: var(--bs-primary-subtle) !important;
  border-radius: var(--bs-border-radius) !important;
}

.nav-tabs .nav-link.active span{
  color: var(--bs-primary);
}

/*----------------------------*\
	Reset
\*----------------------------*/

/*-- Material icons --*/
.material-icons,
.material-icons-outlined {
  vertical-align: middle;
  padding-bottom: 3px;
  color: #555;
}

.a-simple{
  text-decoration: none;
}


/*=========================================================
	02 -> Login - (styles for all pages of the auth module)
===========================================================*/

.login{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login .card{
  width: 100%;
  max-width: 480px;
  padding: 1.5rem 1.25rem 2.5rem 1.25rem;
}

.login .title{
  margin-top: 1.2rem;
  font-weight: 500;
  font-size: 1.5rem;
  text-align: center;
}

.login .subtitle{
  margin-top: 1.2rem;
  margin-bottom: 2rem;
}

.login .content-text{
  margin-top: 1.2rem;
  margin-bottom: 2rem;
}

.login .help-text{
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: .95rem;
  font-style: italic;
}

.login a{
  font-weight: 500;
}

.login .login-footer{
  display: flex;
  justify-content: space-between;
}

@media (max-width: 575.98px) {
  .login .login-footer{
    display: block;
  }
}


/*=========================================================
	03 -> App layout
===========================================================*/

/*----------------------------*\
	Navigation
\*----------------------------*/

/*-- Navbar --*/
.navbar{
  background: #004e9b;
  color: #fff;
  width: 100%;
  height: 64px;
  position: fixed;
  display: flex;
  /* font-family: Arial,sans-serif; */
  font-size: 16px;
  padding: 0;
  margin: 0;
  z-index: 1003;

  flex-wrap: nowrap;
}

/*-- Nav content --*/
.nav-content{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.navbar-right{
  display: flex;
  align-items: center;
  align-content: center;
}

.navbar-right div{
  margin: 10px;
}

/*-- Toggler --*/
.nav-toggler{
  width: 64px;
  height: 64px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.nav-toggler .icon{
  font-size: 36px;
  color: white;
  position: absolute;
}

.nav-toggler .icon-closed{
  opacity: 0;
}

.nav-toggler.open .icon-opened{
  animation: rotate_and_fade_out .3s forwards;
}

.nav-toggler.open .icon-closed{
  animation: rotate_and_fade_in .3s forwards;
}

.nav-toggler.close .icon-opened{
  animation: rotate_and_fade_in .3s forwards;
}

.nav-toggler.close .icon-closed{
  animation: rotate_and_fade_out .3s forwards;
}

@keyframes rotate_and_fade_out {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotate_and_fade_in {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform: rotate(00deg);
    opacity: 1;
  }
}

.nav-toggler_bezel{
  display: inline-flex;
  height: 54px;
  width: 1px;
  background-color: var(--bs-primary-hover);
}

/*-- Sidebar --*/
.sidebar{
  position: fixed;
  background-color: #fff;
  width: 64px;
  min-height: 352px;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 64px;
  box-shadow: 3px -1px 5px #00000059;
  overflow: hidden;
  transition: all .4s ease;
  z-index: 1001;
}

.sidebar_open{
  width: 340px;
}

.sidebar ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar ul li{
  min-width: 276px;
}

.sidebar .nav-item{
  display: flex;
  justify-content: left;
  align-items: center;
  cursor: pointer;
  height: 48px;
  position: relative;
}

.sidebar .nav-item:hover{
  background-color: var(--bs-primary-action-hover);
}
.sidebar .nav-item.active{
  border-left: solid 3px var(--bs-secondary);
  background-color: #fff;
}

.sidebar .nav-item .icon{
  max-width: 64px;
  min-width: 64px;
  height: 48px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: var(--bs-primary-action);
}

.sidebar .nav-item a{
  width: 100%;
  margin: 0.5em;
  text-decoration: none;
  font-size: 16px;
  color: var(--bs-primary-action);
}

@media (max-width: 767px){
  .sidebar{
    padding-top: 84px;
    width: 0;
  }

  .sidebar_open{
    width: 300px;
  }
}

/*-- Account menu --*/

/* avatar */
.navbar .avatar,
.account-menu .avatar{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: var(--bs-primary-subtle);
  margin-right: 5px;
  cursor: pointer;
}

.navbar .avatar .initial{
  font-weight: 700;
  font-size: 24px;
  color: var(--bs-primary);
}

.navbar .avatar img,
.account-menu .avatar img{
  width: 100%;
  height: 100%;
}

/* Account menu panel */
.account-menu{
  position: fixed;
  width: 280px;
  top: 64px;
  right: 0;
  padding: 30px 10px;
  border-radius: 0 0 0 30px;
  background-color: #fff;
  box-shadow: -1px 1px 15px #00000059;
  overflow: hidden;
  transition: all .4s ease;
  z-index: 1001;
  transform: translateY(calc(-100% - 64px));
}

.account-menu.open{
  transform: translateY(0) !important;
}

.account-menu .avatar{
  height: 80px;
  width: 80px;
  margin: 0 auto 20px;
  background-color: transparent;
  border: 2px solid var(--bs-primary);
}

.account-menu .avatar .icon{
  color: #555;
  font-size: 48px;
}

.account-menu .user-name{
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  color: var(--bs-primary-action);
  color: #000;
}

.account-menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-menu ul li{
  min-width: 276px;
}

.account-menu .nav-item{
  display: flex;
  justify-content: left;
  align-items: center;
  cursor: pointer;
  height: 48px;
  position: relative;
}

.account-menu .nav-item:hover{
  background-color: var(--bs-primary-action-hover);
}
.account-menu .nav-item.active{
  border-left: solid 3px var(--bs-secondary);
  background-color: #fff;
}

.account-menu .nav-item .icon{
  max-width: 64px;
  min-width: 64px;
  height: 48px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: var(--bs-primary-action);
}

.account-menu .nav-item a{
  width: 100%;
  margin: 0.5em;
  text-decoration: none;
  font-size: 16px;
  color: var(--bs-primary-action);
}

.divider{
  margin: 20px auto;
  
  width: 90%;
  color: var(--bs-gray-5);
}

/*----------------------------*\
	Page content layout
\*----------------------------*/
.page-content-wrapper{
  position: absolute;
  top: 64px;
  padding-left: 64px;
  width: 100%;
  min-height: calc(100vh - 64px);
  background-color: #fafafa;
}

.page-content{
  padding: 20px;
}

.page-content .page-header{
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bs-gray-2);
}

.page-content .page-title h1{
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bs-primary-emphasis);
  color: #7555ff;
}

.page-content h2{
  font-size: 1.5rem;
  font-weight: 600;
  color: #555;
}

.page-content .form-floating {
  --bs-form-field-color: var(--bs-emphasis-color);
  --bs-form-field-bg: var(--bs-surface-bg);
  --bs-form-field-hover-bg: #fff;
  --bs-form-field-border-color: #7c7c7c;
  --bs-form-field-active-border-color: var(--bs-primary-hover);
  --bs-form-field-border-radius: var(--bs-border-radius);
}

.page-content .modal{
  --bs-modal-box-shadow: none;
  --bs-modal-border-color: none;
}

.page-content .modal-title{
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--bs-primary-emphasis);
  color: #7555ff;
}

.page-content .card{
  box-shadow: var(--cu-card-shadow-1);
  padding: 20px;
}

.page-content .summary h3{
  font-size: 1.2rem;
}

.page-content ul{
  margin: 0;
  padding: 0;
}
.page-content ul li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-card .actions .btn{
  margin: 5px;
  margin-bottom: 10px;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow-y: scroll;
    padding-bottom: 30px;
  }
  
  .modal-fullscreen-sm-down.fade .modal-dialog {
    transition: none;
  }
}

@media (max-width: 767px){
  .page-content-wrapper{
    padding-left: 0;
  }

  .main-card .actions{
    text-align: center;
    
    padding-bottom: 20px;
  }
}


/*=========================================================
	04 -> Profile
===========================================================*/

.profile .card{
  max-width: 1000px;
  /* margin: auto; */
}

.profile .card-body{
  padding-left: 3rem;
  padding-right: 3rem;
}

.profile .avatar{
  width: 200px;
  margin: auto;
  
}

.profile .avatar img{
  width: 200px;
  height: 200px;
  border-radius: 30px;
  border: 1px solid var(--bs-primary);
}

@media (max-width: 575.98px){
  .profile .card-body{
    padding-left: 0;
    padding-right: 0;
  }
}

/*=========================================================
	05 -> Medialist
===========================================================*/

.medialist .summary .storage{
  text-align: center;
}

.medialist .list{
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.medialist .list-item{
  border-bottom: 1px solid var(--bs-gray-1);
  margin-top: 30px;
}

.medialist .list-item div{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.media-name{
  justify-content: flex-start !important;
}

#add-media_file-list li{
  margin-bottom: 30px
}

#add-media_file-list p{
  margin-bottom: 10px
}

.add-media_progress-wrapper {
  width: 100%;
  height: 20px;
  border-radius: 50px;
  background-color: #ddd;
}

.add-media_progress-wrapper>div {
  width: 0%;
  height: 100%;
  border-radius: 50px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 1.1rem;
}

.add-media_progress-wrapper span {
  font-size: .9rem;
}


/*=========================================================
	06 -> Devices
===========================================================*/

.devices .device-item .card{
  padding: 1.5rem;
  box-shadow: none;
}

.devices .device-img{
  height: 150px;
  width: 150px;
  margin: auto;
  text-align: center;
}

.devices .device-img img{
  width: 80%;
  height: 80%;
}

.devices .device-item .icon{
  color: #fff;
}

.devices .check-orientation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  text-align: center;
}

.devices .check-orientation input{
  display: none;
}

.devices .check-orientation label{
  padding: 10px;
  border: 3px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
}

.devices .check-orientation label:hover{
  border: 3px solid var(--bs-secondary-border-subtle);
  box-shadow: var(--cu-card-shadow-2);
}

.devices .check-orientation input:checked + label {
  border: 3px solid var(--bs-primary-active);
  box-shadow: var(--cu-card-shadow-2);
}

.devices .check-orientation input:checked + label .icon {
  display: block !important;
}

.devices .device-list hr{
  border-color: #bbb;
}

@media (max-width: 575.98px){
  .devices .device-list .device-actions{
    padding-top: 10px;
  }
}

@media (max-width: 767px){
  .devices .device-list>.row{
    --bs-gutter-x: 0rem;
  }

  .devices .card{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .device-item .card{
    padding: 0 !important;
  }

  .devices .check-orientation div+div{
    margin-top: 30px;
  }
}


/*=========================================================
	07 -> Tracklist
===========================================================*/

.tracklist .list{
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.tracklist .list-item{
  border-bottom: 1px solid var(--bs-gray-1);
  margin-top: 30px;
}

.tracklist .list-item div{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

@media (max-width: 767px){
  .list-name{
    justify-content: center !important;
  }
}

@media (min-width: 768px){
  .list-name{
    justify-content: flex-start !important;
  }
}

/*=========================================================
	08 -> Dashboard
===========================================================*/

/* General */
.dashboard .card{
  padding: 0px 10px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .1);
  border-radius: 15px;
}

.dashboard .summary{
  text-align: right;
}

.dashboard .summary span{
  font-size: 2rem;
}

.dashboard .card .title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.dashboard .card .title button{
  padding: 3px 5px;
}

.dashboard .content{
  min-height: 300px;
}

.dashboard .content .btn-fab{
  float: right;
}

.dashboard hr{
  border-color: #ccc;
}

/* Devices */
.dashboard .devices .device-img{
  display: inline-block;
  width: 20px;
  height: 20px;
}

.dashboard .devices .license span{
  font-size: .8rem;
  display: inline-block;
  line-height: 1px;
}

.dashboard .devices .playlist small{
  font-size: .8rem;
  display: inline-block;
  line-height: 1px;
}

/* Tracklist */
.dashboard .tracklist-modals .list{
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.dashboard .tracklist-modals .list-item{
  border-bottom: 1px solid var(--bs-gray-1);
  margin-top: 30px;
}

.dashboard .tracklist-modals .list-item div{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

/* Media queries */
@media (max-width: 576px) {
  .dashboard .content .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .dashboard .content .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}

@media (max-width: 767px){
  .dashboard .tracklist-modals .row,
  .dashboard .tracklist-modals .tab-pane{
    --bs-gutter-x: 0rem !important;
  }
}

@media (max-width: 767px) and (min-width: 577px){
  .dashboard {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


/*=========================================================
	09 -> Subscription
===========================================================*/

.subscription .card-title{
  display: flex;
  justify-content: space-between;
}

.subscription .storage{
  max-width: 600px;
}

.subscription .license-list{
  max-width: 100%;
  overflow-x: scroll;
}

.subscription .license-list .table{
  min-width: 800px;
}

.subscription .card-title .mobile-btn{
  padding: 3px 5px;
  margin-top: -3px;
  display: none;
}

@media (max-width: 576px) {
  .subscription .card-title .pc-btn{
    display: none;
  }

  .subscription .card-title .mobile-btn{
    display: block;
  }
}


/*=========================================================
	10 -> Checkout
===========================================================*/
@media (max-width: 576px) {
  .checkout{
    --bs-gutter-x:0.5rem;
    --bs-gutter-y:1.5rem;
  }

  .checkout .management{
    margin-top: 0px !important;
  }
}

.checkout .details{
  padding: 2rem 1rem;
}

.checkout .details ul{
  padding: .5rem 1.5rem;
}

.checkout .details ul li{
  padding: .5rem 0;
  list-style: circle;
}


/*=========================================================
	11 -> Other
===========================================================*/

/* reCaptcha */
.g-recaptcha {
  display: flex;
  justify-content: center;
  align-content: center;
  padding-left: 0;
}