@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans-bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;}
@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans-italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    color: black;
    font-size: 14px;
    font-family: OpenSans,Tahoma,Verdana,Geneva,sans-serif;
    /* font-family: Arial,Helvetica,sans-serif; */
    line-height: 1;
}

/* login page layout */
body.loginpage {
    background: linear-gradient(to right, #DFE0E2, #F2F3F5, #DFE0E2);
}
.logintitle {
    margin: 120px auto 0 auto;
    text-align: center;
    font-weight: bold;
    font-size: 125%;
    color: #808C96;
}
.loginbox {
    margin: 20px auto 0 auto;
    padding-bottom: 20px;
    width: 400px;
    border: 1px ridge #CED3DC;
    background: #FFFFFF;
    text-align: center;
}
.loginbox input[type=text], .loginbox input[type=password] {
    display: block;
    width: 80%;
    padding: 10px 5px;
    margin: 15px auto;
}
.loginboxtitle {
    padding: 15px 0;
    width: 100%;
    color: #68727A;
    font-size: 110%;
    background: linear-gradient(#D7DADF, #BFC5CC);
}

.welcome_box {
    position: relative;
    margin: 150px auto 0 auto;
    width: 400px;
    height: 100px;
    border: 1px solid #CED3DC;
    box-shadow: 3px 3px 3px #E1E5EC, -3px -3px 3px #E1E5EC;
    background-color: #FFFFFF;
}
.welcome_box img {
    position: absolute;
    top: 35px;
    left: 35px;
}
.welcome_message {
    position: absolute;
    width: 300px;
    top: 20px;
    left: 100px;
    padding: 25px 0;
    border-left: 1px solid #CED3DC;
    text-align: center;
}

/* text elements */
a {
    color: #369;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
h1, h2, h3 {
    padding: .8em 0 .4em 0;
    font-weight: bold;
}
h1 {
    font-size: 125%;
    margin-bottom: 1em;
    background-color: white;
}
h2 {
    font-size: 110%;
}
h3 {
    font-size: 100%;
}
select, input[type=text], input[type=password], textarea {
    background: #F6F6F6;
    border: 1px solid #C1C4CB;
    padding: 2px;
}
/* select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
} */
button, input[type=reset], input[type=button] {
    padding: .3em 1em;
    margin-right: .5em;
    border: 1px solid #D3D7E0;
    background: linear-gradient(#FDFDFE, #F0F2F8);
    color: black;
    border-radius: 3px;
}
input[type=submit] {
    padding: .3em 1em;
    margin-right: 10px;
    background-color: #6AD1DF;
    color: white;
    font-weight: bold;
    border: 1px solid #6AD1DF;
    border-radius: 3px;
}
input[type=submit]:hover {
    background: #6ad1df;
    border: 1px solid #7F7F7F;
}
button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
    border: 1px solid #7F7F7F;
}

a.action {
    color: #369;
    text-decoration: none;
    padding: 5px 4px 1px 4px;
    margin: 0 3px;
    line-height: 130%;
    border: 1px solid transparent;
}
a.action.history {
    padding: 2px 3px 1px 20px;
    background: transparent url("images/icon_history.png") no-repeat 2px center/12px 12px;
}
a.action.read {
    padding: 2px 3px 1px 20px;
    background: transparent url("images/icon_read.png") no-repeat 2px center/12px 12px;
}
a.action.edit {
    padding: 2px 3px 1px 20px;
    background: transparent url("images/icon_edit.png") no-repeat 2px center/12px 12px;
}
a.action.delete {
    padding: 2px 3px 1px 20px;
    background: transparent url("images/icon_delete.png") no-repeat 2px center/12px 12px;
}
a.action.addclone {
    padding: 2px 3px 1px 20px;
    background: transparent url("images/icon_addclone.png") no-repeat 2px center/12px 12px;
}
a.action:hover {
    /* color: #fff; */
    /* background: #369; */
    text-decoration: none;
    border: 1px solid rgb(196, 196, 196);
}

/* feedback */
.feedback {
    display: inline-block;
    border: 1px solid black;
    color: black;
    padding: 10px;
    font-size: 110%;
    margin-bottom: 15px;
}
.feedback.error {
    border: 1px solid red;
    color: red;
}
.feedback.success {
    border: 1px solid green;
    color: green;
}

/* list tables */
table.list {
    border: 1px solid #CED3DC;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 680px;
    text-align: left;
    box-shadow: 3px 3px 3px #E1E5EC, -3px -3px 3px #E1E5EC;
}
table.list th,table.list td {
    border: 1px solid #CED3DC;
    padding: 4px;
    margin: 0px;
    white-space: pre-wrap;
}
table.list th {
    background: linear-gradient(#EBEEF6, #D3D6DD);
    line-height: 140%;
    text-align: center;
    border-bottom-color: #E0E0E0;
    vertical-align: middle;
}
table.list td {
    vertical-align: middle;
    color: #505050;
}
table.list tr:nth-child(even) {
    background: #F5F7FA;
}
table.list tr:nth-child(odd) {
    background: white;
}
table.list tr:nth-child(5n+0) td {
    border-bottom-color: #E0E0E0;
}
table.list tr:hover {
    background: #D9EBF5;
}
table.list td.actions {
    text-align: left;
    white-space: nowrap;
    width: 1px;        /* minimize the column */
}
table.list td.operations {
    text-align: center;
    white-space: nowrap;
    width: 1px;        /* minimize the column */
}
table.list td.message {
    color: red;
    font-size: 120%;
    text-align: center;
}
table.list tr.inactive {
    color: grey;
}

.list_pager_header {
    cursor: default;
    padding: 8px 10px;
    margin-bottom: 5px;
    background-color: white;
    border: 1px solid #CED3DC;
    box-shadow: 3px 3px 3px #E1E5EC, -3px -3px 3px #E1E5EC;
}
.list_pager_footer {
    cursor: default;
    padding: 8px 10px;
    margin: 5px 0 20px 0;
    background-color: white;
    border: 1px solid #CED3DC;
    box-shadow: 3px 3px 3px #E1E5EC, -3px -3px 3px #E1E5EC;
}
.pagebutton {
    color: black;
    font-size: 11px;
    padding: 4px 5px;
    margin: 0 3px;
    border: 1px solid #e9edf5;
    border-radius: 3px;
    background: radial-gradient(#FFFFFF, #EEEEEE);
}
.pagebutton.inactive {
    color: rgb(200, 200, 200);
}
.pagebutton.pageinfo {
    color: black;
}
.pagebutton.listexport {
    padding: 6px 5px;
    float: right;
    background: linear-gradient(#FDFDFE, #F0F2F8);
}
a.pagebutton {
    text-decoration: none;
    cursor: pointer;
}
a:hover.pagebutton {
    border: 1px solid #7a7a7a;
}

.list_order_button.inactive {
    cursor: pointer;
    color: #131389;
}
.list_order_button.primary {
    cursor: default;
    color: #FF0000;
}
.list_order_button.secondary {
    cursor: pointer;
    color: #800000;
}
#filter_form,.filter_form {
    padding: 6px 10px;
    background-color: white;
    margin-bottom: 15px;
    border: 1px solid #CED3DC;
    box-shadow: 3px 3px 3px #E1E5EC, -3px -3px 3px #E1E5EC;
}
span.icon {
    padding: 1px 2px;
    margin: 0 3px;
    border-radius: 3px;
    background: transparent;
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 1px solid transparent;
}
span.icon:hover {
    border: 1px solid rgb(196, 196, 196);
}
span.icon.placeholder:hover {
    border: 1px solid transparent;
}
span.history {
    background: transparent url("images/icon_history.png") no-repeat center;
}
span.read {
    background: transparent url("images/icon_read.png") no-repeat center;
}
span.edit {
    background: transparent url("images/icon_edit.png") no-repeat center;
}
span.delete {
    background: transparent url("images/icon_delete.png") no-repeat center;
}
span.addclone {
    background: transparent url("images/icon_addclone.png") no-repeat center;
}
span.reply {
    background: transparent url("images/icon_reply.png") no-repeat center;
}
span.down {
    background: transparent url("images/icon_down.png") no-repeat center;
}
span.up {
    background: transparent url("images/icon_up.png") no-repeat center;
}
span.close {
    background: transparent url("images/icon_close.png") no-repeat center;
}

/* data tables */
.data_table_padder {
    display: inline-block;
    background-color: white;
    padding: 10px;
}
table.data {
    border: 0px;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 300px;
    margin: 1em 0;
    text-align: left;
    background-color: white;
}
table.data th,table.data td {
    padding: 6px 10px;
    margin: 0px;
    white-space: nowrap;
    vertical-align: top;
}
table.data th {
    font-weight: bold;
    text-align: right;
}
table.data td.value {
    white-space: pre-wrap;
}

.button_row {
    padding: .2em 0 .6em 0;
    margin-bottom: 15px;
}
.button_row a {
    padding: 8px 15px;
    margin-right: 10px;
    background-color: #6AD1DF;
    color: white;
    font-weight: bold;
    border: 1px solid #6AD1DF;
    border-radius: 3px;
}
.button_row a:hover {
    background: #6ad1df;
    border: 1px solid #7F7F7F;
}
.button_row a.delete {
    background: #6AD1DF url("images/icon_delete.png") no-repeat 7px center/15px 15px;
    padding-left: 30px;
}
.warn_field {
    outline: 1px solid red;
}
.filter_active {
    color: red;
}
.filter_highlight {
    background-color: #FFBDBD;
}
.formhelp {
    font-size: 90%;
    font-style: italic;
    color: #3D3D3D;
    margin: 0.1em 0;
}

/* scroll_to_top button */
.scroll_to_top {
	padding: 6px 10px 12px 10px;
	text-align: center;
    font-size: 28px;
	font-weight: bold;
	color: #444444;
    background: #6AD1DF;
	text-decoration: none;
	position: fixed;
	top: 10px;
	right: 24px;
    z-index: 1;
	display: none;
    border: 1px solid #6AD1DF;
    border-radius: 3px;
    box-shadow: 3px 3px 3px #E1E5EC, -3px -3px 3px #E1E5EC;
}
.scroll_to_top:hover {
	text-decoration: none;
    border: 1px solid #7F7F7F;
}
select.column_filter_select {
    font-size: 80%;
    min-width: 100%;
}
option.column_filter_active, select.column_filter_active {
    color: red;
}
option.column_filter_inactive {
    color: black;
}

/* icons */
img.icon {
    max-width: 200px;
    max-height: 70px;
}

/* tabs */
.tab_button_row {
    overflow: hidden;
    margin-top: 20px;
    margin-right: 10px;
}
.tab_button_row button {
    background: none;
    border: 1px solid #ccc;
    border-bottom: none;
    outline: none;
    cursor: pointer;
    padding: 8px 12px;
    transition: 0.3s;
    font-size: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.tab_button_row button:hover {
    background-color: rgb(245, 246, 248);
}
.tab_button_row button.active {
    background-color: white;
}
.tab_content {
    display: none;
    background-color: white;
    padding: 12px;
    border: 1px solid #ccc;
    border-top: none;
    margin-right: 10px;
}

/* modifications based on media */
@media print {
    #menucontent {
        display: none;
    }
    #maincontent {
        position: static;
    }
    .noprint {
        display: none;
    }
}

@media screen {
    .noscreen {
        display: none;
    }
}