* {
  font-family: Nunito;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-weight: normal;
  font-size: 100%;
  list-style: none;
  line-height: 1;
  outline: none !important;
  background: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
form,
legend,
hr,
input,
textarea,
select,
checkbox {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

.hide {
  display: none !important;
}

table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  vertical-align: top;
  text-align: left;
}

hr {
  border: 0 solid;
  height: 1px;
}

input,
textarea,
iframe {}

checkbox {
  border: 0 solid;
  padding: 0
}

select {
  display: inline;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

a {
  color: inherit;
}

/*utils*/
.bg-Cover {
  background-size: cover;
  background-repeat: no-repeat;
  /*background-position:center;*/
}

.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mw-flex {
  display: flex !important;
}

.mw-align-center {
  align-items: center;
}

.mw-justify-between {
  justify-content: space-between;
}

.mw-justify-center {
  justify-content: center;
}

.mw-clear {
  clear: both;
}

/*visibility*/
.mw-visible-inherit {
  display: inherit !important;
}

.mw-visible {
  display: initial !important;
}

.mw-hidden {
  display: none !important;
}

.mw-opacity {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.mw-oppacity-0 {
  opacity: 0 !important;
}

.mw-oppacity-4 {
  opacity: 4 !important;
}

.mw-oppacity-5 {
  opacity: 5 !important;
}

.mw-oppacity-6 {
  opacity: 6 !important;
}

.mw-oppacity-1 {
  opacity: 1 !important;
}

/*end-visibility*/

.mw-fit-width {
  width: 100% !important;
}

.mw-fit-height {
  height: 100% !important;
}

.mw-object-fit {
  object-fit: cover;
}

/*espaçamento*/
.mw-pad-0 {
  padding: 0 !important;
}

.mw-pad-l-0 {
  padding-left: 0 ! important;
}

.mw-pad-t-0 {
  padding-top: 0 !important;
}

.mw-pad-r-0 {
  padding-right: 0 !important;
}

.mw-pad-l-5 {
  padding-left: 5px !important
}

.mw-pad-r-5 {
  padding-right: 5px !important
}

.mw-pad-t-5 {
  padding-top: 5px !important
}

.mw-pad-b-5 {
  padding-bottom: 5px !important
}

.mw-pad-5 {
  padding: 5px !important
}

.mw-pad-10 {
  padding: 10px !important
}

.mw-pad-t-10 {
  padding-top: 10px !important
}

.mw-pad-l-10 {
  padding-left: 10px !important
}

.mw-pad-r-10 {
  padding-right: 10px !important
}

.mw-pad-b-10 {
  padding-bottom: 10px !important
}

.mw-pad-l-15 {
  padding-left: 15px !important;
}

.mw-pad-r-15 {
  padding-right: 15px !important;
}

.mw-pad-t-15 {
  padding-top: 15px !important
}

.mw-pad-b-15 {
  padding-bottom: 15px !important
}

.mw-pad-15 {
  padding: 15px !important
}

.mw-pad-30 {
  padding: 30px !important
}

.mw-pad-l-30 {
  padding-left: 30px !important;
}

.mw-pad-r-30 {
  padding-right: 30px !important;
}

.mw-pad-t-30 {
  padding-top: 30px !important
}

.mw-pad-b-30 {
  padding-bottom: 30px !important
}

.mw-pad-30 {
  padding: 30px !important
}

.mw-pad-l-20 {
  padding-left: 20px;
}

.mw-pad-r-20 {
  padding-right: 20px;
}

.mw-m-0 {
  margin: 0px !important;
}

.mw-m-t-0 {
  margin-top: 0px !important;
}

.mw-m-b-0 {
  margin-bottom: 0px !important;
}

.mw-m-l-0 {
  margin-left: 0px !important;
}

.mw-m-r-0 {
  margin-right: 0px !important;
}

.mw-m-5 {
  margin: 5px !important;
}

.mw-m-t-5 {
  margin-top: 5px !important;
}

.mw-m-b-5 {
  margin-bottom: 5px !important;
}

.mw-m-l-5 {
  margin-left: 5px !important;
}

.mw-m-r-5 {
  margin-right: 5px !important;
}

.mw-left-0 {
  left: 0 !important;
}

.mw-m-15 {
  margin: 15px !important;
}

.mw-m-t-15 {
  margin-top: 15px !important;
}

.mw-m-b-15 {
  margin-bottom: 15px !important;
}

.mw-m-l-15 {
  margin-left: 15px !important;
}

.mw-m-r-15 {
  margin-right: 15px !important;
}

.mw-m-30 {
  margin: 30px !important;
}

.mw-m-t-30 {
  margin-top: 30px !important;
}

.mw-m-b-30 {
  margin-bottom: 30px !important;
}

.mw-m-l-30 {
  margin-left: 30px !important;
}

.mw-m-r-30 {
  margin-right: 30px !important;
}

/*end-espaçamento*/

.mw-root {
  margin: 0 auto;
  margin-top: 0;
  padding: 0;
}

.mw-center {
  margin: 0 auto !important;
  text-align: center !important;
}

.mw-block {
  display: block !important;
}

.mw-inline-block {
  display: inline-block !important;
}

.mw-wrapper {
  position: relative !important;
}

/*positions*/
.mw-bottom-absolute {
  bottom: 0 !important;
  position: absolute !important;
}

.mw-top-absolute {
  top: 0 !important;
  position: absolute !important;
}

.mw-right-absolute {
  right: 0 !important;
  position: absolute !important;
}

.mw-left-absolute {
  left: 0 !important;
  position: absolute !important;
}

.mw-bottom-fixed {
  bottom: 0 !important;
  position: fixed !important;
}

.mw-top-fixed {
  top: 0 !important;
  position: fixed !important;
}

.mw-right-fixed {
  right: 0 !important;
  position: fixed !important;
}

.mw-left-fixed {
  left: 0 !important;
  position: fixed !important;
}

.mw-box-l {
  float: left !important;
}

.mw-box-r {
  float: right !important;
}

/*end-positions*/

/* shadows */
.mw-sw-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
}

.mw-sw-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}

.mw-sw-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23)
}

