/* Import fonts */ @import url(http://fonts.googleapis.com/css?family=Ruda:400,700,900); /* BASIC THEME CONFIGURATION */ body { color: #797979; background: #f2f2f2; font-family: 'Ruda', sans-serif; padding: 0px !important; margin: 0px !important; font-size:13px; } ul li { list-style: none; } a, a:hover, a:focus { text-decoration: none; outline: none; } ::selection { background: #FF9C77; color: #fff; } ::-moz-selection { background: #FF9C77; color: #fff; } #container { width: 100%; height: 100%; } /* Bootstrap Modifications */ .modal-header { background: #FF9C77; } .modal-title { color: white; } .btn-round { border-radius: 20px; -webkit-border-radius: 20px; } .accordion-heading .accordion-toggle { display: block; cursor: pointer; border-top: 1px solid #F5F5F5; padding: 5px 0px; line-height: 28.75px; text-transform: uppercase; color: #1a1a1a; background-color: #ffffff; outline: none !important; text-decoration: none; } /*Helpers*/ .centered { text-align: center; } .goleft { text-align: left; } .goright { text-align: right; } .mt { margin-top: 25px; } .mb { margin-bottom: 25px; } .ml { margin-left: 5px; } .no-padding { padding: 0 !important; } .no-margin { margin: 0 !important; } /*sidebar navigation*/ #sidebar { width: 210px; height: 100%; position: fixed; background: #424a5d; } #sidebar h5 { color: #f2f2f2; font-weight: 700; } #sidebar ul li { position: relative; } #sidebar .sub-menu > .sub li { padding-left: 32px; } #sidebar .sub-menu > .sub li:last-child { padding-bottom: 10px; } /*LEFT NAVIGATION ICON*/ .dcjq-icon { height:17px; width:17px; display:inline-block; background: url("../img/nav-expand.png") no-repeat top; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; position:absolute; right:10px; top:15px; } .active .dcjq-icon { background: url("../img/nav-expand.png") no-repeat bottom; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } /*---*/ .nav-collapse.collapse { display: inline; } ul.sidebar-menu , ul.sidebar-menu li ul.sub{ margin: -2px 0 0; padding: 0; } ul.sidebar-menu { margin-top: 75px; } .sidebar-menu hr { margin: 5px 10px; border-color: #818899; } .sidebar-menu .banner-text { text-transform: uppercase; display: inline-block; border-color: white; border-width: 1px 0px; border-style: solid; margin: 15px; padding: 5px; } .sidebar-menu .username { color: #818899!important; } #sidebar > ul > li > ul.sub { display: none; } #sidebar > ul > li.active > ul.sub, #sidebar > ul > li > ul.sub > li > a { display: block; } ul.sidebar-menu li ul.sub li{ background: #424a5d; margin-bottom: 0; margin-left: 0; margin-right: 0; } ul.sidebar-menu li ul.sub li:last-child{ border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; } ul.sidebar-menu li ul.sub li a { font-size: 12px; padding: 6px 0; line-height: 35px; height: 35px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; color: #aeb2b7; } ul.sidebar-menu li ul.sub li a:hover { color: white; background: transparent; } ul.sidebar-menu li ul.sub li.active a { color: #FF9C77; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; display: block; } ul.sidebar-menu li{ /*line-height: 20px !important;*/ margin-bottom: 5px; margin-left:10px; margin-right:10px; } ul.sidebar-menu li.sub-menu{ line-height: 15px; } ul.sidebar-menu li a span{ display: inline-block; } ul.sidebar-menu li a{ color: #aeb2b7; text-decoration: none; display: block; padding: 15px 0 15px 10px; font-size: 12px; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus { background: #FF9C77; color: #fff; display: block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } ul.sidebar-menu li a i { font-size: 15px; padding-right: 6px; } ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i { color: #fff; } ul.sidebar-menu li a.active i { color: #fff; } /* MAIN CONTENT CONFIGURATION */ #main-content { margin-left: 210px; } .header, .footer { min-height: 60px; padding: 0 15px; } .header { position: fixed; left: 0; right: 0; z-index: 1002; } .black-bg { background: #ffd777; border-bottom: 1px solid #c9aa5f; } .wrapper { display: inline-block; margin-top: 60px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; padding-top: 0px; width: 100%; } a.logo { font-size: 20px; color: #ffffff; float: left; margin-top: 15px; text-transform: uppercase; } a.logo b { font-weight: 900; } a.logo:hover, a.logo:focus { text-decoration: none; outline: none; } a.logo span { color: #FF9C77; } /* * top links */ .navbar-top-links li { display: inline-block; } .navbar-top-links li:last-child { margin-right: 15px; } .navbar-top-links li > a { padding: 20px 10px; min-height: 60px; color: #797979; } .navbar-top-links .open > a, .navbar-top-links .open > a:hover, .navbar-top-links .open > a:focus, .navbar-top-links .open > a:active { background-color:#C9AA5F; } .navbar-top-links li > a:hover, .navbar-top-links li > a:focus, .navbar-top-links li > a:active{ background-color:inherit; } .navbar-top-links .dropdown-menu li { display: block; } .navbar-top-links .dropdown-menu li:last-child { margin-right: 0; } .navbar-top-links .dropdown-menu li a { padding: 3px 20px; min-height: 0; } .navbar-top-links .dropdown-menu li a div { white-space: normal; } .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts { width: 310px; min-width: 0; } .navbar-top-links .dropdown-messages { margin-left: 5px; } .navbar-top-links .dropdown-tasks { margin-left: -59px; } .navbar-top-links .dropdown-alerts { margin-left: -123px; } .navbar-top-links .dropdown-user { right: 0; left: auto; } /*--sidebar toggle---*/ .sidebar-toggle-box { float: left; padding-right: 15px; margin-top: 20px; } .sidebar-toggle-box .fa-bars { cursor: pointer; display: inline-block; font-size: 20px; } .sidebar-closed > #sidebar > ul { display: none; } .sidebar-closed #main-content { margin-left: 0px; } .sidebar-closed #sidebar { margin-left: -180px; } /* * Dash Side * barre de droite */ .ds { background: #ffffff; padding-top: 20px; } .ds h4 { font-size: 14px; font-weight: 700; } .ds h5 { font-size: 10px; font-weight: 700; } .ds h3 { color: #ffffff; font-size: 16px; padding: 0 10px; line-height: 60px; height: 60px; margin: 0; background: #ff865c; text-align: center; } .ds i { font-size: 12px; line-height: 16px; } .ds .desc { border-bottom: 1px solid #eaeaea; display: inline-block; padding: 15px 0; width: 100%; } .ds .desc:hover { background: #f2f2f2; } .ds .thumb { width: 30px; margin: 0 10px 0 20px; display: block; float: left; } .ds .details { width: 170px; float: left; } .ds > .desc p { font-size: 11px; } .ds p > muted { font-size: 9px; text-transform: uppercase; font-style: italic; color: #666666 } .ds a { color: #FF9C77; } /* LINE ICONS CONFIGURATION */ .mtbox { margin-top: 80px; margin-bottom: 40px; } .box1 { padding: 15px; text-align: center; color: #989898; border-bottom: 1px solid #989898; } .box1 span { font-size: 50px; } .box1 h3 { text-align: center; } .box0:hover .box1 { border-bottom: 1px solid #ffffff; } .box0 p { text-align: center; font-size: 12px; color: #f2f2f2; } .box0:hover p { color: #ff865c; } .box0:hover { background: #ffffff; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); } /* ************************************************************************************* PANELS CONFIGURATIONS *************************************************************************************** */ /*Panel Size*/ .pn { height: 250px; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); } .pn:hover { box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3); } /*Grey Panel*/ .grey-panel { text-align: center; background: #dfdfe1; } .grey-panel .grey-header { background: #ccd1d9; padding: 3px; margin-bottom: 15px; } .grey-panel h5 { font-weight: 200; margin-top: 10px; } .grey-panel p { margin-left: 5px; } /* Specific Conf for Donut Charts*/ .donut-chart p { margin-top: 5px; font-weight: 700; margin-left: 15px; } .donut-chart h2 { font-weight: 900; color: #FF6B6B; font-size: 38px; } /* Dark Blue*/ .darkblue-panel { text-align: center; background: #444c57; } .darkblue-panel .darkblue-header { background: transparent; padding: 3px; margin-bottom: 15px; } .darkblue-panel h1 { color: #f2f2f2; } .darkblue-panel h5 { font-weight: 200; margin-top: 10px; color: white; } .darkblue-panel footer { color: white; } .darkblue-panel footer h5 { margin-left:10px; margin-right: 10px; font-weight: 700; } /*Green Panel*/ .green-panel { text-align: center; background: #68dff0; } .green-panel .green-header { background: #43b1a9; padding: 3px; margin-bottom: 15px; } .green-panel h5 { color: white; font-weight: 200; margin-top: 10px; } .green-panel h3 { color: white; font-weight: 100; } .green-panel p { color: white; } /*White Panel */ .white-panel { text-align: center; background: #ffffff; color: #ccd1d9; } ² .white-panel p { margin-top: 5px; font-weight: 700; margin-left: 15px; } .white-panel .white-header { background: #f4f4f4; padding: 3px; margin-bottom: 15px; color: #c6c6c6; } .white-panel .small { font-size: 10px; color: #ccd1d9; } .white-panel i { color: #68dff0; padding-right: 4px; font-size: 14px; } /*Content Panel*/ .content-panel { background: #ffffff; box-shadow: 0px 3px 2px #aab2bd; padding-top: 15px; padding-bottom: 5px; } .content-panel h4 { margin-left: 10px; } .content-panel h5 { margin-left: 10px; color:#fff; } /* FORMS CONFIGURATION */ .form-panel { background: #ffffff; margin: 10px; padding: 10px; box-shadow: 0px 3px 2px #aab2bd; text-align: left; } label { font-weight: 400; } .form-horizontal.style-form .form-group { border-bottom: 1px solid #eff2f7; padding-bottom: 15px; margin-bottom: 15px; } .round-form { border-radius: 500px; -webkit-border-radius: 500px; } @media (min-width: 768px) { .form-horizontal .control-label { text-align: left; } } #focusedInput { border: 1px solid #ed5565; box-shadow: none; } .add-on { float: right; margin-top: -37px; padding: 3px; text-align: center; } .add-on .btn { height: 34px; } /* TOGGLE CONFIGURATION */ .has-switch { border-radius: 30px; -webkit-border-radius: 30px; display: inline-block; cursor: pointer; line-height: 1.231; overflow: hidden; position: relative; text-align: left; width: 80px; -webkit-mask: url('../img/mask.png') 0 0 no-repeat; mask: url('../img/mask.png') 0 0 no-repeat; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .has-switch.deactivate { opacity: 0.5; filter: alpha(opacity=50); cursor: default !important; } .has-switch.deactivate label, .has-switch.deactivate span { cursor: default !important; } .has-switch > div { width: 162%; position: relative; top: 0; } .has-switch > div.switch-animate { -webkit-transition: left 0.25s ease-out; -moz-transition: left 0.25s ease-out; -o-transition: left 0.25s ease-out; transition: left 0.25s ease-out; -webkit-backface-visibility: hidden; } .has-switch > div.switch-off { left: -63%; } .has-switch > div.switch-off label { background-color: #7f8c9a; border-color: #bdc3c7; -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); } .has-switch > div.switch-on { left: 0%; } .has-switch > div.switch-on label { background-color: #41cac0; } .has-switch input[type=checkbox] { display: none; } .has-switch span { cursor: pointer; font-size: 14.994px; font-weight: 700; float: left; height: 29px; line-height: 19px; margin: 0; padding-bottom: 6px; padding-top: 5px; position: relative; text-align: center; width: 50%; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out; -webkit-backface-visibility: hidden; } .has-switch span.switch-left { border-radius: 30px 0 0 30px; background-color: #2A3542; color: #41cac0; border-left: 1px solid transparent; } .has-switch span.switch-right { border-radius: 0 30px 30px 0; background-color: #bdc3c7; color: #ffffff; text-indent: 7px; } .has-switch span.switch-right [class*="fui-"] { text-indent: 0; } .has-switch label { border: 4px solid #2A3542; border-radius: 50%; -webkit-border-radius: 50%; float: left; height: 29px; margin: 0 -21px 0 -14px; padding: 0; position: relative; vertical-align: middle; width: 29px; z-index: 100; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out; -webkit-backface-visibility: hidden; } .switch-square { border-radius: 6px; -webkit-border-radius: 6px; -webkit-mask: url('../img/mask.png') 0 0 no-repeat; mask: url('../img/mask.png') 0 0 no-repeat; } .switch-square > div.switch-off label { border-color: #7f8c9a; border-radius: 6px 0 0 6px; } .switch-square span.switch-left { border-radius: 6px 0 0 6px; } .switch-square span.switch-left [class*="fui-"] { text-indent: -10px; } .switch-square span.switch-right { border-radius: 0 6px 6px 0; } .switch-square span.switch-right [class*="fui-"] { text-indent: 5px; } .switch-square label { border-radius: 0 6px 6px 0; border-color: #41cac0; } /*badge*/ .badge.bg-primary { background: #8075c4; } .badge.bg-success { background: #a9d86e; } .badge.bg-warning { background: #FCB322; } .badge.bg-important { background: #ff6c60; } .badge.bg-info { background: #41cac0; } .badge.bg-inverse { background: #2A3542; } /*todolist*/ /*footer*/ .site-footer { background: #FF9C77; color: #fff; padding: 10px 0; } .site-min-height { min-height: 900px; }