/*
Site Name: 	 Flex
Version: 		1.0
Author: 		Dead Sea Design
Author URI: 	http://www.deadseadesign.co.uk

*/

/* ---------------------------------------------------------------------------------------------------------- 
SENSIBLE DEFAULTS ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "normalize.css";

:root {
  --blue : #E6EFF9;
  --red : #E83B3B;
  --green : #3DBA8C;
  --light-grey : #F8F8F8;
  --white : #ffffff;
  --black : #000;
  --grey : #666;
  --dark-blue: #b5c9e2;
}

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ 
	background:#ffffff;
	font-family: "Lato", sans-serif;
	font-size:18px;
	color:#333333;
	line-height:1.6em;
	font-weight: 400
	}
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

p,
pre { margin: .5em 0;}
img { border:none; padding:0; margin:0; max-width:100%;height:auto;}
a {text-decoration:none;border:0;color:var(--black);}
a:hover {text-decoration:none;}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}
nav ul { padding:0; margin:0;}
nav a {display: block; padding:.25em;}
a[ng-click]{
    cursor: pointer;
}
/* ---------------------------------------------------------------------------------------------------------- 
FONTS / TYPE -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 { font-weight:700; line-height:1.1em; margin:0; color:var(--black); }
h1 { font-size:1.8em; margin-bottom: 10px}
h2 { font-size:1.2em;}
h3 { font-size:1.1em; }
h4 { font-size:1em; }
h5 { font-size:1em; }
h6 { font-size:1em; }

code { background-color: #e8e8e8; color:#2f79ba; font-family:"Courier New", Courier, monospace; display: block; padding:1em; border:solid 1px #ccc; margin: .5em 0; }
blockquote { font-size:1.2em; font-style:italic; }

/* ---------------------------------------------------------------------------------------------------------- 
FORMS -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
form { margin: .5em 0;}
label { font-size: .86em; color:#202020; display:block; line-height: 37px; margin-right: .5em; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"] { width:100%; padding:15px; background-color:var(--white); border: thin solid #ccc; display: inline-block; vertical-align: bottom; border-radius: 6px; margin-bottom:15px}
input[type="submit"] {vertical-align:top;background-color:var(--blue); color:var(--black); display: inline-block; border:0; padding:15px 35px;width:100%;font-weight: 800; -webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all;border-radius: 6px }
input[type="submit"]:hover { text-decoration: none; box-shadow:1px 1px 3px #666; }
textarea { height:140px;width:100%; padding:15px; background-color:var(--white); border: thin solid #ccc; display: block; border-radius:6px;}
select {
  background-color: white;
  border: thin solid #ccc;
  display: inline-block;
  font: inherit;
  padding: 15px;
  margin: 0 0 15px 0;      
  background-repeat: no-repeat;
  width:100%;
  border-radius: 6px;
}
input[type="radio"] { margin-right: .5em}
select.shortSelect { max-width: 70px}
select[disabled] { background:#ffffc0;color:#333;}
input[disabled] { background:#fafafa;color:#333;}
input[readonly] {background:#ffffc0; border:solid 1px #666;padding:0 10px;}

input[type=file] { font-size:14px }
input[type=file]::file-selector-button {font-size:1rem;border: 0;padding: 12px 35px;border-radius: 6px;background-color:var(--blue); transition: 1s;}
input[type=file]::file-selector-button:hover {background-color: var(--dark-blue);}

input.sign-in-button {background-image: url(../images/icons/entry.svg); background-repeat: no-repeat;background-size: 25px; background-position: calc(50% - 40px)  12px; padding-left: 60px}
input.save-user-button {background-image: url(../images/icons/add-user.svg); background-repeat: no-repeat;background-size: 25px; background-position: calc(50% - 60px)  12px; padding-left: 70px}

.sign-out-button {position: absolute;bottom: 40px;width: calc(100% - 80px);display: block;max-width: 100%;left: 40px;}
.sign-out-button button {width: 100%; border: 0;background: var(--red); color: var(--white);padding: 8px 8px 8px 40px; border-radius: 6px;background-image: url(../images/icons/exit.svg);background-position: calc(50% - 40px)  12px;background-repeat: no-repeat;background-size:20px}
/* ---------------------------------------------------------------------------------------------------------- 
ALIGNMENT -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.textright {text-align:right;}
.textleft {text-align:left;}
.textcenter {text-align:center;}
.textjustify {text-align:justify;}
.alignnone { float:none;}
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
img.alignleft { margin: .4em 1em .4em 0;}
img.alignright { margin:.4em 0 .4em 1em;}

/* ---------------------------------------------------------------------------------------------------------- 
GRID -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.row:after { content: ""; display: table; clear: both; }

.grid_1 { width: 8.3333333%; } 
.grid_2 { width: 16.666666%; } 
.grid_3 { width: 24.999999%; } 
.grid_4 { width: 33.333332%; } 
.grid_5 { width: 41.666665%; }
.grid_6 { width: 50%; } 
.grid_7 { width: 58.333331%; } 
.grid_8 { width: 66.666664%; } 
.grid_9 { width: 74.999997%; } 
.grid_10 { width: 83.33333%; } 
.grid_11 { width: 91.666663%; } 
.grid_12 { width: 100%; }

[class*='grid_'] { float: left; display: block; min-height: 1px; }

/* Gutter grid */
[class*='g_grid_'] { margin: 0 2% 1% 0; }
[class*='g_grid_']:last-of-type { margin-right: 0; }