.mw-sw-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
}

.mw-sw-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22)
}

.mw-card {
  /*box-shadow: 3px 0px 10px #00000029;*/
  box-shadow: 3px 0px 16px -4px rgb(0 0 0 / 16%);
  background-color: white;
}

.mw-card-2 {
  box-shadow: 0 2px 15px 2px rgb(0 0 0 / 9%);
  background-color: white;
}


/* end-shadows */


/* Effects*/
.mw-efe-tr-c-5 {
  transition: color .5s;
}

/* ---------------------------------------------------- XS ---------------------------------------------*/
@media screen and (min-width: 100px) and (max-width: 743px) {

  /*visibility*/
  .mw-xs-visible-inherit {
    display: inherit !important;
  }

  .mw-xs-visible {
    display: initial !important;
  }

  .mw-xs-hidden {
    display: none !important;
  }

  .mw-xs-flex {
    display: flex !important;
  }

  .mw-xs-oppacity-0 {
    opacity: 0 !important;
  }

  .mw-xs-oppacity-4 {
    opacity: 4 !important;
  }

  .mw-xs-oppacity-5 {
    opacity: 5 !important;
  }

  .mw-xs-oppacity-6 {
    opacity: 6 !important;
  }

  .mw-xs-oppacity-1 {
    opacity: 1 !important;
  }

  /*end-visibility*/
  /*espaçamento*/
  .mw-xs-pad-0 {
    padding: 0 !important;
  }

  .mw-xs-pad-l-0 {
    padding-left: 0 ! important;
  }

  .mw-xs-pad-t-0 {
    padding-top: 0 !important;
  }

  .mw-xs-pad-r-0 {
    padding-right: 0 !important;
  }

  .mw-xs-pad-l-5 {
    padding-left: 5px !important
  }

  .mw-xs-pad-r-5 {
    padding-right: 5px !important
  }

  .mw-xs-pad-t-5 {
    padding-top: 5px !important
  }

  .mw-xs-pad-b-5 {
    padding-bottom: 5px !important
  }

  .mw-xs-pad-5 {
    padding: 5px !important
  }

  .mw-xs-pad-l-15 {
    padding-left: 15px !important;
  }

  .mw-xs-pad-r-15 {
    padding-right: 15px !important;
  }

  .mw-xs-pad-t-15 {
    padding-top: 15px !important
  }

  .mw-xs-pad-b-15 {
    padding-bottom: 15px !important
  }

  .mw-xs-pad-b-30 {
    padding-bottom: 30px !important
  }

  .mw-xs-pad-15 {
    padding: 15px !important
  }

  .mw-xs-pad-l-10 {
    padding-left: 10px !important;
  }

  .mw-xs-pad-r-10 {
    padding-right: 10px !important;
  }

  .mw-xs-pad-t-10 {
    padding-top: 10px !important
  }

  .mw-xs-pad-b-10 {
    padding-bottom: 10px !important
  }

  .mw-xs-pad-10 {
    padding: 10px !important
  }


  .mw-xs-m-0 {
    margin: 0px !important;
  }

  .mw-xs-m-t-0 {
    margin-top: 0px !important;
  }

  .mw-xs-m-b-0 {
    margin-bottom: 0px !important;
  }

  .mw-xs-m-l-0 {
    margin-left: 0px !important;
  }

  .mw-xs-m-r-0 {
    margin-right: 0px !important;
  }

  .mw-xs-m-5 {
    margin: 5px !important;
  }

  .mw-xs-m-t-5 {
    margin-top: 5px !important;
  }

  .mw-xs-m-b-5 {
    margin-bottom: 5px !important;
  }

  .mw-xs-m-l-5 {
    margin-left: 5px !important;
  }

  .mw-xs-m-r-5 {
    margin-right: 5px !important;
  }

  .mw-xs-m-15 {
    margin: 15px !important;
  }

  .mw-xs-m-t-15 {
    margin-top: 15px !important;
  }

  .mw-xs-m-b-15 {
    margin-bottom: 15px !important;
  }

  .mw-xs-m-l-15 {
    margin-left: 15px !important;
  }

  .mw-xs-m-r-15 {
    margin-right: 15px !important;
  }

  /*end-espaçamento*/
  .mw-xs-root {
    margin: 0 auto;
    margin-top: 0;
    padding: 0;
  }

  .mw-xs-center {
    margin: 0 auto !important;
    text-align: center !important;
  }

  .mw-xs-block {
    display: block !important;
  }

  .mw-xs-wrapper {
    position: relative !important;
  }

  /*positions*/
  .mw-xs-bottom-absolute {
    bottom: 0 !important;
    position: absolute !important;
  }

  .mw-xs-top-absolute {
    top: 0 !important;
    position: absolute !important;
  }

  .mw-xs-right-absolute {
    right: 0 !important;
    position: absolute !important;
  }

  .mw-xs-left-absolute {
    left: 0 !important;
    position: absolute !important;
  }

  .mw-xs-box-l {
    float: left !important;
  }

  .mw-xs-box-r {
    float: right !important;
  }

  /*end-positions*/
  /* shadows */
  .mw-xs-sw-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
  }

  .mw-xs-sw-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
  }

  .mw-xs-sw-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23)
  }

  .mw-xs-sw-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
  }

  .mw-xs-sw-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22)
  }

  .mw-xs-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
  }

  .mw-xs-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
  }

  /* end-shadows */

}

