* {
    box-sizing:                         border-box;
    margin: 						    0;
    padding: 						    0;
}

html {
    background-color:                   white;
    color:                              black;
    font-size:                          14px;
    font-family:                        'Source Sans Pro', sans-serif;
    font-weight:                        300;
    -webkit-font-smoothing:             antialiased;
    overscroll-behavior:                none;
}





/*****     ELEMENTS     *****/

.title {
    font-size:                          18px;
    font-family:                        'Circular', serif;
    font-weight:                        200;
}

.title.page {
    font-size:                          30px;
    letter-spacing:                     -1px;
    cursor:                             pointer;
}

.title.page.dot {
    color:                              #FFDD34;
}

.subtitle {
    font-size:                          16px;
    font-weight:                        300;
}

.no-title {
    height:                             39px;
}



.button {
    display:                            flex;
    align-items:                        center;
    width:                              fit-content;
    height:                             28px;
    padding:                            0 14px 2px;
    border-radius:                      14px;
    font-size:                          12px;
    font-family:                        'Circular', serif;
    font-weight:                        200;
    background:                         #FFDD34;
    color:                              black;
    border:                             none;
    cursor:                             pointer;
}

.button:hover {
    background:                         #FFE45B;
}

.button.grey {
    background:                         #E6E6E6;
}

.button.grey:hover {
    background:                         #EBEBEB;
}

.button.red {
    color:                              white;
    background:                         #FF5F5F;
}

.button.red:hover {
    background:                         #FF6F6F;
}

.button.green {
    color:                              white;
    background:                         #4CD976;
}

.button.green:hover {
    background:                         #6CE08F;
}

.button.large {
    height:                             32px;
    padding:                            0 16px 2px;
    font-size:                          14px;
    border-radius:                      16px;
}

.button.icon {
    padding:                            0 14px 0 10px;
}

.button.icon .icon {
    height:                             16px;
    margin:                             0 6px 0 0;
}

.button.icon-reverse {
    padding:                            0 10px 0 14px;
}

.button.icon-reverse .icon {
    height:                             16px;
    margin:                             0 0 0 6px;
}

.button.icon .text,
.button.icon-reverse .text {
    padding-bottom:                     2px;
}

.button.transparent {
    background:                         none;
}

.button.transparent:hover {
    background:                         #F0F0F0;
}

.button-free {
    font-size:                          12px;
    color:                              #808080;
    cursor:                             pointer;
}

button:focus {
    outline:                            none;
}

.button-add {
    width:                              32px;
    height:                             32px;
    padding:                            11px;
    border-radius:                      16px;
    background:                         #F0F0F0;
    user-select:                        none;
    cursor:                             pointer;
}

.button-add:hover {
    background:                         #E6E6E6;
}



.tab,
.tag {
    height:                             24px;
    width:                              min-content;
    border-radius:                      12px;
    padding:                            4px 12px;
    font-family:                        'Circular', serif;
    font-weight:                        200;
    font-size:                          12px;
    user-select:                        none;
}

.tab {
    margin-right:                       8px;
    background:                         transparent;
    cursor:                             pointer;
}

.tab:hover,
.tab.active {
    background:                         #E6E6E6;
}



.comment {
    width:                              100%;
    padding:                            16px 24px 16px 32px;
    background-color:                   #FFF7D1;
    font-style:                         italic;
}

.comment-tail {
    height:                             0;
    width:                              0;
    border-top:                         20px solid #FFF7D1;
    border-left:                        20px solid transparent;
}

.comment-tail.up {
    height:                             0;
    width:                              0;
    border-top:                         20px solid transparent;
    border-left:                        20px solid #FFF7D1;
}





#tooltip {
    position:                           absolute;
    padding:                            2px 6px 3px;
    border-radius:                      4px;
    font-weight:                        600;
    font-size:                          12px;
    background:                         #000000CC;
    color:                              white;
    opacity:                            0;
    z-index:                            999;
}





