styles.css

/*
 This file is part of Moodle - http://moodle.org/

 Moodle is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 Moodle 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 General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with Moodle. If not, see <http://www.gnu.org/licenses/>.
*/
/**
 * @copyright  2018 Edunao SAS (contact@edunao.com)
 * @author     Sadge (daniel@edunao.com)
 * @package    block_ludic_motivators
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/*-----------------------------------------
  Common block styles
*/

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

.ludi-title{
    font-weight: bold;
}

.ludi-pane {
    margin-bottom: 15px;
    border: 1px solid;
    width: 100%;
    padding: 3px;
    display: block;
}

.ludi-header {
    background-color: #6F5499;
    color: #CDBFE3;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
    padding: 1px;
}

.ludi-content {
    overflow: hidden;
}

.ludi-body {
    width: 100%;
    display: block;
    padding-left:2px;
    padding-right:2px;
}

.ludi-body .svg {
    width: 180px;
    height: 180px;
    display: none;
    margin: auto;
    padding-left:4px;
    padding-right:4px;
}

.ludi-place-holder .ludi-content {
    text-align: center;
    margin: 10px;
}


/*-----------------------------------------
  Debug menus
*/

.ludi-debug-menu {
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

.ludi-debug-menu select {
    width: 100%;
}


/*----------------------------------------
  Responsive
 */

.small-screen #mod_quiz_navblock {
    flex-direction : initial;
}

.small-screen #region-main-box {
    display: flex;
    flex-direction: column;
}

.small-screen section[data-region="blocks-column"] {
    order: 1;
}

.small-screen #region-main {
    order: 2;
}