* {
  font-family: 'Montserrat';
}
html,body{
  background: #c3b2e2; background: -webkit-linear-gradient(90deg, #DAB4CB, #c3b2e2, #3A1C71); background: linear-gradient(to right, #DAB4CB, #c3b2e2, #3A1C71);
  height: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.v-application .error--text {
  color: #ce3b3b !important;
  caret-color: #ce3b3b !important;
}

.v-application a {
  color: #a883ee !important;
}

#video_wrap {
  position: relative;
}
#video_overlays {
  position: relative;
}
#video_overlays {
  width: 200px;
  min-height: 150px;

}
#video_frame {
  width: 400px;
  height: 350px;
  border: 5px solid gray;

}
#canvas_frame {
  width: 220px;
  height: 240px;
}
.button_controller {
  width: 400px;
  height: 350px;
  border: 2px solid gray;
  padding: 25px;
}
/*
.v-btn--fab.v-size--default {
  height: 56px !important;
  width: 56px !important;
}

.v-toolbar__content .v-btn.v-btn--icon.v-size--default, .v-toolbar__extension .v-btn.v-btn--icon.v-size--default {
  height: 48px;
  width: 48px !important;
}

.v-btn--fab.v-size--small {
  height: 40px;
  width: 40px !important;
}
*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}


/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

/*
.menus{ width:100%; background:#333; color:white; text-align:center}
.wrapper{ height:2000px; width:100%;}

.fixed{position:fixed; top:0}
*/
.v-btn--floating {
  position: relative;
}

