/*
		e-valUAM: An adaptive questionnaire environment.
		e-valUAM: Un entorno de questionarios adaptativos.

    Copyright (C) 2011-2016
		P. Molins, P. Marcos with P. Rodríguez, F. Jurado & G. M. Sacha.
		Contact email: pablo.molins@uam.es


		This file is part of e-valUAM.

    e-valUAM is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
		by the Free Software Foundation, either version 3 of the License, or
    any later version.

    e-valUAM is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with e-valUAM.  If not, see <http://www.gnu.org/licenses/>.
*/

* {
    box-sizing: border-box;
}

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

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.login-bg {
    /* background-color: #eee !important; */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url(/multimedia/background.jpg);
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    padding-left: 0 !important;
}

nav {
    background-color: #fff !important;
}

#cajon-respuestas {
    margin: auto;
    max-width: 500px;
}


/* #cajon-datos{
	max-width:400px;
} */

#respuestas {
    margin-top: 20px;
}

#logo_adaplang {
    max-height: 42px;
}

.mp-back {
    z-index:-1;
}

#imagen {
    max-width: 800px;
    max-height: 400px;
}

.mini-imagen {
    max-width: 45px;
    max-height: 45px;
}

#opciones {
    float: left;
    margin: 10px;
}

.correcta {
    color: #00CC00;
}

.incorrecta {
    color: #a94442;
}

/* Wrap text on exam result answer cells */
.answer-cell {
    white-space: nowrap;        /* keep text in a single line */
    overflow: hidden;           /* hide the overflow */
    text-overflow: ellipsis;    /* show "..." */
    max-width: 200px;           /* set width limit */
    cursor: pointer;            /* show pointer on hover */
}

.mensajes {
    margin-top: 20px;
    margin-bottom: -0px;
}

.main-button {
    background-color: #4a7729 !important;
    color: #fff !important;
}

.card {
    box-shadow: 3px 7px 5px 1px rgba(22, 22, 22, 0.5) !important;
    border-radius: 10px !important;
}

.form-card {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.form-card a {
    color: #0062cc !important;
}

.main-container {
    min-height: 100vh;
    /* will cover the 100% of viewport */
    overflow: auto;
    display: block;
    position: relative;
    padding-bottom: 275px;
    /* height of your footer */
}

.footer {
    background-color: #0077c8;
    z-index: -1;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer p.text-center {
    margin-bottom: 0.3rem !important;
}

.footer-link {
    color: #fff !important;
}

#logo-text {
    line-height: 1.2 !important;
}

.full-view {
    min-height: 100vh;
    /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    /* height of your footer */
    margin: 0;
    padding: 0 !important;
}

.navbar {
    box-shadow: 1px rgba(194, 194, 194, 1) !important;
    margin-bottom: 1 !important;
    margin-bottom: 0px;
}

.jumbotron {
    margin: 0 0 10px !important;
}

.navbar-light .navbar-text {
    color: #000 !important;
}


/* Media queries */

@media (min-width: 700px) {
    .vertical-center {
        /* min-height: 70%; */
        /* Fallback for browsers do NOT support vh unit */
        min-height: 60vh;
        /* These two lines are counted as one :-)       */
        margin-bottom: 5vh;
        margin-top: 5vh;
        display: flex;
        align-items: center;
    }
    #logo-footer {
        max-height: 60px;
    }
}

@media (max-width: 500px) {
    #logo_adaplang {
        max-height: 35px;
    }
    #logo-footer {
        max-height: 40px;
    }
    .vertical-center {
        margin-bottom: 10vh;
        margin-top: 10vh;
    }
}

@media (max-width: 768px) {
    .navbar {
        margin-bottom: 20px;
    }
    .vertical-center {
        margin-bottom: 10vh;
        margin-top: 10vh;
    }
}

@media screen and (max-width: 1024px) {
    .main-container {
        padding-bottom: 0;
    }
    .footer {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
    }
}


/*Sidebar CSS */

#body-row {
    margin-left: 0;
    margin-right: 0;
}

#sidebar-container {
    min-height: 100vh;
    background-color: #f6f6f6;
    padding: 0;
}


/* Sidebar sizes when expanded and expanded */

.sidebar-expanded {
    width: 230px;
}

.sidebar-collapsed {
    width: 60px;
}


/* Menu item*/

#sidebar-container .list-group a {
    height: 50px;
    color: #333;
}


/* Submenu item*/

#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}


/* Separators */

.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}

.sidebar-separator {
    background-color: #333;
    height: 25px;
}

.logo-separator {
    background-color: #333;
    height: 60px;
}


/* Closed submenu icon */