/* ---------------------------------------------------- SM ---------------------------------------------*/
@media screen and (min-width: 744px) and (max-width: 989px) {
  .mw-sm-visible-inherit {
    display: inherit !important;
  }

  .mw-sm-visible {
    display: initial !important;
  }

  .mw-sm-hidden {
    display: none !important;
  }

  .mw-sm-oppacity-0 {
    opacity: 0 !important;
  }

  .mw-sm-oppacity-4 {
    opacity: 4 !important;
  }

  .mw-sm-oppacity-5 {
    opacity: 5 !important;
  }

  .mw-sm-oppacity-6 {
    opacity: 6 !important;
  }

  .mw-sm-oppacity-1 {
    opacity: 1 !important;
  }

  /*end-visibility*/
  /*espaçamento*/
  .mw-sm-pad-0 {
    padding: 0 !important;
  }

  .mw-sm-pad-l-0 {
    padding-left: 0 ! important;
  }

  .mw-sm-pad-t-0 {
    padding-top: 0 !important;
  }

  .mw-sm-pad-r-0 {
    padding-right: 0 !important;
  }

  .mw-sm-pad-l-5 {
    padding-left: 5px !important
  }

  .mw-sm-pad-r-5 {
    padding-right: 5px !important
  }

  .mw-sm-pad-t-5 {
    padding-top: 5px !important
  }

  .mw-sm-pad-b-5 {
    padding-bottom: 5px !important
  }

  .mw-sm-pad-5 {
    padding: 5px !important
  }

  .mw-sm-pad-l-15 {
    padding-left: 15px !important;
  }

  .mw-sm-pad-r-15 {
    padding-right: 15px !important;
  }

  .mw-sm-pad-t-15 {
    padding-top: 15px !important
  }

  .mw-sm-pad-b-15 {
    padding-bottom: 15px !important
  }

  .mw-sm-pad-15 {
    padding: 15px !important
  }


  .mw-sm-m-0 {
    margin: 0px !important;
  }

  .mw-sm-m-t-0 {
    margin-top: 0px !important;
  }

  .mw-sm-m-b-0 {
    margin-bottom: 0px !important;
  }

  .mw-sm-m-l-0 {
    margin-left: 0px !important;
  }

  .mw-sm-m-r-0 {
    margin-right: 0px !important;
  }

  .mw-sm-m-5 {
    margin: 5px !important;
  }

  .mw-sm-m-t-5 {
    margin-top: 5px !important;
  }

  .mw-sm-m-b-5 {
    margin-bottom: 5px !important;
  }

  .mw-sm-m-l-5 {
    margin-left: 5px !important;
  }

  .mw-sm-m-r-5 {
    margin-right: 5px !important;
  }

  .mw-sm-m-15 {
    margin: 15px !important;
  }

  .mw-sm-m-t-15 {
    margin-top: 15px !important;
  }

  .mw-sm-m-b-15 {
    margin-bottom: 15px !important;
  }

  .mw-sm-m-l-15 {
    margin-left: 15px !important;
  }

  .mw-sm-m-r-15 {
    margin-right: 15px !important;
  }

  /*end-espaçamento*/
  .mw-sm-root {
    margin: 0 auto;
    margin-top: 0;
    padding: 0;
  }

  .mw-sm-center {
    margin: 0 auto !important;
    text-align: center !important;
  }

  .mw-sm-block {
    display: block !important;
  }

  .mw-sm-wrapper {
    position: relative !important;
  }

  /*positions*/
  .mw-sm-bottom-absolute {
    bottom: 0 !important;
    position: absolute !important;
  }

  .mw-sm-top-absolute {
    top: 0 !important;
    position: absolute !important;
  }

  .mw-sm-right-absolute {
    right: 0 !important;
    position: absolute !important;
  }

  .mw-sm-left-absolute {
    left: 0 !important;
    position: absolute !important;
  }

  .mw-sm-box-l {
    float: left !important;
  }

  .mw-sm-box-r {
    float: right !important;
  }

  /*end-positions*/
  /* shadows */
  .mw-sm-sw-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
  }

  .mw-sm-sw-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
  }

  .mw-sm-sw-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23)
  }

  .mw-sm-sw-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
  }

  .mw-sm-sw-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22)
  }

  .mw-sm-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
  }

  .mw-sm-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
  }
}

