service/app/static/css/styles.scss

/** #C94E4E **/
$color : #A05684;

$red : #F22424;
$accent : darken($color,10);
$first_header : darken($color, 16);

$header_height : 58px;
$btn_radius : 4px;
$radius : 15px;
$sidebar:210px;


body {
    overflow-x: hidden;
    background-color: $color;
}

.label-control {
    padding-top: 5pt;
}

.form-control {
    width: 260pt;
}

.btn {
    margin: 10pt 0pt;
}

#heading {
    padding: 5pt 20pt;
    width:100%;
    color: white;
    height: 80pt;

    img {
        width: 260px;
        height: 65px;
        margin: 10pt 0pt 10pt 10pt;
        float:left;
    }

    #loginSpan {
        float:right;

        color: white;

    }
    #loginSpan a {
        font-weight: bold;
        color: white;
    }
}


footer {
    float:right;
    margin: 20pt;

    .footer {
        margin: 10pt;
        color: white;
    }
}

.warning {
    color: $red;
    font-size: 20px;
    font-weight:bold;
    padding-left: 10pt;
}

a {
    color: $accent;
}

.i-layout {
    border-radius: $radius;
    background: #E9D5ED;
    border: 3px solid $color;
}

.btn-default, .btn-primary {
    width: 100pt;
}

.btn-sm {
    width: 70pt;
}

#wrapper {
  padding-left: 0px;
  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: $sidebar;
}

.content {
    background-color: white;
    border-radius: $radius;
    padding: 5pt 15pt 15pt 15pt;

    h1,h2,h3,h4 {
       color: $first_header;
    }
}

.alert {
    border-radius: $radius;
}

#togglewrap {
    border-style: solid;
    border-width: 5px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: $color;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: $sidebar;
}

#page-content-wrapper {
  width: 100%;
}

#wrapper:not(.toggled) #page-content-wrapper {
    padding:0pt 10pt;
}

#wrapper.toggled #page-content-wrapper {
    position: relative;
    width: 100%;
    padding-right:10pt;
}

.sidebar-nav {
    top: 0;
    width: $sidebar;
    margin: 0;
    padding: 0;
    list-style: none;
    a {
        border-radius: $radius;
        color: white;
        font-weigth: bold;
    }
    a:hover {
        color: $accent;
        font-weigth: bold;
    }
}

@media (max-width:1000px) {
    #heading h2 {
        font-size: 19pt;
    }

    .content {
        margin: 7pt 5pt;
    }

    #loginSpan {
        display:none;
    }
}

@media (max-width:767px) {
    #heading {
       display: none;
    }
 #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}