@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://fonts.googleapis.com/css?family=Scada:400,700);

$headingFont: 'Scada', sans-serif;
$mainFont: 'Open Sans', sans-serif;
$mainFontSize: 13px;

$labelColor: #03507e;
$headingColor: #0969a2;

$inputColor:#000;
$dataColor:#fff;

$btnFontColor:#fff;
$btnHoverColor:#085684;


@mixin bgimage($name) {
  $url:"Content/images/#{$name}.png";
  background: url($url);
}

.nomargin{
    margin:0px;
    padding:0px;
}

.fullwidth{
    width:100%;
    height:100%;
}

ul{
    @extend .nomargin;
    list-style:none;
}

.st_table{
    display:table;
    width:100%;
}

.st_cell{
    display:table-cell;
    &.top{
        vertical-align:top;
    }
    &.middle{
        vertical-align:middle;
    }
}

.st_middle_body{
    margin:0 auto;
    padding:30px 15px 0 15px; 
    width:100%;
    max-width:1000px;
}

*{
    box-sizing:border-box;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.animate{
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

/* ---- Buttons ---- */

.st_formBtn{
    cursor:pointer;
    display:table;
    width:auto;
    font-family: $mainFont;
    font-weight:400;
    text-align:center;
    color:$btnFontColor;
    background:$headingColor;
    @extend .animate;
    &.submit{
        padding:8px 25px;
        font-size:12px;
        &.full{
            width:100%;
        }
    }
    &.action{
        padding:5px 18px;
        font-size:11px;
    }
    &:hover{
        background:$btnHoverColor;
        @extend .animate;
    }
}

/* ---- Buttons ---- */

/* ---- Fields ---- */

.st_option{
    label{
        margin:0px;
        padding:0px;
        input[type="checkbox"]{
            display:none;
        }
        span.st_option_shadow{
            cursor:pointer;
            padding:2px;
            display:table;
            background:#ccc;
            width:63px;
            &::after{
                cursor:pointer;
                display:table;
                padding: 4px;
                font-family: FontAwesome;
                content: '\f00d';
                color: #ccc;
                width: 28px;
                height: 28px;
                line-height:20px;
                text-align: center;
                background: #fff;
                font-size:15px;
                transition:margin 0.2s linear;
                box-sizing:border-box;
                -o-box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
            }
        }
        input[type="checkbox"]:checked ~ span.st_option_shadow{
            background:$headingColor;
            &::after{
                margin:0 0 0 31px;
                content: '\f00c';
                color: $headingColor;
                visibility:visible;
                transition:margin 0.2s linear;
                box-sizing:border-box;
                -o-box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
            }
        }
    }
}

.st_select{
    position:relative;
    cursor:pointer;
    select{
        -o-appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;   
    }
    &::after{
        position: absolute;
        margin: -21px 0 0 0;
        content: '\f078';
        font-family: FontAwesome;
        font-size: 13px;
        color:$headingColor;
        right:10px;
        pointer-events: none;
    }
    &:hover{
        &::after{
            color:#138ed7;
        }
    }

    &:nth-child(1n){
        &::after{
            margin: -23px 15px 0 0;
        }
    }
    &:nth-child(2n){
        &::after{
            margin: -23px 0 0 0;
        }
    }
}

.st_input{
    padding:10px;
    font-family:$mainFont;
    font-size:12px;
    color: $inputColor;
    width:100%;
    height:33px;
    border:1px solid #ccc;
    &.select{
        padding:0 10px;
    }
}

.st_input_buffer{
    padding:7px;
    width:100%;
    height:33px;
    font-family:$mainFont;
    font-size:12px;
    color: $headingColor;
    text-transform:uppercase;
    text-align:center;
    border: 1px solid #ccc;
    background: rgba(254,255,254,1);
    background: -moz-linear-gradient(top, rgba(254,255,254,1) 0%, rgba(224,224,224,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,255,254,1)), color-stop(100%, rgba(224,224,224,1)));
    background: -webkit-linear-gradient(top, rgba(254,255,254,1) 0%, rgba(224,224,224,1) 100%);
    background: -o-linear-gradient(top, rgba(254,255,254,1) 0%, rgba(224,224,224,1) 100%);
    background: -ms-linear-gradient(top, rgba(254,255,254,1) 0%, rgba(224,224,224,1) 100%);
    background: linear-gradient(to bottom, rgba(254,255,254,1) 0%, rgba(224,224,224,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefffe', endColorstr='#e0e0e0', GradientType=0 );
}

.st_textarea{
    padding:10px;
    font-family:$mainFont;
    font-size:12px;
    color: $inputColor;
    width:100%;
    max-width:100%;
    border:1px solid #ccc;
}

.st_fields_set{
    @extend .st_table;
    margin:0 0 10px 0;
    .st_field_block{
        @extend .st_cell;
        @extend .st_cell.top;
        width:50%;
        .st_cellblock{
            @extend .st_table;
            .st_cellblockIn{
                @extend .st_cell;
                @extend .st_cell.top;
                &.left{}
                &.right{}
            }
        }
        &.left-one{
            padding:0 15px 0 0;
        }
        &.right-one{
            padding:0 0 0 15px;
        }

        label{
            @extend .st_table;
            padding:0 0 10px 2px;
            font-family:$mainFont;
            color:$labelColor;
            font-size:13px;
            font-weight:600;
            &.no_padding{
                padding:0px;
            }
        }
        .st_label_buffer{
            padding: 14px 0 14px 0;
        }
    }
}

/* ---- Fields ---- */

h2{
    @extend .nomargin;
    padding:0 0 13px 20px;
    font-family:$headingFont;
    color:$headingColor;
    font-size:17px;
    font-weight: 400;
}

.st_list_style{
    cursor:pointer;
    @extend .st_table;
    padding:8px 15px;
    @extend .animate;
    .st_actions{
        a{
            float:right;
            &:nth-child(2n){
                margin:0 5px 0 0;
            }
        }
    }
    &:nth-child(odd){
        background:#8ba8b9;
        .st_col{
            color:$dataColor;
        }
    }
    &:hover{
        .st_col{
            color:$dataColor;
        }
        background:#7593a4;
        @extend .animate;
    }
}

.st_col{
    @extend .st_cell;
    @extend .st_cell.middle;
    font-family:Tahoma;
    font-size:11px;
    color:$inputColor;
}

.st_table_header{
    @extend .st_table;
    margin:0 0 15px 0;
    padding:0 0 0 15px;
    .st_col{
        font-family:$headingFont;
        font-size:14px;
        color:$headingColor;
        font-weight:400;
    }
}
/* ---- Body Configuration ---- */

.st_body_notice{
    @extend .st_table;
    padding:15px 10px;
    border:1px solid $labelColor;
    background:lighten($labelColor, 70%);
    .notice{
        font-family:$headingFont;
        font-size:$mainFontSize;
        color:$labelColor;
        text-align:center;
    }
}

.st_contentBlockHead{
    @extend .st_table;
    margin:0 0 10px 0;
    .st_head_left{
        @extend .st_cell;
        @extend .st_cell.middle;
        padding:0 0 0 20px;
        width:30%;
        font-family:$headingFont;
        color:$headingColor;
        h1{
            @extend .nomargin;
            font-size:17px;
            font-weight: 400;
        }
    }
    .st_head_right{
        @extend .st_cell;
        @extend .st_cell.middle;
        width:70%;
        .st_hint_switcher{
            float:right;
            input{

            }
        }
        .st_hint_note{
            float:right;
            padding:2px 15px 0 0;
            font-family:$mainFont;
            font-size:12px;
            line-height:14px;
            text-align:right;
            .st_head{
                @extend .st_table;
                color:$headingColor;
                font-weight:600;
            }
            .st_description{
                @extend .st_table;
                color:$inputColor;
                font-weight:300;
            }
        }
    }
}

body,html{
    @extend .nomargin;
    @extend .fullwidth;
    background:#e7e9eb;
}

.st_menu_block{
    position:absolute;
    display:none;
    padding:15px 30px 15px 15px;
    background:#fff;
    min-width: 270px;
    ul{
        @extend .st_table;
        li{
            @extend .st_table;
            a{
                @extend .st_table;
                padding:7px 10px 7px 10px;
                font-family:$headingFont;
                font-size:13px;
                color:$headingColor;
                text-decoration:none;
                &:hover{
                    background:#e8f5fd;
                }
            }
            border-bottom:1px solid $headingColor;
            &:last-child{
                border:0px;
            }
        }
    }
}

header{
    @include bgimage("st-header-bg");
    background-repeat:repeat-x;
    width:100%;
    height:95px;
    .st_headerIn{
        @extend .st_table;
        height:95px;
        .st_headerLeft{
            @extend .st_cell;
            @extend .st_cell.middle;
            width:20%;
            .st_menu{
                cursor:pointer;
                margin: 0 0 0 20%;
                display:table;
                .st_menu_left{
                    @extend .st_cell;
                    @extend .st_cell.middle;
                    height: 35px;
                    ul{
                        display:table;
                        padding: 3px 7px 0 0;
                        li{
                            background:$dataColor;
                            width:20px;
                            height:2px;
                            margin:0 0 3px 0;
                            @extend .animate;
                        }
                    }

                }
                .st_menu_right{
                    @extend .st_cell;
                    @extend .st_cell.middle;
                    height: 35px;
                    .st_menu_header{
                        font-family:$headingFont;
                        font-size:$mainFontSize;
                        color:$dataColor;
                        @extend .animate;
                    }
                }
                &:hover{
                    .st_menu_left{
                        ul{
                            li{background:#a6c2d3;}
                        }
                    }
                    .st_menu_right{
                        .st_menu_header{color:#a6c2d3;}
                    }
                    .st_menu_block{
                        display:table;
                    }
                }
            }
        }
        .st_headerMiddle{
            @extend .st_cell;
            @extend .st_cell.middle;
            width:60%;
            .st_logo_platform{
                @extend .st_table;
                .st_logo{
                    display:table;
                    margin:0 auto;
                    a{
                        IMG{
                            width:100%;
                            max-width:100%;
                            text-decoration:none;
                        }
                        .st_version{
                            position:absolute;
                            margin: -22px 0 0 65px;
                            font-family:Tahoma;
                            font-size:11px;
                            color:$dataColor;
                        }
                    }
                }
            }
        }
        .st_headerRight{
            @extend .st_cell;
            @extend .st_cell.middle;
            width:20%;
        }
    }
}
section{
    &.st_profiles{
        @extend .st_middle_body;
        .st_profile_list{
            @extend .st_table;
            ul{
                li{
                    float:left;
                    width:25%;
                    padding:0 8px 15px 8px;
                    .st_item{
                        background:$headingColor;
                        .st_profile_header{
                            @extend .st_table;
                            .st_head_left{
                                @extend .st_cell;
                                @extend .st_cell.middle;
                                font-family:$headingFont;
                                font-size:14px;
                                color:$dataColor;
                                background:#034369;
                                .st_name{
                                    padding:8px 0 0 10px;
                                    @extend .st_table;
                                    font-weight:400;
                                }
                                .st_slug{
                                    @extend .st_table;
                                    font-size:12px;
                                    font-weight:300;
                                    padding:0 0 8px 10px;
                                }
                            }
                            .st_head_right{
                                padding: 0 6px;
                                @extend .st_cell;
                                @extend .st_cell.middle;
                                font-family:$headingFont;
                                font-size:13px;
                                color:$dataColor;
                                text-transform:uppercase;
                                text-align:center;
                                background:#0585d1;
                            }
                        }
                        .st_profile_description{
                            min-height:100px;
                            .st_description_inner{
                                padding:15px;
                                font-family:$headingFont;
                                font-size:13px;
                                color:$dataColor;
                            }
                        }
                        .st_profile_summary{
                            background:#0d76b4;
                            .st_summary_inner{
                                padding:10px 15px;
                                font-family:$headingFont;
                                font-size:13px;
                                color:$dataColor;
                                font-weight:300;
                                .st_summary_files{}
                                .st_summary_nodes{}
                            }
                        }
                        .st_profile_action{
                            @extend .st_table;
                            .st_action{
                                cursor:pointer;
                                @extend .st_cell;
                                @extend .st_cell.middle;
                                padding:10px 0;
                                font-family:$mainFont;
                                font-size:13px;
                                color:$dataColor;
                                text-align:center;
                                background:#2297dd;
                                width:50%;
                                @extend .animate;
                                &.edit{
                                    border-right:1px solid $headingColor;
                                }
                                &.delete{
                                    border-left:1px solid $headingColor;
                                }
                                &:hover{
                                    background:$headingColor;
                                    @extend .animate;
                                }
                            }
                        }                
                    }
                    &.json{
                        .st_item{
                            background:#1d8102;
                            .st_profile_header{
                                .st_head_left{
                                    background:#145c01;
                                }
                                .st_head_right{
                                    background:#57b81d;
                                }
                            }
                            .st_profile_summary{
                                background:#229d01;
                            }
                            .st_profile_action{
                                .st_action{
                                    background:#57b81d;
                                    &.edit{
                                        border-right:1px solid #1d8700;
                                    }
                                    &.delete{
                                        border-left:1px solid #1d8700;
                                    }
                                    &:hover{
                                        background:#1d8700;
                                    }
                                }
                            }
                        }
                    }
                    @media (max-width:400px) {
                        width:100%;
                    }
                    @media (min-width:400px) and (max-width: 550px) {
                        width:50%;
                    }
                    @media (min-width:550px) and (max-width: 800px) {
                        width:33.333%;
                    }
                }
            }
        }   
        .st_profile_list_empty{
            @extend .st_body_notice;
        }
    }
    &.st_profile{
        @extend .st_middle_body;
        .st_profile_head{
            @extend .st_contentBlockHead;
        }
        .st_profile_body{
            background:$dataColor;
            -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
            -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
            box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
            .st_profilebody_line{
                width:100%;
                height:7px;
                background:$headingColor;
            }
            .st_profilebody_content{
                margin:0 0 15px 0;
                padding:20px 0 15px 0;
                @extend .st_table;
                .st_profile_data{
                    padding:20px 30px 15px 30px;
                    .st_profileID{
                        width:15%;
                        .st_input_buffer{
                            border-right:none;
                        }
                    }
                    .st_profileName{
                        width:85%;
                    }
                    .st_response_delay{
                        width:82%;
                    }
                    .st_delay_seconds{
                        width:18%;
                        .st_input_buffer{
                            text-transform:none;
                            border-left:none;
                        }
                    }
                    .st_profile_dateset{
                        @extend .st_table;
                        margin: 10px 0 0 0;
                        border-bottom:5px solid $headingColor;
                        .st_date_box{
                            @extend .st_cell;
                            @extend .st_cell.top;
                            padding:10px;
                            width:50%;
                            text-align:center;
                            font-family:$mainFont;
                            color:$labelColor;
                            font-size:12px;
                            font-weight:600;
                        }
                    }
                }
                .st_profile_files{
                    @extend .st_table;
                    padding:0 0 15px 0;
                    .st_files_block{
                        @extend .st_table;
                        padding:15px 30px;
                        background:#e0e9ee;
                        .st_files_list{
                            ul{
                                li{
                                    @extend .st_list_style;
                                }
                            }
                            .st_name{ width:80%; }
                            .st_actions{ width:20%; }
                        }
                    }
                    .st_files_upload{
                        @extend .st_table;
                        padding:15px 30px 0 0;
                        a{
                            float:right;
                        }
                    }
                }
                .st_profile_nodes{
                    @extend .st_table;
                    padding:0 0 15px 0;
                    .st_nodes_form{
                        padding:0 30px 15px 30px;
                    }
                    .st_nodes_block{
                        @extend .st_table;
                        padding:15px 30px;
                        background:#e0e9ee;
                        .st_nodes_list{
                            @extend .st_table;
                            .st_nodes_list_head{
                                @extend .st_table_header;
                            }
                            ul{
                                li{
                                    @extend .st_list_style;
                                }
                            }
                            .st_name{ width:25%; }
                            .st_value{ width:25%; }
                            .st_response_file{ width:30%;}
                            .st_actions{ width:20%; }
                        }
                    }               
                }
                .st_profile_namespaces{
                    @extend .st_table;
                    padding:0 0 15px 0;
                    .st_namespaces_form{
                        padding:0 30px 15px 30px;
                    }
                    .st_namespaces_block{
                        @extend .st_table;
                        padding:15px 30px;
                        background:#e0e9ee;
                        .st_namespaces_list{
                            @extend .st_table;
                            .st_namespaces_list_head{
                                @extend .st_table_header;
                            }
                            ul{
                                li{
                                    @extend .st_list_style;
                                }
                            }
                            .st_tag{ width:25%; }
                            .st_value{ width:55%; }
                            .st_actions{ width:20%; }
                        }
                    }
                }
                .st_profile_submit{
                    padding: 0 30px 0 30px;
                    input{
                        border:0px;
                    }
                }
                .st_textarea{
                    height:85px;
                    max-height:85px;
                }
            }
        }
    }
    &.st_migration{
        @extend .st_middle_body;
        .st_migration_head{
            @extend .st_contentBlockHead;
        }
        .st_migration_body{
            background:$dataColor;
            -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
            -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
            box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
            .st_migrationbody_line{
                width:100%;
                height:7px;
                background:$headingColor;
            }
            .st_migrationbody_content{
                margin:0 0 15px 0;
                padding:20px 0 15px 0;
                @extend .st_table;
                .st_migrationbody_tool{
                    padding:20px 30px 15px 30px;
                    .st_migration_notice{
                        margin:0 0 15px 0;
                        @extend .st_body_notice;
                    }
                    .st_fields_backup{
                        @extend .st_table;
                        .st_backup{
                            @extend .st_cell;
                            width:75%;
                            &.description{
                                font-family:$headingFont;
                                font-size:$mainFontSize;
                                color:$labelColor;
                                text-align:left;
                                width:25%;
                            }
                        }
                    }
                }
            }
            .st_migration_report{
                @extend .st_table;
                padding:0px 30px 15px 30px;
                h2{
                    font-family:$mainFont;
                    margin:0px;
                    padding:10px 0 5px 6px;
                    font-size: 14px;
                }
                .st_report_body{
                    @extend .st_table;
                    padding:20px 15px;              
                    background:#f1f1f1;
                    ul{
                        li{
                            padding:4px 5px;
                            font-family:$mainFont;
                            font-size:12px;
                            color:$inputColor;
                            &.success{background:#138d00; color:#fff;}
                            &.error{background:#e90707; color:#fff;}
                            &.notice{background:#fffbdd;}
                        }
                    }
                }
            }
        }
        .st_migration_done{
            @extend .st_body_notice;
        }
        
    }
}

/* ---- Body Configuration ---- */