.popup_link {
	border-bottom:1px dotted #000;
	cursor: pointer;
}

.popup_text {
}


:root{
    --border-radius:10px;
    --border-radius-horizontal:10px;
}

/*  Devices table */
.devices_wrapper {
	width:100%; 
	height:65vh;
	text-align:center;
	margin-left:10px;
	margin-right:10px;
	border:0px solid #DDD;
	overflow-y:scroll;
}

/* SLIDER TOGGLE */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(116px);
  -ms-transform: translateX(116px);
  transform: translateX(116px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Users admin page */
.div_table          {
    display:table;
    
    border-collapse:collapse;
    margin-left:15px;
    top:0; 
    border-spacing: 0;
    box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -webkit-border-radius:var(--border-radius);
    -moz-border-radius:var(--border-radius);
    border-radius:var(--border-radius);
    margin:0 auto;
    
}
.div_table .table-horizontal {
    -webkit-border-radius:var(--border-radius-horizontal);
    -moz-border-radius:var(--border-radius-horizontal);
    border-radius:var(--border-radius-horizontal);
    float:left;
}
.sub_table_group{
    display:none;
    height:860px;
    width:890px;
    color:green;
    margin:0 auto;
}

.div_table_wrapper  {margin:0 auto;}
.div_table .thead   {display:block;}
.div_table.table-horizontal .thead   {display:table-header-group;}

.div_table .tbody   {display:block; overflow-y:auto; max-height:300px;}
.div_table.table-horizontal .tbody   {display:table-row-group;}

.div_table .tfoot   {display:block;}
.div_table .invalid {border:1px solid red;}
.div_table .tr, .div_table .tr_expanded {display:table-row;}
.div_table .tbody .tr:hover {background-color:yellow;}
#filtering_table .tr:hover {background-color:white;}
.sub_table_group .div_table .tbody .tr:hover {background-color:white;}
.div_table .th-sub,
.div_table .th      {display:table-cell;
                    text-align:left;
                    background: #0a2844; 
                    color:white; 
                    font-size:14px; 
                    padding:3px 5px;
}
.div_table .th-sub-cat
                    {display:table-cell;
                    text-align:left;
                    background: #0a2844; 
                    color:white; 
                    font-size:14px; 
                    padding:3px 5px;
                    border-radius:0;
}
.div_table .td.uid_title input{
    color:white;
}
.div_table .td.uid_title {
    color:white;
    background: #0a2844;
}
.div_table a{
    text-decoration:none;
}

.div_table .th-sub      {background:#f7f7f7; color:black;}
.div_table .th-sub-cat  {background:#0a2844; color:white;}
.div_table .td          {display:table-cell; padding:3px 5px;; text-align:left;}

.div_table input, .div_table option    {background-color:transparent;  border:0; padding:0 0 0 5px; width:100%; height:25px;}


.div_table .th:last-child{-webkit-border-radius:0 var(--border-radius) 0 0 / 0 var(--border-radius) 0 0; -moz-border-radius:0 var(--border-radius) 0 0 / 0 var(--border-radius) 0 0; border-radius:0 var(--border-radius) 0 0 / 0 var(--border-radius) 0 0;}
.div_table .th:first-child{-webkit-border-radius:var(--border-radius) 0 0 0 / var(--border-radius) 0 0 0; -moz-border-radius:var(--border-radius) 0 0 0 / var(--border-radius) 0 0 0; border-radius:var(--border-radius) 0 0 0 / var(--border-radius) 0 0 0;}
.div_table .tr:last-of-type .td:last-child{-webkit-border-radius:0 0 var(--border-radius) 0 / 0 0 var(--border-radius) 0; -moz-border-radius:0 0 var(--border-radius) 0 / 0 0 var(--border-radius) 0; border-radius:0 0 var(--border-radius) 0 / 0 0 var(--border-radius) 0;}
.div_table .tr:last-child .td:first-child{-webkit-border-radius:0 0 0 var(--border-radius) / 0 0 0 var(--border-radius); -moz-border-radius:0 0 0 var(--border-radius) / 0 0 0 var(--border-radius); border-radius:0 0 0 var(--border-radius) / 0 0 0 var(--border-radius);}

/* Horizontal tables */
.div_table .tbody-horizontal .th:first-child    {-webkit-border-radius:var(--border-radius) 0 0 0 / var(--border-radius) 0 0 0; -moz-border-radius:var(--border-radius) 0 0 0 / var(--border-radius) 0 0 0; border-radius:var(--border-radius) 0 0 0 / var(--border-radius) 0 0 0;}
.div_table .tbody-horizontal .th:last-child     {-webkit-border-radius:0 var(--border-radius) 0 0 / 0 var(--border-radius) 0 0; -moz-border-radius:0 var(--border-radius) 0 0 / 0 var(--border-radius) 0 0; border-radius:0 var(--border-radius) 0 0 / 0 var(--border-radius) 0 0;}

.div_table .tbody-horizontal .tr:last-child .th-sub:first-child {-webkit-border-radius:0 0 0 var(--border-radius) / 0 0 0 var(--border-radius); -moz-border-radius:0 0 0 var(--border-radius) / 0 0 0 var(--border-radius); border-radius:0 0 0 var(--border-radius) / 0 0 0 var(--border-radius);}
.div_table .tbody-horizontal .tr:last-child .td:last-child      {-webkit-border-radius:0 0 var(--border-radius) 0 / 0 0 var(--border-radius) 0; -moz-border-radius:0 0 var(--border-radius) 0 / 0 0 var(--border-radius) 0; border-radius:0 0 var(--border-radius) 0 / 0 0 var(--border-radius) 0;}

/* Guard calls */
.guard_table                          {display:table; font-size:12px; width:885px; margin:0 auto;}
.guard_table .thead                   {}
.guard_table .tbody                   {max-height:800px;margin-right:-20px;}
.guard_table .td, .guard_table .th    {display:table-cell; box-sizing: border-box; font-size:12px;}
.guard_table .td-sub                  {display:table-cell; box-sizing:border-box; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.td_green                             {color:green; font-weight:bold;}
.td_yellow                            {background-color:yellow;}
.td_red                               {background-color:red; color:white; font-weight:bold;}
.guard_table .tbody .tr:hover         {background-color:#f7f7f7; cursor:pointer;}
.guard_table .tr_expanded             {width:876px; display:inline-block; border-bottom:1px solid #CDCDCD;}
.td_expanded_description              {width:100%; text-align:left; padding-left:10px; display:table-cell;}
.td_expanded_description              {width:100%; text-align:left; padding-left:10px; display:table-cell;}
.td_expanded_map                      {width:400px; text-align:left; padding-left:10px;float:left;}
.td_expanded_map .map                 {height:180px;}
span.thumbnail                        {float:right; height:70px;}
img.thumbnail                         {height:60px; padding:5px;
                                       box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
                                       -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
                                       -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
                                       -webkit-border-radius:var(--border-radius);
                                       -moz-border-radius:var(--border-radius);
                                       border-radius:var(--border-radius);
                                      }
img.qr_code.thumbnail                 {height:25px;}
img.qr_code                           {height:150px;}
.qr_code                              {padding:5px;}

.guard_table .col_uid .td             {background:#f7f7f7;}
.guard_table .col_uid                 {width:50px; text-align:center;}
.guard_table .col_area                {width:90px;}
.guard_table .col_site                {width:150px;}
.guard_table .col_guard_clientcode    {width:80px;}
.guard_table .col_guard_area          {width:40px;}
.guard_table .col_onsite              {width:120px;}
.guard_table .col_offsite             {width:120px;}
.guard_table .col_duration            {width:90px;}
.guard_table .col_description         {width:200px;}
.guard_table .col_description .container {padding:0; margin:0;width:190px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; display:block;}
.guard_table .col_incident            {width:80px; text-align:center;}
.guard_table .col_resolved            {width:90px;}
.guard_table .col_gps_coords          {width:35px; text-align:center;}
.guard_table .col_guard               {width:150px; text-align:center;}


/* Radius table */
.radius_table                       {display:table; font-size:12px; width:1040px; margin:0 auto;}
.radius_table.reseller_table        {width:1030px;}
.radius_table .tbody                {margin-right:-20px;}
.radius_table .tbody                {display:block; overflow-y:scroll; max-height:600px;}
.radius_table .cell_user            {width:140px;}
.radius_table .cell_pass            {width:150px;}
.radius_table .cell_service         {width:150px;}
.radius_table .cell_service select  {width:90%;}
.radius_table .cell_region          {width:130px;}
.radius_table .cell_region select   {width:100%;}
.radius_table .cell_ip_addr         {width:130px;}
.radius_table .cell_ip_addr select  {width:90%;}
.radius_table .cell_owner           {width:120px;}
.radius_table .cell_reseller        {width:120px;}
.radius_table .cell_reseller select {width:90%;}
.radius_table .cell_status          {width:40px; text-align:center;}
.radius_table .cell_action          {width:90px; text-align:center;}

/* Key table */
.key_table                       {display:table; font-size:12px; width:1000px; margin:0 auto;}
.key_table .tbody                {margin-right:-20px;}
.key_table .td                   {margin-right:-20px; vertical-align:middle;}
.key_table .tbody                {display:block; overflow-y:scroll; max-height:600px;}

.key_table .cell_qr              {width:55px; vertical-align:middle;}
.key_table .cell_category        {width:60px;}
.key_table .cell_colour          {width:90px;}
.key_table .cell_number          {width:90px;}
.key_table .cell_clientnumber    {width:130px;}
.key_table .cell_aw_id           {width:70px;}
.key_table .cell_address         {width:180px;}
.key_table .cell_status          {width:120px;}
.key_table .cell_action          {width:90px; text-align:center;}

.key_table .col_qr              {width:55px;}
.key_table .col_category        {width:60px;}
.key_table .col_colour          {width:90px;}
.key_table .col_number          {width:90px;}
.key_table .col_clientnumber    {width:130px;}
.key_table .col_aw_id           {width:70px;}
.key_table .col_address         {width:180px;}
.key_table .col_status          {width:120px;}
.key_table .col_action          {width:90px; text-align:center;}

.row_action img,
.row_action_edit img               {vertical-align:middle;}


/* Provisioning page */
.div_table#devices_table     {   margin-left:15px; border-collapse:collapse;
                            top:0; 
                            border-spacing: 0;
                            box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
                            -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
                            -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
                            margin:0 auto;
                            width:1054px;
                        }
                        
#devices_table .tbody {
    overflow-y:auto;
    overflow-x:hidden;
    max-height:400px;
    min-height:200px;
    display:block;
}

:root{
    --width-mac:            160px;
    --width-extension:      80px;
    --width-secret:         280px;
    --width-model:          190px;
    --width-line:           70px;
    --width-reseller:       160px;
    --width-action:         90px;
    
}

    /* Header and column headers */
        /* Curved borders */
        
        
        #devices_table .devices_col {text-align:left; background: #0a2844; color:white; font-size:16px; padding:1px 0px 5px 7px; vertical-align:middle;}
        #devices_table .td.col_extension {text-align:left; padding:0px 0px 0px 10px;}
    
    /* Rows */
        #devices_table .tr.new_row, #devices_table thead tr {height:30px; border-bottom: 0;}
        #devices_table .tbody .tr:nth-child(even)   {background: #f7f7f7;}
        #devices_table .tr.gen_row:hover     {height:36px; background-color:yellow;}
        #devices_table .div_table .tr       {height:36px;}
        #devices_table .div_table .th,
        #devices_table .div_table .td {display:table-cell; padding:0; text-align:left;}
    
    /* Inputs */
        #devices_table .add_row         {display:none;}
        
        #devices_table .cell_mac,        #devices_table .new_mac                {padding:2px; width:var(--width-mac)}
        #devices_table .cell_extension,  #devices_table .new_extension          {padding:2px; width:var(--width-extension);}
        #devices_table .cell_secret,     #devices_table .new_secret             {padding:2px; width:var(--width-secret);}
        #devices_table .cell_model,      #devices_table .new_model              {padding:2px; width:var(--width-model);}
        #devices_table .cell_reseller_uid,   #devices_table .new_reseller_uid   {padding:2px; width:var(--width-reseller);}
        #devices_table .cell_line,       #devices_table .new_line               {padding:2px; width:var(--width-line);}
        #devices_table .cell_action,        #devices_table .new_action          {padding:2px; width:var(--width-action); vertical-align:middle;}
        
        #devices_table .h_mac          {padding:2px; width:var(--width-mac);}
        #devices_table .h_extension    {padding:2px; width:var(--width-extension);}
        #devices_table .h_secret       {padding:2px; width:var(--width-secret);}
        #devices_table .h_model        {padding:2px; width:var(--width-model);}
        #devices_table .h_line         {padding:2px; width:var(--width-line);}
        #devices_table .h_reseller_uid {padding:2px; width:var(--width-reseller);}
        #devices_table .h_action       {padding:2px; width:var(--width-action);}
        
        #devices_table .col_mac          {padding:2px; width:var(--width-mac);}
        #devices_table .col_extension    {padding:2px; width:var(--width-extension);}
        #devices_table .col_secret       {padding:2px; width:var(--width-secret);}
        #devices_table .col_model        {padding:2px; width:var(--width-model);}
        #devices_table .col_line         {padding:2px; width:var(--width-line);}
        #devices_table .col_reseller_uid {padding:2px; width:var(--width-reseller);}
        #devices_table .col_action       {padding:2px; width:var(--width-action);}
        
        #devices_table .add_el,
        #devices_table .row_data    {   float:left;
                                        font-size:16px;
                                        color:black;
                                        height:30px;
                                        padding-left:0;
                                        margin:0;
                                        border:0;
                                        vertical-align:middle;
                                    }

        #devices_table .row_data                    {background-color:transparent;  border:0;}
        #devices_table .row_data .editing option,
        #devices_table .row_data .editing           {font-weight:bold;              font-size:13px;}
        
        #devices_table .new_model select:invalid	{color:gray;}
    
    /* Main Table */
        #devices_table div.row_action, #devices_table div.row_action_edit{height:20px;}
        #devices_table .col_lastupdate  {width:130px;}
        #devices_table .row_action,
        #devices_table .row_action_edit {vertical-align:middle;}
        #devices_table span.row_new                     {padding:2px; height:35px;}
        
.online_state {
	color:blue;
}

.offline_state {
	color:red;
}

/* Key states */
.signed_out.overdue
{
    background-color:red;
    font-weight:bold;
    color:white;
}
.signed_out
{
    background-color:#C7F2D2;
    color:black;
}

input.input_error,
select.input_error
{
    background-color:#FFA6A6;    
}

input.input_success,
select.input_success
{
    background-color:#C7F2D2;
}

input.input_warn,
select.input_warn
{
    background-color:#FFF294;
}