#sentenceUtilitiesContainer {

    text-align: center;


    #undo-button, #redo-button {
        width: 49%;
        margin: 10px 0;

        i {
            &.left {
                margin-right: 5px;                
            }
            
            &.right {
                margin-left: 5px;
            }
        }
    }

    #undo-button {
        float: left;
    }

    #redo-button {
        float: right;
    }

    #auto-diagram-single {
        display: none;
        margin: 15px 10px;
    }

    .link-container {

        margin: 10px 0;

        .action-button {
            display: none;   
            margin: 5px 10px;
            font-size: 16px;
        }
    }


    #color-picker-container {

        display: block;
        margin: auto;
        max-width: 400px;

        .label {
            display: block;
            color: #34495e;
            font-size: 16px;
            margin-bottom: 4px;
        }

        display: none;
        text-align: justify;

        .stretch {
            width: 100%;
            display: inline-block;
            font-size: 0;
            line-height: 0            
        }

        #custom-color-container {
            width: 100%;
            text-align: left;
            display: flex;
            flex-direction: row;
            align-items: center;

            span {
                margin-left: 8px;
            }

            #custom-color {
                width: 25px;
            }

            .clr-field {
                input {
                    cursor: pointer;
                }

                button {
                    width: 25px;
                    height: 25px;
                    display: inline-block;
                    vertical-align: top;
                    text-align: center;
                    *display: inline;
                    zoom: 1;
                    cursor: pointer;
                    -webkit-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
                    -moz-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
                    box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
                }
            }
        }

        .color-picker {
            width: 25px;
            height: 25px; 
            display: inline-block;
            vertical-align: top;   
            text-align:center;
            *display: inline;
            zoom: 1;      
            cursor: pointer;      
    
            -webkit-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
            -moz-box-shadow:    0px 2px 4px rgba(50, 50, 50, 0.6);
            box-shadow:         0px 2px 4px rgba(50, 50, 50, 0.6);		
                        

            &.blue {
                background-color:#2980B9;
                
            }

            &.red {
                background-color:#C0392B;
            }

            &.orange {
                background-color: #F39C12;
            }

            &.yellow {
                background-color: #F1C40F;
            }

            &.green {
                background-color:#16A085;
            }

            &.purple {
                background-color: #8E44AD;
            }

            &.pink {
                background-color: #FF2F91;
            }

            &.light-blue {
                background-color: #29B6F6;
            }

            &.black {
                background-color: #34495e;
            }

            &.brown {
                background-color: #795548;
            }
    
        }
    }

}