@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600|Nunito:300,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
html{color: #AFAFB2;}
body{font-family: "IBM Plex Sans";font-weight: 400;font-size: 16px;;background: #424250;color: #FFF:}
.truncate {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.shadow{-webkit-box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.25);  box-shadow: 0px 4px 8px -4px rgba(0,0,0,0.25);}
main{margin-left: auto;margin-right: auto;width: 1600px;background: #33333D;min-height: 100vh;max-width: 100%;max-width: calc(100% - 16px);
  padding-top: 64px;
  padding-bottom: 64px;
}
section.padding{padding: 32px;}
@media only screen and (max-width: 768px){
  section.padding{padding: 16px;}
}

header{position: fixed;top: 0;left: 50%;width: 100%;height: 64px;background: #424250;width: 1600px;max-width: 100%;max-width: calc(100% - 16px);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
header > .inner{display: flex;}
header > .inner > .grow{flex-grow: 1;}
header > .inner > nav{display: flex;}
header > .inner > nav > .item > a{line-height: 64px;color: #FFF;}
header > .inner > nav > .item + .item{margin-left: 16px;}


footer{position: fixed;bottom: 0;left: 50%;width: 100%;height: 64px;background: #424250;width: 1600px;max-width: 100%;max-width: calc(100% - 16px);-webkit-transform: translateX(-50%);transform: translateX(-50%);z-index: 999;color: #737387;}
footer > .inner{height: 64px;display: flex;align-items: center;justify-content: center;}
/* form related */
form .actions{margin-top: 48px;}
.input{display: block;}
.input + *{margin-top: 16px;}
.input > label{display: block;}
.input > label + *, .input > * + label{margin-top: 8px;}
input{font-family: "IBM Plex Sans";font-size: 18px;}
input[type=text], input[type=email], input[type=password]{display: block;padding: 12px;border:none;width: 100%;}
.section-title{border-bottom: 2px solid #FFCD36;padding: 48px 0;background: #292931;}
.heading > .title{font-size: 32px;color: #FFF;font-family: "Nunito";font-weight: 700;}
.heading > .subtitle{font-size: 16px;font-family: "Nunito";font-weight: 300;text-transform: uppercase;color: #737387;letter-spacing: 4px;}
.heading > .title + .subtitle{margin-top: 16px;}
.error-page-message{display: flex;min-height: calc(100vh - 64px);flex-wrap: wrap;align-content: center;}
.error-page-message > *{width: 100%;}
.error-page-message > .code{font-size: 96px;color: #FFF;font-family: "Nunito";font-weight: 700;color: #FFCD36;}
.error-page-message > .code + *{margin-top: 8px;}
.error-page-message > .title{font-size: 32px;color: #FFF;font-family: "Nunito";font-weight: 700;}
/* section-error */
.section-error{text-align: center;}
/* edit-actions */
section.edit-actions{position: fixed;bottom: 64px;padding: 0 16px;align-items: center;z-index: 999;display: flex;justify-content:flex-end;left: 0;background: #292931;left: 50%;width: 100%;height: 64px;width: 1600px;max-width: 100%;max-width: calc(100% - 16px);-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-top: 2px solid #FFCD36;
}
section.edit-actions > * + *{margin-left: 8px;}

/* card-domain-status */

/* section-summary-domains */
.section-summary-domains .item + .item{margin-top: 16px;}
/* */
.section-users .holder-items{margin-left: -16px;margin-right: -16px;}
.section-users .items{display: flex;flex-wrap: wrap;}
.section-users .items > .item{width: 33.3%;width:calc(100% / 3 - .3px);padding: 16px;}
/* */
.section-status .holder-items{margin-left: -16px;margin-right: -16px;}
.section-status .items{display: flex;flex-wrap: wrap;}
.section-status .items > .item{width: 50%;padding: 16px;}
.card-domain-status .line{display: flex;font-size: 14px;}
.card-domain-status .line + .line{margin-top: 16px;}
.card-domain-status .line > .title{flex-grow: 1;font-family: "Nunito";font-weight: 700;color: #FFF;padding-right: 16px;}
.card{display: block;border: 1px solid #FFCD36;background: #373740;-webkit-border-radius: 3px;border-radius: 3px;position: relative;}

.card > a{position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: block;opacity: 0;}
.card > .inner{position: relative;}
.card > .inner > .title{padding: 16px;color: #FFF;border-bottom: 1px solid #FFCD36;display: flex;align-items: center;font-size: 14px;text-transform: uppercase;font-weight: 600;letter-spacing: 1px;font-family: "Nunito";font-weight: 700;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.card:hover > .inner > .title{background: #292931;}
.card > .inner > .title:last-child{border-bottom: none;}
.card > .inner > .title > i{margin-right: 16px;color: #FFF;}
.card > .inner > .info{padding: 16px;}
.card > .inner > .title > .title{flex-grow: 1;}
.card > .inner > .title > .title-notifications > .item > i{color: #37EFBA;}
.card > .inner > .title > .title-notifications > .item.error > i{color: #ED3626;}
.card > .inner > .actions{background: #292931;padding: 12px;display: flex;flex-wrap: wrap;justify-content: flex-end;}
.card > .inner > .actions > .btn{margin: 4px;}
@media only screen and (max-width: 768px){
  .section-status .items > .item{width: 100%;}
}
.btn{border: none;padding: 12px 20px;background: #1099EC;color: #FFF;font-family: "Nunito";font-weight: 700;text-transform: uppercase;text-decoration: none;letter-spacing: 2px;font-size: 13px;-webkit-border-radius: 2px;border-radius: 2px;display:inline-block;cursor: pointer;display: inline-flex;align-items: center;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.btn:hover{background: #087AE3;}
.btn.sm{padding: 8px 16px;font-size: 13px;font-weight: 700;letter-spacing: 1px;}
.btn > i{margin-right: 12px;}
.btn.secondary{background: #9797AD;}
.btn.secondary:hover{background: #737387;}
.hover-drop-down{position: relative;}
.hover-drop-down > .drop-down{position: absolute;top: 100%;right: 0;visibility: hidden;pointer-events: none;opacity: 0;color: #424250;background: #FFF;padding: 8px;border-radius: 2px;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;cursor: pointer;}
.hover-drop-down:hover > .drop-down, .hover-drop-down:focus > .drop-down{pointer-events: all;opacity: 1;visibility: visible;}
.drop-down.error{background: #ED3626;color: #FFF;font-size: 12px;font-weight: 300;}
.drop-down{max-width: 60vw;}
.detailed-info{display: flex;width: 800px;max-width: 100%;margin-left: auto;margin-right: auto;position: relative;}
.detailed-info + .detailed-info{margin-top: 32px;}
.detailed-info > *{position: relative;z-index: 2;}
.detailed-info > .title{width: 20%;color: #FFF;font-family: "Nunito";font-weight: 700;font-size: 20px;text-align: right;padding-right: 32px;}
.detailed-info::before{content: " ";position: absolute;top: 50%;left: 50%;background: #424250;display: block;transform: translate(-50%, -50%);width: 100%;height: 100%;z-index: 1;-webkit-border-radius: 3px;border-radius: 3px;pointer-events: none;opacity: 0;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.detailed-info:hover::before{opacity: 1;width: calc(100% + 32px);height:  calc(100% + 32px);}
.detailed-info > .description {width: 80%;border-left: 2px solid #FFCD36;padding-left: 32px;padding-top: 16px;padding-bottom: 16px;}
.detailed-info > .description > .item{display: flex;}
.detailed-info > .description > .item + .item{margin-top: 16px;}
.detailed-info > .description > .item > .title{flex-grow: 1;color: #FFF;margin-right: 32px;min-width: 150px;}
.detailed-info > .description > .item > .description{text-align: right;}
.detailed-info > .description > .actions{display: flex;margin: 16px 0 0 0;justify-content: flex-end;}
.detailed-info > .description > .actions + *{
  margin-top: 32px;
}
span.danger{background: #ED3626;color: #FFF;padding: 4px 12px;-webkit-border-radius: 3px;border-radius: 3px;font-weight: 700;text-transform: uppercase;font-size: 12px;letter-spacing: 2px;
display: inline-block;
}



.notification{display: block;padding: 16px 16px;color: #FFF;-webkit-border-radius: 3px;border-radius: 3px;background: #12BC00;width: 100%;text-align: center;}
.notification.error{background: #ED3626;}
.notification + *, * + .notification {margin-top: 16px;}

.system-notifications{position: fixed;z-index: 9999;top: 40px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}