/* end-shadows */


@media screen and (max-width: 600px) {
  .mw-sm-sw-0 {
    box-shadow: none;
  }
}


.mw-radius-0 {
  border-radius: 0;
}

.mw-radius-1 {
  border-radius: 4px;
}

.mw-radius-2 {
  border-radius: 8px;
}

.mw-radius-3 {
  border-radius: 12px;
}

.mw-radius-4 {
  border-radius: 16px;
}

.mw-radius-50 {
  border-radius: 50%;
}

.mw-radius-no-0 {
  border-top-left-radius: 0;
}

.mw-radius-no-1 {
  border-top-left-radius: 4px;
}

.mw-radius-no-2 {
  border-top-left-radius: 8px;
}

.mw-radius-no-3 {
  border-top-left-radius: 12px;
}

.mw-radius-no-4 {
  border-top-left-radius: 16px;
}

.mw-radius-no-50 {
  border-top-left-radius: 50%;
}

.mw-radius-ne-0 {
  border-top-right-radius: 0;
}

.mw-radius-ne-1 {
  border-top-right-radius: 4px;
}

.mw-radius-ne-2 {
  border-top-right-radius: 8px;
}

.mw-radius-ne-3 {
  border-top-right-radius: 12px;
}

.mw-radius-ne-4 {
  border-top-right-radius: 16px;
}

