﻿.no_text_decoration {
    text-decoration: none !important;
}
    .no_text_decoration:hover {
        text-decoration: none !important;
    }

/*For Calculation Hiding and showing option*/
.icon_rotate {
    -moz-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
    color: black !important;
    height: 10px;
    width: 10px;
}

    .icon_rotate.rotate {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(-180deg) translateY(-6px) translateX(-6px);
        transform-origin: left left;
    }

.panel_collapse {
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    height: 100%;
}

    .panel_collapse.nodisplay {
        height: 0% !important;
        display: none !important;
    }

.link_no_style {
    color: black !important;
    text-decoration: none;
}

    .link_no_style:link {
        color: black !important;
        text-decoration: none;
    }

    .link_no_style:active {
        color: black !important;
        text-decoration: none;
    }

    .link_no_style:visited {
        color: black !important;
        text-decoration: none;
    }

/*Drug Search Bars*/
.search_items {
    width: 100%;
    position: relative;
    display: flex;
}

.search_textbox {
    width: 100%;
    border: 3px solid #2196F3;
    border-right: none;
    padding: 5px;
    height: 40px;
    border-radius: 4px 0 0 4px;
    outline: none;
    color: #9DBFAF;
}

    .search_textbox:focus {
        color: #2196F3;
    }

.search_button {
    width: 50px;
    height: 40px;
    border: 3px solid #2196F3;
    text-align: center;
    border-radius: 0px 4px 4px 0px;
    font-size: 13px;
}

/*Inputs Textboxes*/
.input_textbox {
    width: 100%;
    border: 3px solid #2196F3;
    height: 40px;
    border-radius: 4px 4px 4px 4px;
    outline: none;
    color: #2196F3;
}

    .input_textbox:focus {
        color: #2196F3;
    }

/* Switches https://codepen.io/avstorm/pen/jOEpBLW https://freefrontend.com/css-toggle-switches/ */
.switch_checkbox {
    display: inherit !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*appearance: none;*/
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

    .switch_checkbox:focus {
        outline: 0;
    }

.switch_toggle {
    height: 32px;
    width: 52px;
    border-radius: 16px;
    display: inline-block;
    position: relative;
    margin: 0;
    border: 2px solid #2196F3;
    /*background: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);*/
    background: #2196F3;
    transition: all 0.2s ease;
}

    .switch_toggle:after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
        transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
    }

    .switch_toggle:checked {
        border-color: #654FEC;
        background-color: #654FEC;
    }

        .switch_toggle:checked:after {
            /*transform: translatex(20px);*/
            transform: translateX(20px);
        }

/*Dropdown Menus https://codepen.io/jnowland/pen/GZLQBw https://speckyboy.com/open-source-css-javascript-select-box-snippets/ */
/*Original Color: #005BA6*/
[include*="form-input-select()"] {
    display: block;
    padding: 0;
    position: relative;
    /* Set options to normal weight */
    /* ------------------------------------  */
    /* START OF UGLY BROWSER-SPECIFIC HACKS */
    /* ----------------------------------  */
    /* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container.
     The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex.
     You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
    /* Show only the native arrow */
    color: #2196F3;
    display: block;
    border-radius: 4px 4px 4px 4px;
    box-shadow: none;
    font-size: 16px;
    width: 100%;
    
}

    [include*="form-input-select()"]::before, [include*="form-input-select()"]::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        z-index: 2;
    }

    [include*="form-input-select()"] select {
        -webkit-appearance: none;
        -moz-appearance: none;
        /*appearance: none;*/
        background: none;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        border: 1px solid transparent;
        font-size: 16px;
        outline: none;
        max-width: none !important; /*Important to keep triangles inside the selector*/
        /* Focus style */
    }

        [include*="form-input-select()"] select:focus {
            background-color: transparent;
            outline: none;
        }

    [include*="form-input-select()"] option {
        font-weight: normal;
    }

    [include*="form-input-select()"] x:-o-prefocus, [include*="form-input-select()"]::after {
        display: none;
        border-radius: 4px 4px 4px 4px;
    }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    [include*="form-input-select()"] select::-ms-expand {
        display: none;
    }

    [include*="form-input-select()"] select:focus::-ms-value {
        background: transparent;
        color: #000;
    }
}

@-moz-document url-prefix() {
    [include*="form-input-select()"] {
        overflow: hidden;
    }

        [include*="form-input-select()"] select {
            width: 120%;
            width: calc(100% + 3em);
            /* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
        }

    @supports (-moz-appearance: none) {
        [include*="form-input-select()"] select {
            width: 100%;
        }
    }

    [include*="form-input-select()"] select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }
}

@supports (-moz-appearance: none) {
    [include*="form-input-select()"] {
        width: 100%;
    }
}
/* Triangle Positioning */
[include*="form-input-select()"]::before, [include*="form-input-select()"]::after {
    content: '';
    /*display: block; position: absolute; pointer-events: none;*/
    border: 1px solid transparent;
    width: 0;
    height: 0;
    /*right: 16px;*/
    right: 10%;
}
/* Top Triangle */
[include*="form-input-select()"]::before {
    bottom: 55%;
    border-width: 0 6.5px 8px 6.5px;
    border-bottom-color: #D6D6D6;
}
/* Bottom Triangle */
[include*="form-input-select()"]::after {
    border-width: 8px 6.5px 0 6.5px;
    border-top-color: #D6D6D6;
    top: 55%;
}

@-moz-document url-prefix() {
    [include*="form-input-select()"] {
        /*border: 3px solid #E6E6E6;*/
    }

        [include*="form-input-select()"]:hover {
            /*border-right: 3px solid #2196F3;*/
        }
}

[include*="form-input-select()"]:hover select {
    box-shadow: 0 2px 3px rgba(0, 91, 166, 0.1) inset;
    border-color: #2196F3;
    border-radius: 4px 4px 4px 4px;
}

    [include*="form-input-select()"]:hover select:focus {
        outline-color: transparent;
    }

[include*="form-input-select()"]:hover::before {
    border-bottom-color: #2196F3;
}

[include*="form-input-select()"]:hover::after {
    border-top-color: #2196F3;
}

/*Options selected*/
[include*="form-input-select()"] select {
    border: 3px solid #E6E6E6;
    border-radius: 0;
    font-weight: 400;
    color: inherit;
    padding: 11px 15px;
    line-height: normal;
    -webkit-transition: border-color 0.2s ease, outline 0.2s ease;
    transition: border-color 0.2s ease, outline 0.2s ease;
    border-radius: 4px 4px 4px 4px;
}

    [include*="form-input-select()"] select:focus {
        box-shadow: 0 3px 4px rgba(0, 91, 166, 0.3) inset;
        outline: 3px solid #2196F3;
        outline-offset: -3px;
        border-radius: 4px 4px 4px 4px;
    }

    [include*="form-input-select()"] select[disabled], [include*="form-input-select()"] select:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    [include*="form-input-select()"] select:not(:focus):invalid {
        color: #C7C7C7;
    }