/** file for experimental css **/



/** Responsive Design Classes-Helpers **/
/** original from css! was 990 */
/*
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
*/
.show-when-shrunk-sm, .show-when-shrunk-sm2, .show-when-shrunk-sm3,
.show-when-shrunk-xs, .show-when-shrunk-md, .show-when-shrunk-lg, .show-when-shrunk-xl {
    display: none; /** default visibility. Should not be "important!" */
}
.hide-when-shrunk, .hide-when-shrunk-sm, .hide-when-shrunk-md, .hide-when-shrunk-lg { }

.navbar hr { margin: 4px auto}

@media screen and (max-width: 1200px) {
    .hide-when-shrunk-xl {
        display: none !important;
    }

    .show-when-shrunk-xl {
        display: unset !important;
    }
}
@media screen and (max-width: 992px) { /* collapse happens below this threshold */
    .hide-when-shrunk, .hide-when-shrunk-lg {
        display: none !important;
    }

    .show-when-shrunk, .show-when-shrunk-lg {
        display: unset !important;
    }
}
@media screen and (max-width: 768px) {
    .hide-when-shrunk-md {
        display: none !important;
    }

    .show-when-shrunk-md {
        display: unset !important;
    }

    .card-body {
        padding: 8px !important;
    }

    .list-group-item {
        padding: 6px 8px !important;
    }
    /*font-size: 0.9em !important;;*/
}
@media screen and (max-width: 576px) { /** IPHONE **/
    .hide-when-shrunk-sm {
        display: none !important;
    }

    .show-when-shrunk-sm {
        display: unset !important;
    }

    .show-block-when-shrunk-sm {
        display: block !important;
    }

    .small-when-shrunk-sm {
        font-size: 0.9em !important;
    }

    .smaller-when-shrunk-sm {
        font-size: 0.8em !important;
    }

    .normal-when-shrunk-sm {
        font-size: 1em !important;
    }

    .text-wrap-when-shrunk-sm {
        white-space: normal !important;
    }

    .info_links a {
        padding: 0 3px !important;
    }

    .container { /* override bootstrap.css */
        width: 100%;
        /*padding-right: 2px !important;*/
        /*padding-left: 2px !important;*/
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .main_card_body .card-body {
        padding-right: 4px !important;
        padding-left: 4px !important;
        margin-right: 4px !important;
        margin-left: 4px !important;
    }

    h1 {  font-size: 1.5rem;}

}

@media screen and (max-width: 460px) {
    .hide-when-shrunk-sm2 {
        display: none !important;
    }
    .show-when-shrunk-sm2 {
        display: unset !important;
    }

    .small-brand-when-shrunk-sm2 {
        font-size: 0.8em !important;
        margin-right: 10px !important;
    }

    .small-when-shrunk-sm2 {
        font-size: 0.8em !important;
    }
}

@media screen and (max-width: 410px) {
    /** iPhone X screen size */
    .hide-when-shrunk-sm3 {
        display: none !important;
    }

    .show-when-shrunk-sm3 {
        display: unset !important;
    }

    .small-when-shrunk-sm3 {
        font-size: 0.8em !important;
    }

    #map .vis-up,
    #map .vis-down,
    #map .vis-left,
    #map .vis-right {
        display: none !important;
    }

    .main_card_header h4 {
        font-size: 1.15rem; /* instead of 1.35 in ordinary size */
    }
}

@media screen and (max-width: 380px) { /** iPhone 6 **/
    .hide-when-shrunk-xs {
        display: none !important;
    }

    .show-when-shrunk-xs {
        display: unset !important;
    }

    .smaller-when-shrunk-xs {
        font-size: 80% !important;
    }
    .biolink_source .the_first_td {
        width: 66px;
    }

    .navbar-brand {
        font-size: 1em !important;
    }
}

@media (max-width: 2000px) {
    .container {
         max-width: 1140px !important;
    }
}

.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.repair_material_icons_block {
    padding-top: 2px;
}

.badge-validity_score>.badge {
    padding: 0;
}

.badge-validity_score .badge .badge {
    padding-bottom: 0.4em;
}


/** MDI fix **/

.alert.mdi::before,
.breadcrumb .mdi::before,
.btn.mdi::before,
.card-title.mdi::before,
.card-subtitle.mdi::before,
.card-link.mdi::before,
.dropdown-item.mdi::before,
.list-group-item.mdi::before,
.nav-link.mdi::before {
    font-size: 1.25em;
    line-height: initial;
    position: relative;
    top: 0.09rem;
}
.alert.mdi::before,
.breadcrumb .mdi:not(:empty)::before,
.btn.mdi:not(:empty)::before,
.card-title.mdi:not(:empty)::before,
.card-subtitle.mdi:not(:empty)::before,
.card-link.mdi:not(:empty)::before,
.dropdown-item.mdi:not(:empty)::before,
.nav-link.mdi:not(:empty)::before {
    margin-right: 0.25rem;
}
.list-group-item.mdi:not(:empty)::before {
    margin-right: 0.5rem;
}
.dropdown-item.mdi:not(:empty)::before {
    margin-left: -0.75rem;
}
.alert.mdi::before,
.list-group-item.mdi:not(:empty)::before {
    margin-left: -0.5rem;
}
.modal-title.mdi::before {
    font-size: 1.5em;
    line-height: 0.5;
    position: relative;
    top: 0.26rem;
    margin-right: 0.5rem;
}

.mdi{ /** my own preference (alex) */ padding-right: 1px;}

.btn-outline-gray {
    color: #afafaf;
    border-color: #afafaf;
}
.btn-outline-gray:hover {
    color: #111;
    background-color: #efefef;
    border-color: #afafaf;
}
.btn-outline-gray:focus, .btn-outline-gray.focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.btn-outline-gray.disabled, .btn-outline-gray:disabled {
    color: #343a40;
    background-color: transparent;
}

.fas {
    line-height: 0.8em !important; /* correction to be equal to mdi */
}

/* 5700c0 */


.tooltip {
    margin-left: 6px;
    z-index: 99999;
    pointer-events: none; /** pointer-events: none; Prevents flickering. https://github.com/mui-org/material-ui/issues/10735 */
}
.tooltip-inner {
    font-size: 0.7rem;
    max-width: 300px;
    color: #fff;
    text-align: left !important;
    white-space: pre-line;
    background-color: #181a1d;
    border-radius: 0.25rem;
}

.font-weight-100 {font-weight: 100 !important;}
.font-weight-200 {font-weight: 200 !important;}
.font-weight-300 {font-weight: 300 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-500 {font-weight: 500 !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-700 {font-weight: 700 !important;}
.font-weight-800 {font-weight: 800 !important;}
.font-weight-900 {font-weight: 900 !important;}

.mdi>span, .hidden_selectable_text {
    /*font-size:0;*/
    line-height:0; /** hide text inside for copy */
    overflow: hidden;
    display: inline-block;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    color: gray;
}


.text-dark, .text-dark *, .text-dark a, .text-dark a:hover, .text-dark a:active, .text-dark a:link, .text-dark a:visited
{color: #343a40 !important;}



.help {cursor: help;}
.pointer {cursor: pointer;}