.mw-radius-ne-50 {
  border-top-right-radius: 50%;
}

.dragging,
.dragging :active {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.conditional-arrows .fa-arrows-v {
  visibility: hidden;
}

.conditional-arrows:hover .fa-arrows-v {
  visibility: visible;
}


/*Novos*/


@media (min-width: 600px) {

  ::-webkit-scrollbar {
    width: 10px;
    height: 9px;
    cursor: pointer;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 30px;
  }

  ::-webkit-scrollbar-thumb {
    background: #d5d5d5;
    border-radius: 30px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(175, 175, 175);
  }
}


.mw-circle-icon {
  background-color: #2193B0;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.icons-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mw-spaced-line-0 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.mw-spaced-line-1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.mw-spaced-line-2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.mw-spaced-line-3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.mw-spaced-line-4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.mw-spaced-line-5 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
}

@media screen and (max-width: 600px) {
  .mw-spaced-line-1 {
    gap: 5px;
  }

  .mw-spaced-line-2 {
    gap: 10px;
  }

  .mw-spaced-line-3 {
    gap: 20px;
  }

  .mw-spaced-line-4 {
    gap: 30px;
  }

  .mw-spaced-line-5 {
    gap: 40px;
  }
}

.mw-word-break {
  word-break: break-word;
}

.mw-button {
  height: 30px;
  border-radius: 6px;
  font-size: calc(12px + var(--font-size-increment));
  font-weight: 800;
  align-items: center;
  justify-content: center;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
}

body sidebar-toggle .logo-img {
  background-image: url(../img/logo-eliteCs.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.56ch;
  height: 2.56ch;
}

body.sidebar-off sidebar-toggle .logo-img {
  background-image: url(../img/menu-toggle.svg);
}

.internal-icon,
.youtube-icon,
.vimeo-icon,
.vimeoevent-icon,
.vimeoshowcase-icon,
.dailymotion-icon,
.facebook-icon,
.samba-icon,
.dazn-icon,
.dugout-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 5px;
  bottom: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.internal-icon {
  background-image: url(../img/players/interno.svg);
}

.youtube-icon {
  background-image: url(../img/players/youtube.svg);
}

.vimeo-icon,
.vimeoevent-icon,
.vimeoshowcase-icon {
  background-image: url(../img/players/vimeo.svg);
}

.dailymotion-icon {
  background-image: url(../img/players/dailymotion.svg);
}

.facebook-icon {
  background-image: url(../img/players/facebook.svg);
}

.samba-icon {
  background-image: url(../img/players/samba.svg);
}

.dazn-icon {
  background-image: url(../img/players/dazn.svg);
}

.dugout-icon {
  background-image: url(../img/players/dugout.svg);
}

.audio-icon {
  background-image: url(../img/text/audio.svg);
}

.image-icon {
  background-image: url(../img/text/image.svg);
}

.video-icon {
  background-image: url(../img/text/video.svg);
}

.attachment-icon {
  background-image: url(../img/text/paperclip.svg);
}

.audio-icon,
.image-icon,
.video-icon,
.attachment-icon {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.p-3 {
  padding: var(--space-3) !important;
}

.py-3 {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

.px-3 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}

.pb-3 {
  padding-bottom: var(--space-3) !important;
}

.pt-3 {
  padding-top: var(--space-3) !important;
}

.pl-3 {
  padding-left: var(--space-3) !important;
}

.pr-3 {
  padding-right: var(--space-3) !important;
}

.m-3 {
  margin: var(--space-3) !important;
}

.my-3 {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}

.mx-3 {
  margin-left: var(--space-3) !important;
  margin-right: var(--space-3) !important;
}

.mb-3 {
  margin-bottom: var(--space-3) !important;
}

.mt-3 {
  margin-top: var(--space-3) !important;
}

.ml-3 {
  margin-left: var(--space-3) !important;
}

.mr-3 {
  margin-right: var(--space-3) !important;
}

.neg-mx-3 {
  margin-right: calc(-1 * var(--space-3));
  margin-left: calc(-1 * var(--space-3));
}



.flex-auto {
  flex-basis: 0 !important;
  flex-grow: 1 !important;
}

.flex-contain {
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

.flex-fixed {
  flex-basis: 0 !important;
}

.scroll-xy {
  overflow: auto !important;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.scroll-x {
  overflow-y: hidden !important;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.scroll-y {
  overflow-x: hidden;
  overflow-y: auto !important;
}

.overflow-hidden {
  overflow: hidden;
}

.flex-column {
  display: flex;
  flex-direction: column
}

.flex {
  display: flex;
}

.no-wrap {
  white-space: nowrap;
  flex-wrap: nowrap;
}

.gap-10 {
  gap: 10px
}

.gap-7 {
  gap: 7px
}

.gap-5 {
  gap: 5px
}

.ml-neg-5 {
  margin-left: -5px;
}

.mr-neg-5 {
  margin-right: -5px;
}

.mt-neg-5 {
  margin-top: -5px;
}

.mb-neg-3 {
  margin-bottom: -5px;
}

.ml-neg-3 {
  margin-left: -1rem;
}

.mr-neg-3 {
  margin-right: -1rem;
}

.separator-1 {
  line-height: 26px;
  color: lightgrey;
  margin-left: 5px;
  margin-right: 4px;
  background: lightgrey;
  height: 1px;
  margin-bottom: 10px;
  margin-top: 9px;
}

.break-word {
  white-space: unset !important;
  word-break: break-word !important;
}

.high-constrast {
  image-rendering: -webkit-optimize-contrast;
}

.show-on-hover {
  visibility: collapse;
}

.selectable:hover .show-on-hover,
.hoverable:hover .show-on-hover {
  visibility: visible;
}

.highlight-on-hover-bg-success:hover {
  background-color: palegreen;
}

.text-ellipsis {
  width: 100%;
  flex: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-scroll-y::-webkit-scrollbar {
  width: 0px !important;
  height: 9px !important;
}

.no-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scroll::-webkit-scrollbar {
  display: none;
}

.propagate-fs-sm * {
  font-size: calc(10px + var(--font-size-increment));
}

.shadow-scroll-offset-x-20 {
  margin-right: -20px;
  margin-left: -20px;
  padding-right: 20px;
  padding-left: 20px;
}

.shadow-scroll-offset-x-30 {
  margin-right: -30px;
  margin-left: -30px;
  padding-right: 30px;
  padding-left: 30px;
}

.shadow-scroll-offset-y-10 {
  margin-top: -10px;
  padding-top: 10px;
  margin-bottom: -10px;
  padding-bottom: 10px;
}

.hidden {
  display: none !important;
}

.hide-links a {
  font-size: inherit !important;
  color: inherit !important;
  white-space: normal !important;
  word-break: break-all !important;
}

.link:hover {
  color: var(--primary) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  ;
}

.user-disabled,
.disabled-user {
  color: red !important;
}

.no-pointer-events {
  pointer-events: none;
}

/* Storage Location Styles */
.storage-location-form .form-row,
.storage-location-form mw-textbox {
  width: 100%;
}


















.drag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 999;
  pointer-events: none;
  display: none;
}

.drag-preview {
  position: absolute;
  background-color: #007bff;
  color: white;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.page-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.page-zoom-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  position: relative;
}

.page-zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
}

.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.page-expanded {
  position: fixed !important;
  max-height: 92vh !important;
  width: 680px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  z-index: 9999 !important;
  margin: 0 !important;
  background-color: white !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  will-change: width, transform, left, top;
  transition: width 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out, left 0.3s ease-out, top 0.3s ease-out;
}

.page-expand-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.page-expand-overlay.show {
  opacity: 1;
}

.page-expand-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.page-expanded .page-expand-close {
  opacity: 1;
}


/* Painéis da direita */
.info-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.info-panel-title {
  font-weight: 700;
  font-size: 13px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.info-panel-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: #555;
}

.info-panel-item-label {
  font-weight: 500;
}

.info-panel-item-value {
  font-weight: 600;
  color: #007bff;
}

.info-panel-field {
  margin-bottom: 10px;
}

.info-panel-field-label {
  font-size: 11px;
  color: #777;
  margin-bottom: 4px;
  font-weight: 500;
}

.info-panel-field-value {
  font-size: 12px;
  color: #333;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 3px;
  min-height: 20px;
}