@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700,800,900&subset=latin-ext');

/* Global ------------------------------------------------------------------------------------------------------------------------------------ */
* { font-family: 'Quicksand', sans-serif; box-sizing: border-box; outline: none;   -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:root { --yellow: #f1a71b; --blue: #0866c6; --panelWidth: 290px; --blue: #2d5c9f; }
body { background: #7e858c; color: #000; margin: auto; font-size: 16px; }
a:link {  text-decoration: none; outline: none; }
a:visited { text-decoration: none; }
a:hover { -moz-outline-style: none; color: inherit; text-decoration: underline; }
a:active { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 { all: initial; font-family: inherit; font-size: inherit; color: inherit; display: inline; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 99999; }
.modal .modal-box { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); display: table; min-width: 320px; padding: 30px 40px; border-radius: 4px; background: white; box-shadow: 0 0 15px rgba(0,0,0,0.4); text-align: center; }
.modal .modal-box .title { font-size: 20px; font-weight: bold; text-align: center; }
.modal .modal-box .content { font-size: 18px; font-weight: 600; padding: 20px 0; text-align: center; }
.modal button.close { margin: auto; display: table; }
.modal button { display: initial; margin: 0 5px; }
.modal-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(126,133,140,0.9); z-index: 999; display: flex; justify-content: center; align-items: center; }
.modal-dialog .wrapper { box-shadow: 0 0 15px rgba(0,0,0,0.4); min-width: 400px; display: table; }
button { xtext-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 13px; font-weight: 600; padding: 14px 30px; cursor: pointer; background: #7b8792; background: #506375; background: linear-gradient(#72808e,#3f4f5f); color: white; border-radius: 25px; text-transform: uppercase; transition: 0.11s; border: 0; user-select: none; }
button:active { box-shadow: 0px 0px 6px rgba(0,0,0,0.6); background: linear-gradient(#3f4f5f,#3f4f5f); filter: brightness(110%); }
button:hover { }
button.green { background: #0da512; }
button.red { background: #e00220; }
button:disabled { background: #78c57c; }
button.control { text-shadow: 2px 2px 2px rgba(0,0,0,0.1); font-size: 22px; font-weight: normal; padding: 0px; width: 44px; height: 44px; border-radius: 100%; display: table; top: 50%; transform: translateY(-50%); position: relative; background: #687988; background: linear-gradient(to bottom right, #f1a626, #f24838); color: #f2f2f2; }
button.control:disabled { background: #afbac3; }
button.control:active { background: linear-gradient(#f2692e,#f2692e); }
button.control:before { font-family: "Fontawesome"; }                                        
button.control.edit:before { content: "\f044"; }
button.control.add:before { content: "\f055"; }
button.control.clone:before { content: "\f24d"; }
button.control.delete:before { content: "\f1f8"; }
button.detach:before { content: "\f127"; }
button.attach:before { content: "\f0c1"; }
.loader { top: 0; position: fixed; background: url('/modules/_site/images/load.gif') no-repeat, black; background-position: center center; width: 100%; height: 100%; z-index: 999; opacity: 0.4; }


*::-webkit-scrollbar { width: 12px!important; height: 12px!important; }
*::-webkit-scrollbar-thumb { background: #424c5a; }
*::-webkit-scrollbar-track { background-color: #f2f2f2; border: none; }
input, select, textarea { width: 100%; font-size: 16px; font-weight: 500; height: 50px; padding: 0 10px; border: 0px; box-shadow: 0 0 7px rgba(0,0,0,0.2); transition: 0.2s; }
input { padding: 0px 15px 0; -webkit-user-select:text; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 8px rgba(0,0,0,0.4); }
.floating input[type="file"] { padding-top: 18px !important; }
textarea { line-height: 150%; }
select { cursor: pointer; font-weight: 600; }
.floating { position: relative; }
.floating input, .floating select { padding: 6px 15px 0 !important; }
.floating input::placeholder { color: rgba(0, 0, 0, 0); }
.floating label { display: block; position: relative; max-height: 0; font-weight: 500; pointer-events: none; }
.floating label:before { color: #222; content: attr(data-content); display: inline-block; transform-origin: 0 0; transition: all 0.02s ease; left: 5px; padding: 2px 8px; position: relative; font-size: 13px; }
.floating input:focus + label::after { transform: scale3d(1, 1, 1); opacity: 1; }
.floating input:placeholder-shown + label::before, .floating select + label::before { font-size: 12px; transform: perspective(1px) translate3d(0, -37px, 0) scale3d(1, 1, 1) translateZ(0); color: #999; font-weight: 500; background: white; border: 1px solid transparent; left: 5px; top: initial; -webkit-font-smoothing: antialiased; }
.floating label::before, .floating input:focus + label::before, .floating select + label::before { font-size: 10px; transform: perspective(1px) translate3d(0, -59px, 0) scale3d(1, 1, 1) translateZ(0); background: #eee; color: #111; font-weight: 600; text-transform: uppercase; border: 1px solid #aaa; left: -1px; -webkit-font-smoothing: antialiased; }
.floating input:focus + label::before { color: black; }
.floating .select2 + label::before { transform: perspective(1px) translate3d(0, -70px, 0) scale3d(1, 1, 1) translateZ(0); }
.floating label.textarea { position: absolute; top: -9px; }
.floating label.textarea::before { transform: perspective(1px) translate3d(0, 0px, 0) scale3d(1, 1, 1) translateZ(0); }

label.checkbox { display: table; position: relative; padding: 3px 0 0 40px; margin: 20px 0 20px 10px; cursor: pointer; font-size: 14px; font-weight: 600; text-transform: uppercase; }
label.checkbox input { display: none; }
label.checkbox:hover input ~ .checkmark { background-color: #ccc; }
label.checkbox input:checked ~ .checkmark { background: var(--blue); border: 2px solid var(--blue); }
label.checkbox input:checked ~ .checkmark:after { display: block; }
label .checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; border: 2px solid #888; border-radius: 2px; }
label.checkbox .checkmark:after { left: 6px; top: 1px; width: 5px; height: 13px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); content: ""; position: absolute; display: none; }
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* Cookie consent ---------------------------------------------------------------------------------------------------------------------------- */
#cookie-consent { background: linear-gradient(#333,#000); color: white; position: fixed; width: 100%; bottom: 0px; left: 0px; padding: 15px; font-size: 15px; text-align: center; border-top: 1px solid #666; line-height: 150%; z-index: 99999; }
#cookie-consent button { font-family: inherit; font-weight: 700; font-size: inherit; color: #333; background: #fec700; border: 0; padding: 6px 15px; border-radius: 2px; margin: 0 30px; cursor: pointer; text-transform: uppercase; font-size: 14px; }
@media (max-width: 1024px) { #cookie-consent button { display: table; margin: 10px auto 0; } }
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* Header ------------------------------------------------------------------------------------------------------------------------------------ */
header { position: fixed; top: 0; left: 0px; width: 100%; height: 70px; line-height: 70px; background: #283138; display: flex; z-index: 999; }
header .logo { width: var(--panelWidth); padding: 20px 0 0 30px; background: rgba(0,0,0,0.2); height: 70px; line-height: 100%; color: #fff; text-align: left; font-size: 18px; font-weight: 500; letter-spacing: 0px; text-transform: uppercase; }
header .logo img { width: 80%; }
header .logo span { display: block; font-size: 70%; letter-spacing: 4px; color: #cfcfcf; text-align: left; }
header .user-menu { color: white; flex-grow: 1; display: flex; justify-content: flex-end; }
header .wrapper { position: relative; background: #20272d; padding: 0 20px 0 30px; }
header .user { display: flex; font-weight: 600; text-transform: uppercase; font-size: 13px;  position: relative; letter-spacing: 1px; color: #dfdfdf; padding-right: 60px; min-width: 160px; user-select: none; cursor: pointer; }
header .user:before { font-family: "Fontawesome"; content: "\f2bd"; font-size: 32px; padding-right: 20px; color: #f18326; }
header .user:after { font-family: "Fontawesome"; content: "\f107"; position: absolute; right: 0px; }
header .user-menu-box { display: none; width: 100%; position: absolute; background: #394754; left: 0; z-index: 9999; height: initial; box-shadow: 0 0 25px rgba(0,0,0,0.8); }
header .user-menu-box a { display: block; color: #cfcfcf; letter-spacing: 0.4px; font-size: 15px; font-weight: 500; padding: 0 30px 0 50px; position: relative; height: 55px; line-height: 55px; }
header .user-menu-box a:hover { background: var(--blue); text-decoration: initial; color: white; }
header .user-menu-box a.settings:before { font-family: "Fontawesome"; content: "\f013"; position: absolute; left: 20px; font-size: 16px; }
header .user-menu-box a.signout:before { font-family: "Fontawesome"; content: "\f08b"; position: absolute; left: 20px; font-size: 16px; }
header .wrapper:hover .user-menu-box { display: block; }

.panel { width: var(--panelWidth); height: 100%; padding: 70px 0 0 0; top: 0; left: 0; position: fixed; background: #2a2d30; background: #394754; color: black; overflow-y: auto; }
nav { padding: 20px 0 0 0; }
nav .title { color: #aaa; letter-spacing: 1px; margin: 20px 0 10px 0px; padding: 0 0 0 25px; text-transform: uppercase; font-size: 13px; font-weight: 600; }
nav .title:not(:first-child) { border-top: 1px dotted #7e858c; padding-top: 30px; }
nav a { padding: 0 0 0 15px; line-height: 40px; color: #cfcfcf; font-size: 15px; font-weight: 500; letter-spacing: 0.4px; position: relative; display: flex; width: 100%; align-items: center; }
nav a:hover { background: var(--blue); text-decoration: none; color: #fff; }
nav a:hover:before { color: white; }
nav a:before { font-family: "Fontawesome"; position: relative; left: 0px; font-size: 20px; font-weight: 300; width: 50px; display: inline-block; text-align: center; color: #ccd0d8; }

nav a.selected { color: white; }
nav a.selected:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--blue); content: " "; opacity: 0.6; z-index: -1; }
nav a.content:before { content: "\f0f6"; }
nav a.users:before { content: "\f0c0"; }
nav a.user:before { content: "\f2be"; }
nav a.stat:before { content: "\f080"; }
nav a.domains:before { content: "\f0ac"; }
nav a.secret:before { content: "\f21b"; }
nav a.inactive, nav a.inactive:before { color: #6a6d75; }
nav a.bell:before { content: "\f0f3"; }

nav a > span { position: absolute; color: white; font-size: 11px; background: #df3006; padding: 0 8px; height: 22px; line-height: 22px; text-align: center; border-radius: 20px; font-weight: bold; right: 16px; transition: 0.05s; transform: scale(0); opacity: 0; }
nav a > span.show { transform: scale(1); opacity: 1; }

/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* Content ----------------------------------------------------------------------------------------------------------------------------------- */
main { display: flex; padding: 10px; position: relative; padding: 90px 20px 0px 0px; margin: 0px 0px 0px calc(20px + var(--panelWidth));  }
.box { background: #bdc1c5; padding: 0px; margin: 0px 0; position: relative; }
.box.fixed { margin-right: 20px; }
.box.hide { display: none; }
.box.full { flex-grow: 1; opacity: 0; pointer-events: none; }
.box.full.show { opacity: 1; pointer-events: initial; }
.box .contents { xbackground: #f8f8f8; padding: 20px; overflow: auto; }
.contentList { overflow-y: scroll; overflow-x: hidden; position: relative; margin: 0 15px; padding-top: 10px; background: #f8f8f8; user-select: none; box-shadow: 0 0 7px rgba(0,0,0,0.2); }
.contentList > div { font-size: 13px; font-weight: 600; padding: 7px 15px 7px 15px; border-bottom: 1px solid #ddd; cursor: pointer; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: uppercase; }
.contentList > div > span { display: block; font-size: 90%; font-weight: 500; text-transform: uppercase; color: #888; }
.contentList > div:hover, .contentList > div.selected { background: var(--blue); color: white; }
.contentList > div:hover span, .contentList > div.selected span { color: white; }
.box .title { padding: 18px 20px; font-size: 12px; font-weight: 600; background: linear-gradient(var(--blue), #204375); color: white; text-transform: uppercase; letter-spacing: 1px; }
.box .subtitle { padding: 20px 0px 10px; font-size: 15px; font-weight: 600; text-transform: uppercase; }
.box .filter { padding: 15px; }
.box .filter select { margin-bottom: 6px; }
.box.fixed { width: 350px; min-width: 350px; }
.box .field { display: flex; flex-flow: column-reverse; margin-bottom: 5px; }
.location-list .content-box { margin: 0px 0 20px; }
.content-box { background: #e2e4e6; box-shadow: 0 0 7px rgba(0,0,0,0.2); padding: 20px 15px; display: table; position: relative; margin-bottom: 20px; }
.content-box.full { width: 100%; }
.content-box .floating { margin: 5px 0px 15px; }
.modal-dialog .content-box { display: block; margin: 0; }
.content-box button { margin: 15px 10px 0 5px; }
.flex { display: flex; }
.add-open-dialog { position: absolute; right: 0px; top: 0px; padding: 16px 20px; color: white; transition: 0.2s; cursor: pointer; display: none; }
.add-open-dialog:active { transform: scale(0.9); }
.add-open-dialog:before { font-family: "Fontawesome"; content: "\f067"; } 


/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* Footer ------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */

ul.select2-selection__rendered { padding-top: 20px !important; padding-left: 10px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered li { float: initial !important; display: table !important; }

.select2 { width:100%!important; margin-bottom: 10px !important; border: 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container .select2-selection--single { height: 50px !important; line-height: 52px !important; font-size: 15px; font-weight: 600; text-align: left; border: 1px solid #aaa;  }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px !important; width: 40px !important; transform: scale(1.4); }

.select2-dropdown { box-shadow: 0 8px 10px rgba(0,0,0,0.3); padding: 10px 0; margin-top: -3px; border: 1px solid #aaa !important; }
.select2-search--dropdown  { padding: 5px 10px !important; }
.select2-dropdown li { padding: 5px 15px }
.select2-results { font-size: 15px; font-weight: 500; }

input.select2-search__field { height: 34px; padding-left: 10px !important; box-shadow: none !important; width: initial; }
.select2-container .select2-selection--single .select2-selection__rendered { padding-left: 15px !important; white-space: pre-wrap !important; }
.select2-container--default .select2-results>.select2-results__options { max-height: 300px !important; }
.select2-container--default .select2-selection--single { border: 0px solid #9e9e9e !important; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

.tabs { background: #e2e4e6; }
.tabs .links { display: flex; background: #e2e4e6; color: #777; font-size: 13px; font-weight: 600; user-select: none; }
.tabs .links > div { padding: 10px 20px; cursor: pointer; background: #cdd1d4; text-transform: uppercase; }
.tabs .links > div.active { background: linear-gradient(var(--blue), #204375); color: white; }
.tabs .tabcontents > div:not(:first-child) { display: none; }