body {
    background-color: #F5F5F7;
    margin: auto;
    align-items: center;
}

/*** Header Styles Start ***/
a {
    color: black;
    text-decoration: none;
}

.navigation {
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    padding: 25px 30px 30px 30px;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.1);
    transition: box-shadow .3s ease-in-out;
    z-index: 1;
}

.navbar.active {
    -webkit-box-shadow: 0 9px 7px -8px rgba(0, 0, 0, .18);
    box-shadow: 0 9px 7px -8px rgba(0, 0, 0, .18);
}

.navbar__primary {

}

.navbar__primary__links {
    font-family: InterMedium;
    margin: 0px 12px;
    font-size: 13px;
}

.navbar__primary__links--logohead {
    font-family: MontserratBold;
    margin: 0px 12px;
    font-size: 15px;
}

.navbar__primary__links--logotail {
    font-family: MontserratRegular;
}

.navbar__primary__links--selected {
    border: 2px solid #622AFF;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 13px;
}

.navbar__primary__links--active {
    color: #622AFF !important;
}

.navbar__account {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    /*width: 50%;*/
    text-align: right;
    margin: 0px 0 0 25px;

}

.display-picture {
    border-radius: 50%;
}

.account {
    display: flex;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
}

.account__name {
    margin-right: 20px;
    font-family: InterMedium;
    font-size: 14px;
}

.account__menu {
    position: relative;
    display: inline-block;
}

