html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    height: 100%;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

ul.nav li a, ul.nav li a:visited {
    font-size: 20px;
    font-weight: bold;
    color: #000000 !important;
}

    ul.nav li a:hover, ul.nav li a:active {
        font-weight: bold;
        color: #000000 !important;
    }

ul.nav li.active a {
    font-weight: bold;
    color: #000000 !important;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

* {
    outline: 0 !important;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    width: 120px;
    height: 40px;
    cursor: pointer;
    background-color: inherit;
}

button::-moz-focus-inner {
    border: 0;
}

.subgroup-header {
    color: #fce8eb;
}

.proxy {
    border-style: solid;
    border-color: #434857;
    border-width: 1px;
}

.button-clean {
    border-color: #333333;
    color: #333333;
    font-family: 'Raleway-Medium';
    letter-spacing: 0.54px;
    align-content: center;
    text-align: center;
}

    .button-clean:hover {
        background-color: #e64777;
    }

.button-clean-activate {
    background-color: #e64777;
    border-color: #ffffff;
    color: #ffffff;
    align-content: center;
    text-align: center;
    font-family: 'Raleway-Medium';
    letter-spacing: 0.54px;
}

.button-subgroups {
    color: #fce8eb;
    border-color: #8a8a8a;
    border-radius: 25px;
    text-align: center;
    letter-spacing: 2px;
    font-family: 'Raleway-Medium';
    font-size: 16px;
    font-weight: 300;
    width: 140px;
    height: 50px;
}

    .button-subgroups:hover {
        background-color: #464646;
    }

.button-subgroups-active {
    background-color: #e64777;
    color: #fce8eb;
    border-color: #8a8a8a;
    text-align: center;
    letter-spacing: 2px;
    font-size: 16px;
    font-weight: 300;
    width: 140px;
    height: 50px;
    border-radius: 25px;
}

.button-proxy {
    display: flex;
    background-color: #DBDBDB;
    border-color: #DBDBDB;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica Neue LT Pro 53 Ex';
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0px;
    color: #3B3B3B;
}

    .button-proxy:hover {
        background-color: #FF746C;
        color: #FFFFFF;
    }

.line-text {
    font-size: 20px;
    margin: 2px;
}









.offset-column-left {
    display: inline-block;
    float: left;
}

.offset-column-right {
    display: inline-block;
    float: right;
}

.button-indicator-group {
    position: absolute;
    right: 4px;
    top: 6px;
}

.button-indicator-group2 {
    display: table-cell;
    vertical-align: top;
    float: right;
    margin: 2px 6px 0 0;
}

.button-indicator-group3 {
    position: absolute;
    right: 46px;
    top: 10px;
}

.button-indicator {
    display: table-cell;
    vertical-align: top;
    float: right;
    background-color: black;
    border: 2px solid black;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    margin: 0px 3px 0px 0;
    cursor: pointer;
}

.button-delete {
    margin-left: 150px;
}

.indicator-online {
    background-color: #c5ffbe;
    border-color: #c5ffbe;
}

.indicator-offline {
    background-color: red;
    border-color: red;
    height: 16px;
    width: 16px;
    border-radius: 8px;
}


.noty_effects_open {
    opacity: 0;
    transform: translate(50%);
    animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.noty_effects_close {
    animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes noty_anim_in {
    100% {
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes noty_anim_out {
    100% {
        transform: translate(50%);
        opacity: 0;
    }
}

.settings-title-button {
    display: inline-block;
    float: left;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url('/resources/Images/icon_left.png') no-repeat;
    background-size: contain;
}

.settings-title {
    display: inline-block;
    float: left;
    text-align: center;
}

.scrollup {
    width: 40px;
    height: 40px;
    opacity: 0.3;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url('/resources/Images/icon_top.png') no-repeat;
}

.checkbox-title {
    margin: 0 10px;
}


.settings-update-arena {
    display: flex;
    justify-content: center;
}

    .settings-update-arena > div {
        min-width: 700px;
    }



/* Auth page */
.auth-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.auth-content > div {
    margin: 4px;
}

.auth-content-button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 10px;
}
/*UI Settings page*/
.theme-button-area {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.theme-button {
    background: #ffffff;
    border: 1px solid black;
    padding: 30px;
    margin: 10px;
    cursor: pointer;
}

    .theme-button:hover {
        border-color: #a0a0a0;
    }

.theme-button-active {
    background: #CCCCCC;
    border-width: 3px;
}

/* Color component*/
.color-component {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
}

.color-component-item {
    border: 2px solid inherit;
    width: 28px;
    height: 28px;
    margin: 6px;
    cursor: pointer;
}

.color-component-item-active {
    box-shadow: 0px 0px 0px 5px #000000;
    border-radius: 3px;
}




/* Dropup Button */
.dropbtn {
    border: none;
    height: 16px;
}

/* The container <div> - needed to position the dropup content */
.dropup {
    position: relative;
    display: inline-block;
}

/* Dropup content (Hidden by Default) */
.dropup-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 40px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100501;
    margin-left: -40px;
    margin-top: -17px;
}

    /* Links inside the dropup */
    .dropup-content a {
        color: black;
        padding: 2px 6px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropup links on hover */
        .dropup-content a:hover {
            background-color: #ddd
        }

/* Show the dropup menu on hover */
.dropup:hover .dropup-content {
    display: block;
}

/* Change the background color of the dropup button when the dropup content is shown */
.dropup:hover .dropbtn {
    background-color: inherit;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.snapshot-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.snapshot-pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 4px;
    cursor: pointer;
}

    .snapshot-pagination-button span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

        .snapshot-pagination-button span:hover {
            border: 1px solid gray;
            border-radius: 5px;
        }

/* Group page */

.group-page {
    position: relative;
}

.btn-toggle-mode-input {
    display: none;
}

.btn-toggle-group {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 4px 0 0 0;
}

.btn-toggle-refresh {
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 6px 0 6px;
    position: relative;
    opacity: 0.8;
}

    .btn-toggle-refresh:hover {
        opacity: 1;
    }

.btn-toggle-mode {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
    opacity: 0.8;
}

    .btn-toggle-mode:hover {
        opacity: 1;
    }

    .btn-toggle-mode > label {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

        .btn-toggle-mode > label > span {
            display: none;
        }

.btn-toggle-mode-input:checked + .btn-toggle-group > .btn-toggle-refresh {
    display: flex;
}

.btn-toggle-mode-input:checked + .btn-toggle-group > .btn-toggle-mode > label > span:last-child {
    display: inline;
}

.btn-toggle-mode-input:not(:checked) + .btn-toggle-group > .btn-toggle-mode > label > span:first-child {
    display: inline;
}

.group-page-info {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    overflow: hidden;
    height: 0;
    pointer-events: none;
    position: relative;
}

.group-page-manage {
    height: 0;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
}

.btn-toggle-mode-input:checked ~ .group-page-info {
    height: 100%;
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: all;
    transition: max-height 1s ease, clip-path 0.8s ease, opacity 1s ease;
}

.btn-toggle-mode-input:not(:checked) ~ .group-page-manage {
    height: 100%;
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: all;
    transition: max-height 1s ease, clip-path 0.8s ease, opacity 1s ease;
}


.group-info-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    border-top: 1px solid;
    align-items: flex-start;
}

    .group-info-layout .group-info-incomings {
        display: flex;
        flex-direction: column;
        margin: 20px 20px 0 10px;
    }

    .group-info-layout .group-info-subgroups {
        display: flex;
        flex-direction: row;
        border-left: 1px solid;
        align-items: flex-end;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

        .group-info-layout .group-info-subgroups .group-info-subgroup {
            display: grid;
            border: 1px solid;
            margin: 20px 0px 0px 20px;
            min-width: 200px;
            min-height: 80px;
        }

            .group-info-layout .group-info-subgroups .group-info-subgroup .header {
                display: flex;
                border-bottom: 1px solid;
                align-items: center;
                justify-content: center;
                height: 40px;
            }

            .group-info-layout .group-info-subgroups .group-info-subgroup .destinations {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: space-around;
                flex-wrap: wrap;
            }

                .group-info-layout .group-info-subgroups .group-info-subgroup .destinations .destination {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    height: 140px;
                    width: 160px;
                    margin: 10px;
                }