.g_grid_1 { width: 6.5%; } 
.g_grid_2 { width: 15%; } 
.g_grid_3 { width: 23.5%; } 
.g_grid_4 { width: 32%; } 
.g_grid_5 { width: 40.5%; }
.g_grid_6 { width: 49%; } 
.g_grid_7 { width: 57.5%; } 
.g_grid_8 { width: 66%; } 
.g_grid_9 { width: 74.5%; } 
.g_grid_10 { width: 83%; } 
.g_grid_11 { width: 91.5%; } 
.g_grid_12 { width: 100%; } 

/* Container */
.container{ width: 80%; margin: auto; }
.omega { margin-right: 0}
.smallContainer.container { max-width: 400px;}
.main { }
/* ---------------------------------------------------------------------------------------------------------- 
TABLES -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
table { width:100%;font-size: 14px; text-align: center; }
table th { background:transparent; padding:.3em 1em; border:0; text-align: left; font-weight: 100; color:#666; text-transform: uppercase;}
table td { padding:.3em 1em; border:solid 1px #ccc; }
table tr {}
table a { text-decoration: none; }

/* ---------------------------------------------------------------------------------------------------------- 
USEFUL CLASSES --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.rounded { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.lead { font-size: 1.2em; line-height: 1.4em }
.error,
.errorMessage {color:#f00; padding:5px; text-align: center;}

.message {padding:5px 1em; margin:10px 0;font-size: .9rem}
.error { color:var(--red); text-align: center;border:solid thin var(--red); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.success {color:var(--green); text-align: center; border:solid 1px var(--green); -moz-border-radius: 3px; -webkit-border-radius:3px; border-radius:3px;}

.has-grey-color { color:var(--grey) }
.has-green-color { color:var(--green) }
.has-red-color { color:var(--red) }

.section { padding-top:30px }
.section h2,
.section h3 { margin-bottom:30px }

.indicator-red {display: inline-block;width:10px; height:10px; border-radius: 50%; margin-right: 10px; background: red}
.indicator-green {display: inline-block;width:10px; height:10px; border-radius: 50%; margin-right: 10px; background: green}
/* ---------------------------------------------------------------------------------------------------------- 
LOGIN --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.login-wrapper {display: flex;align-items: center;margin: auto;align-content: center;align-items:center;position: fixed;left: 0;top:0;width: 100%;height: 100%;justify-content: center;}
.login-form {max-width: 400px; width: 80%; margin:auto}
.login-logo {max-width: 200px; margin:0 auto 20px auto; display: block}

/* ---------------------------------------------------------------------------------------------------------- 
SIDEBAR --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.sidebar {position: fixed;left:0; top:0; height:100%; width:300px;padding:40px 60px;z-index: 100;background: white; border-right: solid 1px #ccc}
.sidemenu { padding:0; margin:40px 0 0 0;list-style-type:none;font-size:1.2rem; font-weight:600 }
.sidemenu li {}
.sidemenu li a { display:block; padding:10px 0 10px 40px;background-size:20px; background-repeat:no-repeat;background-position:left center }
.sidemenu li.projects a {background-image: url('../images/icons/projects.svg')}
.sidemenu li.companies a {background-image: url('../images/icons/user.svg')}
.sidemenu li.activity a {background-image: url('../images/icons/activity.svg')}
.sidemenu li.current a,
.sidemenu li:hover a {opacity: 0.5}

/* ---------------------------------------------------------------------------------------------------------- 
CONTENT --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.wrapper {padding-left: 300px; padding-top: 50px}
.header-widget input { border-radius:10px; font-size:14px; background-image:url(../images/icons/search.svg); background-repeat:no-repeat;background-size:20px; background-position:calc(100% - 10px) 10px; }
.page-button-set { border-top:solid 1px #ccc; border-bottom:solid 1px #ccc; padding:30px 30px 20px 30px; margin-top:30px; margin-bottom:50px }
.round-button { font-weight:600; font-size:1.2rem; line-height:40px }
.round-button span {display: inline-block;width:80px; height:80px; background:url(../images/icons/add-user.svg) no-repeat center var(--blue); background-size:45px;vertical-align: middle; border-radius: 50%;margin-right: 20px; transition: .5s all}
.round-button:hover span { background-color:var(--dark-blue) }

.round-button.add-project-button span { background-image:url(../images/icons/projects.svg) }
.round-button.license-button span { background-image:url(../images/icons/licenses.svg) }

.page-header-divider {border-bottom:solid 1px #ccc; padding:20px 30px 20px 30px;margin-bottom:50px}

.main { padding-right:40px }

.revo-logo img {max-width: 120px;display: block;margin: 20px auto;}

.company-list { padding:50px 0 }
.company-item {display: flex;align-items: stretch;align-content: center;padding:10px 0;}
.company-item-id { color:var(--grey);width:140px; font-size:14px }
.company-item-name {font-weight: 600;text-transform: uppercase;width:50%;margin-left:30px}
.company-item-licenses {color: var(--grey); font-size: 14px; width:calc(50% - 208px);}
.company-item-menu-button {width:38px; cursor: pointer;}
.company-item-menu-button span {display: inline-block;width:6px; height:6px; background:var(--black); margin:0 1px 0 0; border-radius: 50%}
.company-item-img {width:35px; height:30px; border-radius: 50%; background-repeat: no-repeat;background-position: center;background-size: cover; border:solid 1px #ccc}
.company-item-menu {position: absolute;background: white;border: solid 1px #e8e8e8;right: 0;margin-top: 30px;z-index: 100;border-radius: 6px;width:80px;display: none}
.company-item-menu ul { list-style-type:none; padding:0; margin:0; }
.company-item-menu ul li a { padding:6px 10px; display:block;text-align:center;font-size:.9rem; border-bottom:solid 1px #e8e8e8; }
.company-item-menu ul li:last-child a { border:0 }
.company-item-menu-arrow { position:absolute;top:-5px;left:52px;width:10px; height:10px; background:white; border-top:solid 1px #e8e8e8; border-right:solid 1px #e8e8e8; transform:rotate(-45deg);z-index:101;}
.logo-placeholder { position:absolute;right:0; top:0;width:60px; height:60px; border-radius:50%; background-repeat:no-repeat;background-size:cover; background-position:center;border:solid 1px #ccc }
.progress-bar { margin:0 0 20px 0 ; width:100%;height:40px; background:#fafafa; border-radius: 6px}
.progress-bar span.progress {display: inline-block;height:38px;background:var(--green);border-radius: 6px}
.progress-bar span.label {display: block;height:40px;width:100%;position: absolute;top:0; left:0;padding-top: 5px; text-align: center;font-size: 14px; color:#e8e8e8}

.upload-button { vertical-align:top;background-color:var(--green); color:var(--white); display: inline-block; border:0; padding:6px 35px;font-weight: 800; -webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all;border-radius: 6px }

.project-item {background: var(--blue); border-radius: 10px; margin-bottom: 15px}
.project-item a { display:flex;padding:15px; align-content:center;align-items:center; }
.project-item-img { width:60px; height:60px; background-position:center; background-size:cover; border-radius:10px; margin-right:15px }
.project-item-name h2 {font-size: 20px; font-weight: bold; margin:0}
.project-item-name {font-size: 14px; width:30%}
.project-item-date { font-size:12px; color:#666; text-align:right; width:calc(40% - 75px) }

.company-item-last-login {color: var(--grey); font-size: 14px; width:calc(70% - 128px);text-align: right; padding-right: 60px; }
.license-count-wrap { font-size:14px }

.large-delete-button { margin-top:50px }
.large-delete-button button { border:0; border-radius:3px;background:var(--red);color:white; font-weight:bold;width:100%; padding:10px }

.activity-item {margin: 10px 0;padding: 10px 0 10px 30px;border-bottom: solid 1px #e8e8e8; font-size: 16px}
.activity-item-content {line-height: 1.3em}
.activity-item-date {display: block;font-size: 14px;color:#999}
.activity-icon { width: 20px;height: 20px; background-size: cover;background-position: center;background-repeat: no-repeat;position: absolute;left: 0;top: 15px; }
.login-icon {background-image: url(../images/icons/entry.svg); }
.user-icon {background-image: url(../images/icons/user.svg); }
.tag-icon {background-image: url(../images/icons/tag.svg); }
.edit-icon {background-image: url(../images/icons/edit.svg); }


.dashboard-sidebar-profile { background:var(--blue);border-radius:20px;padding:30px; text-align: center;}
.profile-image {width: 60px; height:60px; background-position: center;background-size: cover;border-radius: 50%; margin:0 auto 20px auto; display: block; border:solid 1px #333}
.profile-company { font-size:14px; color:#999 }