*,
*::before,
*::after {
	box-sizing: border-box;
}

html,body {
	background-color:#F0F7FC;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

#main_column {
	background: #FFFFFF;
	display:inline-block;
	width:calc(100% - 40px);
	margin:10px;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	position: relative;
	min-height: 100%;
	left: 0;
	top: 0;
	cursor:default;
	color:#000000;
	padding:10px;
}

header.header {
	display:block;
	text-align:center;
	width:100%;
}

.nav {
	border-top:1px solid #9A9A9A;
	border-bottom:1px solid #9A9A9A;
	font-weight:bold;
}

.nav a {
	color:#00B5AD;
	font-weight:bold;
	text-decoration:none;
	display:inline-block;
	margin:8px 0;
	padding:2px 10px;
	border-right:2px solid #008D85;   /* 007971 */
	font-size:20px;
}

.nav a:last-child {
	border-right:none;
}

.nav a.active {
	text-decoration:none;
	background-color:#007971;
	box-shadow:inset 1px 0px #FFFFFF,inset -1px 0px #FFFFFF;
	color:#FFFFFF;
}

.nav a:hover {
	text-decoration:none;
	background-color:#00B5AD;
	box-shadow:inset 1px 0px #FFFFFF,inset -1px 0px #FFFFFF;
	color:#FFFFFF;
}

.main_table {
	border-collapse:collapse;
}

.main_table th, .main_table td {
	border:1px solid #D3D3D3;
	font-size:16px;
	font-weight:normal;
	height:32px;
}

.main_table th {
	background-color:#ECE8E2;
	font-weight:bold;
	text-align:center;
	padding:5px 10px;
}

.main_table td {
	background-color:#FBFBFB;
	padding:0 10px;
	vertical-align:middle;
}

.main_table td a {
	color:#007971;
	text-decoration:underline;
	font-weight:bold;
	cursor:pointer;
}

.main_table tr:hover td { 
//	background-color:#EAFFEA;
}

.main_table tr.active td { 
	background-color:#A0FFAF;
}

.main_table tr.active_ringed td { 
	background-color:#C8FFD7;
}

.main_table tr.overdue td { 
	background-color:#FFCCCC;
}

.main_table tr.overdue_ringed td { 
	background-color:#FFE0E0;
}

.main_table tr.new td { 
	background-color:#FFFFA2;
}

#form_add {
	background-color:#FFFFFF;
	width:800px;
	padding:10px;
	margin:10px 0;
	position:relative;
	display:none;
	text-align: left;
}

#close_form_add {
	position:absolute;
	top:-10px;
	right:5px;
	display:none;
}

#new_profile_add {
	position:absolute;
	top:-10px;
	left:5px;
	display:none;
}

h2 {
	color:#008D85;
	font-weight:bold;
	font-size:16px;
	margin:0 0 10px 0;
}

/* ---------------- Forms ---------------- */

.form_table th, .form_table td {
	padding:5px;
	text-align:left;
	font-size:14px;
	line-height:32px;
	font-weight:bold;
}

.form_table th {
	font-size:16px;
	font-weight:bold;
	line-height:32px;
	color:#AAAAAA;
}

.form_table input, .form_table select {
	outline:none;
	border:1px solid #E0E0E0;
	height:32px;
	background-color:#FBFBFB;
	text-align:center;
	font-weight:bold;
	font-size:20px;
}

.form_table input {
	text-align:center;
}

.form_table select {
	text-align:left;
	padding-left:5px;
}

.form_table input:hover, .form_table select:hover {
	border:1px solid #00B5AD;
}

.form_table input:focus, .form_table select:focus {
	outline:1px solid #00B5AD;
	border:1px solid #00B5AD;
}

.form_table input::placeholder, .placeholder {
	font-style:italic;
	text-align:center;
	color:#FFA77E;
	font-weight:normal;
	font-size:16px;
}

.form_table input:hover::placeholder, .form_table input:focus::placeholder {
	opacity:0;
	visibility: hidden;
}

.form_table input.accepted {
	outline:1px solid #AAB5AD;
	border:1px solid #AAB5AD;
}