.loader {
    border:                             3px solid #F0F0F0;
    border-top:                         3px solid #CCCCCC;
    border-radius:                      50%;
    width:                              24px;
    height:                             24px;
    animation:                          spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/*****     STRUCTURE     *****/

#app {
    display:                            unset;
}

#mobile {
    display:                            none;
}

#wrap {
    position:                           fixed;
    width:                              100vw;
    height:                             100vh;
    overflow-y:                         scroll;
    z-index:                            1;
}



.content-columns {
    display:                            grid;
    grid-template-columns:              1fr 64px 1fr;
    grid-template-areas:                "left . right";
}

.content-columns .left {
    grid-area:                          left;
}

.content-columns .right {
    grid-area:                          right;
}

.wide {
    display:                            grid;
}





/*****     MENU     *****/

#menu {
    position:                           fixed;
    display:                            grid;
    grid-template-rows:                 auto 1fr;
    height:                             100vh;
    padding:                            123px 64px 0;
    z-index:                            2;
}

#menu .item {
    display:                            flex;
    align-items:                        center;
    height:                             76px;
    padding:                            22px 0 22px 16px;
    cursor:                             pointer;
}

#menu .item .label {
    font-size:                          14px;
    font-family:                        'Circular', serif;
    font-weight:                        100;
    color:                              #000000
}

#menu .item img {
    height:                             32px;
    width:                              32px;
    border-radius:                      16px;
    margin-left:                        14px;
    padding:                            8px;
    background:                         #FFDD34;
    visibility:                         hidden;
    transition:                         all 0s linear;
}

#menu .item:hover .label {
    font-size:                          14px;
    font-family:                        'Circular', serif;
    font-weight:                        200;
    color:                              #000000;
}

#menu .item:hover img {
    visibility:                         visible;
    transform:                          translate(4px, 0);
    transition:                         all .2s ease-out;
}

#menu-actions {
    display:                            flex;
    margin:                             auto auto 48px 0;
}

#button-logout,
#button-settings {
    width:                              24px;
    height:                             24px;
    cursor:                             pointer;
}

#button-logout {
    margin-right:                       24px;
}

#button-menu,
#button-back {
    width:                              40px;
    height:                             40px;
    margin:                             0 12px;
    border-radius:                      20px;
    padding:                            8px;
    background:                         transparent;
    cursor:                             pointer;
}

#button-menu:hover,
#button-back:hover {
    background:                         #F0F0F0;
}

#button-none {
    width:                              48px;
    height:                             40px;
}



#header {
    position:                           fixed;
    display:                            flex;
    width:                              100%;
    top:                                0;
    align-items:                        center;
    height:                             80px;
    padding-right:                      64px;
    z-index:                            3;
}

#header .person {
    margin-left:                        auto;
}

#header .person img,
#header .person .no-avatar {
    width:                              40px;
    height:                             40px;
    margin:                             0 0 0 12px;
    border-radius:                      20px;
}

#header .person .no-avatar {
    font-size:                          14px;
    text-align:                         center;
    padding-right:                      1px;
}

#header .person .name {
    margin:                             0 0 1px auto;
}

#header .person .role {
    margin:                             0 0 0 auto;
}





/*****     LIST     *****/

#list {
    display:                            grid;
    overflow:                           hidden;
}



#headers {
    grid-area:                          headers;
    display:                            grid;
    grid-template-rows:                 48px;
    z-index:                            5;
}

#headers .header {
    display:                            flex;
    align-items:                        center;
    height:                             48px;
    padding-left:                       24px;
    color:                              #808080;
    overflow:                           hidden;
    word-break:                         break-all;
}



#items {
    grid-area:                          items;
    overflow:                           overlay;
}

#items .item {
    display:                            grid;
    height:                             64px;
    align-items:                        center;
    cursor:                             pointer;
}

#items .item:hover {
    background:                         #F0F0F0 !important;
}

#items .item.odd {
    background:                         #F8F8F8;
}

