@font-face {
  font-family: 'FreeSansWeb Normal';
  src: url('../fonts/FreeSansWeb-Normal.eot');
  src: url('../fonts/FreeSansWeb-Normal.eot?#iefix') format('embedded-opentype'), url('../fonts/FreeSansWeb-Normal.woff2') format('woff2'), url('../fonts/FreeSansWeb-Normal.woff') format('woff'), url('../fonts/FreeSansWeb-Normal.ttf') format('truetype'), url('../fonts/FreeSansWeb-Normal.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
    font-family: 'FreeSansWeb Normal';
    font-weight: normal;
}

div {
    display: block;
}

::-webkit-input-placeholder {
    text-align: center;
}

:-moz-placeholder {
    text-align: center;
}

::-moz-placeholder {
  text-align: center;  
}

:-ms-input-placeholder {
    text-align: center;
}

.error {
    background-color: red;
}

.rtl {
    direction: rtl;
}

.ltr {
    direction:ltr;
}

.center {
    text-align: center;
}

.container {
    margin: 1em;
    overflow: hidden;
}

.hidden-section {
    display: none;
}

fieldset {
/*       -webkit-box-shadow: 10px 10px 5px -4px rgba(227, 227, 227, 1);
       -moz-box-shadow: 10px 10px 5px -4px rgba(227, 227, 227, 1);
       box-shadow: 10px 10px 5px -4px rgba(227, 227, 227, 1);    */
}

.green-button {
    background: rgb(34, 182, 42);
    width: 200px;
    height: 3em;
    padding: .2em;
    border: 1px solid rgb(34, 182, 42);
    border-radius: 5px 5px 5px 5px;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.purple-button {
    background: rgb(134, 42, 112);
    width: 200px;
    height: 3em;
    padding: .2em;
    border: 1px solid rgb(134, 42, 42);
    border-radius: 5px 5px 5px 5px;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.orange-button {
    background: rgb(229, 154, 46);
    width: 200px;
    height: 3em;
    padding: .2em;
    border: 1px solid rgb(229, 154, 46);
    border-radius: 5px 5px 5px 5px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    margin-top: .5em;
}

.blue-button {
    background: rgb(0, 116, 232);
    width: 200px;
    height: 3em;
    padding: .2em;
    border: 1px solid rgb(0, 116, 232);
    border-radius: 5px 5px 5px 5px;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.clickable{
    cursor: pointer;
}

input[type="radio"] {
    vertical-align: middle;
    margin-left: .1em;
}

label {
    vertical-align: middle;
}


/*** Desktop style ***/
@media only screen and (min-width: 769px) {
    html {
       background: rgba(246, 246, 246, 1);
    }

    body {

    }

    fieldset {
        margin-top: 1em;
        border-radius: 5px 5px 0 0;
    }

    legend {
        color: purple;
        margin-left: 1em;
        margin-right: 1em;
        padding-left: .5em;
        padding-right: .5em;
    }

    
    .page-header{
        font-weight: bold;
        margin-bottom: 2em;
    }
    
    .paragraph-title {
        font-weight: bold;
        margin-bottom: 1em;
    }

    .paragraph-content {
        font-weight: normal;
        margin-bottom: 1em;
    }
    
    .paragraph-content {
        font-weight: normal;
        margin-bottom: 1em;
        text-align: justify;
    }
    
    .continuse {
        font-weight: normal;
        display: inline;
        text-align: justify;
    }
    
    .emphasis {
        text-decoration: underline;
    }
    
    .bold {
        font-weight: bold;
        font-size: 1.1em;
    }
    
    .mb-1 {
        margin-bottom: 1em;
    }
    
    .justify{
        text-align: justify;
    }
    
    /**** errors *****/
    .message-container {
        width: 90%;
        margin: 1em auto;
        padding: 1em;
        background-color: transparent;
        text-align: center;
    }

    .error-message {
        color: red;
        margin-bottom: 1em;
        text-align: center;
    }

    .success-message {
        color: green;
        font-size: 2em;
        font-weight: bold;
    }

    
    /**** header ****/
    .ribbon {
        background: rgba(247, 247, 247, 1);
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        padding: .2em;
        position: relative;
        width: 80%;
        margin: 0 auto;
/*        -webkit-box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);*/
    }

    .ribbon::after {
        content: "";
        display: block;
        clear: both;
    }

    .ribbon-start {
        width: 33%;
        float: left;
    }

    .ribbon-middle {
        width: 33%;
        padding: 0;
        float: left;
    }

    .ribbon-end {
        width: 33%;
        float: right;
        vertical-align: middle;
    }

    .ribbon-end ul li {
        float: right;
        margin-left: 1em;
        display: block;
    }

    .ribbon-end ul {
        list-style: none;
    }

    .ribbon-end a {
        text-decoration: none;
        color: #fff;
    }

    .logo-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .local-logo {
        margin-left: 1em;
        width: 68px;
        height: 68px;
    }

    .program-logo {
        background: url("../images/program-logo.png") no-repeat center;
        line-height: 68px;
        text-indent: -9999px;
    }

    .int-logo {
        margin-right: .5em;
        width: 114px;
        height: 68px;
    }


    /*** navigation menu ***/
    .navigation-container {

    }

    .navigation-menu {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .navigation-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-align: center;
    }

    .navigation-menu ul li {
        width: 24%;
        height: 3em;
        margin: 0;
        float: right;
        background-color: #660000;
        margin-left: 1%;
        border-radius: 5px;
    }

    .navigation-menu ul li:first-of-type {
        margin-right: .5%;
    }

    .navigation-menu ul li:last-of-type {
        margin-left: 0;
    }

    .navigation-menu ul li a {
        display: block;
        text-decoration: none;
        line-height: 3em;
        text-align: center;
        color: #fff;
        font-size: 1em;
        font-weight: bold;
    }

    .navigation-menu ul li a:hover {
        background-color: #330000;
        border-radius: 6px;
    }


    /**** main container ****/
    .main-container {
        margin: 0 auto;
        padding: 0;
        background: rgba(246, 246, 246, 1);
        overflow: auto;
        padding-bottom: 3em;
    }

    
    /**** home page ****/
    .dialog-box-container {
        margin: 0 auto;
        padding: 2em;
        background-color: #fff;
        width: 80%;
        height: calc(100vh - 81px);
        border-radius: 5px 5px;
        font-size: 1.2em;
    }

    .query-box-container {
        margin: 3em auto;
    }

    #query-label {
        color: #000;
        margin-bottom: 1.5em;
        text-align: center;
    }

    .query-container {
        width: 80%;
        position: relative;
    }

    #query-box {
        margin: 0 auto;
        padding: 0;
        position: relative;
    }

    #drugname {
        margin: 0 auto;
        padding-right: .5em;
        width: 91%;
        height: 48px;
        border: 2px solid #ccc;
        border-radius: 0 5px 5px 0;
        border-left-width: 0px;
        font-size: 1.2em;
        font-weight: bold;
    }

    #search-button {
        margin: 0;
        padding: 1.1em;
        padding-left: 3em;
        width: 48px;
        height: 48px;
        border: 2px solid #ccc;
        margin-right: 0px;
        border-right: 0px;
        border-radius: 5px 0 0 5px;
        position: absolute;
        top: 0px;
        background-color: #fff;
        background: url("../images/search.png") center center no-repeat;
        text-indent: -9999px;
    }

    #query-help {
        margin-top: 0;
        color: green;
        text-align: center;
    }
        
    .advertise {
        display: none;
    }
    
    /*** footer ***/
    .footer {
        width: 80%;
        height: 34px;
        background: -moz-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -o-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -ms-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        padding: .2em; 
        margin-left: 10%;
        position: fixed;
        bottom: 0;
    }
    
    .footer::after {
        content: "";
        display: block;
        clear: both;
    }
    
    .footer-item {
        width: 33%;
        float: left;
        text-align: center;
    }

    .footer p {
        font-size: .8em;
        line-height: 34px;
        color: #000;        
    }
    
    .footer-item a {
        font-size: .8em;
        text-decoration: none;
        line-height: 34px;
        color: #000;
    }
           
    /**** management ****/
    .management-box {
        width: 80%;
        margin: 0 auto;
        padding: 2em;
        background-color: #fff;
        color: #000;
        border-radius: 5px 5px 0 0;
    }

    .full-page{
        height: calc(100vh - 81px);
    }
    
    .management-content {
        padding: .2em;
    }

    .drug-name-container {

    }

    .name-container {
        width:47%;
    }

    .name-container-ltr {
        float: left;
    }

    .name-container-rtl {
        float: right;
    }

    .drug-input {
        width: 90%;
    }

    .drug-brand-name-container {

    }

    .brand-name-container {
        overflow: hidden;
    }

    .add-remove-button-container {
        float: left;
        width: 5%;
        padding-top: 1.2em;
        text-align: center;
    }

    a.add-button {
        width: 100%;
        height: 100%;
        display: block;
    }

    a.del-button {
        width: 100%;
        height: 100%;;
        display: block;
    }

    .first-add-remove-brand{
        margin-bottom: 2em;
    }    
    
    .checkboxes {
        vertical-align: middle;
    }

    .comments-container {
        width: 100%;
        margin: 0px;
    }

    .comment-container {
        margin: 1em;
        padding-right: .2em;
    }

    .comment-bullet-continer {
        float: right;
        width: 6%;
        margin: 0;
        padding-top: .3em;
    }

    .bullet {
        background: url("../images/bullet.png") center center no-repeat;
        text-indent: -9999px;
    }

    .comment-input-container {
        float: right;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .comment-input {
        width: 100%;
    }

    .comment-button-container {
        width: 40px;
        float: right;
        margin: 0;
        padding: 0;
        margin-right: .5em;
        padding-top: .4em;
    }

    .druid-add-comment-button {
        width: 16px;
        height: 16px;
        float: right;
        margin: 0;
        margin-left: 8px;
    }

    .druid-del-comment-button {
        width: 16px;
        height: 16px;
        margin: 0;
        float: right;
    }

    .selection {
        text-align: center;
    }
    
    /* eglish section */
    .selection-en {
        width: 100px;
        padding-left: 0px;
        text-align: center;
    }

    .comment-bullet-continer-en {
        float: left;
        width: 6%;
        margin: 0;
        padding-top: .3em;
    }

    .druid-comment-input-container-en {
        float: left;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .comment-button-container-en {
        width: 40px;
        float: left;
        margin: 0;
        padding: 0;
        margin-left: .5em;
        padding-top: .4em;
    }

    .druid-add-comment-button-en {
        width: 16px;
        height: 16px;
        float: left;
        margin: 0;
        margin-right: 8px;
    }

    .druid-del-comment-button-en {
        width: 16px;
        height: 16px;
        margin: 0;
        float: left;
    }

    .icadts-comment-input-container {
        float: right;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .icadts-add-comment-button {
        width: 16px;
        height: 16px;
        float: right;
        margin: 0;
        margin-left: 8px;
    }

    .icadts-del-comment-button {
        width: 16px;
        height: 16px;
        margin: 0;
        float: right;
    }


    /**** result ****/
    .result-box-container {
        width: 35%;
        margin: 0 auto 3em;
        font-size: .8em;
        background-color: transparent;        
        padding-top: .1em;
    } 
    
    .search-box-container {
        margin: .5em auto 1em;
    }

    .search-result-container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .category-0 {
        background: rgba(236, 250, 229, 1);
        background: -moz-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -o-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -ms-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        border: 2px solid #99cc99;
        color: #009900;
    }

    .category-1 {
        background: rgba(236, 250, 229, 1);
        background: -moz-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(255, 255, 160, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        background: -o-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        background: -ms-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        border: 2px solid #c8c800;
        color: #336666; 
    }

    .category-2 {
        background: rgba(255, 244, 230, 1);
        background: -moz-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -o-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -ms-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        border: 2px solid #b99163;
        color: #660000;
    }

    .category-3 {
        background: rgba(246, 246, 246, 1);
        background: -moz-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -o-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -ms-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        border: 2px solid #cc0000;
        color: #cc0000;
    }
    
    .category-4 {
        background: rgba(255, 255, 255, 1);
        border: 2px solid #cccccc;
        color: #000000;
    }    

    .drug-general-information {
        margin: .5em auto 0;
        padding: 1em;
        border: 2px solid #d4d4d4;
        border-radius: 5px 5px 5px 5px;
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        color: #666666;
        display: block;
        overflow: hidden;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }

    .classification-information {
        margin: .7em auto 0;
        padding: 1em;
        border-radius: 5px 5px 5px 5px;
        display: block;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);   
    }

    .information-for-patients {
        margin: .7em auto 0;
        padding: 1em;
        border-radius: 5px 5px 5px 5px;
        display: block;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1); 
    }

    .information-for-physicians {
        margin: .7em auto 0;
        padding: 1em;
        border: 2px solid #c3d9ff;
        border-radius: 5px 5px 5px 5px;
        background: rgba(240, 250, 255, 1);
        background: -moz-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -o-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -ms-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);        
        background-color: #e0ecff;
        display: block;
        color: #0000cc;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }
    
    .references-information {
        margin: .5em auto 0;
        padding: 1em;
        border: 2px solid #d4d4d4;
        border-radius: 5px 5px 5px 5px;
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        color: #666666;
        display: block;
        overflow: hidden;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }    
    
    .references-information ul{
        margin: 0 1em 0 1em;
    }

    .result-generic-names{
        width: 100%;
        display: block;
        margin-bottom: .3em;
    }

    .result-brand-names {
        width: 100%;
        display: block;
    }

    .result-legends {
        color: #000;
        text-align: center;
    }

    .result-generic-name {
        width: 49%;
        float: left;
    }

    .result-local-generic-name {
        width: 49%;
        float: right;
    }

    .result-labels {
        font-weight: bold;
    }

    .result-brand-name {
        padding-left: .1em;
        float: left;
        width: 49%;
    }

    .result-brand-local-name {
        padding-right: .1em;
        float: right;
        width: 49%;
    }

    .result-header {
        text-align: center;
        font-weight: bold;
    }

    .result-comments {
        margin-top: 1em;
        padding-right: .5em;
        padding-left: .5em;
        margin-bottom: 1em;
    }

    .note {
        font-size: .9em;
        font-style: italic;
    }

    .important-note{
        font-weight: bolder;
        text-decoration: underline;
    }

    .comment{
        margin: .2em 0 .2em 0;
    }


    /*** card ***/
    .alphabet-card-container {

    }

    .alphabet-card-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .drug-card {
        margin: 0;
        padding: .5em;
        border: 2px solid #ccc;
        border-radius: 5px;
        border-bottom: 0px;
        overflow: hidden;
    }

    .drug-card:first-of-type {
        margin-top: .5em;
    }

    .drug-card:last-of-type {
        margin-bottom: .5em;
        border-bottom: 2px solid #ccc;
    }

    .card-section {
        width: 25%;
        float: right;
    }

    .card-section ul {
        list-style: none;
    }

    .druid-circle-category-0 {
        background: url("../images/circle-0.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-0 p {
        color: #009900;
        font-weight: bold;
    }
    
    .druid-circle-category-1 {
        background: url("../images/circle-1.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-1 p {
        color: #000;
        font-weight: bold;
    }

    .druid-circle-category-2 {
        background: url("../images/circle-2.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-2 p {
        color: #660000;
        font-weight: bold;
    }
    
    .druid-circle-category-3 {
        background: url("../images/circle-3.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }

    .druid-circle-category-3 p {
        color: #cc0000;
        font-weight: bold;
    }
    
    .druid-circle-category-4 {
        background: url("../images/circle-4.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }

    .druid-circle-category-4 p {
        color: #000000;
        font-weight: bold;
    }
    
    .druid-circle-category-empty {
        background: url("../images/empty.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-empty p {
        color: #fff;
        text-indent: 9999px;
    }    
     
    .icadts-circle-category-I {
        background: url("../images/circle-0.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 10px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-I p {
        color: #009900;
        font-weight: bold;
    }

    .icadts-circle-category-II {
        background: url("../images/circle-2.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 8px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-II p {
        color: #660000;
        font-weight: bold;
    }
    
    .icadts-circle-category-III {
        background: url("../images/circle-3.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 7px;
        margin-top: .1em;
    }

    .icadts-circle-category-III p {
        color: #cc0000;
        font-weight: bold;
    }
    
    .icadts-circle-category-empty {
        background: url("../images/empty.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-empty p {
        color: #fff;
        text-indent: 9999px;
    }

    .icon-edit {
        background: url(../images/edit.png) top right no-repeat;
        width: 26px;
        height: 26px;
        text-decoration: none;
        text-indent: 9999px;
        display: block;

    }

    .icon-delete {
        background: url(../images/delete.png) top right no-repeat;
        width: 26px;
        height: 26px;
        text-decoration: none;
        text-indent: 9999px;
        display: block;
        margin-top: .1em;
    }
    
    /*** edit ***/
    .highlight {
        color: blue;
    }

    .edit-search-box-container {
        width: 60%;
        margin: 1em auto 1em;
    }


    /*** alphabet ***/
    .alphabet-container {
        width: 100%;
    }

    .alphabet-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .latin-alphabet {
        width: 50%;
        float: left;
    }

    .latin-alphabet::after {
        content: "";
        display: block;
        clear: both;
    }

    .local-alphabet {
        width: 50%;
        float: right;
    }

    .local-alphabet::after {
        content: "";
        display: block;
        clear: both;
    }

    .latin-character-container {
        width: 40px;
        height: 40px;
        text-align: center;
        float: left;
        margin: .2em;
        border: 1px solid #973098;
        border-radius: 5px;
    }

    .local-character-container {
        width: 40px;
        height: 40px;
        text-align: center;
        float: right;
        margin: .2em;
        border: 1px solid #973098;
        border-radius: 5px;
    }

    .local-character-container a, .latin-character-container a {
        display: block;
        text-decoration: none;
        line-height: 39px;
        font-size: 2em;
        font-weight: bold;
        color: #bf3fc1;
    /*    background-color: #dfdfdf;*/
    }


    /*** login ****/
    .login-form-container {
        width: 50%;
        margin: 5em auto;
    }

    .user-data-container {
        width: 80%;
        margin: 1em auto;
    }

    #username-input input{
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }

    .password-data-container {
        width: 80%;
        margin: 1em auto;
    }

    #password-input input {
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }

    #repeat-password-input input {
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }    
    
    .login-button-container {
        width: 80%;
        margin: 1em auto;
        text-align: center;
    }


    /*** profile ***/
    .profile-form-container {
        width: 50%;
        margin: 2em auto 1em;
    }

    /*** refernce ***/  
    .references-container::after{
        content: '';
        display: block;
        clear: both;        
    }
    
    .reference-name-container{
        width: 47%;
        float: left;
    }

    .reference-local-name-container{
        width: 47%;
        float: right;
    }
    
    .reference-input{
        width: 98%;
        float: left;
    }

    .reference-local-input{
        width: 98%;
        float: right;
    }
    
    .add-remove-reference-container {
        float: left;
        width: 6%;
        text-align: center;
        min-height: 4.2em;       
    }

    a.add-reference-button {
        width: 100%;
        height: 100%;
        display: block;
        margin-top: 30%;
    }

    a.del-reference-button {
        width: 100%;
        height: 100%;
        display: block;
    }       
    
    .first-add-remove-reference{
        margin-bottom: 1em;
    }
    
    .about-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;        
    }
    
    .about-container{
        width: 55%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }

    .terms-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;        
    }
    
    .terms-container{
        width: 55%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }    
    
    .button-container{
        margin-top: 3em;
    }

    .survery-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;
    }
    
    .survery-container{
        width: 55%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }  
    
    .survery-button-container{
        margin: 3em auto 0;
    }
    
    
    .qq-container {
        margin-bottom: 1em;
    }
    
    .qq-container::after{
        content: '';
        display: block;
        clear: both;
    }
    
    .qq-label-container {
        float: right;
        margin-left: 1em;
        min-width: 8%;
    }
        
    .qq-label-container-type-2 {
        float: right;
        margin-left: 1em;
        min-width: 50%;
    }
    
    .qq-label {
        vertical-align: middle;
    }
    
    .qq-answer-container {
        float: right;
    }
    
    .qq-answer-container span{
        margin-left: 1em;
    }

    .xdf{
        display: inline-block;
    }
    
    .age-text {
        margin-right: 1em;
    }
    
    .age-selection {
        min-width: 120px;
        text-align: center;
    }
    
    .pad-top-4 {
        padding-top: .4em;
    }
    
    .job-selection {
        min-width: 120px;
        text-align: center;        
    }

    .edu-selection {
        min-width: 120px;
        text-align: center;                
    }
    
    .usage-selection {
        min-width: 150px;
        text-align: center;                
    }
    
    .usage-count-selection {
        min-width: 120px;
        text-align: center; 
    }
    
    .search-count-selection {
        min-width: 120px;
        text-align: center; 
    }
    
    .questions-header {
        text-align: center;
        font-weight: bold;
        font-size: 1.1em;
        margin-top: 1em;
        margin-bottom: 1em;
        padding-top: 1em;
    }
    
    .field-pad-1 {
        padding: 1em;
    }
    
    #usage-data {
        margin-bottom: 2em;
    }
}

/*** tablet style ***/
@media only screen and (min-width: 481px) and (max-width: 768px) {
    html {
       background: rgba(246, 246, 246, 1);
    }

    body {
         background: rgba(246, 246, 246, 1);
    }

    fieldset {
        margin-top: 1em;
        border-radius: 5px 5px 0 0;
    }

    legend {
        color: purple;
        margin-left: 1em;
        margin-right: 1em;
        padding-left: .5em;
        padding-right: .5em;
    }

    .page-header{
        font-weight: bold;
        margin-bottom: 2em;
    }
    
    .paragraph-title {
        font-weight: bold;
        margin-bottom: 1em;
    }

    .paragraph-content {
        font-weight: normal;
        margin-bottom: 1em;
    }
    
    .paragraph-content {
        font-weight: normal;
        margin-bottom: 1em;
        text-align: justify;
    }
    
    .continuse {
        font-weight: normal;
        display: inline;
        text-align: justify;
    }
    
    .emphasis {
        text-decoration: underline;
    }
    
    .bold {
        font-weight: bold;
        font-size: 1.1em;
    }
    
    .mb-1 {
        margin-bottom: 1em;
    }
    
    .justify{
        text-align: justify;
    }
    
        
    /**** errors *****/
    .message-container {
        width: 90%;
        margin: 1em auto;
        padding: 1em;
        background-color: rgba(0, 0, 0, 0);
        text-align: center;
    }

    .error-message {
        color: red;
        margin-bottom: 1em;
        text-align: center;
    }

    .success-message {
        color: green;
        font-size: 2em;
        font-weight: bold;
    }


    /**** header ****/
    .ribbon {
        background: rgba(247, 247, 247, 1);
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        padding: .2em;
        position: relative;
        width: 80%;
        margin: 0 auto;
/*        -webkit-box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);*/
    }

    .ribbon::after {
        content: "";
        display: block;
        clear: both;
    }

    .ribbon-start {
        width: 33%;
        float: left;
    }

    .ribbon-middle {
        width: 33%;
        padding: 0;
        float: left;
    }

    .ribbon-end {
        width: 33%;
        float: right;
        vertical-align: middle;
    }

    .ribbon-end ul li {
        float: right;
        margin-left: 1em;
        display: block;
    }

    .ribbon-end ul {
        list-style: none;
    }

    .ribbon-end a {
        text-decoration: none;
        color: #fff;
    }

    .logo-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .local-logo {
        margin-left: 1em;
        width: 68px;
        height: 68px;
    }

    .program-logo {
        background: url("../images/program-logo.png") no-repeat center;
        line-height: 68px;
        text-indent: -9999px;
    }

    .int-logo {
        margin-right: 1em;
        width: 100px;
        height: 68px;
    }


    /*** navigation menu ***/
    .navigation-container {

    }

    .navigation-menu {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .navigation-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-align: center;
    }

    .navigation-menu ul li {
        width: 24%;
        height: 3em;
        margin: 0;
        float: right;
        background-color: #660000;
        margin-left: 1%;
        border-radius: 5px;
    }

    .navigation-menu ul li:first-of-type {
        margin-right: .5%;
    }

    .navigation-menu ul li:last-of-type {
        margin-left: 0;
    }

    .navigation-menu ul li a {
        display: block;
        text-decoration: none;
        line-height: 3em;
        text-align: center;
        color: #fff;
        font-size: 1em;
        font-weight: bold;
    }

    .navigation-menu ul li a:hover {
        background-color: #330000;
        border-radius: 6px;
    }

    
    /**** main container ****/
    .main-container {
        margin: 0 auto;
        padding: 0;
        background: rgba(247, 247, 247, 1);
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
       
/*        background: rgba(245, 251, 255, 1);
        background: -moz-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);
        background: -o-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);
        background: -ms-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);*/
/*        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);*/
        overflow: auto;
        min-height: 100vh;
    }


    /**** home page ****/
    .dialog-box-container {
        margin: 0 auto;
        padding: 2em;
        background-color: #fff;
        width: 80%;
        border-radius: 5px 5px;
        font-size: 1.2em;
        min-height: 100vh;
    }

    #query-label {
        color: #000;
        margin-bottom: 1.5em;
        text-align: center;
    }

    .query-container {
        margin: 0 auto;
        width: 80%;
        padding: 0;
        position: relative;
    }

    #drugname {
        margin: 0 auto;
        width: 80%;
        padding-right: .5em;
        height: 40px;
        border: 2px solid #ccc;
        border-radius: 0 5px 5px 0;
        border-left-width: 0px;
        font-size: 1em;
        font-weight: bold;
        float: right;
    }

    #search-button {
        margin: 0;
        padding: 1.1em;
        padding-left: 3em;
        width: 40px;
        height: 40px;
        border: 2px solid #ccc;
        margin-right: 0px;
        border-right: 0px;
        border-radius: 5px 0 0 5px;
        position: absolute;
        top: 0px;
        background: url("../images/search_50.png") center center no-repeat;
        background-color: #fff;
        float: right;
        text-indent: 9999px;
    }

    .query-container::after {
        content: "";
        display: block;
        clear: both;
    }
    
    #query-help {
        margin-top: .2em;
        color: green;
        text-align: center;
    }

    .advertise {
        width: 65%;
        height:350px;
        margin-top: 4.5em;
        margin-bottom: 0px;
        float: left;
        background-color: dodgerblue;
        border-radius: 0 500px 0 0;
        padding-top: 1.8em;
        -webkit-box-shadow: 0px -4px 5px 0px #0d0d0d;
        -moz-box-shadow: 0px -8px 5px 0px #000;
        box-shadow: 0px 10px -8px 0px #000;
    }

    .adv-item {
        float: left;
        margin-top: .2em;
        width: 100%;
        display: block;
        padding-left: .5em;
    }
    
    .adv-text {
        color: #fff;
        font-size: 1.5em;
        font-weight: bold;
    }
    
    /*** footer ***/
    .footer {
        width: 85%;
        height: 34px;
        background: -moz-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -o-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -ms-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        padding: .2em; 
        margin-left: 7.5%;
        position: fixed;
        bottom: 0;
    }
    
    .footer::after {
        content: "";
        display: block;
        clear: both;
    }
    
    .footer-item {
        width: 33%;
        float: left;
        text-align: center;
    }

    .footer p {
        font-size: .8em;
        line-height: 34px;
        color: #000;        
    }
    
    .footer-item a {
        font-size: .8em;
        text-decoration: none;
        line-height: 34px;
        color: #000;
    }
       
    /**** management ****/
    .management-box {
        width: 80%;
        margin: 0 auto;
        padding: 2em;
        background-color: #fff;
        color: #000;
        border-radius: 5px 5px 0 0;
    }
    
    .full-page{
        height: calc(100vh - 81px);
    }
    
    .management-content {
        padding: .2em;
    }

    .drug-name-container {

    }

    .name-container {
        width:47%;
    }

    .name-container-ltr {
        float: left;
    }

    .name-container-rtl {
        float: right;
    }

    .drug-input {
        width: 90%;
    }

    .drug-brand-name-container {

    }

    .brand-name-container {
        overflow: hidden;
    }

    .add-remove-button-container {
        float: left;
        width: 5%;
        padding-top: 1.2em;
        text-align: center;
    }

    a.add-button {
        width: 100%;
        height: 100%;
        display: block;
    }

    a.del-button {
        width: 100%;
        height: 100%;;
        display: block;
    }

    .checkboxes {
        vertical-align: middle;
    }

    .comments-container {
        width: 100%;
        margin: 0px;
    }

    .comment-container {
        margin: 1em;
        padding-right: .2em;
    }

    .comment-bullet-continer {
        float: right;
        width: 6%;
        margin: 0;
        padding-top: .3em;
    }

    .bullet {
        background: url("../images/bullet.png") center center no-repeat;
        text-indent: -9999px;
    }

    .comment-input-container {
        float: right;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .comment-input {
        width: 100%;
    }

    .comment-button-container {
        width: 40px;
        float: right;
        margin: 0;
        padding: 0;
        margin-right: .5em;
        padding-top: .4em;
    }

    .druid-add-comment-button {
        width: 16px;
        height: 16px;
        float: right;
        margin: 0;
        margin-left: 8px;
    }

    .druid-del-comment-button {
        width: 16px;
        height: 16px;
        margin: 0;
        float: right;
    }

    .selection {
        text-align: center;
    }

    /* eglish section */
    .selection-en {
        width: 100px;
        padding-left: 0px;
        text-align: center;
    }

    .comment-bullet-continer-en {
        float: left;
        width: 6%;
        margin: 0;
        padding-top: .3em;
    }

    .druid-comment-input-container-en {
        float: left;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .comment-button-container-en {
        width: 40px;
        float: left;
        margin: 0;
        padding: 0;
        margin-left: .5em;
        padding-top: .4em;
    }

    .druid-add-comment-button-en {
        width: 16px;
        height: 16px;
        float: left;
        margin: 0;
        margin-right: 8px;
    }

    .druid-del-comment-button-en {
        width: 16px;
        height: 16px;
        margin: 0;
        float: left;
    }

    .icadts-comment-input-container {
        float: right;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .icadts-add-comment-button {
        width: 16px;
        height: 16px;
        float: right;
        margin: 0;
        margin-left: 8px;
    }

    .icadts-del-comment-button {
        width: 16px;
        height: 16px;
        margin: 0;
        float: right;
    }


    /**** result ****/
    .result-box-container {
        width: 75%;
        margin: 0 auto 3em;
        font-size: 1em;
        background-color: transparent;        
        padding-top: .1em;
    } 
    
    .search-box-container {
        margin: .5em auto 1em;
    }
  
    .search-result-container {
        margin: 0;
        padding: 0;
        width: 100%;
        padding-bottom: 3em;
    }

    .category-0 {
        background: rgba(236, 250, 229, 1);
        background: -moz-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -o-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -ms-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        border: 2px solid #99cc99;
        color: #009900;
    }

    .category-1 {
        background: rgba(236, 250, 229, 1);
        background: -moz-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(255, 255, 160, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        background: -o-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        background: -ms-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        border: 2px solid #c8c800;
        color: #336666; 
    }

    .category-2 {
        background: rgba(255, 244, 230, 1);
        background: -moz-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -o-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -ms-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        border: 2px solid #b99163;
        color: #660000;
    }

    .category-3 {
        background: rgba(246, 246, 246, 1);
        background: -moz-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -o-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -ms-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        border: 2px solid #cc0000;
        color: #cc0000;
    }
    
    .category-4 {
        background: rgba(255, 255, 255, 1);
        border: 2px solid #cccccc;
        color: #000000;
    }      

    .drug-general-information {
        margin: .5em auto 0;
        padding: 1em;
        border: 2px solid #d4d4d4;
        border-radius: 5px 5px 5px 5px;
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        color: #666666;
        display: block;
        overflow: hidden;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }

    .classification-information {
        margin: .7em auto 0;
        padding: 1em;
        border-radius: 5px 5px 5px 5px;
        display: block;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);   
    }

    .information-for-patients {
        margin: .7em auto 0;
        padding: 1em;
        border-radius: 5px 5px 5px 5px;
        display: block;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1); 
    }

    .information-for-physicians {
        margin: .7em auto 0;
        padding: 1em;
        border: 2px solid #c3d9ff;
        border-radius: 5px 5px 5px 5px;
        background: rgba(240, 250, 255, 1);
        background: -moz-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -o-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -ms-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);        
        background-color: #e0ecff;
        display: block;
        color: #0000cc;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }
    
    .references-information {
        margin: .5em auto 0;
        padding: 1em;
        border: 2px solid #d4d4d4;
        border-radius: 5px 5px 5px 5px;
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        color: #666666;
        display: block;
        overflow: hidden;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);        
    }     
    
    .references-information ul{
        margin: 0 1em 0 1em;
    }    

    .result-generic-names{
        width: 100%;
        display: block;
        margin-bottom: .3em;
    }

    .result-brand-names {
        width: 100%;
        display: block;
    }

    .result-legends {
        color: #000;
        text-align: center;
    }

    .result-generic-name {
        width: 49%;
        float: left;
    }

    .result-local-generic-name {
        width: 49%;
        float: right;
    }

    .result-labels {
        font-weight: bold;
    }

    .result-brand-name {
        padding-left: .1em;
        float: left;
        width: 49%;
    }

    .result-brand-local-name {
        padding-right: .1em;
        float: right;
        width: 49%;
    }

    .result-header {
        text-align: center;
        font-weight: bold;
    }

    .result-comments {
        margin-top: 1em;
        padding-right: .5em;
        padding-left: .5em;
        margin-bottom: 1em;
    }

    .note {
        font-size: .9em;
        font-style: italic;
    }

    .important-note{
        font-weight: bolder;
        text-decoration: underline;
    }

    .comment{
        margin: .2em 0 .2em 0;
    }
    

    /*** card ***/
    .alphabet-card-container {

    }

    .alphabet-card-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .drug-card {
        margin: 0;
        padding: .5em;
        border: 2px solid #ccc;
        border-radius: 5px;
        border-bottom: 0px;
        overflow: hidden;
    }

    .drug-card:first-of-type {
        margin-top: .5em;
    }

    .drug-card:last-of-type {
        margin-bottom: .5em;
        border-bottom: 2px solid #ccc;
    }

    .card-section {
        width: 25%;
        float: right;
    }

    .card-section ul {
        list-style: none;
    }

    .druid-circle-category-0 {
        background: url("../images/circle-0.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-0 p {
        color: #009900;
        font-weight: bold;
    }
    
    .druid-circle-category-1 {
        background: url("../images/circle-1.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-1 p {
        color: #000;
        font-weight: bold;
    }

    .druid-circle-category-2 {
        background: url("../images/circle-2.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-2 p {
        color: #660000;
        font-weight: bold;
    }
    
    .druid-circle-category-3 {
        background: url("../images/circle-3.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }

    .druid-circle-category-3 p {
        color: #cc0000;
        font-weight: bold;
    }
    
    .druid-circle-category-4 {
        background: url("../images/circle-4.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }

    .druid-circle-category-4 p {
        color: #000000;
        font-weight: bold;
    }

    .druid-circle-category-empty {
        background: url("../images/empty.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-empty p {
        color: #fff;
        text-indent: 9999px;
    }     
    
    .icadts-circle-category-I {
        background: url("../images/circle-0.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 10px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-I p {
        color: #009900;
        font-weight: bold;
    }

    .icadts-circle-category-II {
        background: url("../images/circle-2.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 8px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-II p {
        color: #660000;
        font-weight: bold;
    }
    
    .icadts-circle-category-III {
        background: url("../images/circle-3.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 7px;
        margin-top: .1em;
    }

    .icadts-circle-category-III p {
        color: #cc0000;
        font-weight: bold;
    }
    
    .icadts-circle-category-empty {
        background: url("../images/empty.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-empty p {
        color: #fff;
        text-indent: 9999px;
    }    

    .icon-edit {
        background: url(../images/edit.png) top right no-repeat;
        width: 26px;
        height: 26px;
        text-decoration: none;
        text-indent: 9999px;
        display: block;

    }

    .icon-delete {
        background: url(../images/delete.png) top right no-repeat;
        width: 26px;
        height: 26px;
        text-decoration: none;
        text-indent: 9999px;
        display: block;
        margin-top: .1em;
    }
    
    
    
    /*** edit ***/
    .highlight {
        color: blue;
    }

    .edit-search-box-container {
        width: 60%;
        margin: 1em auto 1em;
    }

    
    /*** alphabet ***/
    .alphabet-container {
        width: 100%;
    }

    .alphabet-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .latin-alphabet {
        width: 48%;
        float: left;
    }

    .latin-alphabet::after {
        content: "";
        display: block;
        clear: both;
    }

    .local-alphabet {
        width: 48%;
        float: right;
    }

    .local-alphabet::after {
        content: "";
        display: block;
        clear: both;
    }

    .latin-character-container {
        width: 40px;
        height: 40px;
        text-align: center;
        float: left;
        margin: .2em;
        border: 1px solid #973098;
        border-radius: 5px;
    }

    .local-character-container {
        width: 40px;
        height: 40px;
        text-align: center;
        float: right;
        margin: .2em;
        border: 1px solid #973098;
        border-radius: 5px;
    }

    .local-character-container a, .latin-character-container a {
        display: block;
        text-decoration: none;
        line-height: 39px;
        font-size: 2em;
        font-weight: bold;
        color: #bf3fc1;
    /*    background-color: #dfdfdf;*/
    }


    /*** login ****/
    .login-form-container {
        width: 50%;
        margin: 5em auto;
    }

    .user-data-container {
        width: 80%;
        margin: 1em auto;
    }

    #username-input input{
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }

    .password-data-container {
        width: 80%;
        margin: 1em auto;
    }

    #password-input input {
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }

    #repeat-password-input input {
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }    
    
    .login-button-container {
        width: 80%;
        margin: 1em auto;
        text-align: center;
    }


    /*** profile ***/
    .profile-form-container {
        width: 60%;
        margin: 2em auto 1em;
    }
    
    /*** refernce ***/  
    .references-container::after{
        content: '';
        display: block;
        clear: both;        
    }
    
    .reference-name-container{
        width: 47%;
        float: left;
    }

    .reference-local-name-container{
        width: 47%;
        float: right;
    }
    
    .reference-input{
        width: 98%;
        float: left;
    }

    .reference-local-input{
        width: 98%;
        float: right;
    }
    
    .add-remove-reference-container {
        float: left;
        width: 6%;
        text-align: center;
        min-height: 4.2em;       
    }

    a.add-reference-button {
        width: 100%;
        height: 100%;
        display: block;
        margin-top: 30%;
    }

    a.del-reference-button {
        width: 100%;
        height: 100%;;
        display: block;
    }       

    .first-add-remove-reference{
        margin-bottom: 1em;
    }    
    
    .about-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;        
    }
    
    .about-container{
        width: 85%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }

    .terms-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;
    }
    
    .terms-container{
        width: 85%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }    
    
    .button-container{
        margin-top: 3em;
    }    

    .survery-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;
    }
    
    .survery-container{
        width: 85%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    } 

    .survery-button-container{
        margin: 1.5em auto 0;
    }
    
    .small-button-mobile{
        width: 130px;
    }    
    
    .qq-container {
        margin-bottom: 1em;
    }
    
    .qq-container::after{
        content: '';
        display: block;
        clear: both;
    }
    
    .qq-label-container {
        float: right;
        margin-left: 1em;
        min-width: 8%;
    }
        
    .qq-label-container-type-2 {
        float: right;
        margin-left: 1em;
        min-width: 50%;
    }
    
    .qq-label {
        vertical-align: middle;
    }
    
    .qq-answer-container {
        float: right;
    }
    
    .qq-answer-container span{
        margin-left: 1em;
    }
    
    .xdf{
        display: inline-block;
    }

    .age-text {
        margin-right: 1em;
    }
    
    .age-selection {
        min-width: 120px;
        text-align: center;
    }
    
    .pad-top-4 {
        padding-top: .4em;
    }
    
    .job-selection {
        min-width: 120px;
        text-align: center;        
    }

    .edu-selection {
        min-width: 120px;
        text-align: center;                
    }
    
    .usage-selection {
        min-width: 150px;
        text-align: center;                
    }
    
    .usage-count-selection {
        min-width: 120px;
        text-align: center; 
    }
    
    .search-count-selection {
        min-width: 120px;
        text-align: center; 
    }
    
    .questions-header {
        text-align: center;
        font-weight: bold;
        font-size: 1.1em;
        margin-top: 1em;
        margin-bottom: 1em;
        padding-top: 1em;
    }
    
    .field-pad-1 {
        padding: 1em;
    }
    
    #usage-data {
        margin-bottom: 2em;
    }    
}    

/*** mobile style ***/
@media only screen and (max-width: 480px) {
    html {
       background: rgba(246, 246, 246, 1);
    }

    body {
        font-size: .9em;
    }

    fieldset {
        margin-top: 1em;
        border-radius: 5px 5px 0 0;
    }

    legend {
        color: purple;
        margin-left: 1em;
        margin-right: 1em;
        padding-left: .5em;
        padding-right: .5em;
    }

    .page-header{
        font-weight: bold;
        margin-bottom: 2em;
    }
    
    .paragraph-title {
        font-weight: bold;
        margin-bottom: 1em;
    }

    .paragraph-content {
        font-weight: normal;
        margin-bottom: 1em;
    }
    
    .paragraph-content {
        font-weight: normal;
        margin-bottom: 1em;
        text-align: justify;
    }
    
    .continuse {
        font-weight: normal;
        display: inline;
        text-align: justify;
    }
    
    .emphasis {
        text-decoration: underline;
    }
    
    .bold {
        font-weight: bold;
        font-size: 1.1em;
    }
    
    .mb-1 {
        margin-bottom: 1em;
    }
    
    .justify{
        text-align: justify;
    }
    
    
    /**** errors *****/
    .message-container {
        width: 90%;
        margin: 1em auto;
        padding: 1em;
        background-color: rgba(0, 0, 0, 0);
        text-align: center;
    }

    .error-message {
        color: red;
        margin-bottom: 1em;
        text-align: center;
    }

    .success-message {
        color: green;
        font-size: 2em;
        font-weight: bold;
    }


    /**** header ****/
    .ribbon {
        background: rgba(247, 247, 247, 1);
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        padding: .2em;
        position: relative;
        width: 100%;
/*        -webkit-box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 0px 10px 5px -4px rgba(227, 227, 227, 1);*/
    }

    .ribbon::after {
        content: "";
        display: block;
        clear: both;
    }

    .ribbon-start {
        width: 33%;
        float: left;
    }

    .ribbon-middle {
        width: 33%;
        padding: 0 10%;
        float: left;
    }

    .ribbon-end {
        width: 33%;
        float: right;
        vertical-align: middle;
    }

    .ribbon-end ul li {
        float: right;
        margin-left: 1em;
        display: block;
    }

    .ribbon-end ul {
        list-style: none;
    }

    .ribbon-end a {
        text-decoration: none;
        color: #fff;
    }

    .logo-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .local-logo {
        margin-left: 1em;
        width: 34px;
        height: 34px;
    }

    .program-logo {
        width: 50px;
        height: 34px;
    }

    .int-logo {
        margin-right: 1em;
        width: 50px;
        height: 34px;
    }


    /*** navigation menu ***/
    .navigation-container {

    }

    .navigation-menu {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .navigation-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-align: center;
    }

    .navigation-menu ul li {
        width: 24%;
        height: 3em;
        margin: 0;
        float: right;
        background-color: #660000;
        margin-left: 1%;
        border-radius: 5px;
    }

    .navigation-menu ul li:first-of-type {
        margin-right: .5%;
    }

    .navigation-menu ul li:last-of-type {
        margin-left: 0;
    }

    .navigation-menu ul li a {
        display: block;
        text-decoration: none;
        line-height: 3em;
        text-align: center;
        color: #fff;
        font-size: 1em;
        font-weight: bold;
    }

    .navigation-menu ul li a:hover {
        background-color: #330000;
        border-radius: 6px;
    }

    
    /**** main container ****/
    .main-container {
        margin: 0 auto;
        padding: 0;
        background: rgba(247, 247, 247, 1);
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(227, 227, 227, 1) 100%);
/*        background: rgba(245, 251, 255, 1);
        background: -moz-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);
        background: -o-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);
        background: -ms-linear-gradient(top, rgba(245, 251, 255, 1) 0%, rgba(221, 242, 246, 1) 100%);*/
/*        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);*/
        overflow: auto;
        min-height: 100vh;
    }


    /**** home page ****/
    .dialog-box-container {
        margin: 0 auto;
        padding: 2em;
        background-color: #fff;
        width: 100%;
        border-radius: 5px 5px;
        font-size: .7em;
        min-height: 100vh;
    }
    
    .query-box-container {
        margin: 0 auto;
    }

    #query-label {
        color: #000;
        margin-bottom: 1.5em;
        text-align: center;
    }

    .query-container {
        margin: 0 auto;
        width: 80%;
        padding: 0;
        position: relative;
    }

    #drugname {
        margin: 0 auto;
        width: 80%;
        padding-right: .5em;
        height: 40px;
        border: 2px solid #ccc;
        border-radius: 0 5px 5px 0;
        border-left-width: 0px;
        font-size: 1em;
        font-weight: bold;
        float: right;
    }

    #search-button {
        margin: 0;
        padding: 1.1em;
        padding-left: 3em;
        width: 40px;
        height: 40px;
        border: 2px solid #ccc;
        margin-right: 0px;
        border-right: 0px;
        border-radius: 5px 0 0 5px;
        position: absolute;
        top: 0px;
        background: url("../images/search_50.png") center center no-repeat;
        background-color: #fff;
        float: right;
        text-indent: 9999px;
    }

    .query-container::after {
        content: "";
        display: block;
        clear: both;
    }
    
    #query-help {
        margin-top: .2em;
        color: green;
        text-align: center;
    }

    .advertise {
        width: 100%;
        height: calc(100vh - (100vh / 2.75));
        margin-top: 3.2em;
        margin-bottom: 0px;
        padding-top: 2.5em;
        padding-bottom: 3em;
        background-color: #009900;
        border-radius: 0 500px 0 0;
        -webkit-box-shadow: 0px -4px 5px 0px #0d0d0d;
        -moz-box-shadow: 0px -8px 5px 0px #000;
        box-shadow: 0px 10px -8px 0px #000;
    }
    
    .adv-item {
        float: left;
        margin-top: .2em;
        width: 100%;
        display: block;
        padding-left: .5em;
    }
    
    .adv-text {
        color: #fff;
        font-size: 1.5em;
        font-weight: bold;
    }

    
    /*** footer ***/
    .footer {
        width: 100%;
        height: 34px;
        background: -moz-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -o-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        background: -ms-linear-gradient(top, rgba(200, 200, 200, 1) 0%, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 85%, rgba(247, 247, 247, 1) 100%);
        padding: .2em; 
        position: fixed;
        bottom: 0;
    }
    
    .footer::after {
        content: "";
        display: block;
        clear: both;
    }
    
    .footer-item {
        width: 33%;
        text-align: center;
        float: left;
    }
    
    .footer p {
        font-size: .8em;
        line-height: 34px;
        color: #000;        
    }
    
    .footer-item a {
        font-size: .8em;
        text-decoration: none;
        line-height: 34px;
        color: #000;
    }
       
    
    /**** management ****/
    .management-box {
        width: 80%;
        margin: 0 auto;
        padding: 2em;
        background-color: #fff;
        color: #000;
        border-radius: 5px 5px 0 0;
    }

    .full-page{
        min-height: 100vh;
    }
        
    .management-content {
        padding: .2em;
    }

    .drug-name-container {

    }

    .name-container {
        width:47%;
    }

    .name-container-ltr {
        float: left;
    }

    .name-container-rtl {
        float: right;
    }

    .drug-input {
        width: 90%;
    }

    .drug-brand-name-container {

    }

    .brand-name-container {
        overflow: hidden;
    }

    .add-remove-button-container {
        float: left;
        width: 5%;
        padding-top: 1.2em;
        text-align: center;
    }

    a.add-button {
        width: 100%;
        height: 100%;
        display: block;
    }

    a.del-button {
        width: 100%;
        height: 100%;;
        display: block;
    }

    .checkboxes {
        vertical-align: middle;
    }

    .comments-container {
        width: 100%;
        margin: 0px;
    }

    .comment-container {
        margin: 1em;
        padding-right: .2em;
    }

    .comment-bullet-continer {
        float: right;
        width: 6%;
        margin: 0;
        padding-top: .3em;
    }

    .bullet {
        background: url("../images/bullet.png") center center no-repeat;
        text-indent: -9999px;      
    }

    .comment-input-container {
        float: right;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .comment-input {
        width: 100%;
    }

    .comment-button-container {
        width: 40px;
        float: right;
        margin: 0;
        padding: 0;
        margin-right: .5em;
        padding-top: .4em;
    }

    .druid-add-comment-button {
        width: 16px;
        height: 16px;
        float: right;
        margin: 0;
        margin-left: 8px;
    }

    .druid-del-comment-button {
        width: 16px;
        height: 16px;
        margin: 0;
        float: right;
    }

    .selection {
        text-align: center;
    }

    /* eglish section */
    .selection-en {
        width: 100px;
        padding-left: 0px;
        text-align: center;
    }

    .comment-bullet-continer-en {
        float: left;
        width: 6%;
        margin: 0;
        padding-top: .3em;
    }

    .druid-comment-input-container-en {
        float: left;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .comment-button-container-en {
        width: 40px;
        float: left;
        margin: 0;
        padding: 0;
        margin-left: .5em;
        padding-top: .4em;
    }

    .druid-add-comment-button-en {
        width: 16px;
        height: 16px;
        float: left;
        margin: 0;
        margin-right: 8px;
    }

    .druid-del-comment-button-en {
        width: 16px;
        height: 16px;
        margin: 0;
        float: left;
    }

    .icadts-comment-input-container {
        float: right;
        width: 80%;
        margin: 0;
        padding: 0;
    }

    .icadts-add-comment-button {
        width: 16px;
        height: 16px;
        float: right;
        margin: 0;
        margin-left: 8px;
    }

    .icadts-del-comment-button {
        width: 16px;
        height: 16px;
        margin: 0;
        float: right;
    }


    /**** result ****/
    .result-box-container {
        width: 95%;
        margin: 0 auto 3em;
        font-size: .8em;
        background-color: transparent;        
        padding-top: .1em;
    } 
    
    .search-box-container {
        margin: .5em auto 0;
    }
  
    .search-result-container {
        margin: 0;
        padding: 0;
        width: 100%;
        padding-bottom: 1em;
    }

    .category-0 {
        background: rgba(236, 250, 229, 1);
        background: -moz-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -o-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        background: -ms-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(217, 250, 201, 1) 100%);
        border: 2px solid #99cc99;
        color: #009900;
    }

    .category-1 {
        background: rgba(236, 250, 229, 1);
        background: -moz-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(255, 255, 160, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        background: -o-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        background: -ms-linear-gradient(top, rgba(236, 250, 229, 1) 0%, rgba(250, 250, 97, 1) 100%);
        border: 2px solid #c8c800;
        color: #336666; 
    }

    .category-2 {
        background: rgba(255, 244, 230, 1);
        background: -moz-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -o-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        background: -ms-linear-gradient(top, rgba(255, 244, 230, 1) 0%, rgba(255, 200, 136, 1) 100%);
        border: 2px solid #b99163;
        color: #660000;
    }

    .category-3 {
        background: rgba(246, 246, 246, 1);
        background: -moz-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -o-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        background: -ms-linear-gradient(top, rgba(246, 246, 246, 1) 0%, rgba(255, 150, 150, 1) 100%);
        border: 2px solid #cc0000;
        color: #cc0000;
    }
    
    .category-4 {
        background: rgba(255, 255, 255, 1);
        border: 2px solid #cccccc;
        color: #000000;
    }      

    .drug-general-information {
        margin: .5em auto 0;
        padding: 1em;
        border: 2px solid #d4d4d4;
        border-radius: 5px 5px 5px 5px;
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        color: #666666;
        display: block;
        overflow: hidden;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }

    .classification-information {
        margin: .7em auto 0;
        padding: 1em;
        border-radius: 5px 5px 5px 5px;
        display: block;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);   
    }

    .information-for-patients {
        margin: .7em auto 0;
        padding: 1em;
        border-radius: 5px 5px 5px 5px;
        display: block;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1); 
    }

    .information-for-physicians {
        margin: .7em auto 0;
        padding: 1em;
        border: 2px solid #c3d9ff;
        border-radius: 5px 5px 5px 5px;
        background: rgba(240, 250, 255, 1);
        background: -moz-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -o-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);
        background: -ms-linear-gradient(top, rgba(240, 250, 255, 1) 0%, rgba(225, 235, 255, 1) 100%);        
        background-color: #e0ecff;
        display: block;
        color: #0000cc;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);         
    }

    .references-information {
        margin: .5em auto 0;
        padding: 1em;
        border: 2px solid #d4d4d4;
        border-radius: 5px 5px 5px 5px;
        background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(227, 227, 227, 1) 100%);
        color: #666666;
        display: block;
        overflow: hidden;
        -webkit-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        -moz-box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);
        box-shadow: 7px 10px 5px -4px rgba(227, 227, 227, 1);       
    }  

    .references-information ul{
        margin: 0 1em 0 1em;
    }
    
    .result-generic-names{
        width: 100%;
        display: block;
        margin-bottom: .3em;
    }

    .result-brand-names {
        width: 100%;
        display: block;
    }

    .result-legends {
        color: #000;
        text-align: center;
    }

    .result-generic-name {
        width: 49%;
        float: left;
    }

    .result-local-generic-name {
        width: 49%;
        float: right;
    }

    .result-labels {
        font-weight: bold;
    }

    .result-brand-name {
        padding-left: .1em;
        float: left;
        width: 49%;
    }

    .result-brand-local-name {
        padding-right: .1em;
        float: right;
        width: 49%;
    }

    .result-header {
        text-align: center;
        font-weight: bold;
    }

    .result-comments {
        margin-top: 1em;
        padding-right: .5em;
        padding-left: .5em;
        margin-bottom: 1em;
    }

    .note {
        font-size: .9em;
        font-style: italic;
    }

    .important-note{
        font-weight: bolder;
        text-decoration: underline;
    }

    .comment{
        margin: .2em 0 .2em 0;
    }
    

    /*** card ***/
    .alphabet-card-container {

    }

    .alphabet-card-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .drug-card {
        margin: 0;
        padding: .5em;
        border: 2px solid #ccc;
        border-radius: 5px;
        border-bottom: 0px;
        overflow: hidden;
    }

    .drug-card:first-of-type {
        margin-top: .5em;
    }

    .drug-card:last-of-type {
        margin-bottom: .5em;
        border-bottom: 2px solid #ccc;
    }

    .card-section {
        width: 25%;
        float: right;
    }

    .card-section ul {
        list-style: none;
    }

    .druid-circle-category-0 {
        background: url("../images/circle-0.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-0 p {
        color: #009900;
        font-weight: bold;
    }
    
    .druid-circle-category-1 {
        background: url("../images/circle-1.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-1 p {
        color: #000;
        font-weight: bold;
    }

    .druid-circle-category-2 {
        background: url("../images/circle-2.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-2 p {
        color: #660000;
        font-weight: bold;
    }
    
    .druid-circle-category-3 {
        background: url("../images/circle-3.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }

    .druid-circle-category-3 p {
        color: #cc0000;
        font-weight: bold;
    }
    
    .druid-circle-category-4 {
        background: url("../images/circle-4.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }

    .druid-circle-category-4 p {
        color: #000000;
        font-weight: bold;
    }
    
    .druid-circle-category-empty {
        background: url("../images/empty.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
    }
    
    .druid-circle-category-empty p {
        color: #fff;
        text-indent: 9999px;
    } 
 
    .icadts-circle-category-I {
        background: url("../images/circle-0.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 10px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-I p {
        color: #009900;
        font-weight: bold;
    }

    .icadts-circle-category-II {
        background: url("../images/circle-2.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 8px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-II p {
        color: #660000;
        font-weight: bold;
    }
    
    .icadts-circle-category-III {
        background: url("../images/circle-3.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 7px;
        margin-top: .1em;
    }

    .icadts-circle-category-III p {
        color: #cc0000;
        font-weight: bold;
    }
    
    .icadts-circle-category-empty {
        background: url("../images/empty.png") top right no-repeat;
        height: 26px;
        width: 26px;
        padding-top: 6px;
        padding-right: 9px;
        margin-top: .1em;
    }
    
    .icadts-circle-category-empty p {
        color: #fff;
        text-indent: 9999px;
    }
 
    .icon-edit {
        background: url(../images/edit.png) top right no-repeat;
        width: 26px;
        height: 26px;
        text-decoration: none;
        text-indent: 9999px;
        display: block;

    }

    .icon-delete {
        background: url(../images/delete.png) top right no-repeat;
        width: 26px;
        height: 26px;
        text-decoration: none;
        text-indent: 9999px;
        display: block;
        margin-top: .1em;
    }

    
    /*** edit ***/
    .highlight {
        color: blue;
    }

    .edit-search-box-container {
        width: 60%;
        margin: 1em auto 1em;
    }

    .small-selection{
        max-width: 90px !important;
    }
    
    /*** alphabet ***/
    .alphabet-container {
        width: 100%;
    }

    .alphabet-container::after {
        content: "";
        display: block;
        clear: both;
    }

    .latin-alphabet {
        width: 48%;
        float: left;
    }

    .latin-alphabet::after {
        content: "";
        display: block;
        clear: both;
    }

    .local-alphabet {
        width: 48%;
        float: right;
    }

    .local-alphabet::after {
        content: "";
        display: block;
        clear: both;
    }

    .latin-character-container {
        width: 40px;
        height: 40px;
        text-align: center;
        float: left;
        margin: .2em;
        border: 1px solid #973098;
        border-radius: 5px;
    }

    .local-character-container {
        width: 40px;
        height: 40px;
        text-align: center;
        float: right;
        margin: .2em;
        border: 1px solid #973098;
        border-radius: 5px;
    }

    .local-character-container a, .latin-character-container a {
        display: block;
        text-decoration: none;
        line-height: 39px;
        font-size: 2em;
        font-weight: bold;
        color: #bf3fc1;
    /*    background-color: #dfdfdf;*/
    }


    /*** login ****/
    .login-form-container {
        width: 50%;
        margin: 5em auto;
    }

    .user-data-container {
        width: 80%;
        margin: 1em auto;
    }

    #username-input input{
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }

    .password-data-container {
        width: 80%;
        margin: 1em auto;
    }

    #password-input input {
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }

    #repeat-password-input input {
        direction: ltr;
        margin: .3em 0 0 0;
        padding: 0;
        width: 100%;
        height: 2.5em;
    }    
    
    .login-button-container {
        width: 80%;
        margin: 1em auto;
        text-align: center;
    }


    /*** profile ***/
    .profile-form-container {
        width: 80%;
        margin: 2em auto 1em;
    }    
    
    /*** refernce ***/  
    .references-container::after{
        content: '';
        display: block;
        clear: both;        
    }
    
    .reference-name-container{
        width: 47%;
        float: left;
    }

    .reference-local-name-container{
        width: 47%;
        float: right;
    }
    
    .reference-input{
        width: 98%;
        float: left;
    }

    .reference-local-input{
        width: 98%;
        float: right;
    }
    
    .add-remove-reference-container {
        float: left;
        width: 6%;
        text-align: center;
        min-height: 4.2em;       
    }

    a.add-reference-button {
        width: 100%;
        height: 100%;
        display: block;
        margin-top: 30%;
    }

    a.del-reference-button {
        width: 100%;
        height: 100%;;
        display: block;
    }           

    .first-add-remove-reference{
        margin-bottom: 1em;
    }    
    
    .about-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;
    }
    
    .about-container{
        width: 95%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }

    .terms-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;
    }
    
    .terms-container{
        width: 95%;
        margin: 48px auto 48px;
        background: rgb(255, 255, 255);
        padding: 3em;
    }    

    .button-container{
        margin-top: 2em;
    }   
    
    .survery-main-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(120, 120, 120, .8);
        z-index: 100;
        overflow: auto;
    }
    
    .survery-container{
        width: 95%;
        margin: 48px auto;
        background: rgb(255, 255, 255);
        padding: 3em;
    }        
    
    .survery-button-container{
        margin: .5em auto 0;
    }
    
    .small-button-mobile{
        width: 100px;
    }
    
    .qq-container {
        margin-bottom: 1em;
    }
    
    .qq-container::after{
        content: '';
        display: block;
        clear: both;
    }
    
    .qq-label-container {
        float: right;
        margin-left: 1em;
        min-width: 8%;
    }
        
    .qq-label-container-type-2 {
        float: right;
        margin-left: 1em;
        min-width: 50%;
    }
    
    .qq-label {
        vertical-align: middle;
    }
    
    .qq-answer-container {
        float: right;
    }
    
    .qq-answer-container span{
        margin-left: 1em;
    }

    .xdf{
        display: block;
    }
    
    .age-text {
        margin-right: 1em;
    }
    
    .age-selection {
        min-width: 120px;
        text-align: center;
    }
    
    .pad-top-4 {
        padding-top: .4em;
    }
    
    .job-selection {
        max-width: 250px;
        text-align: center;        
    }

    .edu-selection {
        min-width: 120px;
        text-align: center;                
    }
    
    .usage-selection {
        min-width: 150px;
        text-align: center;                
    }
    
    .usage-count-selection {
        min-width: 120px;
        text-align: center; 
    }
    
    .search-count-selection {
        min-width: 100px;
        text-align: center; 
    }
    
    .questions-header {
        text-align: center;
        font-weight: bold;
        font-size: 1.1em;
        margin-top: 1em;
        margin-bottom: 1em;
        padding-top: 1em;
    }
    
    .field-pad-1 {
        padding: 1em;
    }
    
    #usage-data {
        margin-bottom: 2em;
    }     
    

}