/**
 * CSS for dark colour scheme
 *
 * This file is only for colour properties. Everything else should go in sipitpro.css so we have the option of having different colour schemes later.
 *
 * @author     Kitson Consulting <contact at kitson-consulting dot co dot uk>
 * @copyright  2019-2024 SIPit Pro Limited
 * @date       03/07/2024
 * @licence    All rights reserved
 * @package    sipitpro-web
 * @see        https://gui.sipitpro.com/
 */

body
{
	background-color: #282828;
	color: #bbb;
}

a
{
	color: #17a2b8;
}

a:hover
{
	color: #0f6674;
}

.form-control,
.form-control:focus,
.btn-outline-light,
.btn-outline-light:disabled,
.btn-outline-light.disabled
{
	color: #ddd;
	border-color: #999;
}

.btn-outline-light:hover
{
	color: #212529;
	background-color: #f8f9fa;
	border-color: #f8f9fa;
}

.form-control,
.form-control:focus
{
	background-color: rgba( 0, 0, 0, 0.4 );
}

.form-control:focus
{
  border-color: #10707f;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.form-control:disabled,
.form-control[readonly]
{
	background-color: transparent;
	color: #444;
	border-color: #555;
}

.input-group-text
{
	color: #eee;
	background-color: rgba( 225, 255, 255, 0.1 );
	border-color: #aaa;
}

.navbar,
html.dashboard #main,
html.dashboard #main > .row > *,
html.dashboard #main > .row > *:last-child > *,
footer
{
	border-color: rgba( 255, 255, 255, 0.1 );
}

.navbar
{
	border-color: rgba( 0, 0, 0, 0.5 );
	background-color: rgba( 255, 255, 255, 0.1 );
}

footer
{
	background-color: rgba( 128, 128, 128, 0.1 );
}

.navbar-text
{
	color: #eee;
}


.dropdown-menu  .dropdown-header,
.dropdown-menu  .dropdown-divider,
nav .user-section #notification-menu .dropdown-menu .dropdown-item
{
	border-color: rgba( 255, 255, 255, 0.1 );
}

.dropdown-menu .dropdown-header,
.dropdown-menu a,
.dropdown-menu a:hover
{
	color: rgba( 255, 255, 255, 0.9);
}

nav .user-section #notification-menu .dropdown-item.unread,
nav .user-section #notification-menu .dropdown-item.unread:hover
{
	background-color: #6c757d;
	color: #f8f9fa;

}

nav .user-section #notification-menu .dropdown-item,
nav .user-section #notification-menu .dropdown-item:hover
{
	background-color: transparent;
	color: #bbb;
}

nav .user-section #notification-menu .dropdown-item .toggle-read
{
	color: #eee;
}

nav .user-section #notification-menu .dropdown-item .toggle-read:hover
{
	color: #fff;
}

#active-connections-container .codec .small,
.codec-name-small
{
	color: #999;
}


.btn-group .btn.fas
{
/*
	color: #cbd3da;
*/
	color: #ddd;
}

.btn-group .btn.fas:hover
{
	color: #f8f9fa;
}

.btn-group.show .btn.fas
{
	color: #999;
}


.dropdown-menu,
.ui-menu
{
	background-color: #555;
	border-color: #777 rgba( 0, 0, 0, 0.2 ) rgba( 0, 0, 0, 0.2 ) #777;

	-webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.6);
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.6);
}

