:root {
    /* Grays & Whites */
    --color-light-gray: hsl(0, 0%, 86%);
    --color-medium-gray: hsl(0, 0%, 65%);
    --color-dark-gray: hsl(52, 6%, 63%);
    --color-darker-gray: hsl(51, 8%, 33%);
    --color-border-gray: hsl(52, 11%, 70%);
    --color-off-white: hsl(54, 24%, 92%);
    --color-white: hsl(0, 0%, 100%);
    --color-table-border: hsl(0, 0%, 80%);
    --color-link-strong-gray: hsl(0, 0%, 40%);
    --color-number-border: hsl(0, 0%, 83%);
    --color-mypages-text: hsl(0, 0%, 64%);
  
    /* Text & Error */
    --color-dark-text: hsl(0, 8%, 26%);
    --color-red-error: hsl(0, 100%, 40%);
    --color-php-error-bg: hsl(0, 0%, 13%);
    --color-hover-text: hsl(51, 8%, 13%);
  
    /* Blue */
    --color-focus-blue: hsl(209, 84%, 42%);
    --color-link-blue: hsl(209, 58%, 55%);
    --color-icon-blue: hsl(208, 100%, 84%);
  
    /* Green */
    --color-green-dark: hsl(139, 57%, 19%);
    --color-green-light: hsl(139, 100%, 81%);
    --color-green-border: hsl(89, 100%, 45%);
    --color-link-green: hsl(111, 86%, 38%);
    --color-action-link-green: hsl(102, 85%, 34%);
    
    /* Gradient */
    --color-green-gradient-1: hsla(105, 67%, 27%, 1);
    --color-green-gradient-2: hsla(100, 69%, 38%, 1);
    --color-green-gradient-3: hsla(101, 73%, 35%, 1);
    --color-green-gradient-4: hsla(99, 70%, 53%, 1);
    --color-blue-gradient-1: hsla(210, 67%, 27%, 1);
    --color-blue-gradient-2: hsla(210, 69%, 38%, 1);
    --color-blue-gradient-3: hsla(210, 73%, 35%, 1);
    --color-blue-gradient-4: hsla(210, 70%, 53%, 1);
  
    /* Hover & Odd Row Backgrounds */
    --color-hover-bg: hsl(50, 100%, 92%);
    --color-table-row-bg: hsl(48, 20%, 97%);
    --color-row-bg-light: hsl(51, 19%, 91%);
    --color-row-bg-odd: hsl(51, 9%, 87%);
    --color-my-table-odd-row: hsl(40, 20%, 95%);
}

em {
    font-style: normal;
}

.normalTable, .linesTable {
    margin: 10px 0 40px 0;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    border-spacing: 0px;
    border-collapse: collapse;
}

.normalTable th, .linesTable th, .my-table table th {
    background: linear-gradient(to bottom, var(--color-blue-gradient-1) 0%, var(--color-blue-gradient-2) 50%, var(--color-blue-gradient-3) 51%, var(--color-blue-gradient-4) 100%);
    font-weight: normal;
    text-align: center;
    line-height: 14px;
    color: var(--color-white);
    vertical-align: middle;
    padding: 5px 1px;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 16px;
}

.normalTable th i, .linesTable th i {
    color: var(--color-green-dark);
    padding: 0 0 0 4px;
    cursor: pointer;
}

.normalTable th i.active, .normalTable th i:hover, .linesTable th i.active, .linesTable th i:hover {
    color: var(--color-green-light);
}

.normalTable tr, .linesTable tr, .my-table table tr {
    background: var(--color-table-row-bg);
}

.normalTable tr td {
    text-align: center;
    line-height: 14px;
    vertical-align: middle;
    padding: 6px 1px;
    border-right: 1px solid var(--color-table-border);
    border-bottom: 1px solid var(--color-table-border);
    font-size: 12px;
    font-family: 'Ubuntu Condensed', sans-serif;
}

.linesTable tr td {
    text-align: center;
    line-height: 14px;
    vertical-align: middle;
    padding: 6px 1px;
    border-bottom: 1px solid var(--color-table-border);
    font-size: 12px;
    font-family: 'Ubuntu Condensed', sans-serif;
}

.tblWideCells tr td {
    padding: 5px 20px;
}

.tblWideCells10 tr td {
    padding: 5px 10px;
}

.normalTable tr:hover, .linesTable tr:hover {
    text-decoration: none !important;
    color: var(--color-hover-text) !important;
    background: var(--color-hover-bg) !important;
}

.normalTable td:hover::after,
.normalTable th:hover::after {
    background-color: hsl(60, 100%, 80%);
}

.normalTable tr td.title, .linesTable tr td.title {
    width: 180px;
    text-align: right;
}

.normalTable td input:not([type='checkbox']), .linesTable td input {
    border-top: 1px solid var(--color-dark-gray);
    border-left: 1px solid var(--color-dark-gray);
    border-right: 1px solid var(--color-light-gray);
    border-bottom: 1px solid var(--color-light-gray);
    font-size: 12px;
    font-family: 'Ubuntu', sans-serif;
    line-height: 10px;
    color: var(--color-dark-text);
    text-align: center;
    background: var(--color-white);
    padding: 5px 5px 3px 10px;
    height: 15px;
    width: 300px;
}

form .left td {
    text-align: left;
}

