body {
}
.listManageSoft .list-group-item{
    text-align:justify;
}
.circleBaseManage {
    background-color:white;
    border-radius:50%;
    width:760px;
    height:760px;
    margin:0 auto;
    padding:200px;
    line-height:10px;
    overflow:hidden;
}
.innerManage {
    background-color: #004646;
    border-radius: 50%;
    width: 320px;
    height: 320px;
    margin: 0 auto;
    margin-top:25%;
    text-align:center;
    padding:7%;
    
}
.innerManage p {
    text-align: center;
    font-size: 24px;
    color: white;
    font-weight: 700;
}




//text circle
.circle-container {
    position: relative;
    width: 30em;
    height: 30em;
    padding: 2.8em;
    /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    /* border: dashed 1px;*/
    border-radius: 50%;
    margin: 1.75em auto 0;
    display: flex;
    background-color: white;
    box-shadow: 1px 1px 45px 4px rgba(0, 0, 0, 0.2);
    top: -15px;
    //}


    @include for-size(phone-only) {
        position: relative;
        width: 18em;
        height: 18em;
        padding: 2.8em;
        /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
        /* border: dashed 1px;*/
        border-radius: 50%;
        margin: 1.75em auto 0;
        display: flex;
        background-color: white;
        box-shadow: 1px 1px 45px 4px rgba(0, 0, 0, 0.2);
    }
}


.circle-container div.item-cicle {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    /* width: 4em; */
    /* height: 4em; */
    /* margin: -em;*/
    width: 120px;
    /* display: inline-grid; */
    margin-left: -4em;
    /* margin-bottom: -3em; */
    /* text-align: center; */
    /* display: inline-grid; */
    text-align: center;

    @include for-size(phone-only) {
        margin-top: -3.5em;
        margin-left: -3.5em;
    }
}

.circle-container img {
    /* display: block;*/
    width: 80px;
    @include for-size(phone-only){
        width:50px;
    }
}
/*.center-circle p.manag-center-p {
    color: white;
    text-align: center;
    position: relative;
    top: 30px;
    font-size: 18px;
    line-height: 2;
}*/
/*.deg0 {
    -webkit-transform: translate(12em);
    -moz-transform: translate(12em);
    -ms-transform: translate(12em);
    -o-transform: translate(12em);
    transform: translate(12em);

    @include for-size(phone-only) {
        -webkit-transform: translate(5em);
        -moz-transform: translate(5em);
        -ms-transform: translate(5em);
        -o-transform: translate(5em);
        transform: translate(5em);
    }
}*/
.deg0 {
    -webkit-transform: translate(12em);
    -moz-transform: translate(12em);
    -ms-transform: translate(12em);
    -o-transform: translate(12em);
    transform: translate(12em);

    @include for-size(phone-only) {
        -webkit-transform: translate(5em);
        -moz-transform: translate(5em);
        -ms-transform: translate(5em);
        -o-transform: translate(5em);
        transform: translate(5em);
    }
}
.deg90 {
    @include for-size(phone-only) {
        -webkit-transform: rotate(-90deg) translate(5em) rotate(90deg);
        -moz-transform: rotate(-90deg) translate(5em) rotate(90deg);
        -ms-transform: rotate(-90deg) translate(5em) rotate(90deg);
        -o-transform: rotate(-90deg) translate(5em) rotate(90deg);
        transform: rotate(-90deg) translate(5em) rotate(90deg);
    }

    -webkit-transform: rotate(-90deg) translate(14em) rotate(90deg);
    -moz-transform: rotate(-90deg) translate(14em) rotate(90deg);
    -ms-transform: rotate(-90deg) translate(14em) rotate(90deg);
    -o-transform: rotate(-90deg) translate(14em) rotate(90deg);
    transform: rotate(-90deg) translate(14em) rotate(90deg);
}

.deg270 {
    @include for-size(phone-only) {
        -webkit-transform:rotate(90deg) translate(8em) rotate(-90deg);
        -moz-transform:rotate(90deg) translate(8em) rotate(-90deg);
        -ms-transform: rotate(90deg) translate(8em) rotate(-90deg);
        -o-transform:rotate(90deg) translate(8em) rotate(-90deg);
        transform: rotate(90deg) translate(8em) rotate(-90deg);
    }

    -webkit-transform: rotate(90deg) translate(8em) rotate(-90deg);
    -moz-transform: rotate(90deg) translate(8em) rotate(-90deg);
    -ms-transform: rotate(90deg) translate(8em) rotate(-90deg);
    -o-transform: rotate(90deg) translate(8em) rotate(-90deg);
    transform: rotate(90deg) translate(8em) rotate(-90deg);
}
    /* 12em = half the width of the wrapper */
    .lt-ie9 .deg0 {
        margin-left: 10em;
    }

