/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

.outer-wrapper  {
    position: fixed;
    top: 36px;
	width: 100%;
	height: calc(100% - 36px);
	background-color:#f9f9f9;
}

.main-sidebar {
    z-index: 9999;
    position: absolute; /* Absolute means that it will be in relation to parent and we don't have to worry about the top menu*/
    left: 0px;
    width: 150px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #e8e8e8;
    transition: all 0.5s ease;
}

.main-sidebar.hidden {
    width: 0px;
}

.main-content {
	position: absolute;
    right: 0px; /* Position to the right means that we don't have to keep changing the left value */
	top: 0px; 
    height: 100%;
	width: calc(100% - 150px); /* 150px from sidebar */
	overflow: hidden; 
	padding: 0;
}
.main-sidebar.hidden + .main-content {
    width: 100%;
}

.inner-wrapper-dialer {
    transition: all 0.5s ease;
    position: absolute;
	width: 100%;
    height: calc(100% - 80px);
}

.dialer-sidebar {
    z-index: 9999;
    position: absolute; /* Absolute means that it will be in relation to wrapper-dialer and we don't have to worry about the top menu*/
    left: 0px;
    width: 200px;
	height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #e8e8e8;
    transition: all 0.5s ease;
    font-size: 12px;
}
.dialer-sidebar.hidden {
    width: 0px;
}

.dialer-chevron {
    position: absolute; /* Absolute means that it will be in relation to wrapper-dialer and we don't have to worry about the top menu*/
    left: 200px;
	top: 0px; 
	float: right; 
    width: 10px;
	height: 100%;
    overflow: hidden;
    background: #e8e8e8;
    /*transition: all 0.1s ease;*/
}
.dialer-sidebar.hidden + .dialer-chevron {
    left: 0px;
}
.dialer-chevron.hidden {
    width: 0px;
}

.dialer-sidebar + .dialer-chevron > #dialer-chevron-left {
    visibility: visible;
}
.dialer-sidebar + .dialer-chevron > #dialer-chevron-right {
    visibility: hidden;
}
.dialer-sidebar.hidden + .dialer-chevron > #dialer-chevron-left {
    visibility: hidden;
}
.dialer-sidebar.hidden + .dialer-chevron > #dialer-chevron-right {
    visibility: visible;
}

.dialer-content {
	position: absolute;
    right: 0px; /* Position to the right means that we don't have to keep changing the left value */
	top: 0px; 
    height: 100%;
	width: calc(100% - 210px);
}
.dialer-sidebar.hidden + .dialer-chevron + .dialer-content {
    width: calc(100% - 10px);
}
.dialer-sidebar.hidden + .dialer-chevron.hidden + .dialer-content {
    width: 100%;
}

.fill-space {
	position: absolute;
    left: 0px;
	top: 0px; 
    height: 100%;
	width: 100%;
}

.menu-item
{
    width:150px;
	cursor: pointer;
    background-color: #ec971f;
    border-left: 5px solid #BF760C;
	border-right-width: 0px;
    border-bottom-width: 0px;
    border-top-width: 0px;
    padding:5px;
    text-align:center;
    color:#FFFFFF;
    margin-top:5px;
}

.menu-item-sub
{
    width:150px;
	cursor: pointer;
    background-color: #ec971f;
    border-left: 5px solid #C24D00;
    padding:2px;
    text-align:center;
    color:#FFFFFF;
}

.menu-item-sub:hover
{
    background-color: #C24D00;
}

.menu-item-sub-selected
{
    width:150px;
	cursor: pointer;
    background-color: #C24D00;
    border-left: 5px solid #C24D00;
    padding:2px;
    text-align:center;
    color:#FFFFFF;
}

.menu-item:hover
{
    background-color:#f0ad4e;
	color:#FFFFFF;
}