#items .item .attribute {
    padding-left:                       24px;
    overflow:                           hidden;
    white-space:                        nowrap;
}

#items .item .attention {
    width:                              12px;
    height:                             12px;
    margin:                             0 24px 0 12px;
    border-radius:                      6px;
    background:                         #4CD976;
}

#items .item:hover .attention {
    opacity:                            0;
}

#items .item .action {
    width:                              48px;
    padding:                            0 20px 0 4px;
    opacity:                            0;
}

#items .item:hover .action {
    opacity:                            1;
    transform:                          translate(4px, 0);
    transition:                         all .2s ease-out;
}

#items .item .end {
    display:                            flex;
    align-items:                        center;
}

#items .item .end .action {
    margin-right:                       -48px;
}



.no-items {
    text-align:                         center;
    color:                              #666666;
    background:                         #F8F8F8;
}





.person {
    display:                            flex;
    align-items:                        center;
    cursor:                             pointer;
}

.person img {
    object-fit:                         cover;
}

.person .values {
    height:                             72px;
    width:                              100%;
    padding:                            17px 16px 0 32px;
    background:                         #F8F8F8;
}

.person:hover .values {
    background:                         #F0F0F0;
}

.person .name {
    margin:                             0 0 1px 0;
    font-weight:                        600;
}

.person .role {
    margin:                             0;
    color:                              #666666;
}

.person.large {
    margin-bottom:                      0;
}

.person.large img,
.person.large .no-avatar {
    width:                              96px;
    height:                             96px;
    margin:                             0 24px 0 0;
    border-radius:                      48px;
}

.person.regular {
    margin-bottom:                      24px;
}

.person.regular img,
.person.regular .no-avatar {
    width:                              72px;
    height:                             72px;
    margin:                             0 24px 0 0;
    border-radius:                      36px;
}

.person.grid img,
.person.grid .no-avatar {
    width:                              64px;
    height:                             64px;
    margin:                             0 16px 16px 0;
    border-radius:                      32px;
}

.no-avatar {
    display:                            flex;
    align-items:                        center;
    justify-content:                    center;
    background:                         #CCCCCC;
    color:                              white;
    font-family:                        'Circular', serif;
    font-weight:                        200;
    font-size:                          22px;
    letter-spacing:                     -.7px;
}





#agreements {
    display:                            flex;
    width:                              max-content;
    transition:                         transform .4s ease;
}

.agreement {
    width:                              max-content;
    padding:                            22px 24px 46px 32px;
    margin-right:                       40px;
    line-height:                        24px;
    background:                         #F8F8F8;
}

.agreement .title {
    font-family:                        'Circular', serif;
    font-weight:                        200;
    font-size:                          12px;
    text-decoration:                    underline;
}

.agreement .trial {
    color:                              #FF0000;
}

.agreement .expired {
    color:                              #FF0000;
}

.agreement {
    opacity:                            .5;
    transition:                         all .4s ease;
}

.agreement.active {
    opacity:                            1;
    cursor:                             pointer;
}

.agreement.active:hover,
.agreement.selected:hover {
    background:                         #F0F0F0;
}

.agreement.selected .selector {
    background:                         #4CD976;
}

.agreement .top,
.agreement .bottom {
    display:                            flex;
    align-items:                        center;
}

.agreement .top .title {
    padding:                            unset;
}

.agreement .bottom {
    margin:                             16px 48px 0 0;
}

.agreement .bottom img,
.agreement .bottom .no-avatar {
    width:                              56px;
    height:                             56px;
    margin:                             0 26px 0 0;
    border-radius:                      28px;
}

.agreements #button-previous,
.agreements #button-next {
    user-select:                        none;
}

.agreements #button-previous.visible,
.agreements #button-next.visible {
    display:                            unset;
}





#banner {
    display:                            flex;
    align-items:                        flex-end;
    height:                             240px;
    background-size:                    contain;
}

#banner .title {
    margin:                             0 0 0 24px;
    font-size:                          40px;
    font-weight:                        400;
    color:                              white;
}