.deg45 {
    @include for-size(phone-only) {
        -webkit-transform: rotate(30deg) translate(7em) rotate(-30deg);
        -moz-transform: rotate(30deg) translate(7em) rotate(-30deg);
        -ms-transform: rotate(30deg) translate(7em) rotate(-30deg);
        -o-transform: rotate(30deg) translate(7em) rotate(-30deg);
        transform: rotate(30deg) translate(7em) rotate(-30deg);
    }

    -webkit-transform: rotate(5deg) translate(10em) rotate(-7deg);
  
    -moz-transform: rotate(5deg) translate(10em) rotate(-7deg);
    -ms-transform: rotate(5deg) translate(10em) rotate(-7deg);
    -o-transform: rotate(5deg) translate(10em) rotate(-7deg);
    transform: rotate(5deg) translate(10em) rotate(-7deg);
}
.deg45-ls {
    @include for-size(phone-only) {
        -webkit-transform: rotate(45deg) translate(7em) rotate(-47deg);
        -moz-transform: rotate(45deg) translate(7em) rotate(-47deg);
        -ms-transform: rotate(45deg) translate(7em) rotate(-47deg);
        -o-transform: rotate(45deg) translate(7em) rotate(-47deg);
        transform: rotate(45deg) translate(7em) rotate(-47deg);
    }

    -webkit-transform: rotate(20deg) translate(9em) rotate(-22deg);
    -moz-transform: rotate(20deg) translate(9em) rotate(-22deg);
    -ms-transform: rotate(20deg) translate(9em) rotate(-22deg);
    -o-transform: rotate(20deg) translate(9em) rotate(-22deg);
    transform: rotate(20deg) translate(9em) rotate(-22deg);
}

    .lt-ie9 .deg45 {
        margin: 6.485em;
    }

.deg135 {
    -webkit-transform: rotate(170deg) translate(7.5em) rotate(-170deg);
    -moz-transform: rotate(170deg) translate(7.5em) rotate(-170deg);
    -ms-transform: rotate(170deg) translate(7.5em) rotate(-170deg);
    -o-transform: rotate(170deg) translate(7.5em) rotate(-170deg);
    transform: rotate(170deg) translate(7.5em) rotate(-170deg);

    @include for-size(phone-only) {
        -webkit-transform: rotate(145deg) translate(6.5em) rotate(-145deg);
        -moz-transform: rotate(145deg) translate(6.5em) rotate(-145deg);
        -ms-transform: rotate(145deg) translate(6.5em) rotate(-145deg);
        -o-transform: rotate(145deg) translate(6.5em) rotate(-145deg);
        transform: rotate(145deg) translate(6.5em) rotate(-145deg);
    }
}
.deg135-ls {
    -webkit-transform: rotate(150deg) translate(7em) rotate(-150deg);
    -moz-transform: rotate(150deg) translate(7em) rotate(-150deg);
    -ms-transform: rotate(150deg) translate(7em) rotate(-150deg);
    -o-transform: rotate(150deg) translate(7em) rotate(-150deg);
    transform: rotate(150deg) translate(7em) rotate(-150deg);

    @include for-size(phone-only) {
        -webkit-transform: rotate(130deg) translate(7em) rotate(-130deg);
        -moz-transform: rotate(130deg) translate(7em) rotate(-130deg);
        -ms-transform: rotate(130deg) translate(7em) rotate(-130deg);
        -o-transform: rotate(130deg) translate(7em) rotate(-130deg);
        transform: rotate(130deg) translate(7em) rotate(-130deg);
    }
}

    .lt-ie9 .deg135 {
        margin: 6.485em -10.485em;
    }

    .deg180 {
        -webkit-transform: translate(-12em);
        -moz-transform: translate(-12em);
        -ms-transform: translate(-12em);
        -o-transform: translate(-12em);
        transform: translate(-12em);
    }

    .lt-ie9 .deg180 {
        margin-left: -14em;
    }

.deg225 {
    -webkit-transform: rotate(220deg) translate(12em) rotate(-220deg);
    -moz-transform: rotate(220deg) translate(12em) rotate(-220deg);
    -ms-transform: rotate(220deg) translate(12em) rotate(-220deg);
    -o-transform: rotate(220deg) translate(12em) rotate(-220deg);
    transform: rotate(220deg) translate(12em) rotate(-220deg);

    @include for-size(phone-only) {
        -webkit-transform: rotate(195deg) translate(6em) rotate(-195deg);
        -moz-transform: rotate(195deg) translate(6em) rotate(-195deg);
        -ms-transform: rotate(195deg) translate(6em) rotate(-195deg);
        -o-transform: rotate(195deg) translate(6em) rotate(-195deg);
        transform: rotate(195deg) translate(6em) rotate(-195deg);
    }
}

    .lt-ie9 .deg225 {
        margin: -10.485em;
    }

