/*Sticky Footer*/
html {
position: relative;
min-height: 100% !important;
width: 100% !important;
}
body{
/* Margin bottom by footer height */
/*margin-bottom: 30px;*/
height: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
padding: 10px 0;
background-color: #555;
/*background-color: rgba( 40, 160,90, 1 );*/
border-top: 1px solid #222;
left: 0;
right: 0;
color: #cacaca;
}
/*------------------------------------------------*/
/* General Styles
/*------------------------------------------------*/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555;
background: #ececec;
}
body[dir="rtl"] {
font-family: "Hacen Liner Screen";
}
h1, h2 {
font-family: "latolight";
}
body[dir="rtl"] h1, body[dir="rtl"] h2 {
font-family: "GE SS Unique Bold";
}
h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body[dir="rtl"] h3, body[dir="rtl"] h4, body[dir="rtl"] h5, body[dir="rtl"] h6 {
font-family: "GE SS Medium", Helvetica, Arial, sans-serif;
}
hr {
border-top-color: #ddd;
}
hr.inner-separator {
border-style: dashed;
}
label {
font-weight: 300;
}
blockquote {
border-color: #e4e4e4;
}
input {
border-radius: 0;
}
ol, ul{
list-style-type: none;
padding: 0;
}
@media screen and (min-width: 768px) {
.container {
max-width: 100%;
width: 100%;
}
}
#wrapper {
width: 100%;
margin: 0 auto;
height: 100% !important;
}
body.topnav-fixed #wrapper {
padding-top: 44px;
}
.red-font {
color: #E60404 !important;
}
.yellow-font {
color: #FFB800 !important;
}
.green-font {
color: #3E9C1A !important;
}
.red-bg {
background-color: #E60404 !important;
}
.yellow-bg {
background-color: #FFB800 !important;
}
.green-bg {
background-color: #3E9C1A !important;
}
.link-disabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
.bottom-30px {
margin-bottom: 30px !important;
}
.bottom-60px {
margin-bottom: 60px !important;
}
.padding-l10{
padding-left: 10px !important;
}
.padding-r10{
padding-right: 10px !important;
}
.padding-t10 {
padding-top: 10px !important;
}
.padding-b10 {
padding-bottom: 10px !important;
}
.padding-0-10 {
padding: 0 10px !important;
}
.padding-10-0 {
padding: 10px 0 !important;
}
.padding-10 {
padding: 10px !important;
}
.padding-l5 {
padding-left: 5px !important;
}
.padding-r5 {
padding-right: 5px !important;
}
.padding-t5 {
padding-top: 5px !important;
}
.padding-b5 {
padding-bottom: 5px !important;
}
.padding-0-5 {
padding: 0 5px !important;
}
.padding-5-0 {
padding: 5px 0 !important;
}
.padding-5{
padding: 5px !important;
}
.margin-l10{
margin-left: 10px !important;
}
.margin-r10{
margin-right: 10px !important;
}
.margin-t10 {
margin-top: 10px !important;
}
.margin-b10 {
margin-bottom: 10px !important;
}
.margin-0-10 {
margin: 0 10px !important;
}
.margin-10-0 {
margin: 10px 0 !important;
}
.margin-10 {
margin: 10px !important;
}
.margin-l5 {
margin-left: 5px !important;
}
.margin-r5 {
margin-right: 5px !important;
}
.margin-t5 {
margin-top: 5px !important;
}
.margin-b5 {
margin-bottom: 5px !important;
}
.margin-0-5 {
margin: 0 5px !important;
}
.margin-5-0 {
margin: 5px 0 !important;
}
.margin-5{
margin: 5px !important;
}
.font-size-p1
{
font-size: 1.1em !important;
}
.font-size-p2
{
font-size: 1.2em !important;
}
.font-size-p4
{
font-size: 1.4em !important;
}
.font-size-p6
{
font-size: 1.6em !important;
}
.font-size-p8
{
font-size: 1.8em !important;
}
.font-size-m1
{
font-size: .9em !important;
}
.font-size-m2
{
font-size: .8em !important;
}
.font-size-m4
{
font-size: .6em !important;
}
.font-size-m6
{
font-size: .4em !important;
}
.font-size-m8
{
font-size: .2em !important;
}
.font-size-d2
{
font-size: 2em !important;
}
.font-size-d3
{
font-size: 3em !important;
}
.font-size-d4
{
font-size: 4em !important;
}
.font-size-d5
{
font-size: 5em !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.no-underline{
text-decoration: none !important;
}
/*------------------------------------------------*/
/* Top
/*------------------------------------------------*/
.top-bar {
padding: 5px 0;
background-color: #555;
/*background-color: rgba( 40, 160,90, 1 );*/
}
.top-bar .logo {
position: relative;
top: 7px;
}
.top-bar .top-bar-right {
text-align: right;
position: relative;
top: 5px;
float: right;
padding-left: 15px;
padding-right: 15px;
}
body[dir="rtl"] .top-bar .top-bar-right {
float: left;
}
.top-bar .top-bar-right .btn-link {
color: #ddd;
}
.top-bar .top-bar-right .btn-link:hover {
color: #fff;
}
.top-bar .searchbox {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
width: 16em;
position: relative;
top: 3px;
}
.top-bar .searchbox input[type="search"] {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 3px 6px;
height: 28px;
font-size: 0.85em;
color: #fff;
background-color: #4d4d4d;
border-color: #484848;
-webkit-appearance: none;
}
.top-bar .searchbox .btn {
padding: 3px 6px;
background: #4d4d4d;
border-color: #484848;
outline: none;
}
.top-bar .searchbox .btn i {
color: #666;
}
.top-bar .searchbox .btn:hover {
border-color: #484848;
}
.top-bar .searchbox .btn:hover i {
color: #1a1a1a;
}
@media screen and (max-width: 850px) {
.top-bar .searchbox {
display: none;
}
}
.top-bar .notifications,
.top-bar .logged-user {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
text-align: left;
}
.top-bar .logged-user img {
max-width: 26px;
max-height: 26px;
}
.top-bar .dropdown-menu {
padding: 0;
}
.top-bar .dropdown-menu > li > a {
padding: 8px;
}
.top-bar .dropdown-menu > li > a:hover {
background-color: #fafafa;
}
.top-bar .notifications {
margin-left: 10px;
margin-right: 28px;
}
.top-bar .notifications .notification-item {
position: relative;
margin-left: 25px;
}
.top-bar .notifications .notification-item .open .circle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 5px;
height: 5px;
position: absolute;
top: 19px;
left: 4px;
background-color: #fff;
}
.top-bar .notifications .notification-item .btn-group.open > a {
color: #fff;
}
.top-bar .notifications .notification-item .btn-group > a {
color: #fff;
}
.top-bar .notifications .notification-item .btn-group > a:hover {
color: #fff;
text-decoration: none;
}
.top-bar .notifications .btn-group.open .dropdown-toggl-e {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.top-bar .notifications > ul {
list-style-type: none;
}
.top-bar .notifications > ul, .top-bar .notifications > ul li {
margin: 0;
padding: 0;
display: inline;
}
.top-bar .notifications > ul > li li {
display: block;
padding: 0;
border-top: 1px solid #f1f1f1;
}
.top-bar .notifications > ul > li li:first-child {
border-top: none;
}
.top-bar .notifications .count {
position: absolute;
top: -7px;
left: 58%;
padding: 0px 5px;
border-radius: 30px;
line-height: 16px;
text-align: center;
font-size: 10px;
border-width: 2px;
border-style: solid;
color: #fff;
background: #E60404 !important;
border-color: #555;
}
.top-bar .notifications .dropdown-menu {
top: 27px;
width: 350px;
}
.top-bar .notifications .dropdown-menu .notification-header {
font-size: 0.85em;
font-weight: 700;
line-height: 2;
padding: 5px 8px;
}
.top-bar .notifications .dropdown-menu .notification-footer a {
text-align: center;
font-size: 0.85em;
}
.top-bar .notifications .dropdown-menu .notification-footer a:hover {
background: none;
text-decoration: underline;
}
.top-bar .notifications .dropdown-menu .text {
font-size: 0.85em;
margin-bottom: 0;
color: #888888;
}
.top-bar .notifications .dropdown-menu .timestamp {
font-size: 0.75em;
color: #888888;
}
.top-bar .notifications .inbox .dropdown-menu {
left: -141px;
}
body[dir="rtl"] .top-bar .notifications .inbox .dropdown-menu {
right: -165px;
}
/*@media screen and (max-width: 480px) {
.top-bar .notifications .inbox .dropdown-menu {
left: -7.5em;
}
}*/
.top-bar .notifications .inbox .inbox-item {
display: block;
}
.top-bar .notifications .inbox .inbox-item.unread {
background-color: #E7E7E7;
}
.top-bar .notifications .inbox img {
width: 32px;
}
.top-bar .notifications .inbox .name {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.85em;
color: #555;
font-weight: 700;
margin-bottom: 0;
}
body:not([dir="rtl"]) .top-bar .notifications .general .dropdown-menu {
left: -183px;
}
body[dir="rtl"] .top-bar .notifications .general .dropdown-menu {
right: -206px;
}
.top-bar .notifications .general .dropdown-menu li a i {
min-width: 14px;
}
.top-bar .notifications .general .dropdown-menu li a .timestamp {
float: right;
}
body[dir="rtl"] .top-bar .notifications .general .dropdown-menu li a .timestamp {
float: left;
}
/*@media screen and (max-width: 480px) {
.top-bar .notifications .general .dropdown-menu {
left: -10.5em;
}
}
*/@media screen and (max-width: 620px) {
.top-bar .notifications {
display: none;
}
}
.top-bar .logged-user .btn {
padding: 0;
border: none;
font-size: 0.9em;
font-weight: 700;
text-decoration: none;
color: #fff;
}
.top-bar .logged-user .btn .name {
font-weight: 400;
}
.top-bar .logged-user .btn .caret {
border-top-color: #fff;
}
.top-bar .logged-user .btn:hover {
color: #fff;
text-decoration: none;
}
.top-bar .logged-user .btn img {
border: 1px solid #5e5e5e;
}
.top-bar .logged-user .open .btn {
color: #fff;
}
.top-bar .logged-user .dropdown-menu {
top: 31px;
padding: 0;
}
body:not([dir="rtl"]) .top-bar .logged-user .dropdown-menu {
left: -38px;
}
body[dir="rtl"] .top-bar .logged-user .dropdown-menu {
right: -44px;
}
.top-bar .logged-user .dropdown-menu > li {
border-top: 1px solid #f1f1f1;
}
.top-bar .logged-user .dropdown-menu > li:first-child {
border-top: none;
}
.top-bar .logged-user .dropdown-menu > li > a {
color: #555;
font-size: 0.9em;
}
@media screen and (max-width: 991px) {
.top-bar.navbar-fixed-top + .bottom {
margin-top: 112px;
}
}
/*------------------------------------------------*/
/* Main Navigation ( Side Bar )
/*------------------------------------------------*/
/* main menu */
ul.main-menu {
padding-right: 0;
padding-left: 0;
list-style-type: none;
}
ul.main-menu > li a {
display: block;
position: relative;
padding: 13px 0px 13px 15px;
font-size: 14px;
color: #555;
background-color: #ececec;
border-top: 1px solid #dfdfdf;
text-decoration: none;
}
body[dir="rtl"] ul.main-menu > li a {
padding: 13px 15px 13px 0px;
}
ul.main-menu > li a:hover {
text-decoration: none;
background-color: #f1f1f1;
}
ul.main-menu > li.active > a {
background-color: #dfdfdf;
}
ul.main-menu > li:first-child > a {
border-top: none;
}
ul.main-menu > li i {
width: 14px;
text-align: center;
}
ul.main-menu > li .text {
padding-left: 8px;
font-size: 0.9em;
}
body[dir="rtl"] ul.main-menu > li .text {
padding-left: 0px;
padding-right: 8px;
}
ul.main-menu > li .toggle-icon {
font-size: 14px;
width: 10px;
position: absolute;
top: 16px;
text-shadow: none;
}
body:not([dir="rtl"]) .main-menu > li .toggle-icon {
right: 10px;
}
body[dir="rtl"] .main-menu > li .toggle-icon {
left: 10px !important;
}
ul.main-menu .sub-menu {
position: relative;
display: none;
padding-left: 0;
list-style-type: none;
}
body[dir="rtl"] ul.main-menu .sub-menu {
padding-right: 0;
}
ul.main-menu .sub-menu li a {
padding-left: 33px;
-webkit-transition: background-color .2s ease-in-out, font-weight .1s linear;
-moz-transition: background-color .2s ease-in-out, font-weight .1s linear;
-o-transition: background-color .2s ease-in-out, font-weight .1s linear;
-ms-transition: background-color .2s ease-in-out, font-weight .1s linear;
transition: background-color .2s ease-in-out, font-weight .1s linear;
}
body[dir="rtl"] ul.main-menu .sub-menu li a {
padding-left: 0px;
padding-right: 33px;
}
ul.main-menu .sub-menu li.active > a {
font-weight: 700;
}
ul.main-menu .sub-menu.open {
overflow: visible;
display: block;
}
ul.main-menu .sub-menu .sub-menu li a {
padding-left: 50px;
}
body[dir="rtl"] ul.main-menu .sub-menu .sub-menu li a {
padding-right: 50px;
}
ul.main-menu .sub-menu li.active > a {
background-color: #e9e9e9;
}
ul.main-menu > li > a,
.content-wrapper {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sidebar {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 230px;
padding-right: 0;
padding-left: 0;
position: absolute;
float: none;
z-index: 9990;
background-color: #ececec;
border-right: 1px solid #dedede;
}
body[dir="rtl"] .sidebar {
border-right: none;
border-left: 1px solid #dedede;
}
@media screen and (max-width: 992px) {
.sidebar {
-webkit-transform: translateX(-230px);
-moz-transform: translateX(-230px);
-o-transform: translateX(-230px);
-ms-transform: translateX(-230px);
transform: translateX(-230px);
}
body[dir="rtl"] .sidebar {
-webkit-transform: translateX(230px);
-moz-transform: translateX(230px);
-o-transform: translateX(230px);
-ms-transform: translateX(230px);
transform: translateX(230px);
}
}
body.sidebar-float .sidebar {
-moz-box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.3);
box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.3);
}
.sidebar.sidebar-hide, body.sidebar-float .sidebar {
-webkit-transform: translateX(-230px);
-moz-transform: translateX(-230px);
-o-transform: translateX(-230px);
-ms-transform: translateX(-230px);
transform: translateX(-230px);
}
body[dir="rtl"] .sidebar.sidebar-hide, body.sidebar-float[dir="rtl"] .sidebar {
-webkit-transform: translateX(230px);
-moz-transform: translateX(230px);
-o-transform: translateX(230px);
-ms-transform: translateX(230px);
transform: translateX(230px);
}
.sidebar, body.sidebar-float .sidebar.sidebar-float-active {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
body.sidebar-fixed .sidebar {
position: fixed;
height: calc( 100% - 44px ); /* Exclude Top Bar Height */
}
.toggle-sidebar-collapse {
color: #fff;
font-size: 22px;
margin-right: 15px;
line-height: 34px;
}
body[dir="rtl"] .toggle-sidebar-collapse {
margin-right: 0px;
margin-left: 15px;
}
.toggle-sidebar-collapse:hover, .toggle-sidebar-collapse:active, .toggle-sidebar-collapse:focus {
color: #fff;
}
.sidebar .current a {
color: rgb( 10, 130, 200 );
font-size: 1.12em;
}
/*------------------------------------------------*/
/* Main Content
/*------------------------------------------------*/
.content-wrapper {
visibility: hidden; /*To Animate Appearance*/
opacity: 0; /*To Animate Appearance*/
padding: 15px 30px;
margin-left: 230px;
margin-right: 0px;
-webkit-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
-o-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
-ms-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
position: relative;
min-height: 100% !important; /* Important to fill page height for sticky footer */
}
body[dir="rtl"] .content-wrapper {
margin-left: 0px;
margin-right: 230px;
}
.content-wrapper.expanded {
width: 100%;
padding-left: 70px;
margin-left: 0;
}
body[dir="rtl"] .content-wrapper.expanded {
margin-right: 0px;
}
.content-wrapper.expanded-full {
margin-left: 0;
padding: 15px;
}
body[dir="rtl"] .content-wrapper.expanded-full {
margin-right: 0px;
}
@media screen and (max-width: 480px) {
.content-wrapper {
padding: 15px;
}
}
body.sidebar-float .content-wrapper {
margin-left: 0;
padding: 15px;
}
body.sidebar-float[dir="rtl"] .content-wrapper {
margin-right: 0;
}
/*---------------------------------------------*/
/* Media
/*---------------------------------------------*/
.media .media-left, .media .media-right, .media .media-body {
display: inline-block;
vertical-align: top;
}
.media .media-left{
padding-right: 5px;
}
body[dir="rtl"] .media .media-left{
padding-left: 5px;
padding-right: 0px;
}
.media .media-right{
padding-right: 5px;
}
body[dir="rtl"] .media .media-right{
padding-right: 5px;
padding-left: 0px;
}
.media .media-object {
width: 42px !important;
height: 42px;
border: 1px solid transparent;
border-radius: 3px;
}
/*---------------------------------------------*/
/* Breadcrumb
/*---------------------------------------------*/
.breadcrumb li .breadcrumb-item {
background: rgb( 100, 200, 230 );
color: #fff;
padding: 5px 10px;
position: relative;
z-index:1;
text-decoration: none;
-webkit-transition: background .2s ease-in-out, color .2s ease-in-out;
-moz-transition: background .2s ease-in-out, color .2s ease-in-out;
-o-transition: background .2s ease-in-out, color .2s ease-in-out;
-ms-transition: background .2s ease-in-out, color .2s ease-in-out;
transition: background .2s ease-in-out, color .2s ease-in-out;
outline: none;
display: block;
height: 28px !important;
}
.breadcrumb li .breadcrumb-item:hover, .breadcrumb li span.breadcrumb-item {
background: #888;
color: #eaeaea;
}
.breadcrumb li:before {
content:none !important;
}
.breadcrumb li {
margin: 2px 8px;
}
.breadcrumb li .breadcrumb-item:before, .breadcrumb li .breadcrumb-item:after {
content: "";
position: absolute;
top: 0;
z-index:-1;
border-style: solid;
border-width: 14px;
border-right-width: 12px;
border-left: none;
-webkit-transition: border-color .2s ease-in-out;
-moz-transition: border-color .2s ease-in-out;
-o-transition: border-color .2s ease-in-out;
-ms-transition: border-color .2s ease-in-out;
transition: border-color .2s ease-in-out;
}
.breadcrumb li .breadcrumb-item:before {
right: -12px;
border-color: rgb( 100, 200, 230 );
border-right-color: transparent;
}
.breadcrumb li .breadcrumb-item:after {
left: -12px;
border-color: transparent;
border-right-color: rgb( 100, 200, 230 );
}
.breadcrumb li .breadcrumb-item:hover:before, .breadcrumb li span.breadcrumb-item:before {
border-top-color: #888;
border-bottom-color: #888;
}
.breadcrumb li .breadcrumb-item:hover:after, .breadcrumb li span.breadcrumb-item:after {
border-right-color: #888;
}
.breadcrumb li span.breadcrumb-item {
cursor: default;
}
/*------------------------------------------------------------------------------------------------*/
/* Others
/*------------------------------------------------------------------------------------------------*/
/* 2 column data presentation */
.data-row:not(:last-child) {
margin-bottom: 10px;
}
.data-row .data-name,
.data-row .data-value {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
padding: 5px 10px;
}
.data-row .data-name {
width: 12em;
background-color: #ececec;
color: #b9b9b9;
color: #999;
font-size: 0.9em;
vertical-align: top;
border-bottom: 1px solid #aaa;
}
.data-row .data-value {
padding-left: 0px;
padding-right: 0px;
border-bottom: 1px dotted #999;
margin-right: 10px;
}
.control-inline {
display: -moz-inline-stack !important;
display: inline-block !important;
vertical-align: middle !important;
zoom: 1 !important;
margin-right: 10px;
}
.profile-photo-label{ text-align: left; }
.photo-side { padding-top: 15px; }
.photo-side figure, .form-photo figure{ max-width: 200px }
@media screen and (max-width: 480px) {
.data-row .data-name, .data-row .data-value { display: block; }
.photo-side figure{ max-width: 100% }
}
@media all and ( max-width: 767px ) {
.profile-photo-label{ text-align: right; }
}
input#upload_image{ display: none; }
@media screen and (min-width:768px)
{
.photo-side { background: #efefef; min-height: 100%; }
.photo-side .data-name{
width: 80px;
background: #fff;
vertical-align: middle;
}
.photo-side .data-value{
border-bottom: none;
color: #888;
}
}
/*------------------------ Spinning Keyframes ------------------------*/
.spinning{
-webkit-animation-name: spin;
animation-name: spin;
}
.spin {
display: inline-block !important;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
animation-duration: 1s;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transform-origin: center;
text-align: center;
outline: none;
font-size: 13px !important;
line-height: 22px !important;
padding: 1px 0px 0px 0px !important;
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------ End Spinning Keyframes ------------------------*/
/*----------------------------- Uploader -----------------------------*/
.files-upload{
padding: 5px;
/*display: none;*/
width: 350px;
}
.files-upload .file{
position: relative !important;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
height: 100px;
/*background: #f0f0f0;*/
color: #777;
}
.files-upload .file:not(:first-child){ margin-top: 5px; }
.file .logo-side, .file .info-side {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
padding: 5px;
}
.file .logo-side{
/*border: 1px solid blue;*/
width: 70px;
text-align: center;
}
body[dir="rtl"] .file .logo-side{
border-left: 2px dotted #ccc;
}
body:not( [dir="rtl"] ) .file .logo-side{
border-right: 2px dotted #ccc;
font-size: 12px;
font-family: 'Monaco', Arial, sans-serif;
}
.file .logo-side img{ opacity: .7; }
.file .info-side{
position: relative !important;
/*border: 1px solid grey;*/
width: calc( 100% - 73px ); /* 70px + 3px for white-space */
min-height: 100%;
}
body:not( [dir="rtl"] ) .file .info-side{
font-family: 'Monaco', Arial, sans-serif;
font-size: 11px;
}
body[dir="rtl"] .file .info-side{
font-family: 'Hacen Liner Screen';
font-size: 12px;
}
.file-name .name{
/*background: #e0e0e0;*/
background: #f1f1f1;
display: block;
padding: 4px;
border-bottom: 2px solid #ccc;
}
.file-name{
text-align: center;
font-size: 14px;
font-family: Arial, sans-serif;
}
.file .actions {
text-align: center;
display: inline-block;
position: absolute;
/*overflow: hidden;*/
top: -1px;
right: -1px;
height: 0px;
line-height: 20px;
width: 50px;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear;
-moz-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear;
-o-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear;
-ms-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear;
transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear;
background: #aaa;
border: 1px solid #ddd;
border-top: none;
border-left: none;
border-radius: 0px 4px 0px 7px;
}
.file .actions .edit, .file .actions .remove {
font-size: 12px;
color: #f9f9f9;
margin: 0 4px;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
-ms-transition: color .2s linear;
transition: color .2s linear;
}
.file .actions .remove:hover { color: #dd5555; cursor: pointer; }
.file .actions .edit:hover { color: #1166ff; cursor: pointer; }
.file:hover .actions:not(.hide) {
visibility: visible;
opacity: 1;
height: 22px;
}
.percent, .speed, .estimated, .elapsed{
position: absolute;
color: #999;
/* font-size: 12px;*/
}
.file .percent, .file .speed{ bottom: 10px; }
.file .estimated, .file .elapsed{ bottom: 25px; }
body:not([dir="rtl"]) .file .percent, body:not([dir="rtl"]) .file .estimated{ right: 5px; }
body[dir="rtl"] .file .percent, body[dir="rtl"] .file .estimated{ left: 5px; }
.status { text-align: center; padding-top: 2px; margin-top: 2px; }
.status .text { padding: 0px 5px; font-size: 12px;}
body[dir="rtl"] .status .text { font-size: 12px}
.file .progress1{
height: 5px;
/*border: 1px solid rgba( 170, 170, 170, .5 );*/
border: 1px solid rgba( 100, 170, 170, .5 );
width: calc( 100% - 10px );
position: absolute;
bottom: 5px;
border-radius: 3px;
/*background: rgba( 150, 150, 150, .2 );*/
background: rgba( 50, 150, 250, .1 );
/*z-index: 10000;*/
}
body:not([dir="rtl"]) .file .progress1{
left: 5px;
}
body[dir="rtl"] .file .progress1{
right: 5px;
}
.file .info-side .progress1 .progress-bar1{
width: 0px;
height: 100%;
/*background: rgba( 100, 170, 230, 1 );*/
background: rgba( 50, 150, 250, 1 );
-webkit-transition: width .3s linear;
-moz-transition: width .3s linear;
-o-transition: width .3s linear;
-ms-transition: width .3s linear;
transition: width .3s linear;
}
/*----------------------------- END Uploader -----------------------------*/
.btn-success{
background: #2ecc71;
border-color: #27ae60;
}
.btn-success:hover{
background: #26A65B;
border-color: #27ae60;
}
.btn-danger{
background: #e74c3c;
border-color: #F64747;
}
.btn-danger:hover{
background: #D91E18;
border-color: #F64747;
}
.btn-primary{
background: #3498db;
border-color: #4183D7;
}
.btn-primary:hover{
background: #1E8BC3;
border-color: #3498DB;
}
.btn-info{
background: #19B5FE;
border-color: #52B3D9;
}
.panel-default .panel-heading{
background: none;
color: #6C7A89;
margin-bottom: 15px;
}
.alert.alert-success{
background: #C8F7C5;
border-color: #C8f0cc;
}
.alert.alert-danger{
background: #FCC9B9;
border-color: #FFB3A7;
}
/*****************************| LEVEL |******************************/
.level {
/*border-top: 1px dashed red;*/
margin-left: 20px;
margin-top: 10px;
position: relative;
/*background: rgba( 10, 10, 10, .2 );*/
/*border-left: 1px dotted red;*/
padding: 0;
}
body[dir="rtl"] .level {
/*border-top: 1px dashed red;*/
margin-right: 20px;
margin-left: 0;
}
/* Add Level Vertical Line */
.level:before{
content:"";
position: absolute;
width: 10px;
height: 100%;
top: -8px;
left: -10px;
border-left: 1px dotted #999;
background: #fff;
}
body[dir="rtl"] .level:before{
right: -10px;
left: 0;
border-right: 1px dotted #999;
border-left: none;
background: #fff;
}
/* Add Level Horizontal pointer to Childs */
.level > li:before {
content:"";
position: absolute;
width: 10px;
height: 50%;
bottom: 0px;
left: -11px;
border-top: 1px dotted #999;
background: #fff;
}
body[dir="rtl"] .level > li:before {
right: -11px;
left: 0;
}
/* Remove Background from childs Horizontal pointer of all li except last one to show vertical level line */
.level > li:not(:last-of-type):before{
background: none;
}
/* For level of last child li
Last Childs that Containing Childs to clip vertical level line */
.level > li:last-of-type + .level:after{
content:"";
position: absolute;
width: 3px;
height: calc(100% + 10px ); /* 10px of top margin */
bottom: 0px;
left: -30px;
background: #fff;
}
body[dir="rtl"] .level > li:last-of-type + .level:after{
right: -30px;
left: 0;
}
.list-group-item:not(:first-of-type){
margin-top: 10px;
}
ul.level ~ .list-group-item{
margin-top: 20px;
}
ul.list-group > ul.level ~ .list-group-item{
margin-top: 30px;
}
.no-decoration{
text-decoration: none !important;
}
.key-value {
background: #22A7F0;
color: #fff;
display: inline-block;
padding: 0px;
border-radius: 3px;
white-space: nowrap;
overflow: hidden;
font-size: 14px;
}
.key-value > .key, .key-value > .value{
display: inline-block !important;
vertical-align: middle;
/*width: 50%;*/
margin: 0;
padding: 10px;
}
.key-value.fixed > .key{
width: 100px;
}
/*.key-value.fixed > .value{
width: 140px;
}*/
.key-value > .key{
text-transform: capitalize;
letter-spacing: 1px;
}
.key-value > .value{
background: #29C5FF;
}
.ajax-loader{
background: url( '../images/ajax-loader-32.gif' ) no-repeat 50%rgba( 255, 255, 255, .5 );
width: calc( 100% - 30px );
height: 50px;
position: absolute;
bottom: 0;
display: none;
}
.relative {
position: relative;
}
|
Download
