:root {
    --color-dark: rgb(82,137,144);
    --color-darker-white: rgba(255, 255, 255, 0.7);
    --color-dark-selected: rgb(65,119,126);
    /*--color-light: #D7E1E3;*/
}

.menu-header {
    font-weight: bold;
    font-size: larger;
}

.application-name {
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 1px 1px darkgreen;
}

.topbar {
    padding: 0;
}

body {
    padding-top: 182px;
}

.cursor-pointer {
    cursor: pointer;
}

.dark-color-front {
    color: var(--color-dark);
}

.dark-color-back {
    background-color: var(--color-dark);
}

.language-icon {
    font-size: 30px;
    vertical-align: middle;
}

/* TopBar */

.navbar .u-hamburger__inner, .navbar .u-hamburger__inner::before, .navbar .u-hamburger__inner::after {
    background-color: var(--color-darker-white);
}

.navbar .u-hamburger:hover .u-hamburger__inner, .navbar .u-hamburger:hover .u-hamburger__inner::before, .navbar .u-hamburger:hover .u-hamburger__inner::after {
    background-color: white;
}

@media (max-width: 1234px) {
    .quickAction {
        display: none;
    }
}

@media (max-width: 1156px) {
    .menu-header {
        font-weight: normal;
        font-size: medium;
    }
}

@media (max-width: 1050px) {
    #div-logo-product {
        display: none;
    }

    body {
        padding-top: 168px;
    }
}

@media (max-width: 990px) {
    body {
        padding-top: 150px;
    }
}

@media (max-width: 840px) {
    .actionIcon {
        display: none;
    }
}

@media (min-width: 770px) {
    .datatablecontainer {
        padding: 1.5rem;
    }
}

@media (max-width: 770px) {
    #mscope-logo {
        display: none;
    }

    body {
        padding-top: 80px;
    }
}

.selectedMenuLink a {
    background:  var(--color-dark-selected);
    border-color: var(--color-dark-selected);
    border-width: 0px;
    border-radius: 12px 12px 0px 0px;
}

.help-icon {
    font-size: 16px;
}

/* End TopBar */

.underline {
    text-decoration: underline;
}

tr.stdOddRow, td.stdOddRow {
    background-color: white;
}

tr.stdEvenRow, td.stdEvenRow {
    background-color: #EEEEEE;
}

/** LINK & BUTTONS DECORATION **/

#pageContent .ui-button #downloadCSV {
    background: url("../../images/iconex/export_x_16x16.png") 7px center no-repeat;
}

.ui-button #saveButton {
    background: url("../../images/iconex/check_16x16.png") 7px center no-repeat;
    padding: 6px 8px 7px 25px;
}

#pageContent #navigation #returnNav a {
    padding-left: 3em;
    background: url("../../images/iconex/undo_16x16.png") 7px center no-repeat;
}

#pageContent a#linkAddButton {
    padding-left: 2.2em;
    background: url("../../images/iconex/add_24x24.png") 7px center no-repeat;
}



#pageContent .yui-button#share button, #pageContent span#share a {
    padding-left: 2.5em;
    background: url("../../images/iconex/earth_16x16.png") 7px center no-repeat;
}

#pageContent a.ui-link-button#a_uploadMedia-button {
    padding-left: 2.2em;
    background: url('../../images/iconex/uploadtool_24x24.png') no-repeat 7px center;
}

