/*---------VARIABLES---------*/
:root {
  --primary: #7787fc;
  --secondary: rgb(181, 101, 255);
  --font: #f8f8f8;
  --fontBox: #eeeeee;
  --text: rgb(29, 29, 29);
  --grey: rgb(218, 218, 218);
}

[data-theme="dark"] {
  --font: #1d1d1d;
  --fontBox: rgb(19, 19, 19);
  --text: white;
  --grey: rgb(92, 92, 92);
}

/*----------GENERAL----------*/
html,body {
  background-color: var(--font);
  color: var(--primary);
}
.main {
  padding:0;
  min-height: 85vh;
}
a {
  color: var(--primary);
}
a:hover {
  opacity:0.8;
}

/*----------MESSAGES----------*/
.message.error {
  color:red;
}
.message.success {
  color: green;
}
.message.info {
  color:blue;
}

/*----------------------------*/

.btn-primary {
  background-color: var(--primary);
  border:0;
  border-radius: 15px;
  cursor: pointer;
}
.btn-primary i {
  color: white !important;
}
.btn-primary:hover {
  background-color: var(--primary);
  opacity:0.8;
}
.btn-primary:focus {
  border: 1px solid white;
  background-color: var(--primary);
}
.btn-muted {
  background-color: var(--grey);
  border:0;
  border-radius: 15px;
  cursor: pointer;
  color: var(--text) !important;
}
.btn-muted:hover {
  opacity:0.8;
}
.btn-muted-v2 {
  background-color: transparent;
  border: 1px solid rgba(155, 155, 155, 0.4);
  border-radius: 15px;
  cursor: pointer;
  color: var(--text) !important;
}
.btn-muted-v2:hover,
.btn-danger:hover {
  opacity:0.5;
}
.btn-load {
  display: none;
}
.btn-icon {
  cursor: pointer;
}
.btn-icon i {
  font-size: 14pt;
}
.btn-icon:hover {
  color: var(--secondary);
}
.btn-danger {
  border:0;
  border-radius: 15px;
  cursor: pointer;
}
.text-primary,.card i,.card a {
  color: var(--primary);
}
.box-comments {
  color: var(--primary);
}
.icon-primary {
  color: var(--primary);
  font-size: 35pt;
  padding-right: 15px;
}
.form-control,.form-select,.form-check-input {
  border: 1px solid rgb(196, 196, 196);
}
.form-control,.form-control:focus,
.form-select, .form-select:focus {
  border-radius: 15px;
  background-color: var(--fontBox);
  color: var(--text);
}
.form-control::placeholder {
  color: rgba(128, 128, 128, 0.616);
}
.note-editable {
  background-color: white;
  color: black;
}
.card .form-control,.card .form-control:focus,
.card .form-select, .card .form-select:focus {
  background-color: var(--font);
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.card {
  background-color: var(--fontBox);
  color: var(--text);
  border-radius:20px;
}
a.link-user{
  color: var(--secondary);
}
.box-search,.box-form {
  width: 35%;
}
.box-search .form-select-content select {
  border-radius: 0;
}

.comment-reply {
  padding-left: 50px;
}
.op-img img {
  border: 1px solid lightgrey;
  max-width: 150px;
  max-height: 200px;
}
.op-img:hover img {
  opacity: 0.8;
}
.menu i {
  font-size: 20px;
  color: var(--primary);
}
.menu a:hover i {
  opacity:0.8;
}
.line {
  border-bottom: 1px solid grey;
  width: 100%;
}
.opinionForm {
  width: 50%;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

@media screen and (max-width: 1500px){
  .box-search,.box-form {
    width: 40%;
  }
}

@media screen and (max-width: 1300px){
  .box-search,.box-form {
    width: 50%;
  }
}

@media screen and (max-width: 1000px){
  .icon-comment {
    display:none;
  }
  .icon-primary {
    font-size: 15pt;
  }
  .box-search,.box-form {
    width: 100%;
  }
  .comment-reply {
    padding-left: 8px;
  }
  .opinionForm {
    width: 100%;
  }
}
@media screen and (max-width: 600px){
  .box-search .input-group {
    flex-direction: column;
  }
  .box-search .form-control {
    border-radius: 15px 15px 0 0 !important;
  }
  .box-search .input-group-text {
    border-radius: 0 0 15px 15px !important;
  }
  .box-search .form-control,
  .box-search .form-select,
  .box-search .input-group-text {
    width: 100%;
  }
}


.text-primary {
  color: var(--primary) !important;
}
/*----------MESSAGES----------*/
#message-container {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.message {
  display: flex;
  justify-content: center;
}
.message .notification {
  padding-right: 45px;
  min-width: 250px;
}
/*----------*/
.alert {
  padding: 12px 40px 12px 20px;
  position: relative;
  border: 0;
  border-radius: 15px;
}
.alert .close {
  background-color: transparent;
  border: 0;
  position: absolute;
  right: 15px;
  top: 13px;
}
.alert .close:hover {
  color: grey;
}
/*-------DROPDOWN-------*/
.dropdown-menu {
  background-color: var(--fontBox);
  border-radius: 15px;
  color: var(--text);
}
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item i{
  color: var(--text);
  font-size: 12pt;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
  color: var(--primary);
  background-color: var(--fontBox);
}
.dropdown-menu.actions-opinion {
  border:1px solid rgba(119, 119, 119, 0.356);
}
/*------MODAL--------*/
.modal-content {
  background-color: var(--fontBox);
  border-radius: 15px;
  color: var(--text);
  border: 1px solid lightgrey;
}
.modal-header .btn-close {
    background-color: white;
}
/*-----COLLAPSE-------*/
.collapse {
  transition: max-height 0.3s ease;
  overflow: hidden;
}
/*-------OTROS-------*/
.hidden {
  display: none;
}
.like.active,
.like.active i,
.like.active span {
  color: var(--secondary);
}
.text-muted {
  color: grey !important;
}
/*------------LOADER----------*/
.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: var(--font);
}
.page-overlay .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--fontBox);
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}