::-webkit-input-placeholder { font-style:italic; text-align:center; color:#FFA77E; font-weight:normal; font-size:16px; }
::-moz-placeholder { font-style:italic; text-align:center; color:#FFA77E; font-weight:normal; font-size:16px; }
:-moz-placeholder { font-style:italic; text-align:center; color:#FFA77E; font-weight:normal; font-size:16px; }
:-ms-input-placeholder { font-style:italic; text-align:center; color:#FFA77E; font-weight:normal; font-size:16px; }

/* ---------------- Formats ---------------- */

.w40 {
	width: 40px;
}

.w50 {
	width: 50px;
}

.w80 {
	width: 80px;
}

.w100 {
	width: 100px;
}

.w135 {
	width: 135px;
}

.w145 {
	width: 145px;
}

.w150 {
	width: 150px;
}

.w170 {
	width: 170px;
}

.w200 {
	width: 200px;
}

.w220 {
	width: 220px;
}

.w250 {
	width: 250px;
}

.w280 {
	width: 280px;
}

.w300 {
	width: 300px;
}

.w400 {
	width: 400px;
}

.w440 {
	width: 440px;
}

.max_w300 {
	max-width: 300px;
	overflow-x:hidden;
	text-overflow:ellipsis;
}

.ta_rt {
	text-align:right!important;
}

.ta_lt {
	text-align:left!important;
}

.ta_cntr {
	text-align:center!important;
}

.big_bold_16 {
	font-weight:bold;
	font-size:20px;
}

.smalltext {
	font-size:12px;
}

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

.button, input.button {
	cursor:pointer;
	background-color:#007971;
	border-top:2px solid #3CB5AD;
	border-left:2px solid #3CB5AD;
	border-bottom:2px solid #005149;
	border-right:2px solid #005149;
	color:#FFFFFF;
	font-size: 18px;
	font-weight:bold;
	line-height:28px;
	height:32px;
	margin:10px;
	padding:0 10px;
}

input.button:hover {
	border-top:1px solid #005149;
	border-left:1px solid #005149;
	border-bottom:1px solid #3CB5AD;
	border-right:1px solid #3CB5AD;
	text-shadow:1px 1px #005149;
}

div.button {
	border-top:1px solid #767676;
	border-left:1px solid #767676;
	box-shadow:inset -1px -1px 1px #000000;
	line-height:28px;
}

.button:hover {
	background-color:#28A199;
	text-shadow:1px 1px #008D85;
}

.button.disabled {
	opacity:0.3;
	cursor:not-allowed;
	background-color:#007971;
	text-shadow:none;
}

.buttons_bar {
	width:100%;
	margin-top:10px;
	border-top:1px solid #E0E0E0;
	border-bottom:1px solid #E0E0E0;
	background-color:#FBFBFB;
	text-align:center;
}

/* ---------------- Messages ---------------- */

.message_block {
	text-align:center;
	max-width:600px;
	padding:10px;
	margin:15px 0;
	border-radius:10px 10px; -moz-border-radius:10px; -webkit-border-radius:10px;
	color:#FFFFFF;
	font:bold 16px verdana, tahoma, arial, sans-serif;
	text-shadow:1px 1px 1px #000;
	line-height:150%;
}

.message_block_static {
	text-align:center;
	max-width:600px;
	padding:10px;
	margin:15px 0;
	border-radius:10px 10px; -moz-border-radius:10px; -webkit-border-radius:10px;
	color:#FFFFFF;
	font:bold 16px verdana, tahoma, arial, sans-serif;
	text-shadow:1px 1px 1px #000;
	line-height:150%;
}

.success_block {
	background:#30B036;
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #009800, 3px 3px 3px 3px rgba(121, 121, 121, 0.3);
}

.error_block {
	background:#FC1211;
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #980000, 3px 3px 3px 3px rgba(121, 121, 121, 0.3);
}

.mess_sel_info {
	color:#FFFFCC;
	font-size:18px;
}

/*----------------- Preloader ---------------- */

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
}

.wrapperid {
    font-size: 1em;
    width: 9em;
    height: 9em;
    border-radius: 50%;
    background: transparent;
    border: 1em dashed rgba(138,189,195,0.5);
    box-shadow:
        inset 0 0 2em rgba(255,255,255,0.3),
        0 0 0 0.7em rgba(255,255,255,0.3);
    animation: rota 3.5s linear infinite;
 
    font-family: sans-serif;
 
    color: #AAA;
    text-align: center;
    text-shadow: 0 .04em rgba(255,255,255,0.9);
    line-height: 7em;
    font-weight:bold;
}
 
.wrapperid:before,
.wrapperid:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
    border: 1em dashed;
}
 
.wrapperid:before {
    border-color: rgba(138,189,195,0.2);
    top: 0; right: 0; bottom: 0; left: 0;
}
 
.wrapperid:after {
    border-color: rgba(138,189,195,0.4);
    top: 1em; right: 1em; bottom: 1em; left: 1em;
}
 
.wrapperid .inner {
    width: 100%;
    height: 100%;
    animation: rota 3.5s linear reverse infinite;
}
 
.wrapperid span {
    display: inline-block;
    animation: placeholder 1.5s ease-out infinite;
}
 
.wrapperid span:nth-child(1)  { animation-name: loading-1;  }
.wrapperid span:nth-child(2)  { animation-name: loading-2;  }
.wrapperid span:nth-child(3)  { animation-name: loading-3;  }
.wrapperid span:nth-child(4)  { animation-name: loading-4;  }
.wrapperid span:nth-child(5)  { animation-name: loading-5;  }
.wrapperid span:nth-child(6)  { animation-name: loading-6;  }
.wrapperid span:nth-child(7)  { animation-name: loading-7;  }
.wrapperid span:nth-child(8)  { animation-name: loading-8;  }
 
@keyframes rota {
    to { transform: rotate(360deg); }
}
 
@keyframes loading-1 {
    12.5% { opacity: 0.3; }
}
 
@keyframes loading-2 {
    25% { opacity: 0.3; }
}
 
@keyframes loading-3 {
    37.5% { opacity: 0.3; }
}
 
@keyframes loading-4 {
    50% { opacity: 0.3; }
}
 
@keyframes loading-5 {
    62.5% { opacity: 0.3; }
}
 
@keyframes loading-6 {
    75% { opacity: 0.3; }
}
 
@keyframes loading-7 {
    87.5% { opacity: 0.3; }
}
 
@keyframes loading-8 {
    100% { opacity: 0.3; }
}

/* ---------------- Progressbar ---------------- */

.meter {
        height: 28px;
        padding:0;
        position: relative;
        background: #555;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        line-height:18px;
}
.meter > span {
        display: block;
        height: 28px;
           -webkit-border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
               -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 4px;
                   border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            -webkit-border-top-left-radius: 4px;
         -webkit-border-bottom-left-radius: 4px;
                -moz-border-radius-topleft: 4px;
             -moz-border-radius-bottomleft: 4px;
                    border-top-left-radius: 4px;
                 border-bottom-left-radius: 4px;
        background-color: rgb(0,121,113);
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(0,121,113)),
          color-stop(1, rgb(40,161,153))
         );
        background-image: -moz-linear-gradient(
          center bottom,
          rgb(0,121,113) 37%,
          rgb(40,161,153) 69%
         );
        -webkit-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
}

