.pop_bg {
    background: rgba(240, 240, 240, 0.8);
    border-radius: 8px;
    box-shadow: 2px 4px 4px #333333;
    color: #666666;
    font: normal 14px Verdana, Helvetica, sans-serif;
    margin: auto;
    min-width: min-content !important;
    padding: 12px 7px;
    z-index: 1 !important;
}

.pop_div {
    background: rgba(240, 240, 240, 0.5);
    border-radius: 8px;
    box-shadow: 2px 4px 4px #333333;
    color: #666666;
    font: normal 12px Verdana, Helvetica, sans-serif;
    margin: auto;
    min-width: min-content;
    padding: 10px;
    z-index: 2 !important;
}

.pop_edit {
    background: #63A5EF;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 3px 5px 3px #333333;
    color: #FFFFFF;
    display: none;
    filter: alpha(Opacity=90);
    font: normal 14px Verdana, Helvetica, sans-serif;
    left: calc(50% - 200px);
    padding: 6px 10px 6px 6px;
    position: absolute;
    text-align: left;
    top: 100px;
    width: max-content;
    z-index: 999 !important;
}

.btn {
    background: white;
    border: #007BFF solid 1px;
    border-radius: 8px;
    color: #007BFF;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
}

.btn:hover {
    background: #007BFF;
    color: white;
}

.pop_block {
    background: #4C5665;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 3px 5px 3px #333333;
    color: #FFFFFF;
    display: none;
    filter: alpha(Opacity=90);
    font: normal 14px Verdana, Helvetica, sans-serif;
    left: calc(50% - 200px);
    padding: 6px 6px 6px 6px;
    position: absolute;
    text-align: left;
    top: 100px;
    width: 400px;
    z-index: 22;
}

a {
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-weight: normal;
    color: #666666;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

tr {
  vertical-align: top;
}

.hasDatepicker {
    width: 150px;
    background: #E7E7E7 url(../img/datepicker_cal.png) no-repeat 133px 3px;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    height: 20px;
    padding-left: 5px;
    font-size: 11pt;
}

.js-close {
    font-size: 24px;
    color: #FFFFFF;
    cursor: pointer;
}

.js-close:hover {
    color: #FF0000;
}

.rame {
    border-color: #999999;
    border-radius: 8px;
    border-style: solid;
    margin: 0 0 10px 10px;
    padding: 10px;
    width: 94%;
}

.wrame {
    border-color: #FFFFFF;
    border-radius: 8px;
    border-style: solid;
    margin: 0 0 10px 10px;
    padding: 10px;
    width: 94%;
    color: #FFFFFF;
}

.no_rame {
    border-top-color: #999999;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin: 0 0 0 10px;
    padding: 10px;
    width: 94%;
}

.spacer {
    height: 10px;
}

.bg_highlight {
    background: #919BAA;
    filter: alpha(Opacity=90);
    padding: 6px 6px 6px 6px;
    border-radius: 8px 8px 8px 8px;
}

.simple_edit, .all_edit, .user_edit, .comm_send {
    cursor: pointer;
}

/* ---------------------------------------------- */
/* different buttons */
.button {
    background-color: #4C5665;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}
.button:hover {
    text-decoration: underline;
}

.button_light {
    background-color: #efedf7;
    border: none;
    border-radius: 8px;
    color: #4C5665;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}
.button_light:hover {
    text-decoration: underline;
}

.button_big {
    background-color: #4C5665;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}
.button_big:hover {
    text-decoration: underline;
}

.main_button {
    background-color: #4C5665;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    width: 250px;
}
.main_button:hover {
    text-decoration: underline;
}

.add_button {
    background-color: #10707f;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    width: 250px;
}
.add_button:hover {
    text-decoration: underline;
}
/* ---------------------------------------------- */


.main_table {
    width: 100%;
    font-size: 16px;
    color: #555;
}

.main_table td {
    vertical-align: top;
}

.txt_msg {
    width: 90%;
    height: 60px;
    border: none;
    border-radius: 8px;
    box-shadow: 3px 6px #888888;
    padding: 5px 10px;
    color: #666666;
}

.txt_comment {
    width: 90%;
    height: 24px;
    border: none;
    border-radius: 8px;
    box-shadow: 3px 6px #888888;
    padding: 5px 10px;
    color: #666666;
}

.small_blue {
    text-align: left;
    color: #4C5665;
    font-size: 12px;
    font-style: italic;
}

.small_white {
    text-align: right;
    color: #FFFFFF;
    font-size: 12px;
    font-style: italic;
}

.chron_msg {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 3px 6px #888888;
    padding: 10px 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-style: italic;
}

.chron_comment {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 3px 6px #888888;
    padding: 5px 5px;
    margin-bottom: 5px;
    font-size: 12px;
    font-style: italic;
}

.upload_text {
    color: #FFFFFF;
    font: bold 11px Verdana, Helvetica, sans-serif;
    border-color: #999999;
    border-style: solid;
    border-width: thin;
    padding: 2px;
}

.main_title {
    font: bold 24px Verdana, Helvetica, sans-serif;
    color: #4C5665;
    text-shadow: 2px 2px 3px #333333;
}

.title {
    text-align: right;
    color: #666666;
    font-size: 18px;
    font-weight: bold;
}
.my_radio{
    width: 20px;
    height: 20px;
    background-image: url(../img/radio.png);
    background-size: 20px 20px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Bottom;
    margin-top: 5px;
}

/* ---------------------------------------------- */
/* image zoom */
.zoom {
    transition: transform .2s; /* Animation */
}

.zoom:hover {
    transform: scale(5); /* (Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ---------------------------------------------- */


/* ---------------------------------------------- */
/* UI dialog: can be omitted when changing to popup */
.ui-dialog {
    display: none;
    width: 400px;
    background: #b3d7ff;
    opacity: 0.9;
    filter: alpha(Opacity=90);
    padding: 6px;
    border-radius: 8px;
    position: absolute;
    top: 220px;
    left: 400px;
    z-index: 99;
    font: normal 14px Verdana, Helvetica, sans-serif;
    color: #FFFFFF;
    box-shadow: 3px 5px 3px #333333;
}

.ui-dialog .ui-dialog-content {
    font: normal 12px Verdana, Helvetica, sans-serif;
    color: #FFFFFF;
}

.ui-dialog .ui-dialog-titlebar {
    font: bold 16px Verdana, Helvetica, sans-serif;
    background: #b3d7ff;
    border: none;
    color: #FFFFFF;
}

.ui-widget-content {
    background: #b3d7ff;
    border: none;
}

.ui-widget.ui-widget-content {
    border-radius: 8px 8px 8px 8px;
    box-shadow: 3px 5px 3px #333333;
}

.ui-widget-content.ui-dialog {
    border: none;
}

/* ---------------------------------------------- */