.v-card.on-hover.theme--dark´{
  background-color: rgba(#FFF, 0.8)
}

.v-card__text{
    color: #000
}

.footer {
  min-height: 70px;
  width: 100%;
  position: absolute;
  bottom: 0;  
}

.circle{
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #cfc1e8;
}

.circle2{
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: ripple2 15s infinite;
  box-shadow: 0px 0px 1px 0px #cfc1e8;
}

.small{
  width: 200px;
  height: 200px;
  left: -90px;
  bottom: -100px;
}

.medium{
  width: 400px;
  height: 400px;
  left: -190px;
  bottom: -200px;
}

.large{
  width: 600px;
  height: 600px;
  left: -290px;
  bottom: -300px;
}

.xlarge{
  width: 800px;
  height: 800px;
  left: -390px;
  bottom: -400px;
}

.xxlarge{
  width: 1000px;
  height: 1000px;
  left: -490px;
  bottom: -500px;
}

.small2{
  width: 200px;
  height: 200px;
  left: 1350px;
  bottom: 860px;
}

.medium2{
  width: 400px;
  height: 400px;
  left: 1450px;
  bottom: 750px;
}

.large2{
  width: 600px;
  height: 600px;
  left: 1150px;
  bottom: 650px;
}

.xxlarge2{
  width: 1000px;
  height: 1000px;
  left: 950px;
  bottom: 450px;
}

.xlarge2{
  width: 800px;
  height: 800px;
  left: 1050px;
  bottom: 550px;
}

.shade1{
  opacity: 0.2;
}
.shade2{
  opacity: 0.5;
}

.shade3{
  opacity: 0.7;
}

.shade4{
  opacity: 0.8;
}

.shade5{
  opacity: 0.9;
}

.shade6{
  opacity: 0.2;
}
.shade7{
  opacity: 0.5;
}

.shade8{
  opacity: 0.7;
}

.shade9{
  opacity: 0.8;
}

.shade10{
  opacity: 0.9;
}

.marco {
  border: 1px solid #C1CED9;
}

@keyframes ripple{
  0%{
    transform: scale(0.9);
  }
  
  50%{
    transform: scale(2.1);
  }
  
  100%{
    transform: scale(0.9);
  }
}

@keyframes ripple2{
  0%{
    transform: scale(1.1);
  }
  
  50%{
    transform: scale(0.5);
  }
  
  100%{
    transform: scale(1.1);
  }
}


/* //////////////////////////////////////////// Media Querys ////////////////////////////////////////////////////*/

@media only screen and (min-width: 2200px) and (max-width: 3000px){
  .indexDialog {
      max-width:25% !important; 
      min-width:20% !important;
  }
  /*
  .v-btn {
    padding: 7px 7px !important;
    width: 15px !important;
  }*/

  .speed-dia{
    bottom: 170px !important;
    right: 50px !important;
  }

  .plus1{
    bottom: 170px !important;
    right: 42px !important;
  }

  .plus2{
    bottom: 170px !important;
    right: 42px !important;
  }
}

.menuUser {
  position: absolute !important;
  right: 12px !important;
}

@media only screen and (min-width: 1800px) and (max-width: 2200px){
  .indexDialog {
      max-width:30% !important; 
      min-width:25% !important;
  }
  /*
  .v-btn {
    padding: 7px 7px !important;
    width: 15px !important;
  }*/
  .small2{
    width: 200px;
    height: 200px;
    left: 1350px;
    bottom: 850px;
  }
  
  .medium2{
    width: 400px;
    height: 400px;
    left: 1450px;
    bottom: 750px;
  }
  
  .large2{
    width: 600px;
    height: 600px;
    left: 1150px;
    bottom: 650px;
  }
  
  .xxlarge2{
    width: 1000px;
    height: 1000px;
    left: 950px;
    bottom: 450px;
  }
  
  .xlarge2{
    width: 800px;
    height: 800px;
    left: 1050px;
    bottom: 550px;
  }

  .speed-dia{
    bottom: 170px !important;
    right: 50px !important;
  }

  .plus1{
    bottom: 170px !important;
    right: 42px !important;
  }

  .plus2{
    bottom: 170px !important;
    right: 42px !important;
  }
}

@media only screen and (min-width: 1424px) and (max-width: 1800px){
  .indexDialog {
      max-width:35% !important; 
      min-width:30% !important;
  }

  /*.v-btn {
    padding: 7px 7px !important;
    width: 15px !important;
  }*/

  .speed-dia{
    bottom: 170px !important;
    right: 50px !important;
  }

  .plus1{
    bottom: 170px !important;
    right: 42px !important;
  }

  .plus2{
    bottom: 170px !important;
    right: 42px !important;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1424px){
  .indexDialog {
      max-width:45% !important; 
      min-width:30% !important;
  }

  .v-btn {
    padding: 10px 10px !important;
  }

  .speed-dia{
    position: absolute !important;
    bottom: 110px !important;
    right: 50px !important;
  }

  .plus1{
    position: absolute !important;
    bottom: 110px !important;
    right: 42px !important;
  }
  
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
  .indexDialog {
      max-width:70% !important; 
      min-width:60% !important;
  }

  .v-btn {
    padding: 17px 12px !important;
  }

  .speed-dia{
    position: absolute !important;
    bottom:110px!important; 
    right:50px !important;
  }

  .plus1{
    position: absolute !important;
    bottom:110px!important; 
    right:42px !important;
  }

  .plus2{
    bottom: 170px !important;
    right: 42px !important;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
  .indexDialog {
      max-width:80% !important; 
      min-width:70% !important;
  }
  
  .v-btn {
    padding: 12px 12px !important;
  }

  h6 {
    font-size: 0.50em !important;
    margin-block-start: 1.33em !important;
    margin-block-end: 1.33em !important;
  }

  .speed-dia{
    bottom:110px!important; 
    right:50px !important;
  }

  .logoExamen{
    max-width: 70px !important;
  }

  .mdi-camera{
    display: none !important;
  }

  .plus1{
    bottom:110px!important; 
    right:42px !important;
  }

  .plus2{
    bottom: 170px !important;
    right: 42px !important;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px){
  .indexDialog {
      max-width:90% !important; 
      min-width:70% !important;
  }

  .v-bottom-navigation{
    font-size: .65rem !important;
    min-width: 70px !important;
    overflow-x: auto !important;
  }

  .speed-dia{
    bottom: 110px !important;
    right: 50px !important;
  }

  .logoExamen{
    max-width: 70px !important;
  }

  .mdi-camera{
    display: none !important;
  }

  .plus1{
    bottom: 110px !important;
    right: 42px !important;
  }

  .plus2{
    bottom: 170px !important;
    right: 42px !important;
  }

  .v-btn {
    padding: 14px 14px !important;
  }
}

.v-list--dense .v-list-item, .v-list-item--dense {
  min-height: 20px !important;
  height: 2rem;
}

.v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
  margin-right: .5rem !important;
}

.v-list-item--link {
  transition: background-color .3s cubic-bezier(.25,.8,.5,1);
}

.v-list-item--link:hover {
  background-color: rgba(0,0,0, .13);
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.upload-btn{
  position: absolute !important;
    z-index: 999;
    top: 121px;
    color: rgb(104, 95, 160);
    background: blueviolet;
    background: rgb(188, 147, 223);
    background: linear-gradient(50deg, rgb(155, 125, 198) 0%, rgb(205, 35, 227) 72%);
}

.bg{
background: rgb(255,197,185);
background: linear-gradient(0deg, rgba(59, 6, 119, 0.757) 0%, rgba(171, 127, 221, 0.667) 35%, rgba(255,255,255,0.7539390756302521) 74%), url(../img/logo_negro.png);
}

.avatar-shadow{
box-shadow: 0px 0px 10px 0px rgba(50,12,112,0.75);
-webkit-box-shadow: 0px 0px 10px 0px rgba(50,12,112,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(50,12,112,0.75);
}