﻿@media (max-width:961px) {
    
    /*
        Used for things like user Admin Add/Delete buttons or move up and down buttons
        04/27/2022
    */
    .result-action-icon {
        width: 2.5em;
        height: 2.5em;
        margin: .25em;
    }

    body{
        width:100%;
    }

    menu{
        position:absolute;
        top:0;
        left:0;
        width:100%;
    }

    main{
        top:2em;
    }

    .product-details-mobile-close-button{
        position:absolute;
        top:0;
        left:0;
        height:2em;
        width:2em;
        z-index:1000;
    }

    .center {
        height: 100% !important;
        justify-content: initial !important;
        align-content: initial !important;
        position: initial !important;
    }

    .product{
        position: absolute !important;
    }

    superadmin-header {
    }

    .drug-container {
        border: 1px solid #3E6993 !important;
        border-radius: 3px;
        margin: .5em;
        /* padding: .5em; */
        background-color: white;
    }
    .dropshadow {
        box-shadow: 4px 4px 4px -3px #8a8080;
    }

    .drug-container_title {
        text-align: left;
        background-color: #59b9bb;
        /* background-color: #1aa1a1; */
        color: white;
        padding: .5em;
    }

    .drug-Container_tiles {
        display: flex;
        margin: .5em;
        flex-wrap: wrap;
    }

    header{
        max-height:11em;
        margin:0 !important;
        padding:0 !important;
        box-shadow: 1px 1px 5px lightgrey;
    }
    .header-link{
        height:auto !important;
    }
    .header-left-30{
        display:none;
    }
    .header-logo{
        object-fit:contain;
        max-height:1.5em !important;
    }
    .header-container{
        display:flex;
    }
    .form-entity-code-login {
        margin: 1em;
        object-fit: contain;
        width: 100%;
    }
    .form-email-login {
        display: none;
    }
    .form-container{
        width:100% !important;
        position:relative !important;
        transform:none !important;
        left: auto !important;
        top:auto !important;
    }

    .disease-indication-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .entity-favorite-indication-list-container {
        display: none !important;
    }

    .header-middle {
        display: grid;
        grid-template-rows: 1fr !important;
    }

    .header-search{
        grid-template-rows: 1fr 1fr;
    }

    /*Indication Menu*/
    .category-menu-show {
        display: grid !important;
    }
    .category-menu-hide{
        display:none !important;
    }
    .category-menu {
        z-index: 1000;
        width: 100%;
        position: absolute !important;
        justify-content: unset !important;
    }

    .category-menu-button{
        width:100% !important;
        box-shadow:0px 0px 0px !important;
        border-radius:0 0 0 0 !important;
        max-height:initial !important;
    }

    .category-menu-sub1 {
        display: block !important;
        border-radius: 0 0 0 0 !important;
        position: initial !important;
    }
    .category-menu-sub1 a{
        border: 1px solid lightgrey !important;
    }

    .comingsoon{
        display:none !important;

    }

    .menu-mobile-menu{

    }

    .menu-mobile-hamburger{


    }


    .top-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* background-color: #00BAF0;
        background: linear-gradient(to left, #f46b45, #eea849);
        W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        color: #FFF;
        height: 50px;
        padding: 1em;
    }

    .menu {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .menu > li {
            margin: 0 1rem;
            overflow: hidden;
        }

    .menu-button-container {
        display: none;
        height: 100%;
        width: 30px;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #menu-toggle {
        display: none;
    }

    .menu-button,
    .menu-button::before,
    .menu-button::after {
        display: block;
        background-color: #fff;
        position: absolute;
        height: 4px;
        width: 30px;
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 2px;
    }

        .menu-button::before {
            content: '';
            margin-top: -8px;
        }

        .menu-button::after {
            content: '';
            margin-top: 8px;
        }

    #menu-toggle:checked + .menu-button-container .menu-button::before {
        margin-top: 0px;
        transform: rotate(405deg);
    }

    #menu-toggle:checked + .menu-button-container .menu-button {
        background: rgba(255, 255, 255, 0);
    }

        #menu-toggle:checked + .menu-button-container .menu-button::after {
            margin-top: 0px;
            transform: rotate(-405deg);
        }

        .menu-button-container {
            display: flex;
        }

        .menu {
            position: absolute;
            top: 0;
            margin-top: 50px;
            left: 0;
            flex-direction: column;
            width: 100%;
            justify-content: center;
            align-items: center;
        }

        #menu-toggle ~ .category-menu1  {
            height: 0;
            margin: 0;
            padding: 0;
            border: 0;
            transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        }

    #menu-toggle:checked ~ .category-menu1  {
        border: 1px solid #333;
        height: 2.5em;
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

        .menu > li {
            display: flex;
            justify-content: center;
            margin: 0;
            padding: 0.5em 0;
            width: 100%;
            color: white;
            background-color: #222;
        }

            .menu > li:not(:last-child) {
                border-bottom: 1px solid #444;
            }
    }
