.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

/*#region Buttons*/
input[type="submit"] {
    border-radius: 10px;
    border: 2px solid #4CAF50;
    background-color: green;
    color: white;
    cursor: pointer;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    outline: none;
    font-family: "Arial Black", Gadget, sans-serif;
    white-space: normal;
    vertical-align: middle;
    transition: 0.8s background-color;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    font-weight: bold;
}


    input[type="submit"]:hover, #divControls input[type="submit"]:hover {
        background-color: blue;
        color: white;
    }

    input[type="submit"]:active, #divControls input[type="submit"]:active {
        background-color: darkblue;
        transform: translateY(4px);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 5px 0 rgba(0,0,0,0.19);
    }

    input[type="submit"]:disabled, #divControls input[type="submit"]:disabled {
        background-color: silver !important;
        border: 2px solid #caadce !important;
    }

/*#endregion*/

/*#region SearchTableManager*/
.searchTable {
    /*noselect*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

    .searchTable tr:hover {
        cursor: pointer;
        background-color: #6dff8b;
    }

    .searchTable tr.selected {
        background-color: #4cd8ff !important;
    }

        .searchTable tr.selected:hover {
            background-color: #29a4ff !important;
        }
/*#endregion*/

.link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    /*Prevent highlighting*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}


.prettyCmb {
    color: Maroon;
    background-color: #FFCC66;
    font-weight: bold;
    font-style: normal;
    height: 40px;
}



.grid tr, .grid th, .grid td {
    border: 1px solid black;
    padding: 0px 3px 0px 3px;
    text-align: left;
}

.grid th {
    background-color: gainsboro;
}

.popup .grid {
    margin: 0 auto;
}

.popupContent select {
    height: 32px;
}




/*
    This is necessary to make "contenteditable" work for iPhones; otherwise element.setAttribute("contenteditable", true) will make the element not editable on iPhone
    https://github.com/ionic-team/ionic-framework/issues/18368
*/
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/*Sets fake "placeholder" to "data-placeholder"'s value*/
[contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    color: grey;
    text-align: left;
}



/*#region Menu Item drop downs*/
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    /*Make sub menu slide up/down*/
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease-in, opacity .15s ease-in;
    overflow: hidden;

    position: absolute;
    background-color: #333;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .dropdown-content ul {
        /*Don't show bullet points, which is HTML default*/
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .dropdown-content li {
        padding: 10px;
        transition: background-color .1s ease-in-out;
        width: 100%;
    }

    .dropdown-content a {
        width: 100%;
    }

.submenuItem {
    color: #d9d9d9;
}

.dropdown-content li:hover {
    background-color: #a3a3a3;
}

    .dropdown-content li:hover .submenuItem {
        color: white;
    }

.submenuItem:hover {
    /*Don't do default link behavior, which is make text blue and underlined on hover*/
    text-decoration: inherit;
    color: white;
}

.dropdown:hover .dropdown-content {
    /*Show menu (with transition, defined above)*/
    max-height: 300px;
    opacity: 100%;
}

.dropdown-content2:active:hover {
    opacity: 0;
    max-height: 0;
    transition: none;
}

.dropdown .dropdown-emoji {
    font-size: 1.2em;
    width: 25px;
    display: inline-block;
}


@media (max-width: 499px) {
    /*Adapt to mobile version of menu by always showing submenus and blocking them BETWEEN menu items, not below each one*/
    .dropdown-content {
        max-height: none;
        opacity: 1;
        position: relative;
    }
}
/*#endregion*/





.spaceOrNewlineIfMobile::after {
    content: " ";
}

.emptyOrNewlineIfMobile::after {
    content: "";
}


/*Mobile Only*/
@media screen and (max-width: 600px) {
    .spaceOrNewlineIfMobile::after, .emptyOrNewlineIfMobile::after {
        content: " \00000a "; /*newline*/
        white-space: pre; /* or pre-wrap */
    }
}