.deg315 {
    @include for-size(phone-only) {
        -webkit-transform: rotate(345deg) translate(6.5em) rotate(-345deg);
        -moz-transform: rotate(345deg) translate(6.5em) rotate(-345deg);
        -ms-transform: rotate(345deg) translate(6.5em) rotate(-345deg);
        -o-transform: rotate(345deg) translate(6.5em) rotate(-345deg);
        transform: rotate(345deg) translate(6.5em) rotate(-345deg);
    }

    -webkit-transform: rotate(320deg) translate(13em) rotate(-320deg);
    -moz-transform: rotate(320deg) translate(13em) rotate(-320deg);
    -ms-transform: rotate(320deg) translate(13em) rotate(-320deg);
    -o-transform: rotate(320deg) translate(13em) rotate(-320deg);
    transform: rotate(320deg) translate(13em) rotate(-320deg);
}

    .lt-ie9 .deg315 {
        margin: -10.485em 6.485em;
    }
    /* this is just for showing the angle on hover */
    .circle-container a:not(.center):before {
        position: absolute;
        width: 4em;
        color: white;
        opacity: 0;
        background: rgba(0, 0, 0, .5);
        font: 1.25em/3.45 Courier, monospace;
        letter-spacing: 2px;
        text-decoration: none;
        text-indent: -2em;
        text-shadow: 0 0 .1em deeppink;
        transition: .7s;
        /* only works in Firefox */
        content: attr(class)'°';
    }

    .circle-container a:hover:before {
        opacity: 1;
    }
    /* this is for showing the circle on which the images are placed */
    .circle-container:after {
        position: absolute;
        top: 2.8em;
        left: 2.8em;
        width: 24em;
        height: 24em;
       /* border: dashed 1px deeppink;*/
        border-radius: 50%;
        opacity: .3;
        pointer-events: none;
        content: '';
    }

    .circle-container:hover:after {
        opacity: 1;
    }

.circle-container div.item-cicle:not(.center):after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
 /*   box-shadow: 0 0 .5em .5em white;*/
    margin: -2px;
  /*  background: deeppink;*/
    opacity: .3;
    content: '';
}

.circle-container:hover div.item-cicle:after {
    opacity: 1;
}

/*.circle-container div.item-cicle:hover:after {
    opacity: .3;
}*/
.center-circle {
    width: 12em;
    height: 12em;
    border-radius: 50%;
    background-color: #004646;
    margin: auto;
    display: inline-grid;
    justify-content: center;
    box-shadow: 1px 1px 45px 3px rgba(0, 0, 0, 0.2);


    @include for-size(phone-only) {
        width: 8em;
        height: 8em;
        border-radius: 50%;
        background-color: #004646;
        margin: auto;
        display: inline-grid;
        justify-content: center;
        box-shadow: 1px 1px 45px 3px rgba(0, 0, 0, 0.2);
    }
}
.center-circle p {
    text-align: center;
    position: relative;
    top: 30px;
    line-height: 2;
    font-weight: 700;
    font-size: 20px;

    @include for-size(phone-only) {
        top: 20px;
        font-size: 12px;
    }
}
.manag-center-p {
    color: #000;
    font-weight: 700;
    @include for-size(phone-only){
        font-size:10px;
    }
}

.odering-one-custome-Manage {
    flex-wrap: wrap !important;
}
.odering-one-custome-Manage .btn-icon-order-total {
    flex-basis: 25%;
    @include for-size(phone-only){
        flex-basis:30%;
    }
}


.odering-one-custome-Manage .btn-icon-order-total .btn-icon-order{
    display:inline-flex;
}
.card-text-ls {
    text-align: justify !important;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30.08px;
    @include for-size(phone-only){
        font-size:13px;
    }
}
.card-title {
    @include for-size(phone-only) {
        font-size: 18px;
    }
}
.softh4 {
    @include for-size(phone-only) {
        font-size: 14px;
        margin-right:20px;
        
    }
}
.btn-icon-order-total p {
    @include for-size(phone-only) {
        font-size: 12px;
    }
}
.h4-market-ls {
    @include for-size(phone-only) {
        font-size: 18px;
    }
}
.ordering-one-ls {
    flex-wrap: wrap;
}
.ordering-one-ls .btn-icon-order-total {
    flex-basis: 30% !important;
}
.ordering-one-ls .btn-icon-order-total .btn-icon-order {
    display: inline-flex;
}
.listManageSoft {
    @include for-size(phone-only) {
        font-size: 13px;
        margin-top:-20px;
    }
}
.card-txt-manageSoft {
    @include for-size(phone-only) {
        text-align: right !important;
        font-size: 13px !important;
        text-align: revert;
        margin-right: 20px !important;
    }
}
.card-title-first-manage {
    @include for-size(phone-only) {
        margin-top:20px !important;
    }
}
.softh4-manage {
    color: #004646;
        @include for-size(phone-only) {
        color: #9E1D4E;
    }
}
.market-manage-h4 {
    @include for-size(phone-only) {
        font-size:18px;
    }
    }