/*
* This file is part of Oficial theme for moodle
*
* 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/>.
*
*
* Oficial Responsive style sheet
*
* @package    theme_oficial
* @copyright  2015-2019 Jeremy Hopkins (Coventry University)
* @copyright  2015-2019 Fernando Acedo (3-bits.com)
* @copyright  2018-2019 Manoj Solanki (Coventry University)
*
* @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

/* =====================================================
Media Queries - max's in reverse
order for prescidence.
====================================================== */

/*=====================================================
1200px
======================================================= */

@media (max-width: 1199px) {
    .showhideblocksdesc,
    .zoomdesc {
        display: none;
    }

    #oficial-page-header-wrapper #main-navbar .navbar-nav > li > a {
        padding: 2px 4px;
    }

    #oficial-page-header-wrapper #main-navbar .navbar .navbar-nav > li:first-child a {
        margin-left: -4px;
    }

    #oficial-page-header-wrapper #main-navbar .navbar .navbar-nav > li:last-child a {
        margin-right: -4px;
    }
}

/*=====================================================
979px
======================================================= */
@media (max-width: 979px) {
    #page-header {
        min-height: 60px;
    }

    .langdesc {
        display: inline;
    }
    .slidestyle2 .flex-caption {
        right: -800px;
    }
    .slidestyle2 .flex-active-slide .flex-caption {
        right: 0;
        transition: all 1s ease;
    }
    .slidestyle2 .flex-caption h3 {
        max-width: 970px;
    }
    .slidestyle2 .flex-caption br {
        display: none;
    }
    .slidestyle2 .flex-caption {
        top: 25%;
    }
    .slidestyle2 .flex-direction-nav {
        display: none;
    }
    .slidestyle2 .flex-caption h4 {
        font-size: 23px;
        line-height: 30px;
    }
    .slidestyle2 .flex-caption a.submit {
        font-size: 14px;
        float: none;
        white-space: normal;
        width: auto;
    }

    .navbar {
        float: none !important;
    }

    .navbar .pull-right {
        float: none;
    }

    .navbar .nav > li > a {
        margin: 0 10px 0 0 !important;
    }

    .flex-direction-nav .flex-next {
        right: 0 !important;
    }

    .flex-direction-nav .flex-prev {
        left: 0 !important;
    }

    /* Header */
    /* Logo */
    #logocontainer {
        display: block !important;
        margin: 5px 0;
        padding: 0;
        clear:both;
        width: 100%;
        height: auto;
    }

    #logo img {
        display: block;
        margin: 0 auto;
    }

    /* Site title */
    #sitetitle {
        clear: both;
        display: block;
        margin: 5px 0;
        max-width: 100%;
        text-align: center;
        padding: 0;
        height: auto;
        top: 0;
        left: 0;
    }

    /* Social Icons */
    .socialbox {
        display: table;
        padding: 5px;
        float: none;
        clear: both;
        margin: 15px auto;
    }

    .coursebox .panel-body p {
        font-size: 90%;
        line-height: 130%;
    }

    .enrolmenticons {
        display: none;
    }

    #edittingbutton a,
    #edittingbutton .btn {
        margin-left: 10px !important;
    }

    .searchbox {
        padding-bottom: 5px;
    }

    .search-box, .searchbox {
        margin: 0;
        width: 100%;
    }

    #search-1 {
        width: calc(100% - 39px);
    }

    .hbl, .sbl, .hbll, .sbll {
        display: none !important;
    }

    .nav-collapse .nav {
        width: 100%;
        margin-left: 0 !important;
    }

    #oficial-page-header-wrapper #main-navbar {
        border-bottom: 0;
    }

    #page-header a img {
        margin: 0 auto;
        float: none;
        display: block;
    }

    .nav .dropdown-menu li a {
        color: [[setting:menufontcolor]];
    }

    .nav-collapse.active {
        background-color: [[setting:mobilemenubkcolor]];
        height: auto;
        top: 6px;
        padding-bottom: 4px;
    }

    #edittingbutton {
        margin-left: 10px;
    }

    .menutitle {
        float: none;
    }

    /* New styles for Oficial 2. */
    #oficial-page-header-wrapper .nav-link {
        padding: inherit;
    }

    #oficial-page-header-wrapper .fa {
        height: 24px;
        margin-right: .5rem;
        width: 24px;
    }

    #oficial-page-header-wrapper .topmenuleft {
        float: left !important;
        margin: 0;
        padding: 5px 5px 0 0;
    }

    #oficial-page-header-wrapper .navbar .popover-region {
        margin: 4px 0 0 4px;
    }

    .has-page-header.page-header-margin.header-style1 #page {
        margin-top: 30px;
    }

    .mobiletheme.page-header-margin.header-style1.has-header-bg .headerbgimage {
        background-image: none !important;
    }

    .page-header-margin.header-style2 #page {
        margin-top: 84px;
    }

    /* Course activity and section layout updates to remove any extra padding on smaller screens. */
    .section .activity .activityinstance {
        min-width: 100%;
    }

    .activity-meta-container {
        margin: 0 0 0 20px;
    }

    #region-main,
    .pagelayout-mydashboard #region-main {
        padding: 0 15px;
    }
}