#pageContent .yui-button#setCaseVisibility button, #pageContent span#setCaseVisibility a {
    padding-left: 2.5em;
    background: url("../../images/iconex/eye_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#moveCase button, #pageContent span#moveCase a {
    padding-left: 2.5em;
    background: url("../../images/iconex/clipboard_next_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#copyButton button,
#pageContent span#CopyButton a,
#pageContent .yui-button#copyCase button,
#pageContent span#copyCase a,
#pageContent .yui-button#copyMediaButton button,
#pageContent span#copyMediaButton a,
#pageContent .yui-button#copyMedia button,
#pageContent span#copyMedia a{
    padding-left: 2.5em;
    background: url("../../images/iconex/copy_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#downloadMediaCSV button, #pageContent span#downloadMediaCSV a
{
    padding-left: 2.5em;
    background: url("../../images/iconex/export_x_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#downloadVotesCSV button, #pageContent span#downloadVotesCSV a
{
    padding-left: 2.5em;
    background: url("../../images/iconex/hand_thumb_up_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#downloadMediaAnnotationCSV button, #pageContent span#downloadMediaAnnotationCSV a {
    padding-left: 2.5em;
    background: url("../../images/iconex/export_x_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#unarchive button, #pageContent span#unarchive a {
    padding-left: 2.5em;
    background: url('../../images/iconex/clipboard_data_out_16x16.png') 7px center no-repeat;
}

#pageContent .yui-button#archive button, #pageContent span#archive a {
    padding-left: 2.5em;
    background: url('../../images/iconex/clipboard_data_into_16x16.png') 7px center no-repeat;
}

#pageContent .yui-button#delete button, #pageContent span#delete a {
    padding-left: 2.5em;
    background: url("../../images/iconex/delete_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#downloadMediaButton button, #pageContent span#downloadMediaButton a {
    padding-left: 2.5em;
    background: url("../../images/iconex/download_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#approveMedia button, #pageContent span#approveMedia a{
    padding-left: 2.5em;
    background: url("../../images/iconex/checks_16x16.png") 7px center no-repeat;
}




.button-icon-delete {
    padding-left: 2.5em;
    background-image:url("../../images/iconex/delete_16x16.png");
    background-repeat:no-repeat;
    background-position: 7px;
}

.button-icon-delete[href]:hover,
.button-icon-delete[href]:focus,
.button-icon-delete[href]:active,
.button-icon-delete[href].active,
.button-icon-delete[type]:hover,
.button-icon-delete[type]:focus,
.button-icon-delete[type]:active,
.button-icon-delete[type].active {
    background-image:url("../../images/iconex/delete_16x16.png");
    background-repeat:no-repeat;
    background-position: 7px;
}


#pageContent .yui-button#saveNextButton button {
    padding-left: 2em;
    background: url("../../images/iconex/check_next_16x16.png") 7px center no-repeat;
}

#pageContent .yui-button#generateWebOptimized button, #pageContent span#generateWebOptimized a{
    padding-left: 2.5em;
    background: url("../../images/iconex/flash_x_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#generateThumbnail button, #pageContent span#generateThumbnail a{
    padding-left: 2.5em;
    background: url("../../images/iconex/landscape_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#Download button, #pageContent span#Download a{
    padding-left: 2.5em;
    background: url("../../images/iconex/download_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#openMediaTool button, #pageContent span#openMediaTool a,
#pageContent .yui-button#LaunchTools button, #pageContent span#LaunchTools a{
    padding-left: 2.5em;
    background: url("../../images/iconex/window_gear_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#openMediaViewer button, #pageContent span#openMediaViewer a,
#pageContent .yui-button#LaunchViewer button, #pageContent span#LaunchViewer a{
    padding-left: 2.5em;
    background: url("../../images/iconex/photo_landscape2_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#folderButton button, #pageContent span#folderButton a,
#pageContent .yui-button#classifyMediaToCase button, #pageContent span#classifyMediaToCase a{
    padding-left: 2.5em;
    background: url("../../images/iconex/add_16x16.png") 5% 50% no-repeat;
}

#pageContent .yui-button#searchMediaButton button, #pageContent span#searchMediaButton a,
#pageContent .yui-button#searchButtonControl button, #pageContent span#searchButtonControl a {
    padding-left: 2.5em;
    background: url("../../images/iconex/magnifying_glass_16x16.png") 5% 50% no-repeat;
}

a.update {
    background-image:url("../../images/iconex/pencil_16x16.png");
    background-repeat:no-repeat;
    background-position: 2px;
    padding-left: 20px;
    margin-right: 5px;
}

a.delete {
    background-image:url("../../images/iconex/delete_16x16.png");
    background-repeat:no-repeat;
    background-position: 2px;
    padding-left: 20px;
    margin-right: 5px;
}

/* MediaList */

div#libraryModuleContainer div.moduleTitle {
    padding: 1em;
    margin-bottom: 1em;
    min-height: 2.5em;
    background: #fff url('../../images/iconex/books_blue_64x64.png') 10px 10px no-repeat;
    margin-top: 0;
}

div#projectModuleContainer div.moduleTitle {
    padding: 1em;
    margin-bottom: 1em;
    min-height: 2.5em;
    background: #fff url('../../images/iconex/folder2_blue_64x64.png') 10px 10px no-repeat;
    margin-top: 0;
}

div#courseMaterialsModuleContainer div.moduleTitle {
    padding: 1em;
    margin-bottom: 1em;
    min-height: 2.5em;
    background: #fff url('../../images/iconex/blackboard_64x64.png') 10px 10px no-repeat;
}

div#atlasModuleContainer div.moduleTitle {
    padding: 1em;
    margin-bottom: 1em;
    min-height: 2.5em;
    background: #fff url('../../images/iconex/dictionary_64x64.png') 10px 10px no-repeat;
}

div#quizModuleContainer div.moduleTitle {
    padding: 1em;
    margin-bottom: 1em;
    min-height: 2.5em;
    background: #fff url('../../images/iconex/graduation_hat_64x64.png') 10px 10px no-repeat;
}

div.moduleTitle h1 {
    padding: 0 0 0 70px;
    margin: 0 1em 0 0;
    background: transparent none;
    border: none;
    font-size: 20pt;
    color: #000;
}

div.moduleTitle h2 {
    font-size: 14pt;
    color: #606060;
    margin: 0;
    padding: 0 0 0 70px;
    border: none;
    background: none;
    line-height: 1.25em;
}


div.moduleTitle a {
    color: var(--color-dark);
    text-decoration: underline;
}

.dashboard-title h1 {
    font-size: 22pt;
    margin-bottom: .25em;
}

.dashboard-title h2 {
    font-size: 18pt;
    color: #505050;
    margin-bottom: .25em;
}

.dashboard-links .widget {
    padding: 10px;
}

/*
    The first-child tag is required since the list of quick links widgets contains the widgets as well as the title.
    And all of these have the h2 tag.
    The following defines the style for the title of the list.
 */
.dashboard-links .widget h2:first-child {
    font-size: 19pt;
    border-bottom: 1px solid black;
    margin-bottom: 19px;
}

.small-round-border {
    border: 3px;
    border-style: solid;
    border-color: var(--color-dark);
    border-radius: 13px;
}

div #MyProjectsWidget h2 {
    padding-left: 30px;
    background: transparent url('../../images/iconex/cabinet_open_24x24.png') 0 -1px no-repeat;
}

div #MyPersonalFoldersWidget h2 {
    padding-left: 30px;
    background: transparent url('../../images/iconex/folder_star_yellow_24x24.png') 0 -1px no-repeat;
}

div #MyViewerStatesWidget h2 {
    padding-left: 30px;
    background: transparent url('../../images/iconex/monitor_brush_24x24.png') 0 -1px no-repeat;
}

div #MyConferencesWidget h2 {
    padding-left: 30px;
    background: transparent url('../../images/iconex/date_time_doctors_24x24.png') 0 -1px no-repeat;
}

.lang-Modal-Class {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.languages-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #162d50;
}

.language-entry {
    font-size: 16px;
    padding-top: 25px;
}

.lang-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 18px 30px 18px 40px;
    border: 10px solid #162d50;
    border-radius: 15px;
    width: 400px;
    height: 264px;
}

/* The Close Button */
.close-lang-modal {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-lang-modal:hover,
.close-lang-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* TODO 11068 Convert YUI icon syntax to bootstrap icon syntax

  YUI syntax:

     a.delete {
        background: url('../../images/iconex/delete_16x16.png') no-repeat 2px 1px;
        background-color: inherit;
    }

    Bootstrap syntax:

    a.delete {
        background-image:url("../../images/iconex/delete_16x16.png");
        background-repeat:no-repeat;
        background-position: 2px;
        padding-left: 20px;
        margin-right: 5px;
    }

 */

.userDisabledStyle {
    text-decoration: line-through;
    color: rgb(175 175 175);
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    border:3px solid black;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color:white;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}