.account__menucontent {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 120px;
    border-radius: 10px;
    overflow: auto;
    right: 0px;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.account__menucontent a {
    color: black;
    padding: 8px 14px;
    font-size: 14px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #ddd;
}

.logo .logo__link {
    font-family: "Montserrat";
    float: left;
}


.landing {
    padding: 20px;
}

.landing__cover {
    /*height: 200px;*/
    width: 500px;
}

.landing__title {
    margin-top: 30px;
    text-align: center;
    font-family: InterBold;
    font-size: 24px;
    line-height: 32px;
    max-width: 550px;
    background: linear-gradient(to right, #A548ED, #0069FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing__subtitle {
    margin: 40px 0;
    font-family: InterMedium;
    font-size: 14px;
    color: #333333;
    text-align: center;
}

.landing__button {
    margin: 5px 0;
    cursor: pointer;
    font-family: InterMedium;
    font-size: 14px;
    color: white;
    padding: 12px 30px;
    width: 250px;
    background: #2F72F9;
    border: 0;
    border-radius: 10px;
}

.landing__clients {
    height: 18px;
    display: block;
    margin: 45px 0 35px 0;
}

.brands_list {
    margin: 25px 0 35px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.brands_list img {
    max-width: 100px;
    max-height: 60px;
    -webkit-filter: contrast(100%) grayscale(100%);
    filter: contrast(100%) grayscale(100%);
}

.body_container {
    width: 1150px;
}

.body_container--space {
    margin-top: 30px;
}

.profile {
    margin: 0px 0px 15px 0px;
}

.profile__table {
    border-spacing: 5px;
    /*border-collapse: collapse;*/
}

.profile__table td {
    padding: 15px;
}

.profile__picture {
    width: 150px;
}

.profile__name {
    line-height: 32px;
    width: 200px;
    font-family: InterExtraBold;
    font-size: 24px;
}

.profile__subtitle {
    font-family: InterRegular;
    color: #333333;
    line-height: 22px;
    margin-top: 15px;
    font-size: 13px;
    max-width: 500px;
}

.profile__editbutton {
    cursor: pointer;
    font-family: InterMedium;
    font-size: 14px;
    background-color: transparent;
    border: 2px solid #622AFF;
    border-radius: 10px;
    padding: 6px 25px;
    width: max-content;
}


.tabs {
    display: flex;
    flex-direction: row;
    padding: 0px 32px;
}

.tabs--vault {
    padding: 0px 22px !important;
}

.tabs__tab {
    float: left;
    padding: 05px 10px;
    margin: 0px 10px;
    font-family: InterBold;
    font-size: 15px;
    cursor: pointer;
}

.tabs__tab--vault {
    margin: 0 05px !important;
}

.tabs__tab--selected {
    color: #622AFF;
}

.content_container {
    margin: 0 10px
}

.contentview {
    width: 100%;
    margin: 30px 0px;
}

.contact {
    margin: 15px 0 25px 0;
    background-color: white;
    border-radius: 20px;
    padding: 35px 40px;
    text-align: left;
}

.contact__title {
    color: #000000;
    font-family: InterBold;
    font-size: 15px;
}


.contact__sociallink {
    font-size: 12px;
    /*margin: 20px 0 !important;*/
    font-family: MontserratRegular !important;
}

.contact_socialicon {
    width: 30px;
    margin: 5px 0;
}


.certificate {
    cursor: pointer;
    margin: 15px 0 25px 0;
    background-color: white;
    border-radius: 20px;
    padding: 22px 27px;
}

.certificate__table {
    padding: 12px;
}


.certificate__head {
    display: flex;
    min-height: 34px;
    flex-direction: row;
    justify-content: space-between;
}

.certificate__head__title {
    color: #000000;
    font-family: InterBold;
    font-size: 15px;
}

.certificate__head__button {
    color: white;
    border: 0;
    outline: 0;
    font-family: InterBold;
    font-weight: 500;
    font-size: 13px;
    background-color: #1C72ED;
    border-radius: 100px;
    padding: 9px 26px;
}

.certificate__meta {
    font-size: 12px;
    font-family: MontserratRegular !important;
}

.certificate__meta--head {
    margin: 10px 0;
}

.certificate__detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.files {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100%;
    /*background-color: #CCCCCC;*/
}

.file {
    width: 230px;
    /*height: 200px;*/
    /*display: flex;*/
    /*flex-direction: column-reverse;*/
    /*overflow: hidden;*/
    /*margin: 10px;*/
}

.file__cover {
    margin: 10px;
    background-color: white;
    border-radius: 15px;
}

.file__image {
    /*width: 200px;*/
    height: 150px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.file__detail {
    /*width: 100%;*/
    /*height: 30px;*/
    padding: 15px 22px;
}

.file__configure {
    /*width: 100%;*/
    /*height: 0px;*/
    /*padding: 5px 22px 22px 22px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.file__name {
    font-family: gl;
    font-size: 12px;
    text-align: left;
    line-height: 18px;
}

.file__edit {
    font-family: gl;
    font-size: 12px;
    color: #000;
    cursor: pointer;
}

.file:hover .file__edit {
    color: #000;
}

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    right: 0;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    transition-timing-function: ease-in-out;
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.popup__content {
    background-color: #fefefe;
    margin: auto;
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
}

.popup__privacy {
    padding: 34px;
}

.popup__space {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.popup__title {
    font-family: InterBold;
    font-size: 16px;
    color: #333333;
}

.popup__title--light {
    font-family: InterRegular;
}

.popup__status {
    font-family: "Inter Light";
    font-size: 14px;
    color: #333333;
}

.popup__ifpublic {
    font-family: "Inter Light";
    font-size: 14px;
    color: #333333;
    margin-top: 40px;
}


.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 5px;
    bottom: 4.5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #5CD865;
}

input:focus + .slider {
    box-shadow: 0 0 1px #5CD865;
}

input:checked + .slider:before {
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
}


/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


.blur_element {
    -webkit-filter: blur(40px) !important;
    -moz-filter: blur(40px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px) !important;
    /*transition: 0.05s;*/
    /*transition-timing-function: ease-in-out;*/
}

.new {
    margin: 30px 22px;
    /*width: 100%;*/
    height: 100%;
    text-align: left;
}

.new__attach {
    cursor: pointer;
    border: 2px dashed #707070;
    border-radius: 15px;
    padding: 55px;
    font-size: 12px;
    margin-top: 20px;
}

.new__form {
    padding: 0px 5px 0px 5px;
}

.new__type {
    display: inline-block;
    margin: 25px 0 0 5px;
}

.new__label {
    font-size: 10px;
    font-family: MontserratRegular;
    color: #333333;
}

.new__type--label {
    font-size: 10px;
    font-family: MontserratRegular;
    font-weight: 100;
    color: #333333;
    float: left;
    padding: 0 10px;
    cursor: pointer;
}

.new__type--label .selected {
    font-weight: 900;
    color: #000;

}

.new__input {
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 13px 16px;
    border: 0.8px SOLID #8C8C8C;
    border-radius: 4px;
    background-color: transparent;
}

.new__button {
    color: white;
    border: 0;
    outline: 0;
    font-family: InterBold;
    font-weight: 500;
    font-size: 13px;
    background-color: #622AFF;
    border-radius: 100px;
    padding: 9px 26px;
    width: 100%;
    cursor: pointer;
}

.new__error {
    font-size: 10px;
    font-family: MontserratRegular;
    color: red;
    padding: 10px 0;
}

.desktop__only {
    display: unset;
}

.manager {
    width: 100%;
    max-width: 700px;
    /*padding: 20px;*/
}

.manager__body {
    background-color: white;
    padding: 30px;
    text-align: left;
    border-radius: 16px;
}

.manager__title {
    font-family: InterBold;
    font-size: 14px;
    color: #333333;
}

.manager__text {
    font-family: InterRegular;
    font-size: 12px;
    color: #333333;
    line-height: 21px;
}


.input__label {
    font-size: 10px;
    font-family: MontserratRegular;
    color: #333333;
}

.input_editbox {
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 13px 16px;
    border: 0.8px SOLID #8C8C8C;
    border-radius: 4px;
    background-color: transparent;
}


.input__button {
    color: white;
    border: 0;
    outline: 0;
    font-family: InterBold;
    font-weight: 500;
    font-size: 13px;
    background-color: #622AFF;
    border-radius: 100px;
    padding: 9px 26px;
    width: 100%;
    cursor: pointer;
}

.input__button--warning {
    background-color: #FE5757;
}

.input__error {
    font-size: 10px;
    font-family: MontserratRegular;
    color: red;
    padding: 10px 0;
    text-align: left;
}


@media screen and (max-width: 1000px) {

    .root_container {
        margin: 10px;
    }

    .account-container {
        margin: 10px 20px 30px 20px;
    }

    .navbar {
        /*padding: 25px 20px 30px 20px;*/
        padding: 15px 20px 15px 20px;
    }

    .navbar__primary__links--logohead {
        margin: 0px 5px;
        font-size: 12px;
    }

    .navbar__primary__links {
        margin: 0px 9px;
        font-size: 10px;
    }

    .account__name {
        display: none;
    }

    .landing {
        padding: 15px;
    }

    .landing__cover {
        height: 125px;
        width: 300px;
    }

    .landing__title {
        /*margin-top: 40px;*/
        font-size: 22px;
        line-height: 30px;
    }

    .landing__subtitle {
        margin: 40px;
        font-size: 12px;
        line-height: 18px;
    }

    .landing__button {
        padding: 9px 30px;
    }

    .brands_list {
        display: none;
    }


    .body_container {
        width: 100%;
        /*padding: 20px;*/
        /*display: table-cell;*/
    }

    .body_container--space {
        margin-top: 12px;
    }


    .profile {
        margin: 0px 0px 25px 0px;
    }


    .profile__table {
        border-spacing: 0px;
    }

    .profile__table td {
        padding: 10px;
    }

    .profile__picture {
        width: 90px;
    }

    .profile__name {
        line-height: 22px;
        width: 100%;
        font-size: 16px;
    }

    .profile__subtitle {
        line-height: 16px;
        margin-top: 9px;
        font-size: 10px;
    }

    .profile__editbutton {
        font-size: 10px;
        border-radius: 8px;
        padding: 6px 15px;
    }


    .tabs {
        padding: 0px 20px;
    }

    .tabs__tab {
        float: left;
        padding: 05px 5px;
        margin: 0px 05px;
        font-family: InterBold;
        font-size: 12px;
        cursor: pointer;
    }

    .contentview {
        margin: 10px 0px;
    }


    .contact {
        padding: 22px 22px;
    }

    .contact__title {
        font-size: 12px;
        margin-bottom: 10px !important;
    }


    .contact__sociallink {
        font-size: 12px;
        /*margin: 10px 0;*/
    }

    .contact_socialicon {
        width: 25px;
    }


    .certificate {
        margin: 15px 0 15px 0;
        background-color: white;
        border-radius: 20px;
        padding: 12px 10px;
    }

    .certificate__table {
        padding: 10px;
    }

    .certificate__head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .certificate__head__title {
        font-size: 12px;
    }

    .certificate__head__button {
        font-size: 10px;
        border-radius: 100px;
        padding: 3px 10px;
    }

    .certificate__meta {
        font-size: 10px;
    }

    .certificate__meta--head {
        margin-bottom: 10px;
    }

    .desktop__only {
        display: none;
    }

    .vault__body {
        margin: 0 10px;
    }

    .files {
        margin: 10px 0 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: 100%;
        /*background-color: #CCCCCC;*/
    }

    .file {
        width: 50%;
        /*height: 200px;*/
        /*display: flex;*/
        /*flex-direction: column-reverse;*/
        /*overflow: hidden;*/
        /*margin: 10px;*/
    }

    .file__cover {
        background-color: white;
        border-radius: 15px;
    }

    .file__image {
        /*width: 200px;*/
        height: 150px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .file__detail {
        /*width: 100%;*/
        /*height: 30px;*/
        padding: 15px 22px;
    }

    .file__configure {
        /*width: 100%;*/
        /*height: 0px;*/
        /*padding: 5px 22px 22px 22px;*/
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .file__name {
        font-family: gl;
        font-size: 12px;
        text-align: left;
        line-height: 18px;
    }

    .mob-flex_alignleft {
        align-items: flex-start;
    }
    .mob-flex_column {
        flex-direction: column;
    }



}