/* Dems Style sheet */

* {
    box-sizing: border-box;
}

.page {
    background: White;
    width: 900px;
    margin: 0 auto;
}


body {
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-weight: 500;
}

.clinax {
    /* green and bold */
    color: #00CC00;
    font-weight: bold;
}


/* General defs */
#central {
    border: 1px solid;
    border-color: #dbd9ca;
    border-radius: 10px;
    -moz-border-radius: 10px;
}

#central2 {
    border: 1px solid;
    border-color: #dbd9ca;
    border-radius: 10px;
    -moz-border-radius: 10px;
}


#topBar, #central, #central2, #footer {
    padding: 2%;
    width: 94%;
}

/* within topBar  */
#logo {
    height: 50px;
}

#login {
    text-align: right;
}



/* ------------ Descriptive blurb ------------------------ */
.Description {
    background-image: url(../Assets/senior-using-cell-phone.jpg);
    background-size:contain ;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: 100%;
}

.DescTextDiv {
    float: left;
    font-size: xx-large;
    font-weight: bold;
    color: black;
    text-align: left;
    opacity: 0.9;
    padding: 10px;
    padding-top: 1px;
    margin: 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: 45%;
}


/* ----------------- End of Description   ----------------- */

.tablestyle {
    font-family: arial;
    font-size: small;
    border: solid 1px #7f7f7f;
}

.altrowstyle {
    background-color: moccasin;
}

.headerstyle th {
    background: url(img/sprite.png) repeat-x 0px 0px;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    color: #000;
    padding: 4px 5px 4px 10px;
    text-align: center;
    vertical-align: bottom;
}

    .headerstyle th a {
        font-weight: normal;
        text-decoration: none;
        text-align: center;
        color: #000;
        display: block;
        padding-right: 10px;
    }

.rowstyle .sortaltrow, .altrowstyle .sortaltrow {
    /*background-color:   #edf5ff;*/
}

.rowstyle .sortrow, .altrowstyle .sortrow {
    /*background-color: #dbeaff;*/
}

.rowstyle td, .altrowstyle td {
    padding: 4px 10px 4px 10px;
    /*border-right: solid 1px #cbcbcb;*/
}

.headerstyle .sortascheader {
    background: url(img/sprite.png) repeat-x 0px -100px;
}

    .headerstyle .sortascheader a {
        background: url(img/dt-arrow-up.png) no-repeat right 50%;
    }

.headerstyle .sortdescheader {
    background: url(img/sprite.png) repeat-x 0px -100px;
}

    .headerstyle .sortdescheader a {
        background: url(img/dt-arrow-dn.png) no-repeat right 50%;
    }




/* multi column mid section with photo background  */

.central2 {
    opacity: 0.9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

#ICSM {
    opacity: 0.9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

#P2 {
    opacity: 0.9;
    background-image: url(../Assets/senior-using-cell-phone.jpg);
    background-size: contain;
    background-repeat: repeat;
    background-position: right top;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

#P3 {
    opacity: 0.9;
    background-image: url(../Assets/headset.jpg);
    background-size: contain;
    background-repeat: repeat;
    background-position: right top;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

#P4 {
    opacity: 0.9;
    background-image: url(../Assets/ocean.jpg);
    background-size: contain;
    background-repeat: repeat;
    background-position: right top;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

#P5 {
    opacity: 0.9;
    background-size: contain;
    background-repeat: repeat;
    background-position: right top;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

#P6 {
    opacity: 0.9;
    background-image: url(../Assets/ocean.jpg);
    background-size: contain;
    background-repeat: repeat;
    background-position: right top;
    border-radius: 10px;
    -moz-border-radius: 10px;
    width: inherit;
}

/* the columns */
.col1 {
    float: left;
    text-align: left;
    padding: 20px;
    padding-top: 1px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    background-color: whitesmoke;
    opacity: 0.9;
    height: auto;
    width: 94%;
    font-family: Verdana;
    font-size: 9pt;
    font-weight: normal;
    line-height: 16px;
    color: black;
    text-align: justify;
}

.col2 {
    float: left;
    text-align: left;
    padding: 20px;
    padding-top: 1px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    background-color: whitesmoke;
    opacity: 0.9;
    height: auto;
    width: 94%;
    font-family: Verdana;
    font-size: 10pt;
    font-weight: normal;
    line-height: 18px;
    color: black;
    text-align: justify;
}

.refs {
    float: left;
    text-align: left;
    padding: 20px;
    padding-top: 1px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    background-color: whitesmoke;
    opacity: 0.9;
    height: auto;
    width: 94%;
    font-family: Verdana;
    font-size: 9pt;
    font-weight: normal;
    line-height: 14px;
    color: black;
    text-align: justify;
}

.Content {
    color: black;
    padding: 10px;
    padding-left: 40px;
    padding-right: 20px;
    padding-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    width: 96%;
}



/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: blue;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.8em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* ----------- Buttons ------------------  */

.button {
    display: inline-block;
    border-radius: 8px;
    background-color: moccasin;
    border: 1px;
    color: blue;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

    .button:hover {
        font-weight: bold;
    }

.topbutton {
    display: inline-block;
    background-color: White;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

    .topbutton:hover {
        font-weight: bold;
    }


/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}

.box {
    background-color: ivory;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid;
    border-color: #dbd9ca;
    border-radius: 10px;
    -moz-border-radius: 10px;
    vertical-align: text-top;
    width: 94%;
}

/* Assessment Page */

.AxPage {
    background: White;
    margin: auto;
    padding: 10px;
    width: 100%;
}

.RBL {
    font-family: verdana;
    font-size: 16px;
    margin-left: 25px;
    border-style: dotted;
    color: darkblue;
}

    .RBL input[type="radio"]:checked + label {
        background-color: gold;
        color: blue;
        font-weight: bold;
    }

.LBL {
    font-family: verdana;
    font-size: 16px;
    width: 99%;
}

.chat-container {
    border: 2px solid #dedede;
    background-color: white;
    border-radius: 10px;
    padding: 4%;
    margin: 4% auto;
    width: 90%
}

    .chat-container p {
        background-color: white;
        font-family: Helvetica;
    }

/* Darker chat container */
.darker {
    border-color: #ccc;
    background-color: #c0ffee;
}

    .darker p {
        background-color: #c0ffee;
    }

/* Result chat container */
.res1 {
    border: 2px solid #dedede;
    border-color: #ccc;
    background-color: wheat;
    border-radius: 10px;
    padding: 4%;
    margin: 4% auto;
    width: 90%;
    font-family: verdana;
    text-align: justify;
    font-size: 14px;
}

    .res1 p {
        background-color: wheat;
        color: blue;
    }

/* Clear floats */
.chat-container::after {
    content: "";
    clear: both;
    display: table;
}

/* Style images */
.chat-container img {
    float: left;
    max-width: 60px;
    max-height: 60px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
}

    /* Style the right image */
    .chat-container img.right {
        float: right;
        margin-left: 4%;
        margin-right: 0;
    }

/* Style time text */
.time-right {
    float: right;
    color: #aaa;
}

/* Style time text */
.time-left {
    float: left;
    color: #999;
}

/* label */
.lb {
    background-color: cornsilk;
    position: center;
}

/* div  */
.d1 {
    position: center;
}

/*  Sign In */