.orange > span {
        background-color: #f1a165;
        background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
           -webkit-gradient(linear, 0 0, 100% 100%,
              color-stop(.25, rgba(255, 255, 255, .2)),
              color-stop(.25, transparent), color-stop(.5, transparent),
              color-stop(.5, rgba(255, 255, 255, .2)),
              color-stop(.75, rgba(255, 255, 255, .2)),
              color-stop(.75, transparent), to(transparent)
           );
        background-image:
                -moz-linear-gradient(
                  -45deg,
              rgba(255, 255, 255, .2) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, .2) 50%,
              rgba(255, 255, 255, .2) 75%,
              transparent 75%,
              transparent
           );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
           -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
               -moz-border-radius-topright: 8px;
            -moz-border-radius-bottomright: 8px;
                   border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            -webkit-border-top-left-radius: 8px;
         -webkit-border-bottom-left-radius: 8px;
                -moz-border-radius-topleft: 8px;
             -moz-border-radius-bottomleft: 8px;
                    border-top-left-radius: 8px;
                 border-bottom-left-radius: 8px;
        overflow: hidden;
}

.animate > span:after {
        display: none;
}

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

.meter > span:after, .animate > span > span {
	-webkit-animation: move 2s linear infinite;
}

.metertxt {
        position: relative;
        top:-24px;
        color:#D7FFA0;
        font-weight:normal;
        font-size:18px;
        text-shadow:1px 1px #000;
}

/* ---------------- Messagebox ---------------- */

.messagebox{
position:absolute;
width:100px;
margin-left:5px;
border:1px solid #c93;
background:#ffc;
padding:3px 5px;
max-width:300px;
font-weight:normal;
font-style:italic;
font-size:12px;
border-radius:8px;
top:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:5px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px 5px;
color:#008000;
max-width:300px;
border-radius:8px;
top:3px;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:5px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px 5px;
color:#CC0000;
max-width:300px;
border-radius:8px;
top:3px;
}

/* ---------------- Colors ---------------- */

.grey_color {color:grey;}
.red_color {color:red;}
.green_color {color:green;}