.my-table {
    border: 1px solid var(--color-border-gray);
    margin: 0 0 20px 0;
}

.my-table table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-spacing: 0px;
}

.my-table table th {
    border-right: 1px solid var(--color-table-border);
    border-bottom: 1px solid var(--color-table-border);
}

.my-table table th.last {
    border-right: 1px solid var(--color-white);
}

.my-table table thead th i {
    color: var(--color-icon-blue);
    padding: 0 0 0 4px;
    cursor: pointer;
}

.my-table table th i.active, .my-table table th i:hover {
    color: var(--color-green-light);
}

.my-table table tr td {
    background: var(--color-table-row-bg);
    text-align: center;
    line-height: 14px;
    vertical-align: middle;
    padding: 6px 1px;
    border-right: 1px solid var(--color-table-border);
    border-bottom: 1px solid var(--color-table-border);
    font-size: 12px;
    font-family: 'Ubuntu Condensed', sans-serif;
}

.my-table table tr td select {
    font-size: 11px;
}

.my-table table tr:hover td, .my-table table tr:hover a {
    text-decoration: none !important;
    color: var(--color-hover-text) !important;
    background-color: var(--color-hover-bg) !important;
}

.my-table table input {
    font-size: 12px;
    font-family: 'Ubuntu', sans-serif;
}

.my-table table tr td.left,
.my-table table thead th.left {
    text-align: left;
}

.my-table table tr.odd td {
    background: var(--color-my-table-odd-row);
}

.my-table table tr.nodata td {
    padding: 40px 20px;
}

.my-table table tr td.title {
    text-align: right;
}

.my-table table tr td.left span {
    display: block;
    color: var(--color-link-blue);
}

.my-table table tr td strong a {
    color: var(--color-link-strong-gray);
}

.my-table table tr td.green a {
    color: var(--color-link-green);
}

.my-table table tr td.red a {
    color: var(--color-red-error);
}

.my-table table .delete a {
	margin: 0 auto;
	display: block;
	background: url(/images/cpanel/icons/delete.gif) 0 0 no-repeat;
	height: 16px;
	width: 16px;
}
.my-table table .params a {
	margin: 0 auto;
	display: block;
	background: url(/images/cpanel/icons/params.gif) 0 0 no-repeat;
	height: 16px;
	width: 16px;
}
.my-table table .up a {
	margin: 0 auto;
	display: block;
	background: url(/images/cpanel/icons/sort-up.gif) 0 0 no-repeat;
	height: 16px;
	width: 16px;
}
.my-table table .down a:active {
	background-position: 0 1px;
}
.my-table table .up a:active {
	background-position: 0 -1px;
}
.my-table table .down a {
	margin: 0 auto;
	display: block;
	background: url(/images/cpanel/icons/sort-down.gif) 0 0 no-repeat;
	height: 16px;
	width: 16px;
}

.my-table table ul {
    width: 84px;
    margin: 0 auto;
    display: block;
    padding: 0;
}

.my-table table ul li {
    width: 16px;
    height: 16px;
    display: block;
    margin: 4px 0;
    float: left;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.my-table table ul li.num {
    width: 40px;
    height: 22px;
    margin: 0 5px;
    border: 1px solid var(--color-number-border);
}

.my-table table ul li.num input {
    width: 25px;
    padding: 3px 7px;
}

#actions {
    width: 100%;
    height: 48px;
    display: block;
}
#actions li {
	background: url(/images/cpanel/function-right.png) 100% 0 no-repeat;
	display: block;
	height: 48px;
	float: left;
	margin: 0 10px 0 0;
	padding: 0 0 0 0;
	overflow: hidden;
}
#actions li a {
	background: url(/images/cpanel/function-left.png) 0 0 no-repeat;
	display: block;
	border: none;
	margin: 0;
	font-size: 11px;
	font-family: Tahoma;
	text-align: center;
	color: #45a10e;
	padding: 14px 30px 30px 45px;
}
#actions li.add a {
	background: url(/images/cpanel/function-left-add.png) 0 0 no-repeat;
}
#actions li.category a {
	background: url(/images/cpanel/function-left-category.png) 0 0 no-repeat;
}
#actions li.history a {
	background: url(/images/cpanel/function-left-history.png) 0 0 no-repeat;
}

#actions li.category a, #actions li.history a {
    color: var(--color-link-blue);
}

#mypages {
    color: var(--color-mypages-text);
    text-align: center;
    margin: 0 0 20px 0;
}

#mypages a {
    color: var(--color-link-blue);
}

.naviLink:hover a {
    text-decoration: none !important;
    color: var(--color-hover-text) !important;
}

.doubleIcon i {
    font-size: 22px;
    margin: 0 10px 0 0;
    text-decoration: none;
    vertical-align: middle;
}

.doubleIcon i:nth-of-type(2) {
    font-size: 14px;
    margin: 0 10px -3px -7px;
}

.doubleIconSm i {
    font-size: 18px;
    margin: 0 10px 0 0;
    text-decoration: none;
    vertical-align: middle;
}

.doubleIconSm i:nth-of-type(2) {
    font-size: 12px;
    margin: 0 9px -3px -7px;
}

.font12 {
    font-size: 12px !important;
}

tr.disablableRow {
    opacity: 1;
    transition: opacity 0.45s;
}

tr.disabledRow {
    opacity: 0.3;
    pointer-events: none;
}