/* @import url('https://fonts.googleapis.com/css?family=Montserrat'); */

body {

    background-color: #232b63;

    color: white;

}

body::-webkit-scrollbar { width: 0 !important }

body { overflow: -moz-scrollbars-none; }

body { -ms-overflow-style: none; padding-top: 60px; }

main {

    width: 100%;

    padding: 0 10px 15px 10px;

}

h1 {

    color: white;

    text-align: center;

    font-size: 25px;

}

h2.page-title {

    margin-top: 10px;

    margin-left: 10px;

    margin-bottom: 20px;

    font-family: "Montserrat", "Noto Sans", "Roboto", "Arial", sans-serif;

    font-size: 18px;

    color: white;

}

span.sub-title {

    margin-left: 20px;

    font-size: 14px;

    font-weight: 100;

    color: white;

    font-style: italic;

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}

span.main_title {

    display: block;

}

.pink-button {

    background-color: #D00A75;

    color: white;

    font-family: "Montserrat", "Noto Sans", "Roboto", "Arial", sans-serif;

    font-weight: bold;

    box-shadow: 0px 0px 0px transparent;

    text-shadow: 0px 0px 0px transparent;

    padding: 5px 20px 5px 20px;

    border-radius: 50px;

    border: 2px solid white;

}

.pink-button:focus {

    outline: none;

}

.pink-button:hover {
    background-color: rgb(192, 10, 107);
}

.centered-col {
    float: none;
    margin: 0 auto;
}

.link {
    cursor: pointer;
}

.debug {

    background-color: #D00A75;

    color: white;

    font-family: "Montserrat", "Noto Sans", "Roboto", "Arial", sans-serif;

    padding: 10px;

    border: 2px solid white;

    margin: 10px 0;

}

.debug:empty {

    display: none;

}

.v-centered {

    margin-top: 50vh!important;

    transform: translateY(calc(-50% - 60px));

}

.v-centered-with-title {

    margin-top: 50vh!important;

    transform: translateY(calc(-50% - 121px));

}

iron-icon {

    display: none;

}

.box-success {

    background-color: white;

    padding: 15px;

    border: 2px black solid;

    color: black;

}

.profile-avatar-picture {

    height: 60px;

    width: 60px;

    border-radius: 50px;

}

#preloader {

    position: fixed;

    background-color: #232b63;

    opacity: 1;

    z-index:10002;

    left: 0;

    top: 50px;

    width: 100%;

    height: 100%;

}

#messages p {

    padding: 5px;

    color: white;

    font-size: 15px;

    border: 1px solid white;

}

#messages .success {

    background-color: rgb(43, 131, 83);

}

#messages .fail {

    background-color: rgb(194, 37, 37);

}

.select2-results__option {
    color: black;
}

.multiselect.select-container {
    border-radius: 10px;
    background-color: #232b63!important;
    border: 2px white solid!important;
    /* max-height: 40px!important; */
    /* overflow-y: scroll!important; */
    z-index: 10!important;
}

.multiselect .select2-selection__choice {
    background-color: white!important;
    color: #232b63!important; 
    font-family: Montserrat!important;
    font-size: 11px!important;
    padding: 3px 8px!important;
    border: none!important;
    line-height: 20px!important;
    border-radius: 150px!important;
}
.multiselect .select2-selection__choice {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}
.multiselect .select2-selection__choice__remove {
    float: right!important;
    margin-left: 8px!important;
    font-size: 22px!important;
    color: #232b63!important;
    line-height: 17px!important;
}

.avatar-picture {
    height: 60px;
    width: 60px;
    border-radius: 50px;
}

.pink-button#create-button {

    position: fixed;

    left: 50%;

    transform: translateX(-50%);

    bottom: 10px;

    padding: 10px 20px;

    background-color: rgb(161, 4, 88);

    z-index: 100;

}

.pink-button#create-button:hover {

    background-color: rgb(117, 5, 65);

}