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

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}


html, body { font-family: "GT-Walsheim", sans-serif; font-size: 14px; font-weight: 100; color: #333; line-height: 1.4em; }
.wrapper { margin: 0 auto; width: 100%; max-width: 1200px; min-width: 766px; position: relative;}

body {background: #f4f4f4; padding-top: 52px;}
#barrier {position: fixed; top: 0; left: 0; height: 100%; width: 100%; min-height: 100vh; min-width: 100vw; background: #eee; z-index: 1000; }
#view { float: left; width: calc(100% - 60px); margin-left: 30px; margin-right: 30px;}
#page-holder > .wrapper { background: #fff; border-left: 185px solid #484940; min-height: calc(100vh - 52px); }

/* hide dashboard when redirecting. prevents dashboard from showing briefly */
body.redirect #dashboard { display: none; }

/* styles for web view in app. makes add subscriber page mobile friendly */

body.app-web-view { padding-top: 0 }
body.app-web-view .web-view-hide, body.app-web-view .header, body.app-web-view .footer, body.app-web-view .sidebar { display: none; }
body.app-web-view #newSubscriberForm .btn-default { display: none; }
body.app-web-view .panel-head { display: none; }
body.app-web-view .panel-body .btn-primary:not([disabled]) { background-color: gray; }
body.app-web-view .panel-body .loader { color: #000; }

input#cameras { text-align: center; }
/* end web view styles */

/* Typography */

h1, h2, h3, h4, h5 {font-weight: 300; color: #ec6d54; }
h2 { font-size: 23px; }
#marketing-materials h2 { margin-top: 30px; }
.material-title h5 { font-weight: 500; }

h2.grey, h3.grey, h4.grey {color: #555;}
span.orange { color: #ec6d54; }
h2.warn, h3.warn, h4.warn { color: #9b0101; }

.success { color: #9fcc43;}
.warn { color: #9b0101;}

.info-text { font-weight: 100;}

th, b, label, strong, .strong { font-weight: 300; }
p.leader { font-weight: 300; font-size: 15px;}

a:focus { outline: none !important; text-decoration: underline;  }
text-danger a { color: inherit; }

tr:active { outline: none; }

/* pay with card button */
#pay-invoice {
    float: right;
}

/* spinner styles borrowed by .btn-spinner */
#pay-invoice-spinner, .btn-spinner .spinner {
    display: none;
    height: 18px;
    width: 18px;
    animation: rotate 0.8s infinite linear;
    border: 3px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
}
  
@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}


@font-face {
  font-family: 'GT-Walsheim';
  src: url('../fonts/GT-Walsheim-Regular.eot') format('embedded-opentype'),
       url('../fonts/GT-Walsheim-Regular.woff') format('woff'),
       url('../fonts/GT-Walsheim-Regular.woff2') format('woff2'),
       url('../fonts/GT-Walsheim-Regular.ttf') format('truetype'),
       url('../fonts/GT-Walsheim-Regular.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'GT-Walsheim';
  src: url('../fonts/GT-Walsheim-Bold.eot') format('embedded-opentype'),
       url('../fonts/GT-Walsheim-Bold.woff') format('woff'),
       url('../fonts/GT-Walsheim-Bold.woff2') format('woff2'),
       url('../fonts/GT-Walsheim-Bold.ttf') format('truetype'),
       url('../fonts/GT-Walsheim-Bold.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}


.header {
    background-color: #e4e2e3;
    border-bottom: solid 0 #d6d4d5;
    height: 52px;
    font-weight: 300;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 12;
 }

.header .wrapper { height: 100%; }

.header .menubar { display: inline-block; position: absolute; right: 0; top: 0; font-weight: 300}
.header .logo { display: flex; align-items: center; position: absolute; left: 5px; width: 200px; height: 100%; }
.header .logo img { max-width: 100%; max-height: 45px; }
.header .logo .manythinglogo { max-height: 28px; }
.header .logo:hover, .header .logo:focus { opacity: 0.9;}
.header .logo.custom { height: 46px; top: 3px; }
.header .menubar a { display: inline-block; font-size: 16px; height: 52px; border-bottom: solid 2px transparent; padding: 15px 10px; color: #333; margin: 0 10px;  }
.header .menubar a.selected { border-bottom: solid 2px #ef6c4f; }
.header .menubar a:hover {color: #111; }
.header .menubar button { margin-left: 10px; font-size: 16px;  padding: 4px 10px;}
.header .btn-trans:hover, .header .btn-trans:active { background: transparent; color: #111; box-shadow: none;}
.header .dropdown.open .btn-trans { background: transparent; color: #111;}
.header .menubar .username { color: #75bcc5; position: absolute; right: 118px; top: 0px; font-size: 12px;}
.header .usermenu { position: absolute; right: 0; top: 11px;}
.header .usermenu i.fa-user { margin-right: 4px; }
.header .usermenu i.fa-angle-down { margin-left: 3px; vertical-align:-1px; }
.header .usermenu .dropdown-menu { left: auto; right: 0; }

.footer { text-align: center; background: #e4e2e3; padding: 10px 0;  }


/* Sidebar */
.sidebar { width: 185px; height: 100%; min-height: calc(100vh - 100px); padding-top: 20px; position: absolute; top: 0px; left: auto; margin-left: -185px; z-index: 1; overflow: hidden;}
.sidebar ul{position:absolute; width: 100%}
.sidebar li { display: block; width: 100%;}
.sidebar li:focus { outline: none; }
.sidebar li a { display: block; width: 100%; font-size: 15px; color: #B2B3B1; font-weight: 300; padding: 10px 30px; position: relative; margin-bottom: 5px;}
.sidebar li a:hover, .sidebar li a:focus  {color: #fff; text-decoration: none;}
.sidebar li a.selected { background: #EC6D54; color: #fff;}
.sidebar li a:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 18px solid #fff;
    position: absolute;
    right: -50px;
    top: 5px;
    transition: right 0.3s ease-in-out;
    transition-delay: 0s;
}

.sidebar li a.selected:after { right: -5px; color:#e4e2e3 }
.sidebar hr { margin: 15px 0; }
input[text=true]{

  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
table th a{
    color: black
}
th{display:table-cell;vertical-align:middle;}
/* Panels */
input.slimField{
    width:50px!important;
}
input.wideField{
    width:330px!important;
}
.panel-head { display: flex; flex-wrap: wrap;  justify-content: space-between; align-items: center; border-bottom: 1px solid #e1e1e0; padding: 5px 0; position: relative;}
.panel-head h2 { display:inline-block;}
.panel-head .new-link { margin-left: 8px; padding: 5px 10px 6px; font-size: 14px; color: #484940; font-weight: 300; display: inline-block; vertical-align: 1px;}
.panel-head .new-link i { margin-right: 8px; font-size: 20px; opacity: 0.5; vertical-align: -3px}
.panel-head .new-link:hover, .panel-head .new-link:focus { color: #222; background: #eee; }
.panel-body { padding: 10px 0 10px ; position: relative; }
.panel-body.tight { padding-top: 10px; }
.panel-head .buttons { position: absolute; right: 0; }

.panel-tools { display: flex; flex-wrap: wrap; padding: 10px 0 0; }
.panel-tools .search { margin-bottom: 5px; }
.panel-tools .toolbar-item { margin-bottom: 10px; margin-right: auto; }

.panel-tools .checkbox { display: inline-block; width: auto; max-width: 400px; margin-bottom: 0; }
.panel-tools .checkbox label { width: auto; white-space:nowrap; }

.panel-body .rhs-summary { position: absolute; top: 30px; right: 0px; height: auto; width: 200px; background: #f5f5f5;}
.panel-body .rhs-summary section { border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 0 rgba(255,255,255,1); padding: 18px;}
.panel-body .rhs-summary section:last-child { border-bottom: 0px solid transparent; box-shadow: none;}

.count { display: inline-block; margin-right: 20px; font-weight: 300; color: #00B3FB; vertical-align: 10px;}


@media (max-width: 950px) {

    .panel-body .rhs-summary {position: relative; top: auto; right: auto; width: 100%; }

}

.info { background: #f5f5f5; padding: 20px;}


/* tables */
.table-container { overflow: auto; }
/* ridiculously specific selectors to override bootstrap grrr */
.table>thead>tr>th { background: #f5f5f5; border-bottom: 1px solid #d8d8d8; vertical-align: bottom; padding-top: 12px; padding-bottom: 4px;}
.table>tbody>tr>td { vertical-align: middle;}

.table .btn { padding: 2px 5px; margin-top: -2px;}
.table.clickable-rows tbody tr:hover { background: #f5f5f5; cursor: pointer;}
.table.clickable-rows tbody tr:hover .btn-trans-orange { background: #ec6d54; color: #fff; }

.table.clickable-rows td:last-child, .table.clickable-rows th:last-child { width: 50px;}

.table>tbody+tbody { border-top: 0px solid transparent;}

.table.align-top >tbody>tr>td { vertical-align: top;}


/* tables with fixed headers */

.table.fixed-headers {
	width: 730px;
	table-layout: fixed;
	border-collapse: collapse;
    border: 7px solid #f5f5f5;
}

.table.fixed-headers>tbody>tr:first-child>td { border-top: none;}

.fixed-headers th,
.fixed-headers td {
	padding: 5px;
}
.fixed-headers td:nth-child(1),
.fixed-headers th:nth-child(1) {
	min-width: 140px;
}
.fixed-headers td:nth-child(2),
.fixed-headers th:nth-child(2) {
	min-width: 100px;
}
.fixed-headers td:nth-child(3),
.fixed-headers th:nth-child(3) {
	min-width: 150px;
}
.fixed-headers td:nth-child(4),
.fixed-headers th:nth-child(4) {
	min-width: 160px;
}
.fixed-headers td:nth-child(5),
.fixed-headers th:nth-child(5) {
	width: 160px;
}

.fixed-headers thead tr {
	display: block;
	position: relative;
}
.fixed-headers tbody {
	display: block;
	overflow: auto;
	width: 100%;
	height: 300px;
}

.old-ie-wrapper {
	height: 300px;
	width: 750px;
	overflow-x: hidden;
	overflow-y: auto;
}
.old-ie-wrapper tbody {
	height: auto;
}

.stripe-button-el{
    float:right;
}

.table.subscription-summary { width: auto;}

.table.subscription-summary th, .table.subscription-summary td { text-align: center; width: 160px; line-height: 30px;}
.table.subscription-summary td { line-height: 45px;}

.table.subscription-summary td:nth-child(2) { border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.table.subscription-summary tr:last-child td {border-bottom: 1px solid #ddd;}



/* Icon summaries */
.icon-summary { font-size: 40px; display: inline-block; margin-right: 100px; line-height: 80px; }
.icon-summary i { color: #ddd; margin-right: 5px; }
.icon-summary i.fa-video-camera { font-size: 48px; vertical-align: -7px;}



/* Modals */
.modal-dialog.dialog { width: 500px; }
.modal-dialog.dialog .modal-body { padding: 30px 30px; min-height: 160px;  }

.modal-dialog .modal-body { padding: 25px 25px 30px; min-height: 120px;  }

.modal-content { border-radius: 0; border: 1px solid rgb(116, 116, 116); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.21);}
.modal-content .close { font-family: 'Arial', sans-serif !important; }
.modal-content h3 { font-size: 21px;}

.modal-header { padding: 15px 15px 10px; }

#accountHistoryModal .modal-dialog {width: 750px;}
#pdfViewerModal .modal-dialog {width: 750px;}
#accountHistoryModal .modal-dialog .modal-body { min-height: 394px; padding: 10px 15px;}

/* Buttons */
.btn { border: none; border-radius: 0; font-weight: 300; font-size: 16px; min-height: 38px; }
.btn:active { box-shadow: inset 0 3px 32px rgba(0,0,0,.05); }

.btn[disabled], .btn[disabled]:hover  { background: #d5d5d5; color: #aaa; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); pointer-events: none;}

/* .btn-primary, .btn-primary:active, .btn-primary:active:focus { background: #f16e50; color: #fff;}
.btn-primary:hover, .btn-primary:focus { background: #e15738;}

.btn-default, .btn-default:active, .btn-default:active:focus { background: #e4e2e3; color: #333; }
.btn-default:hover, .btn-default:focus { background: #dadada;} */

.btn-trans, .btn-trans:active .btn-trans:active:focus { background: transparent; color: #333;  }
.btn-trans:hover, .btn-trans:focus, .dropdown.open .btn-trans { background: rgba(0,0,0,0.05);}

.btn-trans-orange, .btn-trans-orange:active, .btn-trans-orange:active:focus { background: transparent; color: #ec6d54;  }
.btn-trans-orange:hover, .btn-trans-orange:focus { background: #ec6d54; color: #fff;}

.btn-icon, .btn-icon:active, .btn-icon:focus  { padding: 5px 3px;  background: transparent; color: #bbb; font-size: 20px; box-shadow: none !important;}
.btn-icon:hover { background: transparent; color: #999;  }

/* btn-primary, btn-default, and btn-blue are all the same. They will have blue gradient on Videoloft site. All three and btn-purple will be set to main colour on other sites. */
.btn-primary, .btn-primary:active, .btn-default, .btn-default:active, .btn-blue, .btn-blue:active, .btn-purple, .btn-purple:active, .btn-white, .btn-white:active, .btn-grey, .btn-grey:active {
  height: 46px; 
  /* margin: 30px auto 0;  */
  border: none; 
  border-radius: 35px; 
  color: white; 
  font-weight: bold; 
  padding: 0 30px;
  box-shadow: none;
}

.btn-white, .btn-white:active, .btn-white:focus, .btn-grey, .btn-grey:active, .btn-grey:focus {
  color: black;
}

.btn-white, .btn-white:active {
  background-color: white;
}

.btn-grey, .btn-grey:active {
  background-color: #ECECEC;
}

.btn-primary:hover, .btn-primary:focus, .btn-default:hover, .btn-default:focus, .btn-blue:hover, .btn-blue:focus, .btn-purple:hover, .btn-purple:focus {
  color: white;
}

.btn-primary, .btn-primary:active, .btn-default, .btn-default:active, .btn-blue, .btn-blue:active {
  background-image: -webkit-gradient(linear,left top, right top,from(#3343d3),to(#34cac6)); 
  background-image: -o-linear-gradient(left,#3343d3,#34cac6); 
  background-image: linear-gradient(to right,#3343d3,#34cac6); 
}

.btn-purple, .btn-purple:active {
  background-image: -webkit-gradient(linear,left top, right top,from(#3343d3),to(#ae50db)); 
  background-image: -o-linear-gradient(left,#3343d3,#ae50db); 
  background-image: linear-gradient(to right,#3343d3,#ae50db); 
}

/* Set text to transparent so button keeps width */
.btn-spinner.loading {
  color: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.btn-spinner.loading .spinner {
  display: block;
  position: absolute;
  margin: auto;
}

.btn-white.btn-spinner .spinner {
  border-color: black;
  border-right-color: transparent;
}


.btn + .btn { margin-left: 10px; }
.btn.min-width { min-width: 88px;}

.btn-icon + .btn-icon {margin-left: 0; }

.btn-small { font-size: 14px; min-height: 28px;}

button:focus { outline:0 !important; }
.btn:focus {outline:0 !important;}

.input-group-btn .btn { min-height: 34px; height: 34px; max-height: 34px; }
/* .input-group input {border-right: none !important; } */
.input-group input:focus {  outline: none !important; }

.input-group.search { float: right; width: 250px;}
.input-group.staff-search {width: 200px}
.input-group.search input {padding-right: 33px; }
.input-group.search i.fa { vertical-align: -2.5px;}
.input-group.search .clear-search { position: absolute; right: 45px; z-index: 30;top: 1px; font-size: 20px; cursor: pointer; opacity: 0.25; padding: 5px;}
.input-group.search .clear-search:hover { opacity: 0.5; }

.bootbox-modal .modal-dialog{
    width:400px;

}

#invoices-table button { margin-top: 10px; }


/* toolbar */


.toolbar-item { display: inline-block; padding-top: 10px; min-height: 25px;}
.toolbar-item. label { min-height: 25px; margin-bottom: 0;}
.toolbar-item .radio-inline label { font-weight: 100; margin-bottom: 0; min-height: 0;}

/* Dropdowns */

.dropdown-menu { border-radius: 0;border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 0px rgba(0,0,0,0.15); max-height: 150px; overflow-x: auto }

.dropdown-menu>li>a {padding: 8px 20px;  }

.dropdown-menu .divider { margin: 2px 0;}

/* forms */
.form-control { border-radius: 0; box-shadow: none; }
.form-control:focus {border: 1px solid #ccc; box-shadow: none; }
.form-group { margin-bottom: 27px;}
.form-group label { display: inline-block;  width: 160px; margin-right: 20px;}
.form-group label .info-text { padding-left:10px;padding-top: 10px; font-size: 90%; line-height: 1.3em; display: inline-block;}
.form-group label .small { font-weight: 100; color: #555; }

.form-group .no-label {margin-left: 175px; }

.form-group .form-control { display: inline-block; width: 270px; }
.form-group .form-control.tiny { display: inline-block; width: 50px; }
.form-group .form-control.small { display: inline-block; width: 75px; }


.form-control[readonly] {
    background-color: transparent;
    opacity: 1;
    color:#333;
    border: 1px solid transparent;
    padding-left: 0;
}

.form-control.selector { border: none; padding-left: 0; background: transparent; }
.form-control.selector .btn { background: #fff; border: 1px solid #ccc; font-weight: 100; font-size: 14px;}
.form-control.selector .btn i {margin-left: 5px; vertical-align: -2px; }
.form-control.selector .btn:focus { border: 3px solid #cef2f7; padding: 4px 12px;}


input[type=file] { width: 1px; height: 200px; text-indent: -99999px; overflow: hidden; position: relative; border: none;  }
input[type=file]:after { content: ''; display: block; background: #fff; position: absolute; top: 0; left: 0; height: 200px; width: 270px; z-index: 1; border: 1px solid #ccc; }

input[type=file]:hover { cursor: pointer;}

form { max-width: 580px; }

form hr { margin-top: 30px; margin-bottom: 30px;}
.form-section-edit { background: #f5f5f5; padding: 10px;}



/* Form messages */
.ng-message { margin-left: 175px; margin-top: 10px; font-weight: 300; color: #9b0101; }


/* Tabs */
.nav-tabs { position: relative; }
.nav-tabs>li { }
.nav-tabs>li>a { border: 0px solid transparent; background: transparent; border-bottom: 3px solid transparent; color: #555;  padding: 10px 15px; margin-right: 50px; font-weight: 300; font-size: 16px; border-radius: 0; }
.nav-tabs>li>a:hover, .nav-tabs>li>a:focus { border: 0px solid transparent; border-bottom: 3px solid #ccc; background: transparent; color: #333;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #333;
    cursor: default;
    background-color: transparent;
    border: 0px solid transparent;
    border-bottom:  3px solid #EC6D54;
}

.tab-content { padding-top: 20px; }


/* fancy radio buttons */

.radio-inline { padding-left: 0; }
.radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    opacity: 0.01;
    clip:rect(0 0 0 0);
    overflow: hidden;
}

.radio { margin-bottom: 20px; }

.radio > label { margin-bottom: 6px; display: block; position: relative; padding-left: 30px;  }

.radio-inline > label { position: relative; display: inline-block; padding-left: 30px; margin-right: 10px; min-height: 25px; min-width: 40px;}

.radio > label:before, .radio-inline > label:before {
    display: block;
    content: " ";
    height: 20px;
    width: 20px;
    padding-left: 1px;
    border: 1px solid #c7c7c7;
    border-radius: 100%;
    background: #fff;
    font-size: 12px;
    color: #999;
    position: absolute;
    left: 0;
    top: 0px;
    text-align: center;
    vertical-align: middle;
    line-height: 18px;
    z-index: 10;
}

.right{
    text-align: right;
    text-align: -moz-right;
    text-align: -webkit-right;
}
.radio > label input[type=radio] ~ span, .radio-inline > label input[type=radio] ~ span {
    position: absolute;
    padding: 5px 20px 7px 35px;
    left: -5px;
    top: -7px;
    line-height: 22px;
}



.radio > label input[type=radio] ~ span:before, .radio-inline > label input[type=radio] ~ span:before {
    content: ""; display: block; position: absolute; top: 17px; left: 15px; border-radius: 100%; background: #7bad0b !important; height: 0; width: 0; z-index: 11; opacity: 0; transition: all 0.1s ease-in-out;
}

.radio > label input[type=radio]:checked ~ span:before, .radio-inline > label input[type=radio]:checked ~ span:before { opacity: 1; height: 10px; width: 10px; top: 12px; left: 10px;  }

.radio > label:hover:before, .radio-inline > label:hover:before { border-color: rgba(123, 173, 11, 0.47); box-shadow: 0 0 13px rgba(123, 173, 11, 0.2);  }






/* ----- */


/* fancy checkboxes */

.checkbox-inline { padding-left: 0; }
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    opacity: 0.01;
    clip:rect(0 0 0 0);
    overflow: hidden;
}

.checkbox { margin-bottom: 24px; }
.checkbox.indented { margin-left: 172px;}

.checkbox > label { margin-bottom: 6px; display: block;}

.checkbox > label,  .checkbox-inline > label { position: relative;  padding-left: 30px;}

.checkbox-inline > label { min-width: 60px; }
.checkbox > label:before, .checkbox-inline > label:before {
    display: block;
    content: " ";
    height: 20px;
    width: 20px;
    padding-left: 1px;
    border: 1px solid #c7c7c7;
    border-radius: 0;
    background: #fff;
    font-size: 12px;
    color: #999;
    position: absolute;
    left: 0;
    top: 2px;
    text-align: center;
    vertical-align: middle;
    line-height: 18px;
    z-index: 10;
}

.checkbox > label input[type=checkbox] ~ span, .checkbox-inline > label input[type=checkbox] ~ span {
    position: absolute;
    padding: 5px 20px 7px 35px;
    left: -5px;
    top: -5px;
    line-height: 25px;
}


.checkbox > label input[type=checkbox] ~ span:before, .checkbox-inline > label input[type=checkbox] ~ span:before {
    content: "\f00c";
    display: block;
    position: absolute;
    top: 10px;
    left: 8px;
    height: 14px;
    width: 14px;
    line-height: 14px;
    border-radius: 0;
    color: transparent;
    font-family: 'font-manything'; font-size: 14px;
    z-index: 11;

    transition: all 0.05s ease-in-out;
 }

.checkbox > label input[type=checkbox]:checked ~ span:before, .checkbox-inline > label input[type=checkbox]:checked ~ span:before {
        color: #81cad4;
}

.checkbox > label:hover:before, .checkbox-inline > label:hover:before { border-color: #bbb; box-shadow: 0 0 0 3px #cef2f7;  }


.checkbox-inline input:focus ~ span:before,  .checkbox input:focus ~ span:before  {
    outline-color: #cef2f7 !important;
    outline-offset: 3px !important;
    outline-width: medium !important;
    outline-style: solid !important;
    opacity: 1;
}

/* Toggles */
label.toggle {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 26px;
}

label.toggle input {
  /* Hide checkbox */
  opacity: 0;
  
  width: 100%;
  height: 100%;
  margin: 0;
}

label.toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 26px;
}

label.toggle .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

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


textarea:focus {
    outline-color: #cef2f7 !important;
    outline-offset: 0px !important;
    outline-width: medium !important;
    outline-style: solid !important;

}

input:focus {
    outline-color: #cef2f7 !important;
    outline-offset: 0px !important;
    outline-width: medium !important;
    outline-style: solid !important;

}

.response .dropdown > button:focus {
    outline-color: #cef2f7 !important;
    outline-offset: 0px !important;
    outline-width: medium !important;
    outline-style: solid !important;
  }



/* Icons */
form i.fa-check2.success { font-size: 22px; vertical-align: -4px;}
form i.fa-cross.warn { font-size: 22px; vertical-align: -4px;}


/* Status bar */

.status-bar { width: 100%; display: block; }
.status-bar.form-control { width: 324px; border: none; margin-left: 162px;}
.status-bar .outer { border: 1px solid transparent; background: #fff; height: 28px; width: 100%; position: relative; }
.status-bar .bar { height: 26px; position: absolute; top: 0px; left: 0px; z-index: 1; }
.status-bar .label { position: absolute; top: 4px; left: 0px; z-index: 1; height: 26px; width: 100%; text-align: center; line-height: 13px; font-weight: 700; color: #444; font-size: 13px;}
.status-bar.incomplete .bar { background: #FBD937; }
.status-bar.complete .bar { background: #C4D629; }



/* company logo */


.form-control.company-logo { border: 1px solid #ccc; height: auto; min-height: 160px; max-height: 500px; width: 300px; padding: 20px 10px; text-align: center;  }

.company-logo>div {display: table; height: 100%; width: 100%; min-height: 160px; max-height: 500px;}
.company-logo>div>div {display: table-row;}
.company-logo>div>div>div {display: table-cell; vertical-align: middle; text-align: center;}

.company-logo img { height: auto; width: auto; max-height: 280px; max-width: 280px;  }

.company-logo:hover { border: 1px solid orange; cursor: pointer; }


/* Loading thing */


.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load 1.6s infinite ease-in-out;
  animation: load 1.6s infinite ease-in-out;
}
.loader {
  color: #EC6D54;
  font-size: 10px;
  margin: 60px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.loader.inline { transform: translateZ(0) scale(0.7); margin: -13px 20px 23px;  }

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -20px;
  -webkit-animation-delay: -0.24s;
  animation-delay: -0.24s;
}
.loader:after {
  left: 20px;
}
@-webkit-keyframes load {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


.loader.ng-animate { -webkit-animation: none 0s; }

.saving { display: inline-block; color: #e16549; background: rgba(255,255,255,0.4); padding: 5px 8px; font-weight: 300; margin-right: 12px; position: fixed; top: 0; left: calc(50% - 45px); z-index: 1000; width: 90px; text-align: center;}
.saved { display: inline-block; color: #5e8900;background: rgba(191, 231, 110, 0.59); padding: 5px 8px; font-weight: 300; margin-right: 12px; position: fixed; top: 0; left: calc(50% - 90px); z-index: 1000; width: 180px; text-align: center;}

.error {
    background: #fff8c8;
    text-align: center;
    padding: 10px 30px;
    margin-top: 10px;
}

.information {
    background: #f5f5f5;
    text-align: center;
    padding: 10px 30px;
    margin-top: 10px;
}

.information p { 
  user-select: none;
}

.soften {
    transition: opacity 0s linear;
}

.soften.ng-enter, .soften.ng-leave-active {
    opacity: 0;
    transition: opacity 0.3s linear;
}

.soften.ng-leave, .soften.ng-enter-active {
    opacity: 1;
    transition: opacity 0s linear;
}

/* fade out, e.g. for 'Save success' message. */
.animate-hide.ng-animate { opacity: 1; transition: opacity 0.1s linear; display: block !important}
.animate-hide.ng-animate.ng-hide-add { opacity: 1;  transition: opacity 0.4s linear; display: block !important}
.animate-hide.ng-animate.ng-hide { opacity: 0;  transition: opacity 0.4s linear;}

/* ng-show fades in, ng-hide disappears instantly */
.soften.ng-hide-add { opacity: 0;  transition: opacity 0s linear;}
.soften.ng-hide-remove { opacity: 1;  transition: opacity 0.6s linear;}

#motionGrid .grid{
    display:inline-block;
    width:44px;
    height: 44px;
    background-color: white;
    border-width:2px;
    border-color:black;
    border-style: solid;
    margin-left: -2.5px;
    margin-right: -2.5px;
    margin-top:-3px;
    margin-bottom:-3px;
    padding:0px 0px 0px 0px;
    opacity: 0.2;
}
.md-datepicker-calendar-pane{
    z-index: 1200
}
#motionGrid .modal-body {
    background-color: grey;
}
#download-billing img{
    width:50px;
    height:50px;
    margin-bottom:8px ;
    margin-top:6px;

}
.downloadable {
    width:200px;
    margin-top: 20px;
    vertical-align: top;
}
.downloadable p{
    width:75%;
}
.downloadable h5{
    width:70%;
    color:#424143;
}
.downloadable img{
    width:50px;
    height:50px;
    margin:auto;

}
.downloadable-images img{
    max-width:120px;
    max-height:120px;
    margin-right: 25px;
    margin-top:30px;
    margin-bottom:30px;
    height:auto;


}
#logos-images{
    position:relative;
    /*width:106.5%;*/
    margin-top:25px;
    /*background-color: grey;*/
}
.download-controls{
    display: block;
    margin-top:15px;
    margin-left: 15px;
}
#download-billing{
    margin-left: 8px ;
}

#emergency-banner { background: rgb(24, 24, 40); position: relative; color: #fff; padding: 20px 30px; }
#emergency-banner .wrapper { position: relative; }
#emergency-banner p { width: calc(100% - 120px); margin: auto; text-align: center; font-size: 18px; font-weight: 500; }
#emergency-banner a { margin-left: 10px; text-decoration: underline; color: #fff; }
#emergency-banner img { position: absolute; margin: auto; top: 0; bottom: 0; }
#emergency-banner #emergency-banner-icon { left: 0; width: 30px; }
#emergency-banner #close-emergency-banner { right: 0; width: 20px; }
#emergency-banner #close-emergency-banner:hover { cursor: pointer; }


table td{
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;
}

input[text="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
input[type=text],input[type=email]{
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
.form-control{
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
.edit-distributor-column {
    float: left;
    width: 49%;
}

/* Clear floats after the columns */
.edit-distributor-row:after {
    content: "";
    display: table;
    clear: both;
}
.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.table-input{
    max-width:50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/* Description lists*/
dl {
  display: grid;
  grid-template-columns: 200px auto;
  row-gap: 5px;
}


/* getting started tutorial */

.sidebar #getting-started-nav { display: none; background: #e4e2e3; position: relative; top: -10px; padding: 10px 0 5px;}
.sidebar #getting-started-nav li a { color: #555; text-decoration: none; }
.sidebar #getting-started-nav li a:hover { color: rgb(121, 121, 121); text-decoration: none; }
.sidebar #getting-started-nav li a.active { color: #f16e50; }

.container-grey { background: #e4e2e3; text-align: center; border-radius: 8px; }

#getting-started-header a { margin-bottom: 10px; }

/* demo (with some styles borrowed by billing-payment-tab.html) */
#demo-container { line-height: 23px; }
#demo-container a { font-weight: 300; }
#demo-container h3, #demo-container p, #payment-container .container-grey p { font-size: 16px; margin: 20px auto; }
#demo-container h3 span { color: #555; }
#demo-container .container-grey, #payment-container .container-grey { position: relative; padding: 10px 50px; width: 100%; margin: 35px 0; }
#demo-container .container-grey h3 { font-size: 23px; margin: 20px auto; }
#demo-container .container-grey .top-left, #payment-container .container-grey .top-left { position: absolute; top: 15px; left: 15px; width: 35px; }
#demo-container img, #payment-container img { max-width: 100%; }
#demo-container .flex-row { display: flex; justify-content: space-around; max-width: 75%; margin: 30px auto 0; }
#demo-container .flex-row a {color: #f16e50; font-size: 16px; margin-bottom: 10px; }
#demo-container #demo-1, #demo-container #demo-2 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#demo-container #demo-1 > .app-image { max-width: 200px; margin: auto; }
#demo-container #demo-2 > .app-image { max-width: 285px; margin: auto; }

/* contact */
#contact-panel p { font-size: 16px; margin: 10px auto; }
#contact-us-container { line-height: 23px; display: flex; flex-direction: row; justify-content: space-between; text-align: center; flex-wrap: wrap;  }
#contact-us-container img { max-width: 200px; margin-bottom: 20px; }
#contact-us-container h3, #contact-us-container p { font-size: 16px; margin: 10px auto; }
#contact-us-container a {color: #f16e50;}

#contact-us-left, #contact-us-right { display: flex; flex-direction: column; align-items: center; padding-top: 50px; }


#adding-customers-container { line-height: 23px; font-size: 16px; }
#adding-customers-container h3 { font-size: 16px; margin-bottom: 20px; }
/* triangles */
#adding-customers-container ul {  
    list-style: none;  
}  
#adding-customers-container ul li:before {   
    content: "";  
    border-color: transparent #f16e50;  
    border-style: solid;  
    border-width: 0.35em 0 0.35em 0.45em;  
    display: block;  
    height: 0;  
    width: 0;  
    left: -1em;  
    top: 0.9em;  
    position: relative;  
} 
#adding-customers-container ul li { margin-top: 10px; }
#adding-customers-container .container-grey { padding: 20px 50px 40px; margin-top: 55px; }

#adding-customers-container #recurring-revenue { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; }
#adding-customers-container #recurring-revenue .flex-container img { width: 35px; height: 35px; margin-bottom: 20px;  }
#adding-customers-container #recurring-revenue .flex-container { display: flex; flex-direction: column; margin-top: 25px; }
#adding-customers-container #recurring-revenue-right { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 50px; }
#recurring-revenue-right h3, #recurring-revenue-right p { margin: 10px auto; }

@media (min-width: 480px) {
  #adding-customers-container #recurring-revenue .flex-container { flex-direction: row; }
  #adding-customers-container #recurring-revenue .flex-container img { margin-right: 45px; }
}


/* branding */
#branding-options-container { line-height: 23px;}
#branding-options-container p { font-size: 16px; }
#branding-options-container .container-grey { text-align: left; margin: 20px auto 50px; padding: 10px 20px 20px; font-size: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#branding-options-container .container-grey ul li { margin-top: 15px; font-size: 16px; }
#branding-options-container .container-grey ul { margin-top: 15px; }
#branding-options-container .container-grey p { margin-top: 10px; font-weight: 300; }
#branding-options-container .container-grey #cctv-connect-icon p { color: #4574a3; }
#branding-options-container .container-grey #manything-pro, #branding-options-container .container-grey #cctv-connect, #branding-options-container .container-grey #white-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 100%; margin-top: 0; }
#branding-options-container .container-grey > div { max-width: 80%; margin: 30px auto 0; }
#branding-options-container .container-grey > div > .app-icon { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 250px; }
#branding-options-container .container-grey .app-icon img { width: 60px; height: 60px; margin-right: 10px; }
#branding-options-container .container-grey img { max-width: 100%; width: 460px; }
#branding-options-container span { font-size: 12px; vertical-align: super; }
#branding-options-container #white-label ul { margin-top: 0; }
#branding-options-container #white-label-icon { margin-bottom: 10px; }
#branding-options-container .container-grey .cctv-app-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; }


@media (min-width: 1024px) {
    #demo-container .container-grey { width: 65%; }
    #contact-us-left, #contact-us-right { max-width: 45%; }
    .flex-auto-margin { margin-top: auto !important; }
    #recurring-revenue-left { max-width: 40%; text-align: left; }
    #recurring-revenue-right { max-width: 35%; margin-top: 0 !important; }
    #branding-options-container .container-grey #manything-pro, #branding-options-container .container-grey #cctv-connect, #branding-options-container .container-grey #white-label { max-width: 50%; }
    #branding-options-container .container-grey > div { max-width: 40%; margin: 10px 0; }
    #branding-options-container .container-grey:nth-of-type(2) > div:last-of-type { max-width: 80%; }
}

/* end of getting started tutorial */

/* cloud adapter page */

#cloud-adapter-panel { display: flex; flex-direction: column; min-height: 225px; margin-top: 15px; }
#cloud-adapter-image { width: 400px; max-width: 100%; }
#cloud-adapter-image img { width: 100%; }
#cloud-adapter-text { font-weight: 300; flex: 1; }
#cloud-adapter-text a, #cloud-adapter-text a:hover { text-decoration: none; }

@media screen and (min-width: 1000px) {
  #cloud-adapter-panel { flex-direction: row; }
  #cloud-adapter-text { padding: 0 30px; }
}

#cloudAdapterForm { margin: 48px 40px 0; padding: 30px; background: #e4e2e3; border-radius: 5px; }
#cloudAdapterForm p { font-weight: 300; margin-bottom: 20px}

/* end cloud adapter page */

#free-offer-2020 {
  background: #ececed;
  font-weight: bold;
  border-radius: 5px;
  padding: 20px;
  margin: 20px 0;
}

/* Invoices tab */
.invoice-button {
  background: none;
  border: none;
  color:blue;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  margin: 0 !important;
}

.invoice-button:hover {
  text-decoration: none;
}
/* End Invoices tab *?


/* payment process panel */

#choose-payment-process {
  margin: 10px auto 30px;
}
#choose-payment-process span {
  font-weight: 300;
  white-space: normal;
}
#choose-payment-process .btn-primary {
  min-width: 105px;
  border-radius: 40px;
  margin-bottom: 10px;
}
#choose-payment-process .dropdown-menu li:focus {
  outline: none;
}
#choose-payment-process .form-control.selector {
  width: auto;
}
#choose-payment-process .form-control.selector .btn:focus {
  border: 1px solid #ccc;
}
#payment-process-info { 
  display: none; 
  margin: 0 auto 30px; 
}
#payment-process-info .flex-row div { 
  background: white;
  border-radius: 5px;
  padding: 20px;
  flex: 1;
  margin: 20px 20px 0;
  min-width: 240px;
}
#payment-process-info span { 
  display: block; 
  margin-bottom: 15px;
}

@media screen and (max-width: 462px) {
  #save-payment-process { 
    margin-top: 10px; 
  }
}

/* end payment process panel */
/* new subscriber page */

.meter {
  width: 80px;
  background-color: #efefef;
  height: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  display: inline-block;
  padding: 1px;
  border: #cbcbcb 1px solid;
}

.meter span {
  height: 100%;
  border-radius: 6px;
  display: block;
}

.meter.low > span {
  background-color: red;
}

.meter.medium > span {
  background-color: #6B8E23;
}

.meter.high > span {
  background-color: #7fdc25;
}

.password-strength-indicator meter[value="0"], .password-strength-indicator meter[value="1"], .password-strength-indicator meter[value="2"] {
  background-color: red;
}

.password-strength-indicator p {
  display: inline;
}

@media only screen and (min-width: 855px) {

  .longer-info p {
    min-width: 435px;
  }

}

/* end new subscriber page */

/* technical materials page */

.install-guide {
  display: inline-block;
  margin: 25px 40px;
  margin-left: 0px;
}

.download-icon {
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.download-icon img {
  max-height: 100%;
  max-width: 100%;
}

.download-link, .download-link:hover, .download-link:focus {
  color: black;
  cursor: pointer;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: 20px;
}

/* end technical materials page */