/* Orima_Wordmark logo dimensions: w=400, h=103*/


/* mobile layout*/
@media (max-width: 419px) {
    div.logo-bar {
        height: 110px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 200px;
        height: 100px;
        background-image: url('/MACS/common/images/macsLogoMob2.png');  /* dimensions of logo = 200 x 142   */
    }

    div.logo-bar #right-logo {
        display: none;
    }

    #page-top div.title-bar { /* to improve presentation of logo bar at small screen */
        width: 98%;
    }
}

/* wider screen mobile layout*/
@media (min-width: 420px) {
    div.logo-bar {
        height: 110px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 200px;
        height: 100px;
        background-image: url('/MACS/common/images/macsLogoMob2.png');  /* dimensions of logo = 200 x 142   */
    }

    div.logo-bar #right-logo {
        display: none;
    }
}

/* smallscreen layout*/
@media (min-width: 600px) {
    div.logo-bar {
        height: 160px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 10px;
        width: 300px;
        height: 150px;
        background-image: url('/MACS/common/images/macsLogoMob2.png');  /* dimensions of logo = 200 x 142   */
        display: none;

    }

    div.logo-bar #right-logo {
        top: 60px;
        right: 0;
        width: 200px;
        height: 52px;
        background-image: url('/_resources/images/Orima_Logo.png'); /*  dimensions of logo = 400 x 103  */
        display: none;
    }
}

/* desktop layout  */
@media (min-width: 800px) {
    div.logo-bar  {
        height: 262px;
        top: 0;
        left: 0;
        background-image: url('/MACS/common/images/macssis_banner2025.png');
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 50px auto 0 auto !important;
    }

    /*div.logo-bar #left-logo {*/
    /*    top: 10px;*/
    /*    left: 10px;*/
    /*    width: 400px;*/
    /*    height: 200px;*/
    /*    background-image: url('../images/client-logo.png'); !* dimensions of logo = 400 x 200   *!*/
    /*}*/

    /*div.logo-bar #right-logo {*/
    /*    top: 80px;*/
    /*    right: 10px;*/
    /*    width: 250px;*/
    /*    height: 64px;*/
    /*    background-image: url('/_resources/images/Orima_Logo.png'); !*  dimensions of logo = 400 x 103  *!*/
    /*}*/
}

div.cem-hover {
    padding: 24px 6px;
    width: 125px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
    text-decoration: none;
}

div.cem-hover:hover {
    border: 1px solid #EEF9DB;
    background-color: #EEF9DB;
}

div.cem-hover:hover svg {
    fill: #999;
}

a.cem-hover {
    color: #000;
    text-decoration: none;
}

a.cem-hover:hover {
    color: #000;
    text-decoration: none;
}

a.cem-hover:focus {
    color: #000;
    text-decoration: none;
}


.btn-cem {
    width: 150px;
    border: 2px solid #666;
    background-color: #F9D71C;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: 6px;
}

.btn-cem:hover {
    background-color: #a89215;
}

a.href-cem {
    color: #000;
}

a.href-cem:hover {
    text-decoration: none;
}


div.cem-menu {
    padding: 12px;
    cursor: pointer;
    height: 100px;
}

div.cem-menu div.container {
    display: table;
    height: 100%;
    width: 100%;
}

div.cem-menu div.text {
    display: table-cell;
    font-size: 110%;
    vertical-align: middle;
    text-align: center;
}

div.cm-1 {
    margin:0 3px 0 0;
}
div.cm-2 {
    margin:0;
}
div.cm-3 {
    margin:0 0 0 3px;
}


div.cm-blue {
    background-color:#2596CA;
    color:#fff;
    text-decoration:underline;
}

div.cm-green {
    background-color:#78B822;
    color:#fff;
    text-decoration:underline;
}

div.cm-grey {
    background-color: #666;
    color:#fff;
    text-decoration:underline;
}

div.cm-white {
    background-color: #fff;
    border: 1px solid black;
    color:#000;
}


div.cm-blue:hover {
    background-color:#1F729A;
}

div.cm-green:hover {
    background-color:#53851B;
}

div.cm-grey:hover {
    background-color:#333;
}

h1.cem-title {
    background-color:#2596CA;
    text-align: center;
    width:100%;
    padding:12px !important;
    color:#fff;
    font-size:24px;
    margin-bottom:16px;
}

h2.cem-title {
    font-size:19px;
    color:#000;
    font-weight:bold;
    margin-top:16px;
}


h1.cem-title-green {
    background-color:#78B822;
    text-align: center;
    width:100%;
    padding:12px !important;
    color:#fff;
    font-size:24px;
    margin-bottom:16px;
}


h1.cem-title-grey {
    background-color:#666;
    text-align: center;
    width:100%;
    padding:12px !important;
    color:#fff;
    font-size:24px;
    margin-bottom:16px;
}


.cem-green {
    color:#78b800;
}

.cem-blue {
    color:#2596CA;
}

.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

div.userguide {
    border:1px solid black;
    padding: 6px;
    height:100%;
    background-color: #E69138;
    text-align:center;
}
div.userguide:hover {
    background-color: #A56525;
}

div.userguide div.txt {
    display:table-cell;
    color:#fff;
    font-weight:normal;
    vertical-align:middle;
    text-align:center;
    font-size:130%;
    line-height:1.5em;
}
div.userguide div.txt:hover {
    text-decoration:none;
}

div.userguide2 {
    background-color:#fff;
    border:1px solid black;
    padding:12px 6px;
    color:#000;
    font-weight:bold;
    text-align:center;
    height:100%;
}
div.userguide2:hover {
    background-color: #eeeeee;
}
div.userguide2 div.txt:hover {
    text-decoration:none;
}


div.input-group-addon {
    color: #cccccc;
}

div.input-group-addon  div.svg {
    width: 26px;
    height: 26px;
    margin: -4px;
    fill: #666;
}


table.cemRR {
    border-collapse: collapse;
    font-size: 13px;
}
table.cemRR th {
    background-color: #2596CA;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 6px;
    border-bottom: 1px solid #999;
    width: 150px;
}

table.cemRR td {
    background-color: #fff;
    border-bottom: 1px solid #999;
    text-align: center;
    padding: 6px;
}

ul {
    list-style: none;
}

ul li:before {
    content: '✓ ';
}