#banner .subtitle {
    font-size:                          14px;
    margin:                             0 0 16px 25px;
    color:                              white;
}





.language-select {
    position: fixed;
    bottom: 24px;
    right: 64px;
    height: 40px;
    width: 160px;
    display: flex;
    align-items: center;
    background: #000000;
    border-radius: 12px;
    padding: 0 8px 0 16px;
    z-index: 100;
    cursor: pointer;
}

.language-select .flag {
    width: 20px;
    margin-right: 8px;
}

.language-select .value {
    font-weight: 500;
    color: white;
}

.language-select .chevron {
    width: 24px;
    margin-left: auto;
}

.language-select .options {
    display: none;
    position: absolute;
    margin-top: -144px;
    margin-left: -16px;
}

.language-select .option {
    height: 40px;
    width: 160px;
    background: #E6E6E6;
    border-bottom: 1px solid #CCCCCC;
    padding: 10px 0 0 16px;
    cursor: pointer;
}

.language-select .option:hover {
    background: #CCCCCC;
}

.language-select .option:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.language-select .option:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
}

.language-select.open .chevron {
    transform: rotate(180deg);
}

.language-select.open .options {
    display: block;
}





input,
textarea {
    width:                              100%;
    height:                             100%;
    border:                             none;
    background:                         none;
    font-size:                          14px;
    font-family:                        'Source Sans Pro', sans-serif;
    font-weight:                        300;
    padding-left:                       4px;
}

textarea {
    resize:                             none;
    margin:                             11px 8px 11px 4px;
}

input:-webkit-autofill {
    -webkit-box-shadow:                 none;
}

input:-webkit-autofill::first-line{
     font-size:                         14px;
     font-family:                       'Source Sans Pro', sans-serif;
     font-weight:                       300;
}

input:focus,
textarea:focus {
    outline:                            none;
}

input[type="date"] {
    margin-right:                       10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity:                            0.7;
}

input[type="file"] {
    width:                              unset;
}

.input-invalid {
    position:                           absolute;
    margin:                             6px 0 0 4px;
    font-size:                          12px;
    color:                              red;
}

select {
    width:                              100%;
    height:                             100%;
    border:                             none;
    background:                         none;
    font-size:                          14px;
    font-family:                        'Source Sans Pro', sans-serif;
    font-weight:                        400;
    cursor:                             pointer;
    text-align:                         center;
    text-align-last:                    center;
    -moz-text-align-last:               center;
    -moz-appearance:                    none;
    -webkit-appearance:                 none;
}

select:focus {
    outline:                            none;
}

select::-ms-expand {
    display:                            none;
}