/*=====================================================
767px
======================================================= */
@media (max-width: 767px) {
    #page-login-index2 .forgetpass {
        clear: both;
        float: none;
        margin: 0 auto;
        min-width: 200px;
        text-align: center;
        width: 50%;
    }

    #ticker-announce {
        float: none;
        margin: 0;
        text-align: center;
    }

    #ticker-wrap #newscontent {
        line-height: normal;
        max-width: inherit;
        overflow: inherit;
        padding: 10px 10px 10px;
        white-space: normal;
    }

    #ticker-wrap #newscontent #news {
        white-space: normal;
    }

    #ticker-wrap #controls {
        display: none;
    }

    .slidestyle2 .flex-caption {
        background-color: transparent !important;
        left: 0;
        position: relative;
        top: auto;
    }

    .slidestyle2 .flex-caption a.submit {
        float: none;
        margin: 0;
        text-align: center;
        width: auto;
    }

    .slidestyle2 .flex-caption h3 {
        background-color: #000;
        margin: 0 !important;
    }

    .slidestyle2 .flex-caption h4 {
        font-size: 18px;
        line-height: 22px;
        padding: 10px 0;
    }

    /* 1 tile. */
    .coursebox.col-12 .coursebtn {
        width: 30% !important;
    }

    /* 2 tiles. */
    .coursebox.col-6 .coursebtn {
        width: 55% !important;
    }

    /* 3 tiles. */
    .coursebox.col-4 .coursebtn {
        width: 70% !important;
    }

    /* 4 tiles. */
    .coursebox.col-3 .coursebtn {
        width: 80% !important;
    }

    /* 6 tiles. */
    .coursebox.col-2 .coursebtn {
        width: 95% !important;
    }

    #page-site-index a.submit {
        display: block;
        margin: 5px auto;
        text-align: center;
        white-space: normal;
        width: auto;
    }

    .headermenu2 {
        clear: both;
        float: none;
        padding: 10px 0;
        text-align: center;
    }

    .flex-caption {
        font-size: 90% !important;
        padding: 5px 0 !important;
        width: 100% !important;
    }

    .flex-caption p {
        font-size: 90% !important;
        line-height: 1.4em;
        margin: 0 5px !important;
    }

    .flex-caption h3 {
        font-size: 1.1em !important;
        line-height: 2em;
        margin: 0 5px !important;
    }

    a.submit {
        display: block;
        margin: 5px auto;
        text-align: center;
        width: 80%;
    }

    .block .header {
        margin: 0 !important;
    }

    #page-footer {
        margin: 50px 0;
    }

    #edittingbutton a,
    #edittingbutton .btn {
        margin-left: -10px !important;
    }

    .navbar .nav > li > a {
        margin: 0 10px 0 4px !important;
    }

    #social-connect {
        clear: both;
        float: none;
        width: auto;
    }

    .message .contactselector {
        float: none;
        width: auto;
    }

    .message .messagearea {
        border-left: none;
        float: none;
        min-height: 200px;
        padding-left: 1%;
        width: auto;
    }

    .navbar .nav-collapse.in > .nav > li > a {
        border-radius: 0;
        padding-left: 0 !important;
    }

    .userhead {
        height: 20px;
    }

    .userprofile dl.list dt {
        width: 110px !important;
    }

    .userprofile dl.list dd {
        margin-left: 120px !important;
    }

    .newmenu1,
    .newmenu2,
    .newmenu3,
    .newmenu4,
    .newmenu5,
    .newmenu6,
    .newmenu7,
    .newmenu8,
    .newmenu9,
    .newmenu10,
    .newmenu11,
    .newmenu12,
    .newmenu13,
    .newmenu14,
    .newmenu15,
    .newmenu16 {
        display: none;
    }

    /* Links and Language menu, hide text on small screens. */
    #above-header .langdesc,
    #above-header .linksdesc {
        display: none;
    }

    #above-header {
        min-height: 37px;
    }

    #header2,
    #header2 .row,
    #oficial-page-header-wrapper > #header2 > div > div,
    #oficial-page-header-wrapper #header2 .navbar-nav {
        min-height: 46px;
    }

    .page-header-margin.header-style2 #page {
        margin-top: 62px;
    }

    .socialbox a {
        color: [[setting:headertextcolor2]];
    }

    .socialbox a i {
        /* Make at least 29px, values look odd but on inspection they are needed to be so for FontAwesome. */
        font-size: [[setting:responsivesocialsize]];
        line-height: [[setting:responsivesocialsize]];
    }
    .custom-select {
        max-width:100%;
    }
}


/*=====================================================
576px
======================================================= */
@media (max-width: 576px) {
    .page-header-margin.header-style2 #page {
        margin-top: 38px;
    }
}

/*=====================================================
480px
======================================================= */
@media (max-width: 480px) {
    .flex-caption {
        width: auto !important;
        padding: 5px 0 !important;
        position: relative !important;
        margin-top: -1px !important;
        background-color: #000 !important;
    }

    #page-content {
        padding: 0;
        width: auto;
        margin-top: 15px;
    }

    #page-header .userimg {
        display: none;
    }

    #coursesearchbox2 {
        display: none;
    }
}

/* Mins in ascending order.

/*=====================================================
768px
======================================================= */
@media (min-width: 768px) {
    body.drawer-open-left {
        margin-left: 0;
    }
}

/*=====================================================
1201px or higher / nozoom
======================================================= */

@media (min-width: 1200px) {
    .standard .container {
        max-width: 100%;
        width: 1170px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .standard .container {
        max-width: 100%;
        width: 960px;
    }
}

@media (min-width: 1000px) {
    .narrow .container {
        max-width: 100%;
        width: 1000px;
    }
}

@media (max-width: 992px) and (max-width: 999px) {
    .narrow .container {
        max-width: 100%;
        width: 960px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #oficial-page-header-wrapper .container,
    .container {
        max-width: 100%;
        width: 724px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .container {
        max-width: 100%;
    }
}


/*=====================================================
Other.
======================================================= */
@media (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    #coursesearchbox2 {
        min-width: 140px;
        margin-top: 5px;
    }
}

@media (min-width: 481px) {
    /* Activity chooser styling. Desktop styling. */
    .jsenabled .choosercontainer #chooseform .alloptions {
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 50%;
        max-height: -webkit-calc(100vh - 15em) !important;
        max-height: calc(100vh - 15em) !important;
    }

    .jsenabled .choosercontainer #chooseform .instruction,
    .jsenabled .choosercontainer #chooseform .typesummary {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 50%;
        margin: 0;
        padding: 1.8em;
        background-color: #fff;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Selected option settings */
    .jsenabled .choosercontainer #chooseform .instruction {
        display: block;
        font-size: 1.2em;
    }

    .choosercontainer #chooseform .selected .typesummary,
    .choosercontainer #chooseform .selected .instruction {
        display: block;
        font-size: 1.1em;
    }

    .choosercontainer #chooseform .selected {
        background-color: #fff;
    }

    /* Styling for overall activity chooser box */

    .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd,
    .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
        padding: 20px;
        padding-right: 30px;
        text-align: center;
        font-size: 36px;
        min-height: 40px;
    }

    .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
        margin-top: 10px;
        margin-right: 10px;
    }

    .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons button.yui3-button.closebutton:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
        padding: 0;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    /* End Activity chooser styling. */

}

@media (min-width: 768px) {
    #above-header .linksmenu {
        margin-left: 0px;
    }

    .oficial-drawer {
        display: none;
    }
}
