@import './variables.scss';
.DragIcon.InputCircle:before{
    content: '\FF0B';
    background:rgb(192,255,0)
}
.InputCircle{
    border:none
}
.DragIcon:before{
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid black;
    font-size:10px;
    font-weight:bold;
    color: black;
    padding:5px;
}
.FlexGrow{
    flex:1 0 auto
}
.FlexAuto {
    flex: 0 0 auto;
}

div.HeaderContainer2{
    display:flex;
    padding:25px;
    padding-right:0px;
    .Header2{
        //margin-left:auto;
        font-weight:500;
        font-size:$font6;
        color:$grey4;
        letter-spacing:.8px;
        display:inline-block;
        border-bottom:1px solid $grey4
    }
}

div.ui.segment {
    box-shadow:none;
}
.ui.button.SButton{
    border-radius:0px;
    //background-color:$grey4;
    color:$grey1;
    font-weight:400;
    font-size:$font4;
    height:30px;
}
.Separator{
    border:1px solid $grey1;
    width:100%;
    margin:50px 0px;
}

div.ui.segment {
    border:none;
    border-radius:0px;
}
div.ui.attached.segment{
    border:none;
}

.HeaderContainer{
    //background-color:$accentColor4;
    //border:1px solid $grey3;
    background-color:inherit;
    color:$grey3;
    padding:0px;
    display:block;
}

.SHeader {
    color:$grey3;
    font-weight:600;
    font-size:$font5;
    line-height:15px;
    letter-spacing:.9px;
    margin-bottom:0px;
    margin-top:2px;

}

.SHeader3 {
    color:$grey23;
    font-weight:600;
    font-size:$font3;
    line-height:15px;
    letter-spacing:.9px;
    padding:5px 0px 0px 0px;
    //margin-left:-5px;
    font-style:oblique;
}

$tabColor:$grey2;
$tabContentColor:$grey56;
%TabFontClass{
                font-size:$font3;
                border-radius:0px;
                font-family:$fontfamily5;
                font-weight:400;
                letter-spacing:1.5px;
}
%TabFontClassActive{
                font-weight:800;
}
.StepDetailTabHeader {
        display:flex;
        flex-direction:column;
        background-color:inherit;
        flex:1 0 auto;
        height:100%;
        div.ui.segment.active.tab {
            background-color:$tabContentColor;
            //padding:0px 1em;
            border-radius:0px;
            //overflow-y:auto;
            flex:1 0 auto;
            //box-shadow:$boxshadow1;
            border:$subsectionBorder;
            border-left:none;
        }

        .ui.attached.tabular.menu:first-child{
            //margin-left:50px;
        }
        .ui.attached.tabular.menu > .SchemaItem{
            //margin-right:100px;
        }
        .ui.attached.tabular.menu{
            display:flex;
            flex-direction:row;
            background-color:inherit;
            //padding-left:10px;
            //padding-right:10px;
            //border-bottom:$border1;
            .item {
            }
            .active.item {
            }
            .active.item:after {
                display:none;
                border-top:none;
                width: 100%;
                height: 20px;
                position: absolute;
                content: '';
                z-index: 1;
                top: 29px;
                left: 0px;
            }
        }
    }

.SecondaryTabHeader{
    display:flex;
    flex-direction:column;
    font-weight: 300;
    font-family: 'Lato';
    background-color:inherit;
    height:100%;
    .ui.pointing.secondary.menu {
        margin-bottom:0px;
        //height:40px;
        display:flex;
        flex-direction:row;
        //border-bottom:1px solid $grey4;
        //background-color:$grey2;
        .item{
            flex:0 0 70px;
            display: flex;
            flex-direction: row;
            align-self:stretch;
            justify-content:center;
            @extend %TabFontClass;
            //border-bottom:1px solid rgba(0,0,0,0);
            //color:inherit;
        }

        .active.item{
            //border-bottom:2px solid $orange1;
            @extend %TabFontClassActive;
            //color:inherit;
        }
    }
    div.ui.segment.active.tab{
        width:100%;
        background-color:inherit;
        margin: 0px;
        padding: 0px;
        border-radius: 0px;
        flex:1 0 auto;
    }
}


.SHeaderButton:hover {
    cursor:pointer;
}
.SHeaderButton{
    flex:0 1 auto;
    border-radius:0px;
    border:none;
    background-color:inherit;
    color:$grey3;
    padding:0px;
    padding-right:30px;
    font-size:16px;
  	padding:3px 10px;
			//border:3px solid $grey3;
			//background-color:$grey1;
			font-size:10px;  font-variant:all-petite-caps;
}
.SHeaderButton:last-child{
}


.SIcon {
}
.SDivider {
    border:1px solid $grey3;
    margin:20px 0px;
}
.SNameInput{
    width:100%;
}
.SNameInputEditing {
    background-color:$grey2;
    color:$grey5;
}

.ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox-inner{
    background-color:$grey4;
    border:none;
}

.ant-checkbox-checked::after{
    border:none;
}
.STitle{
    font-size:$font5;
    color:$grey2;
    padding-top:10px;
    letter-spacing:2px;
}
.ValueWithLabelLabel{
    font-weight:600;
    font-size:12px;
    padding-right:3px;
}
.ValueWithLabelValue {
    font-weight:300;
    font-size:12px;
}