/*
Theme Name: SD Dashboard Theme
Author: Sartoriadigitale
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

:root {
  --bs-font-sans-serif: Sora,  Arial, sans-serif;
  --primary: 65, 109, 255;     /* #416DFF */
  --secondary: 245, 245, 245;  /* #f5f5f5 */
  --text-blu: 0, 31, 96;       /* #001F60 */
  --text-lightblu: 65, 109, 255;  /* #416DFF */
  --text-pink: 255, 102, 102;  /* #FF6666 */
  --text-orange: 246,121,76;
  --text-yellow: 255,205,41; /* #FFCD29 */
  --btn-orange: #F77A4C;
}
.btn {
  --bs-btn-font-family: Sora,  Arial, sans-serif;
}

.table {
    --bs-table-color: rgb(var(--text-blu));
}

.text-primary {
  color: rgb(var(--primary)) !important;
}

.bg-primary,
.btn-primary {
  background-color: rgb(var(--primary)) !important;
  box-shadow: none;
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  box-shadow: none;/* 0 8px 14px -8px rgba(38, 38, 38, .3), 0 3px 18px 0 rgba(38, 38, 38, .1), 0 7px 8px -4px rgba(38, 38, 38, .18);*/
}

.btn-success {
  --bs-btn-disabled-color: #fff;
}
.btn-primary {
  --bs-btn-disabled-color: #fff;
}

.text-secondary {
  color: rgb(var(--secondary)) !important;
}

.bg-secondary, 
.btn-secondary {
  color: rgb(var(--text-blu));
  background-color: rgb(var(--secondary));
  box-shadow: none;
}

.btn-secondary .rounded-circle{
	background-color: rgb(var(--text-blu));
}

.btn-secondary:hover,
.btn.bg-gradient-secondary:hover {
  color: inherit;
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  box-shadow: none;
}

.text-blu {
  color: rgb(var(--text-blu)) !important;
}
.bg-blu {
  background-color: rgb(var(--text-blu)) !important;
}
.text-lightblu {
  color: rgb(var(--text-lightblu)) !important;
}
.bg-lightblu {
  background-color: rgb(var(--text-lightblu)) !important;
}
.text-orange{
	color: rgb(var(--text-orange)) !important;
}
.bg-orange{
	background-color: rgb(var(--text-orange)) !important;
}
.text-pink{
	color: rgb(var(--text-pink)) !important;
}
.bg-pink{
	background-color: rgb(var(--text-pink)) !important;
}
.text-yellow{
  color: rgb(var(--text-yellow)) !important;
}
.bg-yellow{
  background-color: rgba(var(--text-yellow)) !important;
}


.navbar-vertical .navbar-brand>img, .navbar-vertical .navbar-brand-img {
    max-height: 2.9rem;
}

/* FORM-CONTROL */
body .input-group.input-group-static select.form-control {
    background: #fff!important;
    padding: 0.6rem 0.6rem !important;
    color: rgb(var(--text-blu)) !important;
    font-size: 1em;
    border-radius: 6px !important;
}

.table .btn {margin: 0;}
.card .card-body {font-family: var(--bs-font-sans-serif);}
/************************/

/*FIX*/
.input-group.input-group-outline .form-label { z-index: 1;}


.btn-forecast-open, .bg-forecast-open {
  background-color: #fff;
}
.btn-forecast-empty, .bg-forecast-empty {
  background-color: rgba(var(--text-lightblu), 0.1);
}
.btn-forecast-unavailable, .bg-forecast-unavailable {
  background-color: rgba(var(--text-yellow), 0.1);
}



.bg-forecast-open .table > tbody > * > * {
    border-bottom-color: var(--bs-orange) !important;
}

.bg-forecast-open .table> :not(:first-child) {
    border-top: 2px solid var(--bs-orange);
}


.box-training-videos { background-size: cover !important; background-repeat: no-repeat !important; background-position: bottom !important; aspect-ratio: 16/9; }

#post-video iframe { aspect-ratio: 16/9; width: 100%; }


.box-dashboard-training .col-lg-8, .box-dashboard-training .little-box { width: 100%; }
.box-dashboard-training .little-box .col-12 { width: 50%; }
.box-dashboard-training .span-text-bgblue { display: none; }
.box-dashboard-training h2 { font-size: 1em !important }


.quantity-wrapper {
  overflow: hidden;
  font-family: Arial, sans-serif;
  white-space: nowrap;
}
.quantity-wrapper button {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--btn-orange);
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    margin: 0 3px;
    color: #fff;
    vertical-align: middle;
}
.quantity-wrapper input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: none;
  outline: none;
  font-size: 16px;
  vertical-align: middle;
}
.quantity-wrapper button:hover {
  background: rgba(var(--text-orange),.5);
}

.btn-update-qty.disabled {color:#fffc}


#products_list .product-group-name, .product-subgroup-name {writing-mode: sideways-lr;}
#products_list .fixed-width { min-width: 120px; max-width: 120px  }
#products_list .lable { color: rgba(var(--text-blu) , 80%);  }
#products_list .value { font-weight: bold;}
#products_list .forecast_quantity_input {width: 35px; padding: 5px; font-weight:bolder;}
#products_list .forecast_quantity_input.isChanged {background-color: rgba(var(--text-lightblu), 0.3);}
#products_list .forecast_quantity_input.confirmChanged {background-color: rgba(var(--bs-success-rgb), 0.3);}

#products_list .product_line_wrapper > div { background: #F4F0ED !important; min-height:96px; }
#products_list .product_line_wrapper:first-child> div { background: #EDEFF7 !important; }

#forecast-edit .quantity-wrapper button {
  background: rgb(var(--primary));
}
#products_list .col-btn {min-width:110px; max-width:110px;}
#products_list .col-btn .btn {margin:0;}
#products_list .product-group-image { min-width: 80px;}
#products_list .product-group-image img {max-height: 96px; padding: 0 5%; cursor: zoom-in; }

#loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 767px) {
  .box-dashboard-training .little-box .box-training-videos { aspect-ratio: 4/3; }


}

@media (max-width: 767px) {
  .box-dashboard-training .little-box .col-12 { width: 100%; }
}