/*
    Used to make mobile stuff less ugly. Will be transfered into the others file bit-by-bit.
*/

@media only screen and (max-width: 600px) {
	
    .modal-open {
        margin-right: 0px;
    }

    /* -------- Index -------- */
   
    .circle {
        width: 1.25em;
        height: 1.25em;
        border-radius: 50%;
        font-size: 50px;
        text-align: center;
        text-align: -webkit-center;
        background-color: var(--itemBG_075);
        line-height: 110%;
        position: fixed;
        bottom: .5em;
        right: .5em;
    }

    article {
        padding-left: 0.5em;
        padding-right: 1em;
    }

    .voiceSvg.index {
        margin-top: -4px;
    }

	/* -------- Word Search -------- */
    
    .search-embedded-btn {
        right: 5px;
        margin-top: 9px;
    }

    .search-embedded-btn.search {
        right: 7px;
        margin-top: 10px;
    }

    .search-embedded-btn.radical {
        display: none;
    }

    #voiceBtn > svg {
        margin-top: 3px;
    }

    #search-vl {
        position: absolute;
        right: 39px;
    }    

    #emptyInput {
        right: 31px;
        margin-top: 7px;
    }

    .choices__item--selectable.selected {
        color: var(--primaryColor) !important;
    }
    
    .form-main > div > div > div > div .choices__list.choices__list--dropdown {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

    .searchDivInner form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown {
        padding-right: 20px;
    }

    .overlay.suggestion {
        width: 98%;
        margin-left: 1%;
    }
    
    .image-search-input {
        width: 100%;
    }

    #shadow-text {
        padding: 0px;
        margin: 13px 15px;
    }
	
    #content-container {
        flex-direction: column!important;
        min-width: 350px;
    }
    
    body {
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
    }

    .searchDivInner form .inner-form .input-field.first-wrap .choices__inner .choices__list--single .choices__item {
        display: none;
    }

    .searchDivInner form .inner-form .input-field.first-wrap {
        width: 40px;
    }

    .searchDivInner form .inner-form .input-field input {
        height: 100%;
        background: transparent;
        border: 0;
        display: block;
        width: 88%;
        padding: 25px 0px 27px 15px;
        font-size: 1em;
        color: var(--searchTextcolor);
    }

    #searchDiv {
        margin: 0px;
        width: 100%;
        max-width: 1000px;
    }

    h3 {
        margin-bottom: 2rem;
    }

    .title-div {
        width: 100%;
    }
    
    .btn-container, .main-tab-select {
        display: none !important;
    }
    
    .title-div {
        padding-top: 10px;
        width: 100%;
    }
    
    .main-info {
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
        width: 100%;
    }

    .mdl-menu__container {
        margin-right: 15px;
    }
	
	.main-info > .d-flex.center {
  flex-direction: column!important;
		align-self: center;
		align-items: center;
        width: 100%;
	}

    .main-info > .d-flex.flex-row {
        align-self: center;
		align-items: center;
        margin-left: -10px;
    }
    
    .definition-wrapper.d-flex.flex-row {
        padding-bottom: 5px;
    }
    
    .secondary-info {
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
        align-self: center;
        width: 100%;
       /* padding-left: 15%; */
    }
	
    .secondary-info > div > .kanji-entry {
        justify-content: center;
    }
	
	.kanji-entry.left.fixed > .d-flex {
		padding-bottom: 5px;
	}

    .kanji-entry.right {
        padding-left: 2vw;
        padding-right: 2vw;
        width: 100%;
	}
    
    .kanji-preview.large {
        position: absolute;
    }
    
    .translation.kanji {
        padding-top: 70px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
        text-align: center;
        text-align: -webkit-center;
    }
	
	.kanji-parent > .tags {
		padding-bottom: 5px;
        text-align: center;
        text-align: -webkit-center;
	}

    .list-entry > .tags, .kanji-entry.right, .tags.no-margin {
        text-align: left;
    }

    .entry-min-height-1 {
        min-height: unset;
    }
    
    .entry-min-height-2 {
        min-height: unset;
    }

    /* ----------- Overlay ----------- */

    .clickable.collocation {
        width: 70%;
        margin-left: 20%;
    }

    .table.conjugation {
        margin-left: 0px;
        width: 101%;
    }

    /* -------- Radical Picker -------- */
    
    .rad-picker-icon {
        font-size: 30px;
    }

    /* -------- Image Upload -------- */

    .cropping-target-border {
        width: calc(100% - 30px);
        left: 15px;
    }

    .croppie-container {
        width: calc(100% - 60px);
        left: 30px;
    }

    .croppie-container .cr-boundary {
        height: 485px;
        overflow: scroll;
    }

    /* -------- Help Page --------- */

    .help-joto {
        display: none;
    }
  
    /* -------- Mobile only -------- */

    .mobile-nav {
        overflow-y: hidden;
        position: fixed;
        bottom: 75px;
        right: 24px;
        z-index: 100;
        height: 50%;
        width: 60px;
    }

    .mobile-nav-btn {
        place-content: center;
        place-items: center;
        display: flex;
        position: fixed;
        bottom: 20px;
        right: 30px; 
        z-index: 99;  
        border: none;
        outline: none; 
        background-color: var(--itemBG_075);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        text-align: center;
        text-align: -webkit-center;
    }

    .mobile-nav-inner-btn {
        width: 45px;
        height: 45px;
        border: none;
        outline: none;
        background: var(--itemBG_075);
        border-radius: 50%;
        margin-bottom: 5px;
        margin-left: 6px;
        transition: all .2s linear;
    }

    .mobile-nav.hidden > .mobile-nav-inner-btn {
        margin-bottom: -50px;
    }

    #jmp-btn {
        padding-bottom: 5px;
        transform: rotate(180deg);
    }

    #jmp-btn > svg > polygon {
        fill: var(--primaryColor);
    }

    .kanji-jump {
        text-align: center;
        text-align: -webkit-center;
        margin-bottom: 20px;
    }

    .kanji-jump.parent {
        text-align: center;
        text-align: -webkit-center;
        width: 100%;
    }

    .word-title {
        display: none;
    }

    .info-h3 {
        margin-bottom: 0px;
    }

    /* Radical Picker */
    .rad-result-preview {
        display: none;
    }

    .mobile-nav-btn:focus, .mobile-nav-inner-btn:focus {
        outline: none;
        box-shadow: 0 0 3pt 2pt var(--primaryColor);
    }

}

/* Mobile only */
@media only screen and (min-width: 600px) {
    .circle, .mobile-nav, .mobile-nav-btn, .mobile-nav-inner-btn, .kanji-jump, .desktop-br {
        display: none;
    }
}