.menu-item-dial
{
    width:150px;
	cursor: pointer;
    background-color:#E80;
    border-left: 5px solid #A20;
    padding:5px;
    text-align:center;
    color:#EEE;
	margin-top:5px;
}

.menu-item-dial:hover
{
    background-color:#333;
}

.menu-item-disabled
{
	cursor: not-allowed;
    background-color:#FFE6D5;
    border-left: 5px solid #4C4C4C;
    color:#A3A3A3 !important;	
}

.menu-item-disabled:hover
{
    color:#A3A3A3 !important;	
	background-color:#FFE6D5;
}

.menu-logo
{
	height:36px;
	text-align:center;
	width:150px;
	
}
/*
@media(min-width:8px) {
    #wrapper {
        padding-left: 150px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 150px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }
}*/

.fa-menu-item
{
	color:#FFF;
}

.fa-menu-item-disabled
{
	color:#A3A3A3;
}

html
{
	background-color:#F9F9F9;
	font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.top-menu
{
  background-color: #000000; 
  position: fixed;
  left: 0;
  width: 100%;
  height: 36px;
  top: 0;
  padding: 1px;
  z-index: 9999;
  
 /* display: block;
	float: none; */
	
	display: inline;
}

.top-menu-icon
{
	padding:3px;
	color:#4d4d4d;
	float:right;
    text-align:center;
	margin-left: 5px;
	width:80px;
	height:36px;
	line-height: 30px;
	display:inline-block;
	font-size: 28px;
}

.top-menu-div
{
	padding: 4px;
	float:left;
    text-align:center;
	margin-left: 5px;
	width:40px;
	height:36px;
	display:inline-block;
	font-size: 24px;
}

#wise-menu-chat-icon
{
    color : rgb(128, 128, 128);
}

.top-menu-icon-clickable
{
    cursor: pointer;
}

.top-menu-icon-clickable:hover
{
    background-color:#333;
}

.wise-dialing-foot {
    border-top: 5px solid #C24D00;
    position:fixed;
    width: 100%;
	height:80px;
    z-index: 10001;
    font-size:10px;
    color: #FFF;
    background: #000;
    left: 0px;
    bottom: 0px;
	white-space: nowrap;
    overflow-x: hidden; 
	overflow-y: hidden; 
}

.menu-user-text
{
	text-align:center;
	font-size:12px;
	padding-bottom:5px;
	padding-top:5px;
	font-weight:bold;
}

#linkFrame
{
	width:100%;
	height:900px;
}

#wise-dialing-spinner
{
  text-align: center;
  /*margin: auto;
  width: 100%;
  height: 100%;
  top: 40%;
  position: fixed;*/
 
}

.agentDialingBtns
{
    border: 0;
    pointer-events: all;
	cursor: pointer;
    background-color:#000;
    /*border-left: 2px solid #E80;*/
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
    color:#EEE;
	display:inline-block;
}

.agentDialingBtns:hover
{
	cursor: pointer;
    background-color:#E80;
    color:#EEE;
}

.agentDialingBtns:disabled {
    border: 0;
    pointer-events: none;
    cursor: auto;
    color: #555;
}

.agentDialingBtnsDisabled
{
    border: 0;
    pointer-events: none;
    cursor: auto;
    color: #555;
}

.agentDialingBtns:disabled i {
    color: #222 !important;
}

.agentDialingBtns:disabled i:last-child {
    color: #111 !important;
}

.agentDialingBtnsDisabled i {
    color: #222 !important;
}

.agentDialingBtnsDisabled i:last-child {
    color: #111 !important;
}

#sidebarHideBtn:hover 
{
    background: lightgrey !important;
}

.flexcolumn {
	height: 100%; 
	display: flex; 
	flex-direction: column; 
	align-content: stretch; 
	align-items: stretch;
}

.flexitem {
	flex: 0 1 auto;
	position: relative !important;
}

.flexstretch {
	flex: 1 1 auto;
	position: relative !important;
}