#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f0d7";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}


/* Opened submenu icon */

#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f0da";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}

#main-logo {
    width: 100%;
    max-width: 400px;
    height: auto;
}

a.nav-link {
    color: #4a7729;
}

a:hover.nav-link {
    color: #2a4019;
}


/* Test styles */

.test-text {
    font-size: 1.125rem;
}

.img-answer {
    max-height: 300px;
}

.container-evaluam {
    min-height: 100vh;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    font-size: 1.25em;
    border-radius: 25px;
    background-color: #0077c8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-circle.btn-lg:hover {
    background-color: #0069b8;
}

.help-text {
    font-size: .875rem;
    color: #6c757d;
}

li small.text-muted {
    display: none !important;
}


/* Tags in selected list */
.error-notice {
margin: 5px 5px; /* Making sure to keep some distance from all side */
} 

/* ALERTS */
li.list-group-item.oaerror  {
    margin: 0 auto; /* Centering Stuff */
    background-color: #FFFFFF; /* Default background */
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-align: left;
}

li.list-group-item.oaerror.danger{
  border-left-color: #d9534f; /* Left side border color */
  background-color: rgba(217, 83, 79, 0.1); /*Same color as the left border with reduced alpha to 0.1*/
}
  
li.list-group-item.oaerror.danger strong{
  color:#d9534f;
}

li.list-group-item.oaerror.warning {
    border-left-color: #f0ad4e;
    background-color: rgba(240, 173, 78, 0.1);
}

li.list-group-item.oaerror.warning strong {
    color: #f0ad4e;
}

li.list-group-item.oaerror.success {
    border-left-color: #2b542c;
    background-color: rgba(43, 84, 44, 0.1);
}

li.list-group-item.oaerror.success strong {
    color: #2b542c;
}

li.list-group-item.oaerror.info {
    border-left-color: #5bc0de;
    background-color: rgba(91, 192, 222, 0.1);
    color: #212529;
}

td.question-option > button {
    width: 40px;
    margin-right: 2px;
    margin-bottom: 5px;
    height: 38px;
}

.close span.fas.fa-undo {
    margin-top: 5px;
    font-size: initial !important;
}


/* Date range */
#filtrosAlumno input#start_date,
#filtrosAlumno input#end_date {
    border-radius: 0;
}

#filtrosAlumno span.input-group-text {
    border-radius: 0;
    height: fit-content;
}


/* File Input Gallery */
.brick { width:100px; height:100px; background:#f2f2f2;}
.tile-picker  {
  position:relative;
  background: var(--bg-image);
  background-color:#eaeaea; 
  background-position: center center;
  background-size: cover;
  box-shadow:inset 0 0 10px rgba(0,0,0,.1); 
  outline: 2px solid #fff;
  outline-offset: -3px;
  border:1px solid #bbb; 
  padding-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

.multimedia-element .fa-cog{
    color: #007bff;
}

.active.tile-picker { border-color: #aaa; }

/* .tile-picker > input[type=radio] {
  opacity:0;
  position:absolute; 
  left:-80px;  } */

/* .tile-checked {
  display:block; 
  font-style:normal;  
  width:20px; height:20px; 
  position:absolute; 
  top:-2px;
  right:-4px;
} */

/* .tile-checked:after {
  content:'\2713';
  display:block;
  line-height:18px; width:18px; height:18px;
  background-color:#1481b8; color:#fff;
  border-radius:2px;
  font-size:13px;
  text-align:center; font-weight:bold;
  opacity:1;
  transition: opacity .34s ease-in-out;
} */


/* input[type=radio]:checked ~ .tile-checked:after {
  opacity:1; } */
.clickable {
    cursor: pointer;
}

#audioList {
    display: flex;
    flex-wrap: wrap;
}

.resAudio > audio {
    width: 100%;
}


/*********/
.dropdown-toggle::after {
    display: none !important;
}
.multimedia-options {
    position: absolute !important;
    right: 0px;
}

.multimedia-options a {
    color: initial !important;
    text-decoration: none !important;
}

div#trash-multimedia {
    color: red;
}

.form-select {
    width: 100%;
    height: 35px;
}

/* Gratefulness */
.gratefulness {
    border-left: 1px solid #0062cc;
}

/* Graphs */

.canvasjs-chart-canvas:nth-child(2) {
    position: initial !important;
}
.card.graph {
    box-shadow: none !important;
}

#controls {
    border: 1px solid #dee2e6;
    padding: 10px;
    padding-top: 20px;
    border-radius: 4px;
}



#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
  }
  
  #topBtn:hover {
    background-color: #555;
  }