@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,input,legend,table,caption,table,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,section,time,mark,audio,video,img{background:transparent;border:0;font-size:100%;font-size-adjust:none;margin:0;outline:0;padding:0;vertical-align:baseline;}
article,aside,figure,footer,header,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}

.close { clear:both; height:1px; line-height:1px; margin:0; padding:0; }

#loader { overflow: hidden; background-color: rgba(0, 0, 0, 0.65); display:none; height:100%; width:100%; position:fixed; z-index:3; }
#loader.active { display:table!important; }
#loader > div { #position:absolute; #top:50%; display: table-cell; vertical-align:middle; }
#loader-box   { #position: relative; #top:-50%; margin:0 auto; border-radius:18px; background-color:#fff; width:180px; min-height:55px; padding:10px;}
#loader-icon  { background-image:url(/img/loader.gif); height:55px; width:55px; margin:0 auto; }
#loader-label { text-align:center; padding:10px 0; }
.accordion { background-color:#dedede; cursor: pointer; padding: 18px; width: 100%; text-align: left;outline: none; transition: 0.4s; margin-top: 5px;border: 1px solid #042A39;}
.active, .accordion:hover { background-color: #ccc;}
.panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; border: 1px solid #042A39; border-top: none }

#error { overflow: hidden; background-color: rgba(0, 0, 0, 0.8); display:none; height:100%; width:100%; position:fixed; z-index:5; }
#error.active { display:table!important; }
#error > div { #position:absolute; #top:50%; display: table-cell; vertical-align:middle; }
#error-box { #position: relative; #top:-50%;  max-height: 80vh; margin:0 auto; border-radius:5px; background-color:#fff; width:820px; min-height:400px; padding:10px;}
#error-title { float:left; width:790px; height:30px; font-size:23px; font-weight:bold; padding-bottom:10px; text-align:left; }
#error-close, #action-input-close { float:left;  width:30px; height:30px; background: url(/img/x.png) no-repeat; background-size: 100%; cursor: pointer; }
#error-summary { border-top:1px solid mediumblue; clear:both; width:100%; padding:15px 0;  overflow-y: auto; max-height: 60vh; font-weight:bold; white-space:pre; font-family:monospace; }

#action-input { overflow: hidden; background-color: rgba(0, 0, 0, 0.8); display:none; height:100%; width:100%; position:fixed; z-index:3; }
#action-input.active { display:table!important; }
#action-input > div { #position:absolute; #top:50%; display: table-cell; vertical-align:middle; }
#action-input-box { #position: relative; #top:-50%; max-height: 80vh; margin:0 auto; border-radius:5px; background-color:#fff; width:820px; min-height:400px; padding:10px;}
#action-input-title { float:left; width:790px; height:30px; font-size:23px; font-weight:bold; padding-bottom:10px; text-align:left; }
#action-input-fields { border-top:1px solid mediumblue; clear:both; float:left; width:100%; padding:15px 0; overflow-y: auto; max-height: 60vh; }
#action-input-selected-fields { border-top:1px solid mediumblue; clear:both; float:left; width:100%; padding:15px 0; }

#auth { overflow: hidden; background-color: rgba(0, 0, 0, 0.8); display:none; height:100%; width:100%; position:fixed; z-index:4; }
#auth.active { display:table!important; }
#auth > div { #position:absolute; #top:50%; display: table-cell; vertical-align:middle; }
#auth-box { #position: relative; #top:-50%; margin:0 auto; border-radius:5px; background-color:#fff; width:400px; min-height:100px; padding:10px;}
#auth-title { float:left; width:400px; height:30px; font-size:23px; font-weight:bold; padding-bottom:10px; text-align:center; }
#auth-content { border-top:1px solid mediumblue; clear:both; float:left; width:100%; padding:15px 0; font-weight:bold; }

html		{ width:100%; min-height:100%; height:100%; background:#f9f7f4 }
body		{ width:100% ;min-height:100%; height:100%; background:#f9f7f4; color:#333; font-size:13px; font-family:'Open Sans',sans-serif; }

table		{ font-size:inherit;}
a			{ margin:0; cursor: pointer; }
a:link,a:visited	{ color:#039; text-decoration:none;}
a:hover,a:active	{ color:#039; text-decoration:underline;}
hr			{ border:0; border-top:1px solid #ddd; display:block; height:1px; margin:1em 0; padding:0;}
h1			{ font-size:19px; padding-top:10px; color:#042A39; font-weight: 600; }
h2			{ font-size:16px; padding:10px 0;color:#042A39; }
h3			{ color:#042A39; }
li			{ margin-left:1.2em; font-size:14px;}
p           { padding-top:5px; }

/* Buttons */
.btn_dark,.btn_light {	text-align:center; width:auto;	padding:8px 10px; margin-top:6px; text-decoration:none!important; transition: background-color .3 ease-in-out; -moz-transition: background-color .3s ease-in-out; -webkit-transition: background-color .3s ease-in-out; cursor: pointer;     border: solid 1px #042A39; border-top:none!important; border-left:none!important; font-weight:600;	 }
.btn_dark            { color:#fff; border-radius:10px; /*border:solid 1px #022A39;*/ background: #039; display:inline-block; min-width: 150px;	}
.btn_dark:hover      { background:#039; border: solid 1px #042A39;}

.btn_light           { color:#022A39; border-radius:10px; /*border:solid 1px #022A39;*/ background:rgba(0,0,0,0.02); display:inline-block; min-width: 150px; border-color:#ddd; }
.btn_light:hover     {  }
.btn_light:hover a   { color:#fff;}
.btn_save_order      { position: fixed; margin: 0 auto; float: none; top: 19%; left: 50%;  padding: 20px 40px; transform: translate(-50%, -50%); }

/* Messages */
.msg         { color:#fff; border-radius:5px; padding:10px; }
.msg.success { background:#090; }
.msg.error   { background:#c00; }

#mainframe 	{ min-height:80%; margin:0 auto; padding:50px 0 0 0; min-width:960px; background:#f9f7f4; }
#nav    { clear:both;height:38px;margin:0;padding:10px 0;color:#fff; background: #042A39;}
#nav ul	{ list-style:none; margin:0; padding:0;}
#nav > ul	{ list-style:none; margin:0 auto; padding:0 20px; width:80%;min-width:960px;box-sizing: border-box; -webkit-box-sizing: border-box;}
#nav li { display:block; float:left; height:38px; margin:0; border:none; font-size:15px; padding:0 0;}
#nav a		{  color:#fff; margin:0; text-decoration:none; border:none; border-right: 1px solid rgba(255, 255, 255, 0.2);border-left: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; padding:8px 10px 10px 10px; height:38px; box-sizing: border-box; -webkit-box-sizing: border-box; }
#nav > ul > li > a.active{background-color:#f9f7f4; color:#333; font-weight: 600; }
#nav li.menu:hover, #nav a:active{background:rgba(255, 255, 255, 0.15); color:#fff!important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */}
#nav .menu { border: 1px solid white; margin-right:10px }
#pre-menu { background-color:#f9f7f4; padding-right:5px!important; margin-right:5px!important; cursor:pointer; border: unset }

.page { clear:both; min-height:400px;  padding:20px 20px; margin: 0 auto; width:80%;min-width:960px; box-sizing: border-box;-webkit-box-sizing: border-box;  }
.content_header { border-bottom:1px solid #ddd; padding:0 0 20px 0; }
.content_footer { padding-top:10px; }

#page-actions table th, #page-actions table td { border-bottom:1px solid lightgray; padding:5px; }
#page-actions table .col-execute        { width:110px; }
#page-actions table .col-name           { text-align: left; font-size:1.1em; font-weight:bold; width:350px; }
#page-actions table .col-description    { text-align: left; }

#page-action-complete table th, #page-action-complete table td { border-bottom:1px solid lightgray; padding:2px; text-align:left; }
#page-action-complete td.col-type { font-weight:bold; }
#page-action-complete td.col-log { font-size:10px; }
#page-action-complete tbody { white-space: pre; font-family: monospace; }

#action-input-fields .select-option.single { border:1px solid gray; border-radius:15px; width:244px; min-height:20px; padding: 8px 5px; margin:5px; float:left; font-size:14px; font-weight:bold; text-align:center; }
#action-input-fields .select-option.single:hover { background-color:lightgray; border-color:black; cursor:pointer; }

#action-input-fields .text { border-radius:10px; padding:10px; line-height:20px; font-size:18px; font-family:monospace; font-weight:bold; width:100%; border:2px solid darkgray; }
#action-input-fields input.text {}
#action-input-fields textarea.text {}
#action-input-fields .btn-ok { border-radius:10px; padding:5px 0; height:35px; font-size:18px; width:100%; margin-top:10px; }

#table-actionlog-filters th { cursor:pointer; }
#table-actionlog-filters td { padding:0 5px; }
#table-actionlog-filters .col_pre { width:80px; }
#table-actionlog-filters .col_user { width:120px; }
#table-actionlog-filters .col_action { width:260px; }
#table-actionlog-filters .col_env { width:90px; }
#table-actionlog-filters .col_repo { width:120px; }
#table-actionlog-filters .col_server { width:120px; }
#table-actionlog-filters .col_type { width:90px; }
#table-actionlog-filters .col_amount { width:90px; }
#table-actionlog-filters .col_order { width:90px; }
#table-actionlog-filters .row_enabled td div { border:1px solid grey; background-color:lightgreen; border-radius:10px; text-align:center; overflow:hidden; margin-bottom:2px; padding:0 2px; cursor:pointer; }
#table-actionlog-filters .row_disabled td div { border:1px solid grey; background-color:lightcoral; border-radius:10px; text-align:center; overflow:hidden; margin-bottom:2px; padding:0 2px; cursor:pointer; }

#action-logs th, #action-logs td { border-bottom:1px solid lightgray; padding:2px; text-align:left; }
#action-logs td.col-type { font-weight:bold; }
#action-logs td.col-log { font-size:10px; }
#action-logs tbody { white-space: pre; font-family: monospace; }

#user-roles th, #user-roles td { border-bottom:1px solid lightgray; padding:2px; text-align:left; }
#user-roles .col-role { width:100px; }
#user-roles .col-users { width:220px; }
#user-roles .col-all-configs,
#user-roles .col-all-environments,
#user-roles .col-all-actions,
#user-roles .col-all-repos,
#user-roles .col-manage-users { width:60px; }
#user-roles .col-environments { width:100px; }
#user-roles .col-actions { width:400px; }
#user-roles .col-repos { width:150px; }
#user-roles td div { border:1px solid grey; background-color:lightgrey; border-radius:10px; text-align:center; overflow:hidden; margin-bottom:2px; padding:0 2px; }

#users th, #users td { border-bottom:1px solid lightgray; padding:2px; text-align:left; }
#users .col-email { width:300px; cursor:pointer; }
#users .col-roles { width:300px; }
#users .col-environments { width:150px; cursor:pointer; }
#users .col-actions { width:150px; cursor:pointer; }
#users .col-repos { width:150px; cursor:pointer; }
#users td div { border:1px solid grey; background-color:lightgrey; border-radius:10px; text-align:center; overflow:hidden; margin-bottom:2px; padding:0 2px; }

#page-user h3 { margin-top:20px; font-size:15px; }
#edit-user-roles div,
#edit-user-environments div,
#edit-user-actions div,
#edit-user-repos div { border:1px solid grey; background-color:#dedede; border-radius:10px; text-align:left; overflow:hidden; margin-bottom:4px; padding:3px 5px; width:500px; font-size:14px; cursor:pointer; font-family:monospace; font-weight:bold; }
#edit-user-roles div.enabled,
#edit-user-environments div.enabled,
#edit-user-actions div.enabled,
#edit-user-repos div.enabled { background-color:limegreen; }
#edit-user-roles div.enabled.by-role,
#edit-user-environments div.enabled.by-role,
#edit-user-actions div.enabled.by-role,
#edit-user-repos div.enabled.by-role { cursor:default; }
#edit-user-roles div span.by-role,
#edit-user-environments div span.by-role,
#edit-user-actions div span.by-role,
#edit-user-repos div span.by-role { font-style:italic; font-size:12px; color:darkslategrey; display:none }
#edit-user-roles div span.by-role::after,
#edit-user-environments div span.by-role::after,
#edit-user-actions div span.by-role::after,
#edit-user-repos div span.by-role::after { content: " (From roles)" }
#edit-user-roles div.enabled.by-role span.by-role,
#edit-user-environments div.enabled.by-role span.by-role,
#edit-user-actions div.enabled.by-role span.by-role,
#edit-user-repos div.enabled.by-role span.by-role { display:inline; }