.dropdown-item
{
	color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus
{
	color: #fff;
	background-color: rgba( 255, 255, 255, 0.1 );
}

nav .user-section .dropdown-menu .fas
{
	color: rgba( 255, 255, 255, 0.5	 );
}

.modal-content
{
	background-color: #333;
}

.modal .close
{
	color: #fff;
}

#toasts
{
	color: #333;
}

.card
{
	background-color: rgba( 255, 255, 255, 0.1 );
}

.help-collapse .card-header a
{
	color: #eee;
}

.codec,
.call
{
	background-color: rgba( 255, 255, 255, 0.1 );
	border-color: rgba( 255, 255, 255, 0.1 ) rgba( 0, 0, 0, 0.3 ) rgba( 0, 0, 0, 0.3 ) rgba( 255, 255, 255, 0.1 );
}


.call .details-heading,
.codec .details-heading
{
	color: #cbd3da;
}

.call .details,
.codec .details,
#new-call-content
{
	border-color: rgba(255, 255, 255, 0.1);
}

.connection-symbol-container .connection-symbol.line
{
	border-color: rgba( 255, 255, 255, 0.4 );
}


.codec-link,
.codec-link:hover,
.codec-link:focus
{
	color: #cbd3da;
}

#codec-status-content,
#credit-status-content
{
	background-color: rgba( 0, 0, 0, 0.2 );
	border-color: rgba( 0, 0, 0, 0.2 ) rgba( 255, 255, 255, 0.1 ) rgba( 255, 255, 255, 0.1 ) rgba( 0, 0, 0, 0.2 );
}

#start-call
{
	border-color: #28a745;
	color: #28a745;
	font-weight: bolder;
}

#start-call:hover
{
	background-color: #28a745;
	color: #ffffff;
}

.table-dark
{
	background-color: rgba( 0, 0, 0, 0.1 );
	color: #ddd;
}

.table-dark th,
.table-dark td,
.table-dark thead th
{
	border-color: rgba( 255, 255, 255, 0.1 );
}

.table-dark.table-striped tbody tr:nth-of-type(2n+1) {
	background-color: rgba(255, 255, 255, 0.025);
}

.table tfoot th
{
	border-top-width: 2px;
}

#call-log .date-group-range input[type=date]
{
	font-weight: bolder;
}

footer a
{
	color: #6c757d;
}

/*@-webkit-keyframes connection-active
{
	0%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
	50%
	{
		border-color: rgba( 23, 162, 184, 0.8 );
		color: rgba( 23, 162, 184, 0.8 );
	}
	100%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
}
@-moz-keyframes connection-active
{
	0%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
	50%
	{
		border-color: rgba( 23, 162, 184, 0.8 );
		color: rgba( 23, 162, 184, 0.8 );
	}
	100%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
}
@-ms-keyframes connection-active
{
	0%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
	50%
	{
		border-color: rgba( 23, 162, 184, 0.8 );
		color: rgba( 23, 162, 184, 0.8 );
	}
	100%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
}
@-o-keyframes connection-active
{
	0%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
	50%
	{
		border-color: rgba( 23, 162, 184, 0.8 );
		color: rgba( 23, 162, 184, 0.8 );
	}
	100%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
}*/
@keyframes connection-active
{
	0%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
	50%
	{
		border-color: rgba( 23, 162, 184, 0.8 );
		color: rgba( 23, 162, 184, 0.8 );
	}
	100%
	{
		border-color: rgba( 23, 162, 184, 0.4 );
		color: rgba( 23, 162, 184, 0.4 );
	}
}
@keyframes connection-ringing
{
	0%
	{
		border-color: rgba( 255, 0, 0, 0.4 );
		color: rgba( 255, 0, 0, 0.4 );
		width: 0;
	}
	50%
	{
		border-color: rgba( 255, 0, 0, 0.8 );
		color: rgba( 255, 0, 0, 0.8 );
		width: 50%;
	}
	100%
	{
		border-color: rgba( 255, 0, 0, 0.4 );
		color: rgba( 255, 0, 0, 0.4 );
		width: 100%;
	}
}

#client-dest-toggle,
#client-dest-toggle:hover,
#client-dest-toggle:focus,
#client-dest-toggle.show
{
	background-color: rgba( 0, 0, 0, 0.4 );
	border-color: #999;
	color: #ddd;
	box-shadow: none;
}

#client-dialled-numbers
{
	background-color: #fff;
}

#client-dialled-numbers a
{
	color: #212529;
}

#client-dialled-numbers a:hover
{
	background-color: #f8f9fa;
	color: #16181b;
}