.portal-container-outer {

    max-width: 900px;
    margin: 0px auto;

    @media (max-width: 920) {
        width:100%;
        padding-left: 10px;
        padding-right: 10px;
    }


    & > div {
    }

    .portal-links {
        margin: 20px 0px;
        border-top: 1px solid #eaeaea;
        border-left: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;
    }

}


/*
.ToolbarButton {
    background: none;
    padding: 5px;
    border: 0px;
    cursor:pointer;
    color:#696969;
    transition: all 0.1s;

    > .ToolbarButtonIcon {
        width: 40px;
        height: 40px;
        margin: 0px auto;
        overflow: hidden;
        padding: 5px;
        font-size: 28px;
        text-align: center;
        transition: all 0.2s;
    }

    > .ToolbarButtonLabel {
        font-weight: bolder;
        padding: 5px;
        text-align:center;
    }

    &:hover {
        color:#242424;
        > .ToolbarButtonIcon {
            font-size: 36px;
            padding: 1px;
        }
    }
}
*/

@mixin icon-mixin($size, $hoverSize) {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow:hidden;

    i {
        transition: all 0.2s;
        color: #CECECE;
        font-size: $size;
    }
}

@mixin icon-mixin-hover($className, $size) {
    &:hover {
        .#{$className} {
            i {
                color: #646464;
                font-size: $size;
            }
        }
    }

}


.portal-link {
    min-height: 100px;
    border-bottom: 1px solid #eaeaea;
    background-color:#FFFFFF;

    display: flex;
    flex-wrap: none;

    .portal-icon {
        flex: 0 0 100px;
        @include icon-mixin(48px, 56px);
    }

    .portal-content {
        flex: 1 1 auto;
        padding: 10px;
        
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
            font-size: 21px;
            font-weight: 500;
            color: rgb(51, 51, 51);
        }

        .description {
            padding: 10px 0px;
            color: #999999;
            font-size: 1.05em;
            transition: all 0.2s;
        }
    }

    .portal-button {
        flex: 0 0 46px;
        @include icon-mixin(32px, 38px);
    }

    @include icon-mixin-hover("portal-icon", 56px);
    @include icon-mixin-hover("portal-button", 38px);

    &:hover {
        .portal-content {
            .title {
                font-size: 23px;
            }
        }
    }

}




.portal-option {
    min-height: 120px;
    border-bottom: 1px solid #eaeaea;
    background-color:#FFFFFF;

    display: flex;
    flex-wrap: none;

    .portal-icon {
        flex: 0 0 120px;
        padding: 10px;
        img {
            width:100px;
            height:100px;
        }
    }

    .portal-content {
        flex: 1 1 auto;
        padding: 10px;
        
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
            font-size: 23px;
            font-weight: 500;
            color: rgb(51, 51, 51);
            margin: 10px 0px;
        }

        .description {
            padding: 10px 0px;
            color: #999999;
            font-size: 1.05em;
            transition: all 0.2s;
            margin: 15px 0px;
        }
    }

    .portal-button {
        flex: 0 0 auto;
        padding: 20px;

        button {
            padding: 10px;
            width: 120px;
            border: 0px;
            font-weight: bolder;

            &.connect {
                color: #FFFFFF;
                background-color: #4EC3E0;
            }

            &.disconnect {
                color: #FFFFFF;
                background-color: #F79239;
            }

            &:hover:enabled {
                color: #222222;
                background-color: #CACACA;
                cursor: pointer;
            }
        }

        

    }

}