::placeholder {                         color: #B3B3B3; opacity: 1; }

::-ms-input-placeholder {               color: #B3B3B3;}

:-ms-input-placeholder {                color: #B3B3B3;}



.box-clear,
.box-input,
.box-select {
    width:                              100%;
    height:                             40px;
}

.box-input {
    display:                            flex;
    align-items:                        center;
    border-bottom:                      1px solid #CCCCCC;
}

.box-input:focus-within {
    border-bottom:                      1px solid black;
}

.box-input.invalid,
.box-input.invalid:focus-within {
    border-bottom:                      1px solid red
}

.box-input .icon {
    width:                              20px;
    height:                             20px;
    margin-right:                       10px;
    opacity:                            .7;
}

.box-input:focus-within .icon {
    opacity:                            1;
}

.box-input.autocomplete {
    background:                         #FFFBE5;
}

.box-input.multiline {
    height:                             unset;
    min-height:                         40px;
}

.box-select {
    background:                         #F8F8F8;
}

.box-select:hover {
    background:                         #F0F0F0;
}



.autocomplete {

}

.autocomplete-list {
    position:                           absolute;
    z-index:                            99;
    width:                              312px;
    max-height:                         456px;
    overflow:                           scroll;
}

.autocomplete-item {
    display:                            flex;
    align-items:                        center;
    height:                             48px;
    padding-left:                       16px;
    background:                         #F8F8F8;
    color:                              #999999;
    cursor:                             pointer;
    white-space:                        pre;
}

.autocomplete-item:hover {
    background-color:                   #F0F0F0;
}

.autocomplete-item.active {
    background-color:                   #F0F0F0 !important;
}





.block-attributes {
    margin:                             0 0 48px;
}

.block-attributes .title {
    padding:                            0 0 16px 4px;
}

.block-attributes .subtitle {
    padding:                            0 0 8px 4px;
}

.block-attributes .list-attributes {
    padding:                            16px 0 8px 32px;
    background:                         #F8F8F8;
}

.list-attributes .attribute {
    display:                            flex;
    align-items:                        center;
    height:                             48px;
    margin-bottom:                      16px;
}

.attribute .name {
    width:                              100px;
    color:                              #666666;
}

.attribute .value {
    width:                              192px;
    padding-right:                      24px;
    text-overflow:                      ellipsis;
    overflow:                           hidden;
    white-space:                        nowrap;
}





.content-fold {
    background:                         #F8F8F8;
    margin-top:                         24px;
    padding:                            8px 0;
}

.content-fold .item {
    width:                              100%;
    padding:                            0 16px 0 32px;
    color:                              #666666;
}

.content-fold .item-title {
    display:                            flex;
    align-items:                        center;
    height:                             64px;
    user-select:                        none;
    cursor:                             pointer;
}

.content-fold .item img {
    width:                              24px;
    height:                             24px;
    margin-left:                        auto;
    transition:                         transform .2s ease-out;
}

.content-fold .item.visible img {
    transform:                          rotateX(-180deg);
    transition:                         transform .2s ease-out;
}

.content-fold .item p {
    display:                            none;
    margin-right:                       32px;
    margin-bottom:                      28px;
    color:                              black;
}

.content-fold .item.visible p {
    display:                            block;
}

.content-fold .seperator {
    height:                             1px;
    margin:                             4px 24px;
    background:                         #E6E6E6;
}





.block-users {
    margin:                             0 0 64px;
}

.block-users .title {
    padding:                            0 0 16px 4px;
}

.block-users .list-users {
    padding-top:                        8px;
}

.block-users .list-users.grid {
    display:                            grid;
    grid-template-columns:              repeat(4, auto);
    padding-top:                        0;
}





.contact-popout {
    position:                           absolute;
    display:                            none;
    margin-top:                         156px;
    margin-left:                        -4px;
    font-size:                          14px;
    font-family:                        'Source Sans Pro', sans-serif;
    font-weight:                        300;
    cursor:                             text;
}

.button.clicked .contact-popout {
    display:                            grid;
}

.contact-popout .contact-item {
    display:                            flex;
    align-items:                        center;
    height:                             52px;
    padding:                            0 24px;
    background:                         #F0F0F0;
    color:                              #666666;
}

.contact-popout .contact-item:hover {
    background:                         #F4F4F4;
}





@font-face {
    font-family:                        'Circular';
    src:                                url('/fonts/circular-book.otf') format("opentype");
    font-weight:                        100;
}

@font-face {
    font-family:                        'Circular';
    src:                                url('/fonts/circular-medium.otf') format("opentype");
    font-weight:                        200;
}

@font-face {
    font-family:                        'Circular';
    src:                                url('/fonts/circular-bold.otf') format("opentype");
    font-weight:                        300;
}

@font-face {
    font-family:                        'Circular';
    src:                                url('/fonts/circular-black.otf') format("opentype");
    font-weight:                        400;
}





/*   REMOVE ABILITY TO SELECT FROM ELEMENTS   */

.agreement {
    -webkit-user-select:                none;
    -khtml-user-select:                 none;
    -moz-user-select:                   -moz-none;
    -o-user-select:                     none;
    user-select:                        none;
}





/*   REMOVE CLEAR CROSS FROM INPUT FIELDS IN IE AND CHROME   */

input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }