/*//////////////////////////////////////////////////// // CUSTOM ////////////////////////////////////////////////////*/ @font-face { font-family: 'Roboto Condensed Light'; font-style: normal; src: url('fonts/RobotoCondensed-Light.ttf') } @font-face { font-family: 'Roboto Condensed'; font-style: normal; src: url('fonts/RobotoCondensed-Regular.ttf') } @font-face { font-family: 'RobotoMono-Regular'; font-style: normal; src: url('fonts/RobotoMono-Regular.ttf') } @font-face { font-family: 'RobotoMono-Bold'; font-style: normal; src: url('fonts/RobotoMono-Bold.ttf') } @font-face { font-family: 'Roboto Light'; font-style: normal; src: url('fonts/Roboto-Light.ttf') } @font-face { font-family: 'Roboto'; font-style: normal; src: url('fonts/Roboto-Regular.ttf') } @font-face { font-family: 'Roboto Bold'; font-style: normal; src: url('fonts/Roboto-Bold.ttf'); } @font-face { font-family: 'Roboto Medium'; font-style: normal; src: url('fonts/Roboto-Medium.ttf'); } @font-face { font-family: 'Poppins-Light'; font-style: normal; src: url('fonts/Poppins-Light.ttf') } @font-face { font-family: 'Poppins'; font-style: normal; src: url('fonts/Poppins-Regular.ttf') } @font-face { font-family: 'Poppins-Bold'; font-style: normal; src: url('fonts/Poppins-Bold.ttf'); } @font-face { font-family: 'Poppins-SemiBold'; font-style: normal; src: url('fonts/Poppins-SemiBold.ttf'); } @font-face { font-family: 'Poppins-Medium'; font-style: normal; src: url('fonts/Poppins-Medium.ttf'); } /*@font-face { font-family: 'Inter-Light'; font-style: normal; src: url('fonts/Inter-Light.ttf') } @font-face { font-family: 'Inter'; font-style: normal; src: url('fonts/Inter-Regular.ttf') } @font-face { font-family: 'Inter-Bold'; font-style: normal; src: url('fonts/Inter-Bold.ttf'); } @font-face { font-family: 'Inter-ExtraBold'; font-style: normal; src: url('fonts/Inter-ExtraBold.ttf'); } @font-face { font-family: 'Inter-Bold'; font-style: normal; src: url('fonts/Inter-Bold.ttf'); } @font-face { font-family: 'Inter-SemiBold'; font-style: normal; src: url('fonts/Inter-SemiBold.ttf'); } @font-face { font-family: 'Inter-Medium'; font-style: normal; src: url('fonts/Inter-Medium.ttf'); }*/ :root { --body-font: 'Roboto Light'; --body-bold-font: 'Roboto Bold'; --body-mono-font: 'RobotoMono-Regular'; --body-mono-bold-font: 'RobotoMono-Bold'; --h1-font: Poppins-Bold; --h1-bold-font: Poppins-Bold; --h2-font: Poppins-Bold; --h2-medium-font: Poppins-Medium; --h2-light-font: Poppins-Regular; --h2-bold-font: Poppins-Bold; --h3-font: Poppins-SemiBold; --h3-bold-font: Poppins-SemiBold; --h4-font: Poppins-SemiBold; --h4-bold-font: Poppins-SemiBold; --font-fallback: sans-serif; --yellow: #f1c40f; --red: #e74c3c; --green: #1abc9c; --bg-white: #fff; --bg-off-white:#fefefe; --grey:#666; } /* Chrome 87 bug on fieldset border-radius, removed when chrome is patched */ /*fieldset{border-radius: 0!important;}*/ /* BASE ELEMENTS */ body{background:#f9f9f9; font:13px/1.5em var(--body-font),var(--font-fallback); color:#272930; font-weight:normal; overflow-x:hidden; text-rendering: optimizeLegibility;} h1{font-family:var(--h1-font),var(--font-fallback); font-weight:normal!important} h2{font-family:var(--h2-font),var(--font-fallback); font-weight:normal!important} h3{font-family:var(--h3-font),var(--font-fallback); font-weight:normal!important} h4{font-family:var(--h4-font),var(--font-fallback); font-weight:normal!important} h1 strong{font-family:var(--h1-bold-font),var(--font-fallback); font-weight:normal!important} h2 strong{font-family:var(--h2-bold-font),var(--font-fallback); font-weight:normal!important} h3 strong{font-family:var(--h3-bold-font),var(--font-fallback); font-weight:normal!important} h4 strong{font-family:var(--h4-bold-font),var(--font-fallback); font-weight:normal!important} .body-bold{font-family:var(--body-bold-font),var(--font-fallback)!important; font-weight:normal!important} .body-mono{font-family:var(--body-mono-font),var(--font-fallback)!important; font-weight:normal!important} .body-bold-mono{font-family:var(--body-mono-bold-font),var(--font-fallback)!important; font-weight:normal!important} input,select{color: inherit;} input[type='time'], input[type='date']{ text-align: left; color: #000; min-height: 19px; } .font-body-small{font-size: 80%;} .font-body-large{font-size: 120%; line-height: 1.5em;} .font-overline{font-size: 80%; letter-spacing: 1.5px; text-transform:uppercase;} .cursor-pointer{cursor:pointer;} #presentation-header-content h1{font-family: var(--body-bold-font),var(--font-fallback);} #os-nav h2{font-family: var(--h1-font),var(--font-fallback);} h1{font-size:2em;} .big-stat.color-black{color: #000!important;} .bg-off-white{background:#f1f3f4; } .no-overflow{overflow:hidden;} table{line-height:1.4em;font-size: 13px;} tr:hover .ui-datepicker-today a{color: #fff!important;} .tablet{overflow-x:hidden; height:100%;} strong{font-family:var(--body-bold-font),var(--font-fallback); font-weight: normal;} .slide-info h4{font-size: 120%; line-height:1.5em;} h1{font-size:180%;line-height: 1em;} h2{font-size:160%;line-height: 1em;} #presentation-header-content h1{font-size:100%; margin-top:2px} h1,.message-h1,.widget-message h2{margin-bottom: 7.5px; } label{ color:#000;} .label-hint{color:#2d2d2d; padding:0!important; font-family:var(--body-font),var(--font-fallback);} .big-stat{font-family:var(--h2-medium-font),var(--font-fallback);font-weight: normal!important;font-size: 300%} h2.big-stat{font-family: var(--h2-font),var(--font-fallback); margin:0!important;font-weight: normal!important; font-size: 300%!important;} ::-webkit-input-placeholder{color:#bbb!important;} .content-editable:empty:before{ content: attr(placeholder); pointer-events: none; display: block; color: #bbb!important; min-height: 1em; } body *{ -webkit-text-size-adjust: none; -moz-osx-font-smoothing: grayscale; } /* ICONOGRAPHY & BUTTONS */ /* OPTIONS */ .tile-option{background:url(images/tile-corner.png) top right; right:-1px; top:-1px; position:absolute; z-index:2; height:71px; width:71px} .tile-option-small{ right:-5px; top:-5px; position:absolute; z-index:2; height:71px; width:71px} .action-option{background-size:100%; width:24px; height:24px; display:block; margin:10px 4px 0 35px; opacity:1; display: flex; align-items: center; justify-content: center;} .action-option:hover{background-position:top center; cursor:pointer; opacity:1} .action-option::before{ font-family: 'FontAwesome Light'; font-size: 22px; content: "\f013"; } a{color:#2d2d2d; text-decoration:none} a:hover{text-decoration:underline;} .media-files-uploaded .uploadifive-queue-item{border-bottom:1px dotted #ccc; border-top:none; padding:10px; font-size:12px; background:#efefef} .media-files-uploaded .uploadifive-queue-item div{} .media-files-uploaded .uploadifive-queue-item .progress{border-radius:5px; height:10px; background:#ccc; margin:10px 0 0; position:relative} .media-files-uploaded .uploadifive-queue-item .progress-bar{height:10px; border-radius:5px; position:absolute; background:#676767} .media-files-uploaded .uploadifive-queue-item .close{float:right; display:block; padding:0px; color:#2d2d2d; text-decoration:none;} /* BUTTONS */ .element-control{margin:0 0 0 0} .button{display:block; float:left;padding:6px 7px; position:relative; cursor:pointer;} .button a{color:#2d2d2d;} .big-button{padding:10px 15px; text-align:center; border:1px solid #2d2d2d; border-radius:10px; display:block; max-width:280px; margin:15px auto} .big-button:hover{text-decoration:none; background:#2d2d2d; color:#fff;} .button-inline{display:inline-block;} .cell-button{display:block; float:left;padding:5px 5px; font-size:10px; text-transform:uppercase; text-align:center; line-height:normal; font-weight:normal;} .element-control .button{position:relative;} .button:hover, .button:hover a{text-decoration:none!important;} .button-icon{width:18px; height:19px; float:left; display:block; margin-right:3px;} .cell-button a,.cell-button{text-transform:uppercase; color:#8c8c8c!important; text-decoration:none!important; font-size:10px; cursor:pointer} .cell-button a:hover,.button a:hover{color:#a3e35f; } .cell-button.disabled, .cell-button.disabled:hover, .button.disabled, .button.disabled:hover{background:#fff; color:rgba(0,0,0,.3)!important; cursor:not-allowed; border-color:rgba(0,0,0,.1)!important;} .button-container{ background:#fff; padding:15px; border-top: 1px solid rgba(0,0,0,.05);} #side-widget-actions, #widget-actions{padding:12px 15px} .bg-near-white{background:#fefefe;} /* ICONS */ .action-showTile{background:url(images/action-showTile.png) top center no-repeat; display:block; width:20px; height:20px; text-indent:-9999px;} .action-showTile:hover{background-position:bottom center;} .action-showTabular{background:url(images/action-showTabular.png) top center no-repeat; display:block; width:20px; height:20px; text-indent:-9999px;} .action-showTabular:hover{background-position:bottom center;} .button-small{padding:2px 7px; font-size:10px;} /* TINY MCE */ .tinymce-mode .selected{color:#ccc;} .fieldset-table .mce-statusbar{display:none;} .fieldset-table .mce-tinymce{border-left:none; border-right:none; border-bottom:none} /* MAIN */ section{margin:40px 0px 0px 0px; background:#f9f9f9; border-top:1px solid #fff;} .main{ display:block;} slides { width: 100%; display: block; position: relative; height: calc(100vh - 41px); overflow-x: hidden!important; } slide{position:absolute; width:100%;overflow:hidden; opacity: 0; visibility: hidden; z-index:0; height:100vh; overflow-y: auto!important; overflow-x: hidden!important;} slide.show{opacity: 1; z-index:1;visibility:visible; max-height:none;overflow:unset; } slide.hide{ opacity:0!important; z-index:0;max-height:100%; overflow: hidden; visibility: hidden!important;} slide input, slide select{display: none;} slide.show input, slide.show select{display: block;} slide.minimum{background:#fff; } slide.minimum .container{} slide.overflow{ overflow-x: hidden!important;} /* NAV */ #os-nav{position:fixed; left:-420px; top:0; z-index:9011; background:#fff; bottom:0; width: 258px; overflow: hidden;} #os-nav > ul{list-style:none; max-height: calc(100vh - 73px); overflow: auto; padding:0; border-bottom: 1px solid rgb(0, 0, 0,.1);} #os-nav > ul > li{margin:0; } #os-nav > ul > li > a{display:block; font-size:13px;padding:14px 16px 14px 13px; display: flex; align-items: center; gap:8px;} #os-nav > ul > li > a.active, #os-nav > ul > li > a:hover{color:#fff; background-color:#2d2d2d; text-decoration:none; } #os-nav .sub-menu li {} #os-nav .sub-menu li a{background-color:#fbfbfb; display:block; padding:15px 15px 15px 45px;} #os-nav .sub-menu li a:hover{color:#fff; text-decoration:none} #os-nav .submenu{float:left; position:absolute; margin:-41px 0 0 320px!important;display:none;z-index:999; text-align:left; border-radius:0px; border:none; width:auto!important; } #os-nav .submenu li{background:rgba(0,0,0,0.7); display:block; min-width:220px; text-align:left; padding:0px!important; border:none!important; margin:0!important; border-radius:0px!important; text-indent:0px} #os-nav .submenu li:hover{box-shadow:0px 0px 0px!important;} #os-nav .submenu a{ display:block; color:#fff; text-decoration:none; padding:5px 10px; font:11px Verdana, Geneva, sans-serif;} #os-nav .submenu a{background:none!important} #os-nav .submenu a:hover{background:#2d2d2d!important;} .sub-submenu{display:none; position:absolute; margin:-150px 0 0 180px; width:580px;} .sub-submenu li{min-width:260px!important; float:left!important} .submenu-location{margin:0 0 0 180px; width:260px} .submenu-location li{min-width:260px!important; float:none!important} #os-nav ul li:hover .submenu{display:block!important;} .submenu li:hover .sub-submenu{display:block!important;} .property-menu > a{display:block; background-image:url(images/menu-property.png); background-position:15px 13px; background-repeat:no-repeat } .property-menu > a:hover{background-position:15px -35px!important;} .settings-menu > a{background-image:url(images/action-option.png);display:block; background-position:15px 13px; background-repeat:no-repeat } .settings-menu > a:hover{background-position:15px -35px!important;} .logout-menu > a{background-image:url(images/menu-logout.png);display:block; background-position:15px 13px; background-repeat:no-repeat } .logout-menu > a:hover{background-position:15px -35px!important;} .menu-newscast > a{background-image:url(images/menu-newscast.png); display:block; background-position:15px 13px; background-repeat:no-repeat } .menu-newscast > a:hover{background-position:15px -35px!important;} /* STATS */ .stat-block{ min-width:220px; display:inline-block} .stat-inner{padding:15px; text-align:left} .big-stat{ line-height:100%; color:#fff;} .stat-label{text-transform:uppercase;} /* USER TOOLS */ user-tools{position:fixed; top:0; right:0; z-index:4} user-tools ul{list-style:none;} user-tools li{float:left; height:41px; position:relative;} user-tools li span{cursor:pointer;} user-tools li .user-settings{background:url(images/action-option.png) center 8px no-repeat; width:40px; display:block; height:40px; margin:0px 0} user-tools li .user-settings:hover{background-position:center -40px; cursor:pointer; background-color:#2d2d2d} user-tools li .user-picture,.user-guest-icon{display:block; width:41px; height:41px; background:url(images/blank-profile.svg) center center no-repeat; background-size:70%;} user-tools li .user-picture img{width:100%; height:auto;} user-tools li .user-name{display:block; padding:10px 10px; font-size:11px;text-transform:uppercase;} user-tools li .user-history{background:url(images/history.png) top center no-repeat; width:40px; display:block; height:24px; margin:8px 0;} user-tools li .user-history:hover{background-position:bottom center; cursor:pointer} user-tools li .user-search{background:url(images/user-search.png) top center no-repeat; width:40px; display:block; height:24px; margin:8px 0;} user-tools li .user-search:hover{background-position:bottom center; cursor:pointer} user-tools li .user-notifications{ width:36px; height:40px; display:block;} user-tools li .user-notifications{ opacity:0.9} user-tools li .user-notifications.active{ opacity:1} user-tools .user-picture img{ height: 28px !important; width: 28px !important; margin: 6px; border-radius: 15%; } .notification .notification-bit{display:table-cell; padding:0 7.5px; vertical-align:top} .notification{border-bottom:1px solid rgba(0,0,0,.1); padding:7.5px 0;} .delete-notification{opacity:0;} .notification:hover .delete-notification{opacity:1;} user-tools li .taskbar-icon{width:28px; height:40px; background-position: center center; background-size:21px; background-repeat: no-repeat; display:block; opacity:0.9; } .taskbar-icon.active{opacity:1;} .bubble{min-width:12px; height:12px; text-align:center;background:#2d2d2d; font-size:11px!important; padding:3px; border-radius:15px; top:3px; left:-2px; color:#fff; position:absolute; line-height:normal; font-family:sans-serif; opacity:0; transform:scale(0);-webkit-transform:scale(0);} .bubble.show{ opacity:1; transform: scaleX(1) scaleY(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); } .button .bubble{top:-5px; left:-5px;} /*======================================================== // MODULE TOP NAV /=======================================================*/ sub-nav ul li a{font-size: 12px!important; font-family: var(--body-font),var(--font-fallback); line-height: normal;} sub-nav ul li a.selected{ font-family: var(--body-bold-font),var(--font-fallback);} sub-nav{height:41px; background:#fff; position:fixed; top:0; left:0; right:0; z-index:3; border-bottom:1px solid rgb(0, 0, 0,.1)} sub-nav ul{list-style:none; margin:0 0 0 40px} sub-nav ul li{display:block; float:left; position:relative} sub-nav ul li a{padding:14px 20px; display:block; text-transform:uppercase; color:#999;text-decoration:none!important; position: relative} sub-nav ul li a:after{content:' '; position:absolute; height:2px; background:#676767; left:50%; bottom:0; transform:translate3d(-50%,0,0); width:0; transition:.1s linear width} sub-nav ul li a:hover{ color:#676767; text-decoration:none; } sub-nav ul li .selected{background:#676767; color:#fff!important;} sub-nav ul li a:hover:after, sub-nav ul li .selected:after { width:100%;} sub-nav ul li .bubble{top:2px; right:0px; left:auto} sub-nav ul li .selected + .bubble{opacity:0!important;} sub-nav ul li .fake-submenu{display:none; margin:0px 0 0 0; position:absolute; box-shadow:1px 1px 3px rgba(0,0,0,0.3)} sub-nav ul li .fake-submenu span{float:none;min-width:300px; width:300px!important; background:#f9f9f9; display:block;} sub-nav ul li .fake-submenu span:hover{background:#676767} sub-nav ul li:hover .fake-submenu{display:block;} #dragon-notifications{width:360px;position:fixed; top:56px; right:15px; z-index:-1; transform:translate3d(50%,0%,0); opacity:0} .notification-inner{background:#fff; padding:15px 15px; box-shadow: 0 2.5px 7.5px rgba(0, 0, 0, 0.1); cursor: pointer; border-radius: 10px} .notification-icon{width:42px!important; height:42px!important; float:left; margin:0!important; } .notification-message{ margin-left:54px;} .notification-title{ display: flex; justify-content: space-between; } .notifcation-title *{ opacity: 0.7; } .notifcation-title strong{ opacity: 1; } .notification-message p{padding-right: 48px;} #dragon-notifications.show{ transform:translate3d(0%,0,0); -webkit-transform:translate3d(0%,0,0); opacity:1; z-index: 3;} .box-shadow-3-black-neat{box-shadow:1px 1px 3px rgba(0,0,0,0.3);} .tab-search-box{position:fixed; top:40px; right:122px;} user-tools{background:#fff;} user-tools li .user-wordpress{background:url(images/wordpress.png) center 8px no-repeat; width:40px; display:block; height:40px; margin:0 0; text-indent:-9999px;} user-tools li .user-wordpress:hover{background-position:center -40px; cursor:pointer; background-color:#2d2d2d} .user-menu{width:41px; display:block; height:42.5px; margin:0px 0; position:fixed; left:0; top:0; z-index:4; display: flex; align-items: center; justify-content: center;} .user-menu:hover{ cursor:pointer; background-color:#2d2d2d;} .user-menu:hover i{ color: #fff;} .dot-tablet-menu{position:fixed; width:41px; height:41px; top:0px; right:0; background:url(images/dot-menu.svg) center center no-repeat; background-size:50%; z-index:4; display:none; border-left:1px solid rgba(0,0,0,.1)} /* .history ul{list-style:none;} .history ul li{width:20%; height:120px; max-width:120px; display:block; margin:0 20px 20px; text-indent:-9999px; float:left; box-shadow:0 0 3px inset} */ /* MEDIA */ .media-upload{width:120px; height:120px; position:relative;} .media-tools-icon{background:url(images/Tools.png); position:absolute; right:10px; top:10px; width:24px; height:24px; opacity:0; cursor:pointer; z-index:1} .media-upload:hover .media-tools-icon{opacity:1} /* TOOL CONTEXT */ .tool-menu{visibility:hidden; position:absolute; z-index:10002; top:-400px; left:-400px; display: block!important;} .tool-menu.from-top .tool-tip-inner{ transform: translate3d(0,-10%,0); } .tool-menu .tool-tip-inner{ min-width:100px; max-width:320px; padding:5px 0; width:100%; border:1px solid rgba(0,0,0,0.1); box-shadow:0 2.5px 7.5px rgba(0,0,0,0.1); border-radius:5px; background:#fff; opacity: 0; transform: translate3d(0,10px,0); transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); transition-property: transform, opacity; max-height: 50vh; overflow: auto!important; overflow-x: hidden!important; } .tool-menu.show{visibility: visible;} .tool-menu.show .tool-tip-inner{ opacity: 1; transform: translate3d(0,0,0); } .tool-menu-tip{padding:9px 0 0; position:absolute; height:20px; top:-9px; right:0; width:28px; height:9px} .tool-menu ul{list-style:none;} .tool-menu ul li{ padding:0 0 0 0; } .tool-menu ul li.separator{border-bottom:1px solid rgb(0, 0, 0,.1); margin:5px 0} .tool-menu ul li a{display:block;padding:10px 16px; color:#2d2d2d; cursor:pointer; text-decoration:none;position:relative; white-space: nowrap;} .tool-menu ul li a.fa-icon{ display: grid; grid-template-columns: 24px 1fr; column-gap: 4px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; align-items: center; } .tool-menu ul li:hover{background:rgba(0,0,0,0.03)} .tool-feature{background:url(images/check.png) right center no-repeat;} .tool-remove{background:url(images/trash.png) right center no-repeat;} .tool-menu .emoji{ font-size: 17px; } .tool-menu .html-icon{ display: flex; align-items: center; justify-content: center; } .tool-menu .header{ padding: 8px 16px 0; margin-top: 4px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .tool-menu .header:hover{ background: none!important } .tool-menu .has-submenu{position:relative;} .tool-menu .has-submenu > a{ background:url(images/arrow-forward.svg) 136px center no-repeat; background-size:13px;} .tool-menu .sub-context-options{position:absolute; left:95%; background:#fff; width:160px; border:1px solid rgba(0,0,0,.2); top:-1px; display:none; border-radius:5px; box-shadow:2px 2px 2px rgba(0,0,0,0.1)} .tool-menu .has-submenu:hover .sub-context-options{display:block;} .context-menu-group{padding:5px 10px!important; text-transform:uppercase; font-size:90%; display:block} .tool-menu ul li .featured{background:url(images/tick.png) right center no-repeat!important;} .tool-tip-left .tool-menu-tip{background:url(images/tool-left.png) top left no-repeat;width:9px; position:absolute; height:25px; top:0px; left:-9px;} .tool-tip-left .tool-menu ul{margin:0 0 0 9px;} .main{} .hover-tip{cursor: pointer;} #tip-view{ position: absolute; left:0; top:0; background:#fff; padding:20px; border-radius:10px; max-width:280px; opacity: 0; visibility: hidden; transform: translate3d(0,10%,0); transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); transition-property: transform, opacity; box-shadow: 0 2.5px 15px rgba(0,0,0,0.1); z-index: -1; } #tip-view.from-top{ transform: translate3d(0,-10%,0); } #tip-view.show{transform: translate3d(0,0%,0); opacity: 1;visibility:visible; z-index: 9020;} .tip-view-link{margin-top:15px} .hover-tip-content{display: none;} .preview-more,.preview-less{position:absolute; bottom:10px; left:10px;} .tile{ margin:0 20px 20px 0; height:auto; position:relative; overflow:hidden; background:#fff;} .tile-slide{width:9999px;} .tile-face{width:100%;} .option-screen,.preview-screen{padding:20px; min-height:140px; position:relative} .option-screen ul{list-style:none} .option-screen ul li{padding:7.5px 0; background:#fff; border-bottom:1px solid rgba(0,0,0,0.1);} .calender-icon{width:40px; position:absolute; top:10px; left:10px} .calender-icon-weekday{display:block; text-align:center; background:#b2d85d; color:#fff; text-transform:uppercase; font-size:10px;} .calender-icon-day{background:#fff; display:block; text-align:center; color:#2d2d2d;} /* CLIPPINGS */ .tile-seperator{color:#666; text-align:left; padding:10px 20px 10px 0; border-bottom:1px dotted rgba(0,0,0,0.1); margin:0 0 20px} .action-title{color:#666; text-align:left; } .column-clipping{ max-width:320px; min-width:320px;} .column-clipping .tile-face{max-width:320px;} .column-clipping .author-thumb{margin:0 5px 5px 0; width:40px; height:40px;} .column-clipping .author-thumb img{width:100%; height:auto;} .clipping{padding:10px; margin:0 20px 0px 0; opacity:1;} .clipping-category{display:block; background:#676767; padding:5px 10px; text-transform:uppercase; color:#fff; font-size:11px; margin:0 0 5px 0} .clipping-location{background:url(images/location.png) center left no-repeat; width:24px; height:24px; display:block; margin:0 5px 15px 0} .clipping-media{position:relative; background:#333; border-bottom:5px solid #676767; height:175px; overflow:hidden} .clipping-media img{width:100%; height:auto; display:block;} .pink-clipping .clipping-category{background:#c956a4;} .pink-clipping .clipping-media{border-bottom:5px solid #c956a4} .pink-clipping .calender-icon-weekday{background:#c956a4;} .blue-clipping .clipping-category{background:#2d2d2d;} .blue-clipping .clipping-media{border-bottom:5px solid #2d2d2d} .blue-clipping .calender-icon-weekday{background:#2d2d2d;} .yellow-clipping .clipping-category{background:#dce14f;} .yellow-clipping .clipping-media{border-bottom:5px solid #dce14f} .yellow-clipping .calender-icon-weekday{background:#dce14f;} .orange-clipping .clipping-category{background:#f2ae4d;} .orange-clipping .clipping-media{border-bottom:5px solid #f2ae4d} .orange-clipping .calender-icon-weekday{background:#f2ae4d;} .red-clipping .clipping-category{background:#f24d4d;} .red-clipping .clipping-media{border-bottom:5px solid #f24d4d} .red-clipping .calender-icon-weekday{background:#f24d4d;} .clipping-text{padding:15px;font:12px 'Roboto Condensed', sans-serif; border-bottom:1px solid #d4d4d4} .clipping-text h1{font:21px 'Roboto Condensed', sans-serif; letter-spacing:0px; color:#333; font-weight:300; height:70px} .clipping-stat{padding:10px; border-top:1px solid #fff} .border-top-white{border-top:1px solid #fff;} .option-screen-small{padding:5px;} .option-screen-small ul{list-style:none} .option-screen-small ul li{padding:5px 5px; background:#fff; border-bottom:1px dotted #ccc;} .preview-text{padding:30px 30px 30px 15px;} .preview-text h1{text-transform:uppercase; font-weight:lighter; font:16px Georgia, "Times New Roman", Times, serif; text-shadow:1px 1px 0px #b8e061;} /* INDICATORS */ #script-indicator{position:fixed; bottom:15px; right:15px;padding:5px; visibility:hidden; opacity:0; z-index:10004; transition-property: border-top-color,opacity, visibility} #script-indicator.show{visibility:visible; opacity:1;} .ajax-error{} /* FTP QUEUE*/ #ftp-indicator{position:fixed; bottom:7.5px; right:7.5px!important; display:block; cursor:pointer; display:none; z-index:9013} .ftp-indicator-gif{background:url(images/uploader.gif); height:24px; width:24px;} #ftp-queue{position:fixed; top:0; bottom:0; right:-300px; width:300px; background:#fff; z-index:5; color:#2d2d2d; z-index:9012} .uploadifive-queue-item{border-bottom:1px solid rgba(0,0,0,0.1); padding:15px; font-size:90%} .uploadifive-queue-item div{} .uploadifive-queue-item .progress{border-radius:5px; height:10px; background:rgba(0,0,0,0.1); margin:10px 0 0; position:relative} .uploadifive-queue-item .progress-bar{height:10px; border-radius:5px; position:absolute; background:#676767} .uploadifive-queue-item .close{float:right; display:block; padding:0px; color:#2d2d2d; text-decoration:none;} /* WIDGET WINDOW */ #widget{z-index:9011; position:fixed; margin-top:0!important} #widget-window{width:100%; max-width:960px; margin:0 auto;} #widget-container{width:100%; max-width:960px; overflow:hidden; position:relative} #widget-render{width:9999px; min-height:400px} .widget-slide{width:100%; position:absolute; -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); z-index:0; opacity:0.7} .widget-slide.show{ -webkit-transform:translate3d(0%,0,0); transform:translate3d(0%,0,0); z-index:1; opacity:1} .widget-slide.hide{ -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); z-index:0; opacity:0.7} .widget-slide .inputs, .widget-slide input, .widget-slide textarea, .widget-slide select{visibility:hidden;} .widget-slide.show .inputs, .widget-slide.show input, .widget-slide.show textarea, .widget-slide.show select{visibility:visible;} .widget-form{margin:0px;padding:30px; position:relative} .inputs:disabled,fieldset.disabled{color:#666; opacity:.7; cursor:not-allowed} .jq-wysiwig{margin-bottom:15px;} .widget-form .jq-slider{padding:30px 0 10px 0px; position:relative;} .jq-slider-value{position:absolute; padding:0px 15px; background:#ccc; font-size:90%; color:#fff; top:0px} .ui-slider{box-shadow:none!important; border:1px solid rgba(0,0,0,.1)!important; height: 3px!important; border-radius: 3px; margin:9px 5px} .ui-slider-handle{border-radius:15px!important; height:20px!important; width:20px!important; background:#fff!important; box-shadow: 0 1px 3px rgba(0,0,0,0.2); border:none!important; top:-9px!important} .ui-slider-range{border-radius: 3px;} .slider-range-tip{background:#fff; position: absolute; padding: 7.5px; border-radius:5px; text-align: center; position: absolute; top: 30px; left: 0;box-shadow: 0 1px 3px rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,.1); opacity: 0;} .ui-slide-container:hover .slider-range-tip{opacity: 1} .slider-range-tip:after, .slider-range-tip:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .slider-range-tip:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; margin-left: -7px; } .slider-range-tip:before { border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0,0,0,0.1); border-width: 8px; margin-left: -8px; } .arrow_down:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_down:after { border-color: rgba(136, 183, 213, 0); border-top-color: #ccc; border-width: 5px; left: 50%; margin-left: -5px; } .widget-form fieldset,fieldset{border:1px solid rgba(0,0,0,0.1);padding:10px 12px; margin:0 0 10px; position:relative; background:rgba(255,255,255,1); border-radius:5px} .fieldset-range{padding:9px 10px 6px!important} .textboxlist{position:static;} .widget-form label{display:block; margin:10px 0 5px; font-family: 'Roboto Bold';} .widget-form label span{font-family: 'Roboto Light';} .widget-form .inputs,.inputs,.fake-inputs{border:none; width:100%; background:none; font:inherit} fieldset .return-validation{position:absolute; right:10px; top:10px; color:#900; font-size:10px;} .widget-form .wrong,fieldset.wrong{border:1px solid rgba(192,57,43,1);background:rgba(192,57,43,.05);} input[disabled],textarea[disabled] {color: #ccc;} .dialog-content-inner .fieldset-title{padding:7.5px 0;display:block; font:inherit;font-family:'Roboto Bold', sans-serif; text-transform:uppercase; position:relative} .widget-form .fieldset-title{padding:7.5px 0; border-bottom:1px solid rgba(0,0,0,0.1); margin:20px 0 7.5px; display:block; font:inherit;font-family:'Roboto Bold', sans-serif; text-transform:uppercase; position:relative} .widget-form .fieldset-subtitle{padding:10px 0 0; border-bottom:1px dotted rgba(0,0,0,0.01); margin:0 0 7.5px; display:block; font:inherit;font-weight:bold;} .fieldset-title-icon{position:absolute; top:7.5px; right:7px;} .fieldset-title-icon:hover{opacity:1; cursor:pointer;} .fieldset-title.large{ font-size: 140%; text-transform: none; padding: 15px 0; margin-bottom: 15px; } .widget-slide-control{} .widget-prev{text-transform:uppercase; cursor:pointer; position:absolute; left:15px; top:12.5px; color:rgba(255,255,255,.8); font-family:'Roboto Bold', sans-serif;} .widget-next{text-transform:uppercase; cursor:pointer; position:absolute; right:15px; top:12.5px; color:rgba(255,255,255,.8); font-family:'Roboto Bold', sans-serif;} .widget-next.hidden, .widget-prev.hidden{display:none} #widget-title{height:28px; border-bottom:1px solid rgba(0,0,0,.1);text-align:center;padding:12.5px 0 0;text-transform:uppercase; position:relative;font-size:11px; font-family: 'Roboto Bold'; } #widget-title span{text-shadow:none!important; color: #fff} #widget-actions{border-top:1px solid rgba(0,0,0,.1);} #widget-actions span,#widget-actions a{text-decoration:none;} #widget-actions span:hover{color:#2d2d2d; cursor:pointer} .white-widget-slide{background:#fff;} /* SIDE WIDGET */ #side-widget{position:fixed; top:0; right:0; box-shadow:0 0 3px rgba(0,0,0,.3);width:100%; z-index:9004; background:#fff; height:100%; -webkit-transform:translate3d(110%,0%,0);transform:translate3d(110%,0%,0);} #side-widget-title{height:28px; border-bottom:1px solid rgba(0,0,0,.1);text-align:center;padding:12.5px 0 0;text-transform:uppercase; position:relative;font-size:11px; font-family: 'Roboto Bold';} #side-widget{height: 100vh!important;max-height:100vh; max-height:-webkit-fill-available; } .side-widget-prev{text-transform:uppercase; cursor:pointer; position:absolute; left:15px; top:12.5px; color:rgba(0,0,0,.6); font-family:'Roboto Bold', sans-serif;} .side-widget-next{text-transform:uppercase; cursor:pointer;position:absolute; right:15px; top:12.5px; color:rgba(0,0,0,.6); font-family:'Roboto Bold', sans-serif;} .side-widget-next.hidden, .side-widget-prev.hidden{display:none} .slide-buttons{display:none;} .slide-buttons.show{display:block;} .fieldset-table.adjust-full-height{margin-bottom:0!important;} .fieldset-table p{padding:10px 7.5px!important;} #side-widget-container .widget-slide::-webkit-scrollbar, .overflow::-webkit-scrollbar, .widget-form .fieldset-table::-webkit-scrollbar { width: 9px; height:9px; } .hidden-overflow::-webkit-scrollbar{ display: none; } /* TRACK */ #side-widget-container .widget-slide::-webkit-scrollbar-track , .overflow::-webkit-scrollbar-track, .widget-form .fieldset-table::-webkit-scrollbar-track { background: rgba(0,0,0,0.07)!important; -webkit-border-radius: 0; border-radius: 0; } /* THUMB */ #side-widget-container .widget-slide::-webkit-scrollbar-thumb, .overflow::-webkit-scrollbar-thumb, .widget-form .fieldset-table::-webkit-scrollbar-thumb, #side-widget-container .widget-slide::-webkit-scrollbar-thumb, .overflow::-webkit-scrollbar-thumb, .widget-form .fieldset-table::-webkit-scrollbar-thumb { /* This is the EXACT color of Mac OS scrollbars. Yes, I pulled out digital color meter */ background: rgba(0,0,0,0.2)!important; -webkit-border-radius: 100px; } #side-widget-container .widget-slide::-webkit-scrollbar-thumb:active, .overflow::-webkit-scrollbar-thumb:active, .widget-form .fieldset-table::-webkit-scrollbar-thumb:active { background: rgba(0,0,0,0.8); /* Some darker color when you click it */ -webkit-border-radius: 100px; } #side-widget-container .widget-slide,.overflow,.widget-form .fieldset-table{overflow:auto!important;} .widget-slide.overflow{overflow-x: hidden!important;} .overflow-x-hidden{overflow-x: hidden!important;} /*#side-widget-container .widget-slide:hover,.overflow:hover,.widget-form .fieldset-table:hover{overflow:auto!important; overflow-x:hidden!important;}*/ #side-widget-window{position:relative; height:758px} #side-widget-actions{position:absolute; bottom:0; left:0; right:0; border-top:1px solid rgba(0,0,0,.1); background:#fefefe; z-index: 1;} #side-widget-container{width:100%;overflow:hidden; position:relative} #side-widget-container p{padding:10px 0;} #side-widget.show{ -webkit-transform:translate3d(0,0%,0);transform:translate3d(0,0%,0);} #side-widget-overlay{position:fixed; background:rgba(0,0,0,.3); top:0; right:0; bottom:0; left:0; z-index:9003; opacity:0;visibility:hidden} #side-widget-overlay.show{opacity:1; visibility:visible; -webkit-transform:translate3d(0,0%,0); transform:translate3d(0,0%,0); } /* SLIDE CONTROL PANEL */ .control-panel{ border-bottom:1px solid rgba(0,0,0,0.1); padding:15px 10px; font-size: 13px; } .control-panel *{font-size: 13px;} slide .control-panel{ position: sticky; top: 0; z-index: 2; } /*///////////////////////////////////////////////////// // TASKS, TODO /////////////////////////////////////////////////////*/ .todo-list ul{list-style:none; border-left:1px solid #efefef; display:table; width:100%;} .todo-list ul .todo-row{display:table-row} .todo-list ul li > .todo-cell{ display:table-cell;border-right:1px solid #efefef; border-bottom:1px solid #efefef; padding:15px; background:#fff; vertical-align:middle} .todo-list ul li .todo-description{} .todo-list ul li .todo-checked{width:24px;} .todo-list ul li .todo-stat{width:43px; font-size:18px; font-weight:700; vertical-align:top; text-align:right} .todo-list ul li .todo-people{width:26px;} .todo-list ul li .todo-people img{width:26px; height:auto; display:inline-block;} .todo-checkbox{display:block; width:24px; height:24px;} .todo-completed{background:#a7ce3d url(images/todo-complete.png) center center no-repeat;} /*///////////////////////////////////////////////////// // ALERTS /////////////////////////////////////////////////////*/ options-window,alert-window{width:50%; max-width:450px; margin:10% auto; display:block} alert,options,error{display:none;} .overlay-window h1{color:#efefef; padding:10px; border-bottom:1px solid #666; font-weight:lighter; font:18px Georgia, "Times New Roman", Times, serif; text-shadow:0 0 8px rgba(0,0,0,0.5)} .overlay-window p{padding:20px; border-bottom:1px solid #CCC} .overlay-window div{background:#efefef; padding:10px; border-top:1px solid #fff} .overlay-window ol, .overlay-window ul{padding:0 20px;} buttons span{cursor:pointer;} .user-icon img{width:100%; height:auto;} .tabular-view{} .table-container{margin:0 0 0 0;} .table{width:100%;border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1);} .table th,.table td{ padding:15px 10px;border-right:1px solid rgba(0,0,0,0.1);border-top:1px solid rgba(0,0,0,0.1); background:#fff; vertical-align:top} .table thead{} td .options{cursor: pointer;} .no-left-border tr td:last-child, .no-left-border tr th:last-child {border-right:none!important;} .valign-middle td{vertical-align:middle;} .td-vailgn-top{vertical-align:top!important;} #widget .table-container{margin:0 0px 0 0;} .vertical-align-top td{vertical-align:top;} .vertical-align-middle td{vertical-align:middle;} .vertical-align-bottom td{vertical-align:bottom;} .table .darker-td, .table .darker-row td{background:#f9f9f9;} .darker-row.uppercase td,thead .uppercase td,thead .uppercase th,.uppercase th{text-transform:uppercase; font-size:90%; font-family:'Roboto Bold', sans-serif} .table tbody tr:hover > td{background:rgba(0,0,0,0.01); color:#2d2d2d;} .uppercase td{text-transform: uppercase;} .table tbody tr:hover .sub-table-container{background:none!important;} .vertical-align-middle{vertical-align:middle!important;} .cell-input{ background:none; border:none; width:auto; font:inherit; display:block; width:100%;border:1px solid rgba(0,0,0,0); cursor:pointer} .cell-input:focus{border:1px solid rgba(0,0,0,.1); background:#fff; color:#2d2d2d!important; cursor:auto} .table thead th,.table thead td,.thead{background-color:#8d8d8d!important;color:#fff; font-weight:bold; text-align:left} .cell-row{} .table tfoot th,.table tfoot td,.table .tfoot td{background-color:#4d4d4d!important;color:#fff; font-weight:bold; text-align:left; vertical-align:middle} .lined-table{width:100%;} .lined-table th,.lined-table td{ padding:3px 0px;border-bottom:1px solid rgba(0,0,0,0.1); background:#fff; } .lined-table th{font-weight:normal; color:#aaa; text-align:left} .inside-label label, .lined-table label{font-family: 'Roboto Light';} .table-stat{border-radius:30px; border:1px solid rgba(0,0,0,0.1); padding:2px 6px; background:rgba(0,0,0,0.05); font-family:'Roboto Bold', sans-serif} .table-stat.uppercase{text-transform:uppercase; font-size:90%} .table-tag{border-radius:15px;padding:2px 4px; background:rgba(0,0,0,0.05); font-weight:bold; text-transform:uppercase; font-size:90%; text-align:center; line-height:normal} .tag-status{padding:4px 8px; background:rgba(0,0,0,0.3); color:#fff; text-transform:uppercase; text-align:center; border-radius:30px; font-size:85%; letter-spacing:1.5px; font-weight:bold; font-size: 10px;} .small-status{padding:3px 7.5px 3px; background:rgba(0,0,0,0.3); color:#fff; text-transform:uppercase; text-align:center; border-radius:30px; font-size:85%; letter-spacing:1px; font-weight:bold} .tag-status.small{ padding:2px 8px;color:#fff; text-transform:uppercase; text-align:center; border-radius:30px; letter-spacing:1px; font-weight:bold; font-size: 10px; } .table-stat-progress{height:8px; width:100%; border-radius:5px; min-width:48px; position:relative; background:rgba(0,0,0,0.1)} .table-stat-bar{height:8px; width:0%; border-radius:5px; background:#0eaccc; position:absolute; min-width:10%!important} .lined-table tr:hover > td{background:rgba(0,0,0,0.01);} .td-no-border-top td{border-top:none!important;} .last-row-border-bottom-none tr:last-child td{border-bottom:none!important;} .row-table{width:100%;} .row-table th{color:#000; background:rgba(0,0,0,0.03);} .row-table th,.row-table td{ padding:10px 10px;border-bottom:1px solid rgba(0,0,0,0.1); text-align:left;} .row-table td{ padding:10px 10px;} .row-header th, .row-header td { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-family: 'Roboto Bold'; color: #808080; font-weight: normal; } .row-table.td-border td{ border-right:1px solid rgba(0,0,0,0.05); } .row-table td.padding-right-none{ border-right: none!important; } .no-lr-borders th{border-right:none!important; border-left:none!important;} .td-icon{padding-right:0;} .row-table tfoot th,.row-table tfoot td,.row-table .tfoot td{background-color:#4d4d4d!important;color:#fff; font-weight:bold; text-align:left; vertical-align:middle} .table-right-border td,.table-right-border th{border-right:1px solid rgba(0,0,0,0.05);} .table-right-border tr td:last-child{border-right:none!important;} .table-right-border tr th:last-child{border-right:none!important;} .row-table tr:hover > td{background:rgba(0,0,0,0.01);} .row-table .darker-row td{background:#f9f9f9;} table.row-table > tr:last-child td, table.lined-table > tr:last-child td, table.border > tr:last-child td, table.border tbody:last-child tr:last-child td{border-bottom:none!important;} table.radius{ border-radius: 5px!important; } table.border td, table.border td{padding:12px} .row-table.border td:first-of-type{padding-left:20px!important} .row-table.border td:last-of-type{padding-right:20px!important} .red-stat{background:#C0392B!important; color:#fff; border:none!important;} .green-stat{background:#16A085!important; color:#fff;} .yellow-stat{background:#F39C12!important; color:#fff; border:none!important;} .wysiwig-editor{clear: left; background-color:white; padding:0px; margin:0; display:block; width: 100%; box-shadow:0 0 3px #efefef inset; font:13px/21px Georgia, Times New Roman, Times, serif;} #ui-datepicker-div{display:none;} .time-track-bar{background:#efefef; border:1px solid #ccc; height:20px; width:100%; display:block; box-shadow:0 0 3px #ccc inset} .time-track-left{ height:20px; display:block; position:relative} .bg-bar{background:#6C3; box-shadow:0 0 3px #6C3 inset;} .red-bar{background:#C33; box-shadow:0 0 3px #993300 inset;} .cell-padding-10 td, .cell-padding-10 th{padding:10px;} .cell-padding-tb-10 td, .cell-padding-tb-10 th{padding:10px 0;} .cell-padding-tb-15 td, .cell-padding-tb-15 th{padding:15px 0;} .cell-no-borders td{border: none!important} .cell-highlight-none td, .cell-highlight-none th, .cell-highlight-none tr:hover td, .cell-highlight-none tr:hover th .cell-no-highlight td, .cell-no-highlight th, .cell-no-highlight tr:hover td, .cell-no-highlight tr:hover th {background:none!important} /*/////////////////////////////////////////////////////////////////////////////////////////// // TIP /////////////////////////////////////////////////////////////////////////////////////////*/ .vtip,.help-info{cursor:help} p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 13px; background-color:#fff; border:3px solid #2d2d2d; z-index: 9999 ; max-width:400px; -moz-box-shadow:2px 2px 3px #2d2d2d;} p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px } .vtip-title{color:#3C3; font-weight:bold; display:block; margin:0 0 3px 0; font:12px Arial, Helvetica, sans-serif; font-weight:bold} #vtip strong{display:block; width:80px; margin:0 3px 0 0} #vtip .label{display:inline-block; width:50px; margin:0 3px 0 0;} #vtip span{display:block; width:160px; text-align:left} .not-relative{position:static;} .search-box fieldset{margin:0 0 0 0;} .clear{display:block; height:0; clear:both;} .fixed-menu-position{position:fixed;} .category-menu{width:300px;} .category-menu ul, .category-menu ul{list-style:none;} .category-menu ul li{} .category-menu ul li a{border-bottom:1px solid rgba(0,0,0,0.1); display:block; padding:10px; color:#666} .category-menu ul li:first-child > a{border-top:none!important;} .folder-open > a, .sub-sub-folder-open > a, .sub-selected, .li-selected > a{ background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #4d4d4d 0%, #2d2d2d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ background: linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ border-top:1px solid #gradient!important; border-bottom:1px solid #gradient!important; color:#fff!important } tools{display:block; margin:-10px 10px 0 0; font-size:10px; opacity:0; float:right} comment:hover tools{opacity:1;} checklist-items span:hover tools{opacity:1; margin:5px 10px 0 0!important;} .marginRight400{width:70%; min-width:300px; margin:10px 0 20px 40px;} checklist-add input{width:300px;} .agenda{width:auto; margin:0 0px 30px 30px; } .agenda-header{background:#2d2d2d; padding:10px;} .agenda-title{color:#fff; font-size:14px; letter-spacing:-1px} .agenda-media{height:180px; overflow:hidden;} .agenda-media img{width:100%; height:auto; min-width:320px} .agenda-subtext{display:block; color:#ccc; font-size:10px} .agenda-details{padding:10px; background:#abca65; color:#fff; font-size:11px;} .agenda-value{float:right; display:block;} .agenda-label{display:block;} .column-33{min-width:320px; width:33%;float:left} .column-66{min-width:320px; width:67%;float:left} flow-progress{display:block; width:auto; margin:10px 0; color:#666} flow-progress-border{display:block; border:1px solid #efefef; height:31px; background:#ccc} flow-progress-bar{background:#09F; padding:0px; display:block; float:left; color:#fff;} flow-progress-bar-number{padding:5px; display:block} .update-status{background:#efefef url(../../media/update.png) 25px 5px no-repeat; padding:5px 5px 5px 45px} .update-checklist{background:#efefef url(../../media/checklist.png) 25px 5px no-repeat; padding:5px 5px 5px 45px} .update-comment{background:#efefef url(../../media/comment.png) 25px 5px no-repeat; padding:5px 5px 5px 45px} checklist-items{display:block;} checklist-items span{display:block; color:#333; margin:0 0 5px 0px; cursor:pointer; padding:5px 5px 5px 30px} checklist-items span:hover{} checklist-add{display:block; padding:10px;background:#efefef;} checklist-add:hover{} .green-bar{background:#8bdd4b;} .lime-bar{background:#c3e815;} .pink-bar{background:#e8159b;} .red-bar{background:#e8154c;} /* ACITIVITY WIDGET */ .activity h5{font-size:100%;} .activity{padding:20px; background:#fff; min-height:30px; margin:0 0 20px 0} .activity a{color:#2d2d2d;} .activity-time{display:block; font-style:italic; color:#CCCCCC; float:right; text-align:right} .activity-poster{width:30px; height:30px; background:#000; float:left} .ativity-details{margin:0 0 0 0px;} .activity-stats{margin:10px 0 0 0; text-align:right; padding:5px; background:#efefef;} .activity-stats span{} .activity-loves{background:#efefef url(../../../assets/media/love.png) left center no-repeat; cursor:pointer} .activity-comments{background:#efefef url(../../../assets/media/comment.png) left center no-repeat;} .activity-details p{margin:0 100px 0 0;} .activity-lesson{background:#efefef url(../../../assets/media/lesson.png) 5px 7px no-repeat!important; cursor:pointer} .activity-course{background:#efefef url(../../../assets/media/courses.png) 5px 7px no-repeat!important; cursor:pointer} .activity-course-close{background:#efefef url(../../../assets/media/courses-close.png) 5px 7px no-repeat!important; cursor:pointer} .activity-course-voucher{background:#efefef url(../../../assets/media/gift.png) 5px 7px no-repeat!important;} .activity-tools{float:left; padding:5px; margin:10px 0 0 0} .activity-comment-tools{ clear: both;font-size: 10px;text-align: right;} .sub-activity{display:block; margin:0px 0px 1px; background:#efefef; padding:3px 3px 8px 24px;} .sub-activity img{opacity:0.5;} .sub-activity:hover img{opacity:1;} .sub-activity-update{background:#efefef url(../../../assets/media/update.png) 3px 3px no-repeat;} .sub-activity-liked{background:#efefef url(../../../assets/media/love.png) 3px 3px no-repeat;} .sub-activity-comment{background:#efefef url(../../../assets/media/comment.png) 3px 3px no-repeat;} .sub-activity-homework{background:#efefef url(../../../assets/media/lesson.png) 3px 3px no-repeat;} .activity-event-day{background:#efefef url(../../../assets/media/clock.png) top left no-repeat;} .weekday-select{width:100%;} .weekday-select td{text-align:center;width:30px; text-transform:uppercase} .small-buttons{ height:auto; text-transform:uppercase; font-weight:bold; font-size:9px; top:10px; right:10px; position:absolute;} .small-buttons a:hover{background:#2d2d2d; display:block; float:left; color:#2d2d2d; cursor:pointer; text-decoration:none!important} .small-buttons a{padding:0px 3px; float:left;background:#a6d24a; cursor:pointer; text-decoration:none;color:#fff!important; margin-right:1px;} .small-buttons .extra-padding{padding:0px 10px;} /* AUTO NAME*/ #widget fieldset, .textboxlist { max-width:960px} .textboxlist-bits {max-width:640px} .textboxlist-bit { list-style-type: none; display: block; padding: 0!important; margin: 0 5px 0px 0; cursor: default; } .textboxlist-bit-editable-input { border: 0; padding: 0px 0; *padding-bottom: 0; height: 16px; background:transparent} .textboxlist-bit-editable-input:focus { outline: 0; } .textboxlist-bit-box { position: relative; line-height: 14px; padding:5px; border: 1px solid #ddd; background: #efefef; cursor: default; } .textboxlist-bit-box-deletable { padding-right: 15px; } .textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 6px; display: block; width: 7px; height: 7px; font-size: 1px; } .textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; } .textboxlist-bit-box-hover { background: #efefef; border: 1px solid #ddd; } .textboxlist-bit-box-focus { border-color: #ddd; background: #ddd; color: #fff; } .textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; } .textboxlist-autocomplete { position: absolute; z-index:9999; width:518px; } .textboxlist-autocomplete-placeholder, .textboxlist-autocomplete-results { opacity: 0.9; filter: alpha(opacity=90); background: #eee; -webkit-box-shadow: 0 3px 3px #ccc; -moz-box-shadow: 0 3px 3px #ccc; box-shadow: 0 3px 3px #ccc; border: 1px solid #999; border-top: none; display: none; margin:5px 0 0 0px;width:554px } .textboxlist-autocomplete-placeholder { padding: 5px 7px; width:518px } .textboxlist-autocomplete-results { margin: 5px 0 0 0; padding: 3px; width:518px} .textboxlist-autocomplete-result { margin: 0 0 0; padding: 5px; list-style-type: none; background: #efefef;clear:left; height: 21px} .textboxlist-autocomplete-result img{float:left; margin:0 3px 3px 0} .textboxlist-autocomplete-result-focus { background: #ddd; } .textboxlist-autocomplete-highlight { background: #EEF0C4; font-weight: bold; } /* Setting widget width example */ .textboxlist { } .textboxlist-bit-box{overflow:hidden; margin:0 5px 5px 0; height:11px;} .textboxlist-bits:after{clear:both; content:""; display:block;} .textboxlist-bit-editable-input{display:block; border-bottom:1px dotted #999; width:120px!important;clear:both; padding:5px} .search-box .textboxlist-bit,.search-box .textboxlist-bit-editable-input{display:block; max-width:none; float:left} .textboxlist-bits .textboxlist-bit-box{padding:5px!important; background:#f9f9f9; border-radius:7px; height:auto} .textboxlist-autocomplete-results,.textboxlist-autocomplete-placeholder{width:98%!important; background:#fff; border-radius:0 0 7px 7px; opacity:1; border-color:#ccc; box-shadow:0 0 3px rgba(0,0,0,0.1) inset } .textboxlist-autocomplete-results{width:99.2%!important;} .textboxlist-autocomplete{width:100%!important; margin:0 0 0 -11px;} .textboxlist-autocomplete-result{background:#fff;} .textboxlist-autocomplete-highlight{background:#ccc;} .textboxlist-autocomplete-result-focus{background:#ddd; border-radius:7px;} /* Preloader for autocomplete */ .textboxlist-loading { background: url('assets/media/spinner.gif') no-repeat 380px center; } /* Autocomplete results styling */ .form_friends .textboxlist-autocomplete-result { overflow: hidden; zoom: 1; } .form_friends .textboxlist-autocomplete-result img { float: left; padding-right: 10px; } .search-filter .textboxlist-bit-box{width:auto!important;} .search-filter .textboxlist{ margin-bottom:0!important;} .sortable{list-style:none; margin:0 0 30px 5px;} .drop-here{display:block; width:116px; height:86px; background:#000; float:left; margin:5px 5px 0 0; border:5px solid #000} .name-slide{display:none;} .poloroid{width:200px; height:200px; float:left; margin:5px 5px 0 0; border:5px solid #000; background:#000; position:relative} .poloroid img{margin:0 auto; display:block;} /*.landscape{margin:34px auto!important;}*/ .poloroid-tools{padding:0px 0; background:url(https://www.codp-network.com/hub/assets/media/black-70.png); width:auto; position:relative; display:block;color:#fff; line-height:normal; font-size:9px; opacity:0; text-align:center; position:absolute; bottom:0; left:0; right:0} .poloroid:hover .poloroid-tools{opacity:1} .poloroid-tools a{color:#fff;} .poloroid-tools a>img{display:inline-block; margin:0 10px 0} .save-controls{padding:0 0 0 120px;} .focus-action{background:-moz-linear-gradient(top, #efefef 0%,#ccc 100%);background:-webkit-linear-gradient(top, #efefef 0%,#ccc 100%);padding:5px 10px; display:inline-block; text-transform:capitalize; color:#2d2d2d; font-weight:bold;border:1px solid #b9b9b9; margin:0 5px 0 0;} .focus-action:hover{ background:-moz-linear-gradient(top, #afe731 0%,#2d2d2d 100%);background:-webkit-linear-gradient(top, #afe731 0%,#2d2d2d 100%); border:1px solid #86b41d;color:#fff; text-decoration:none; } .exif-edit-tools{opacity:0;} .assignment-header{text-transform:uppercase; z-index:4; font-size:1.5em; color:#666;font-weight:300;} .code-menu{display:none} .folder-open .code-menu{display:block} .code-menu{ padding:0 0 0 0;} .code-menu li a{padding:5px 20px} .code-menu li a:hover{} .code-menu li .sub-selected{} .class-submenu{display:none;} .sub-sub-folder-open .class-submenu{display:block!important;} .bg-dark-menu{background:#666; color:#fff!important; border-bottom:none!important; border-top:1px solid #333!important} .class-submenu li{} .class-submenu li a{padding:5px 5px 5px 40px; } .class-submenu li a:hover{} .pupils-menu{display:none;} .pupils-menu li img{width:16px; height:auto;} .li-selected .pupils-menu{display:block!important;} .stats-border{border-top:5px solid #59595b; border-bottom:3px dotted #59595b; padding:20px 0;} .super-stat-number{font:750% Arial, Helvetica, sans-serif; color:#a8d04d; font-weight:600; line-height:75%; float:left; display:block; margin:0 10px 0 0} .super-sub-stat{display:block; font:270%/80% Arial, Helvetica, sans-serif; color:#59595b;font-weight:900; line-height:100%; text-transform:uppercase;margin:0 10px 0 0; letter-spacing:-2px} .color-green{color:#a8d04d;} .super-smaller-stat{font-size:140%; line-height:100%; display:block} .border-stat-end{border-bottom:3px dotted #59595b; padding:20px 0;} .side-bar-stat{list-style:none; margin:10px 0 0} .side-bar-stat li{background:#efefef; margin:0 0 5px; padding:3px; color:#fff; font-weight:bold; text-align:right; font:10px Verdana, Geneva, sans-serif} .nice-list{list-style:none; margin:0px 0 0} .nice-list li{margin:0 0 5px; padding:10px; background:#f1f1f1; font-weight:bold; text-align:left; font:12px Verdana, Geneva, sans-serif;} .stats-collection .float-left{width:48%} @media (max-width: 1124px) { .stats-collection{font-size:9px;} } @media (max-width: 800px) { .stats-collection{font-size:13px;} .stats-collection .float-left{width:100%} } .feed-object{padding:20px 0px; margin:0 0px; border-bottom:1px dashed #ccc;} .Sun{border-bottom:3px solid #CCC;} .feed-object h1{font:14px Arial, Helvetica, sans-serif;} .feed-object h1 a{color:#2d2d2d; text-decoration:none;} .feed-object h1 a:hover{color:#2d2d2d;} .feed-object-date{ width:40px; height:auto; float:left; border:1px solid #2d2d2d; margin:0 10px 0; background:#fff;} .feed-object-date-month{color:#fff; display:block; text-align:center; text-transform:uppercase; font-size:11px; padding:2px 0 0; background:#2d2d2d} .feed-object-date-day{font:24px Georgia, "Times New Roman", Times, serif; color:#2d2d2d; display:block; text-align:center;} .feed-object-content{margin:0 0 0 62px;} #Today .feed-object-date{border:1px solid #090;} #Today .feed-object-date-month{background:#090} .feed-content{background:#fff; margin:0 0 0 60px; border-left:none} .feed-content-inner{padding:30px 30px 30px 40px;} .feed-content-title{color:gray; padding:0 0 5px; margin:0 0 5px; display:block} .feed-item{padding:10px 0 0px; margin:0 0 10px; border-top:1px solid #E9E9E9;} .feed-person{background:#fff; margin:0 0px 5px 0; float:right; width:auto; height:30px; overflow:hidden} .feed-list-items{list-style:none; margin:10px 0 0 0px;} .feed-list-items li{padding:5px 10px; background:#efefef;border-bottom:1px solid #fff;} .feed-item-action{background:#fff; width:100%; padding:5px; border:1px solid #E9E9E9} .feed-item-action textarea{height:0px; border:none; font:11px Verdana, Geneva, sans-serif;resize: none; width:90%} .feed-upload-tools{float:right;} .feed-item-comment{border-top:none; border-bottom:1px solid #E9E9E9;padding:10px; margin:0 0 0px;} .feed-item-comment:hover{background:#f2fae1;} .feed-item-comment em{color:#999;} .feed-item-comment p{margin:0 0 0 37px;} .remove-feed-post{display:none;} .feed-item-comment:hover .remove-feed-post{display:block;} .feed-tasks{float:right; opacity:0;} .feed-list-items li:hover .feed-tasks{ opacity:1;} .feed-tasks span{display:inline-block; margin:0 5px 0 0} .clear-both{display:none;} .calender-container{width:auto; margin:10px auto} .the-month-container,.calender-stage{margin-top:0; margin-left:0;} .the-year{} .the-year h2{ margin:0px 0 10px;} .the-month{width:auto; padding:0; float:left;} .the-month h2{margin:0 0 10px; color:#2d2d2d;} .the-month h2 span{cursor:pointer} .the-weekday{float:left; width:14.27%; margin:0px 0px 0 0;background:#2d2d2d url(assets/media/day-headings.png) top right; color:#efefef} .the-day{float:left; width:14.27%;height:240px;background:#fff url(assets/media/day-border.png) bottom right; font:9px Verdana, Geneva, sans-serif;} .the-day-scroll{float:left; width:14.27%;height:240px; font:9px Verdana, Geneva, sans-serif;} .padding-10{padding:10px;} .the-day:hover{background:#f4ffe0;} .the-day-blank{background:#ccc;} .holiday{display:block; background:url(assets/media/sun.png) top left no-repeat; padding:0 0 2px 20px; } .lesson{display:block; background:#2d2d2d; border-radius:3px; overflow:hidden; display:block; margin:0 0 2px 0; padding:3px} .cancelled{text-decoration:line-through;} .archived{filter: grayscale(1);} .event-day{display:block; background:url(assets/media/clock.png) top left no-repeat; padding:0 0 4px 20px;} .margin-right-10{margin-right:10px;} .the-day a{color:#2d2d2d;} .the-day a:hover{text-decoration:underline} .event-day a,.lesson a{color:#fff;} .event-day a:hover,.lesson a:hover{text-decoration:underline} .day-higlight{background:#CF9;} .white-text{color:#fff;} .ad-upload{display:table-cell; vertical-align:middle; color:#fff; font-size:18px;} .login-logo{background:url(images/logo-trans.png) center bottom no-repeat; height:168px; width:340px; margin:0 auto 15px} /*/////////////////////////////////////////////////////////////// // GRADIENT EFFECTS ///////////////////////////////////////////////////////////////*/ .gradient-button{ background: #fbfbfb; /* Old browsers */ background: -moz-linear-gradient(top, #fff 0%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fff 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fff 0%,#f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fff 0%,#f6f6f6 100%); /* IE10+ */ background: linear-gradient(top, #fff 0%,#f6f6f6 100%); /* IE10+ */ border:1px solid #dadada; color:#2d2d2d!important; } .button-selected,.gradient-button:hover{ background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #4d4d4d 0%, #2d2d2d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ background: linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ border:1px solid #000; color:#fff!important; } .gradient-button:hover a,.button-selected a{color:#fff!important;} .vertical-box{ /* Firefox */ display:-moz-box; -moz-box-orient:vertical; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack: center; -webkit-box-align: center; /* W3C */ display:box; box-orient:vertical; } .colour-gradient{ background: #2d2d2d; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #4d4d4d 0%, #2d2d2d 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4d4d4d), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #4d4d4d 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #4d4d4d 0%,#2d2d2d 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #4d4d4d 0%,#2d2d2d 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e061', endColorstr='#2d2d2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .colour-gradient-button{ background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #4d4d4d 0%, #2d2d2d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d4d4d 0%2d2d2d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ background: linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ border:1px solid #000; color:#fff; } .colour-gradient-button:hover{ background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #4d4d4d 0%, #2d2d2d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d4d4d 0%2d2d2d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ background: linear-gradient(top, #4d4d4d 0%,#2d2d2d 100%); /* IE10+ */ } #backToTopOverlay{position:fixed; bottom:7px; right:7px;} #backToTop{padding:5px; width:24px; height:24px; margin:0 auto 0px auto; display:none; opacity:0.7; cursor:pointer; border-radius:50%; background:rgba(0,0,0,0.1) url(images/back-top-top.svg) center center no-repeat; background-size:80%;} #backToTop:hover{opacity:1} .pace .pace-progress { background: #000; position: fixed; z-index: 2000; top: 0px; left: 0; height: 3px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; box-shadow:0 0 3px rgba(0,0,0,0.3) } .pace-inactive { display: none; } .product-count,.cat-count{float: right; font-weight: bold; padding: 5px; border-radius: 15px; font-size: 80%; background: rgba(0,0,0,0.05); box-shadow: 0 0 2px rgba(0,0,0,0.3) inset; width: 15px; text-align: center; line-height: normal;} .greyscale{ -webkit-filter: grayscale(100%); } .half-greyscale { -webkit-filter: grayscale(100%); } .img-greyscale{-webkit-filter: grayscale(50%);} .img-greyscale:hover{-webkit-filter: grayscale(0%);} .hidden-grey{-webkit-filter: grayscale(90%);} .hidden-grey:hover{-webkit-filter: grayscale(50%);} .list-table{border-left:1px solid rgba(0,0,0,0.1); border-top:1px solid rgba(0,0,0,0.1);} .list-cell{border-bottom:1px solid rgba(0,0,0,0.1) ;border-right:1px solid rgba(0,0,0,0.1)} .circle{border-radius:50%; overflow:hidden} .slide-info h2{font-weight:900; margin-left: 0px;padding: 8px 0 0; font-size: 160%; line-height: 1em;} .slide-info p{padding: 4px 0 0!important; clear: left; } .slide-info p strong{font-family: 'Roboto Bold'} .slide-info-icon{width:28px!important; height:28px!important; float:left; margin:5px 8px 0 0} .colour-forms .slide-info-icon{width:28px!important; height:28px!important; border-bottom: none!important;} .slide-info.no-icon h2{margin-left: 0} .slide-info-container{padding-bottom: 15px;} #widget .slide-info-container, #side-widget .slide-info-container{padding:30px;margin: -30px -30px 30px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .no-heading .slide-info-container{margin-top: -30px;padding-top: 45px;} #widget.colour-forms .slide-info-container, #side-widget.colour-forms .slide-info-container{ border-bottom: none!important; } .no-heading.colour-forms .slide-info-container{margin-top:-30px!important; padding-top:45px!important} .fieldset-top-inputs{text-align:right; padding:0 10px} .fieldset-top-inputs span{width:90px; display:inline-block; text-align:center; text-transform:uppercase; font-weight:bold} .double-inline-input label{margin:0; padding:0; width:50%} .double-inline-input .inputs{display:inline-block; margin:0; padding:0; width:90px; text-align:center!important} .inline-input .inputs{display:inline-block; margin:0; padding:0; width:90px; text-align:right!important} .cloud-file-feature{ border:1px solid rgba(0,0,0,.15);background:#fff url(images/dark-blank-image.svg) center center no-repeat; background-size:70% auto;overflow:hidden; margin:5px 0; position:relative; border-radius:5px} .cloud-file-feature.invalid{background-color:rgba(255,0,0,0.05); border:1px solid rgba(255,0,0,0.1)} .cloud-file-feature.media-landscape{background-size:auto 70%;} .cloud-file-feature-inner{background:#fff;} .cloud-file-feature-inner img{background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)} .cloud-file-feature-placeholder{position:absolute; bottom:7.5px; left:0; right:0; text-align:center; color:#2f2f2f; opacity:0; z-index:0} .cloud-file-feature-container:hover .cloud-file-feature-placeholder{opacity:1!important; z-index:1} .cloudfile-file-actions{position:absolute; top:8px; right:8px} .inside-label .cloudfile-file-actions{ top:5px;} .fieldset-table{border:1px solid rgba(0,0,0,0.1);padding:10px; margin:0 0 10px; position:relative; background:rgba(255,255,255,1); max-height:320px; overflow:auto; border-radius:5px} .fieldset-table td,.fieldset-table th{padding:10px 7.5px;} .fieldset-table.adjust-full-height{max-height:none;} fieldset.inside-label{border:none; box-shadow:none; padding:0; margin:0; border-radius: 0!important;} fieldset.inside-label label{display:inline-block; width:50%} fieldset.inside-label .inputs{display:inline-block; width:49%!important} fieldset.inside-label select.inputs{margin:0 0 0 -4px!important} fieldset.inside-label textarea.inputs{width:100%!important; display:block;} .layout-30-70 fieldset.inside-label label{display:inline-block; width:70%} .layout-30-70 fieldset.inside-label .inputs{display:inline-block; width:29%!important; text-align: right;} .layout-30-70 fieldset.inside-label select.inputs{text-align-last: right; margin: 0!important;} .layout-30-70 fieldset.inside-label option{direction: rtl; } .fieldset-table fieldset.inside-label, .fieldset-table fieldset.inline-input{padding:7.5px;border:none; border-bottom:1px solid rgba(0,0,0,0.05); box-shadow:none; margin:0} .fieldset-table .fieldset-title{padding:15px 7.5px 10px; text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,.1); margin-bottom:0; margin-top:7px} /* SHORT INLINE LABLES */ .fieldset-table.short-labels fieldset.inside-label label{display:inline-block; width:29%!important} .fieldset-table.short-labels fieldset.inside-label .inputs{display:inline-block; width:69%!important} .circle-icon img{border-radius:50%;} .slide-side-bar{top:0; overflow: auto;} .slide-side-bar fieldset, .control-panel fieldset{border-radius:3px; border:1px solid #dadada; padding:7px 7px; box-shadow:none} .slide-side-bar .inputs-checkbox-group{float: right;} #login fieldset{ border:1px solid #dadada; padding:13px 15px; box-shadow:none} #login #password{} .screen-message .icon{width:80px; height:80px; margin:0px auto 15px; background-size:100%} .screen-message-h1{ line-height:100%; font-size:28px; color:#1f1f1f;-webkit-font-smoothing: antialiased;padding:5px 0; margin:15px 0 0; font-weight:100} .screen-message-text{font-size:16px; font-weight:300; line-height:150%;} .screen-message-text p{margin-bottom:30px; padding:0 0 0 0!important; font-family:'Roboto Light', sans-serif} .screen-message-text ol{text-align:left; padding-left:30px} .screen-message-text ol li{margin:0 0 15px;} .screen-message-text .fa{font-size: 16px;} .widget-message{margin:0 auto;max-width:480px; padding:30px 0} .widget-message .icon{margin:0 auto 15px;width:64px; height:64px; max-width: 64px; max-height: 64px;} .widget-message p{padding-top:5px!important;} .fieldset-list{list-style:none;} .fieldset-list{list-style:none; background:#fff} .fieldset-list li{padding:10px 0 15px!important; margin:0;border-bottom:1px solid rgba(0,0,0,0.1);} .fieldset-list .list-group-title{background:#f9f9f9; padding:7.5px!important; font-weight:bold; margin:0} .fieldset-list .icon{width:29px; height:29px; margin-right:7.5px;margin-top: 4.5px;} .fieldset-list img{width:29px; height:29px; border-radius:5px!important} ul.fieldset-list li h2{font-size: 13px} .fieldset-list .action-option{margin:10px 0 0 0;} #ui-datepicker-div{ z-index:9013!important; box-shadow: var(--elevation-medium); border-radius:4px; } .ui-datepicker-header{ border-radius: 5px; } .ui-datepicker .ui-datepicker-title, .ui-datepicker .ui-datepicker-title select{ font-family: var(--body-bold-font); text-transform: uppercase; border: none; background: none; } .ui-datepicker .ui-datepicker-title select option{ color: #000!important; font-family: var(--body-font); } .ui-datepicker th { font-weight: normal; font-family: var(--body-bold-font); text-transform: uppercase; padding:.7em 0!important; opacity: 0.4; } .ui-datepicker td a{ border-radius:4px; background: rgb(0, 0, 0,.03); } .ui-datepicker td span{text-align: center!important; border:none!important; border-radius: 4px;} table.mceLayout{width:100%!important;} .tinymce-mode{margin:6px 7px;} .hidden-element{display:none;} .dialog-content-inner h1{font-weight:100;} /*========================================= // COMMENTS /========================================*/ .text-button{border-radius:30px; padding:2px 10px; background:rgba(0,0,0,.05); display:block; color:rgba(0,0,0,.5); line-height:normal; font-size:90%; } .comment-thumb{background:url(images/blank-profile.svg) center center no-repeat; background-size:100%;} .comment-thumb img{border-radius:50%!important; display:block; width:100%; margin-top:4px;} .comments .comment{-webkit-transform:scale(0); transform:scale(0); opacity:0; height:0;} .comments .comment.show{-webkit-transform:scale(1); transform:scale(1); opacity:1; height:auto} .comment .text-button{visibility:hidden; margin-bottom:5px; margin-top:-5px;} .comment:hover .text-button{visibility:visible;} .comment-seperator{position:relative; margin:30px 0;} .comment-seperator .line{height:1px; background:rgba(0,0,0,0.1);} .grouped-comments{border-bottom:1px solid rgba(0,0,0,0.05)!important;} .comment-group-title{background:#fff; padding:1px 15px; color:#ddd; position:absolute; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); margin-top:-12px; border-radius:45px; border:1px solid rgba(0,0,0,0.1)} /*========================================= // TAB VIEWS /========================================*/ .tabbed-list nav{text-align:center; margin:15px; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px,120px)); justify-content: center;} .tabbed-list nav a{display:block; padding:5px 7.5px; border-top:1px solid #848484; border-bottom:1px solid #848484;text-transform:uppercase; font-size:11px;border-left:1px solid #848484; line-height:normal; color:#848484;} .tabbed-list nav a:first-of-type{ border-radius:3px 0 0 3px;} .tabbed-list nav a:last-of-type{border-right:1px solid #848484; border-radius:0px 3px 3px 0;} .tabbed-list nav a.show{background:#848484; color:#fff;} .tabbed-view{position:relative; overflow:hidden;} .tab-view{position:absolute;-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); width:100%;} .tab-view.show{-webkit-transform: translate3d(0%, 0, 0)!important; transform: translate3d(0%, 0, 0)!important;} .tab-view.hide{-webkit-transform: translate3d(-100%, 0, 0)!important; transform: translate3d(-100%, 0, 0)!important;} /*Light Theme*/ .tabbed-list.light-theme nav a{border-color:#fff; color:#fff;} .tabbed-list.light-theme nav a.show{background:#fff; color:#2d2d2d;} /*========================================== // UI STATS /=========================================*/ .small-bar{border-radius:30px; height:10px; background:rgba(0,0,0,0.05); position:relative;} .small-bar-percent{border-radius:30px; height:10px; width:0%; background:rgba(0,0,0,0.3); position:absolute} /*========================================== // ANIMATION /=========================================*/ .animation{ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); -webkit-transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1); -moz-transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1); -o-transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1); } .animate-from-left{ -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); opacity:0} .animate-from-right{ -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); opacity:0} .animate-from-bottom{ -webkit-transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0); opacity:0} .animate-popIn{ -webkit-transform: scale(0); transform:scale(0); opacity:1} .animate-fadeIn{opacity:0;} .animate-from-bottom.run, .animate-from-right.run, .animate-from-left.run{ -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); opacity:1} .animate-popIn.run{ -webkit-animation:popIn 0.5s; -webkit-animation-fill-mode: forwards; } .animate-fadeIn.run{opacity:1;} @-webkit-keyframes popIn { 0% { -webkit-transform: scale(0.9) translateZ(0); opacity:0.5; } 50% { -webkit-transform: scaleX(1.05) scaleY(1.05) translateZ(0); opacity:1; } 100% { -webkit-transform: scale(1) translateZ(0); opacity:1; } } /*========================================= // CSS OVERRIDES /========================================*/ /* BLUR */ .blur{opacity:1;} .bg-blur{background:url(images/bg-blur.png);} .bg-backdrop-100{backdrop-filter: blur(100px);} .clear{clear:both; display:block; height:0;} .clear-right{clear:right; display:block; height:0;} /* BORDERS */ .no-right-border{border-right:none!important;} .border-top-none, .no-top-border{border-top:none!important;} .no-left-border{border-left:none!important;} .no-bottom-border,.border-bottom-none{border-bottom:none!important;} .border-top{border-top: 1px solid rgb(0, 0, 0,.1);} #install-log-completed{border:none!important;} .no-padding{padding:0!important;} .no-padding .widget-form{padding:0!important;} .white-bg{background:#fff;} .stackgraph-labels{list-style:none; width:100%; display:block} .stackgraph-labels li{display:inline-block; text-align:center; color:#fff;} .stackgraph .stack{display:block; float:left;} .stackgraph .stack-inner{ background:rgba(0,0,0,0.1); border-radius:3px; margin:0 3.5px; position:relative} .stackgraph .stack-percent{background:#fff; position:absolute; left:0; bottom:0; right:0; border-radius:3px;} .media-tile{width:120px; height:120px; float:left; margin:0 15px 15px 0; min-width:120px; border-radius:5px} .media-file{position:relative; overflow:hidden; height:120px} .media-file img{position:absolute; width:100%; height:auto; display:block;} .padding{padding:15px;} .td-h1{padding:15px 5px; color:#2d2d2d;} .white-text{color:#fff;} .td-white{background:#fff!important;} .table-header{padding:25px 15px; background:#fff; border-bottom:1px solid rgba(0,0,0,0.1)} .sidebar-border{box-shadow:-1px -1px 0px rgba(0,0,0,.1) inset; border:none} .grid-tile{border-right:1px solid rgba(0,0,0,0.1);position:relative; overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1); max-width:280px; min-width:220px} .grid-tile .turn-action{opacity:0;} .grid-tile:hover .turn-action{opacity:1;} .grid-title .option-screen li{padding:7.5px 0!important;} .grid-tile h3{font-size:160%; margin:0 0 7.5px; font-weight:600} .grid-tile-slide{text-align:center} .grid-tile-details{padding:60px 15px} .grid-tile-icon{width:150px; height:150px; margin:0 auto 30px} .grid-tile-options{transform:translate3d(100%,0,0); -webkit-transform:translate3d(100%,0,0); position:absolute; top:0; width:100%; height:100%;} .grid-tile-options .option-screen{padding:60px 0;} .grid-tile-options .option-screen ul{border-top:1px solid rgba(0,0,0,.1)} .grid-tile .tile-option{background:none;} .grid-tile-options.show{transform:translate3d(0%,0,0); -webkit-transform:translate3d(0%,0,0);} .grid-tile-details.hide{transform:translate3d(-100%,0,0); -webkit-transform:translate3d(-100%,0,0);} .grid-tile-status-text{border-top:1px solid rgba(0,0,0,.1); padding:15px; bottom:0; right:0; left:0; position:absolute; text-align:left; opacity:0} .grid-tile:hover .grid-tile-status-text{opacity:1;} .grid-tile-status{border-radius:50%; width:21px; height:21px; position:absolute; bottom:15px; right:15px} .grid-tile-status.prepare{background:#F1C40F} .grid-tile-thumbnail.blank{ background:url('images/dark-blank-image.svg') center center no-repeat; background-size:100%;} .grid-tile-thumbnail img{width:100%; height:auto; display:block; border-radius:15px;} .option-screen .grid-tile-thumbnail img{border-radius:7.5px} .rotate180{transform:rotate(-180deg); -webkit-transform:rotate(-180deg);} .breakout{transform:scale(2,2));-webkit-transform:scale(2,2); opacity:0} /*========================================================================== // CALENDAR /=========================================================================*/ .annual-calender{position:relative; height:100%; top:42px;background:#fbfbfb;} #annual-calender-overlay{position:absolute; background:rgba(0,0,0,.05); top:0; right:0; bottom:0; left:0; z-index:1; opacity:0;visibility:hidden} #annual-calender-overlay.show{opacity:1; visibility:visible; -webkit-transform:translate3d(0,0%,0); transform:translate3d(0,0%,0); } .month-block{position:absolute; width:25%; height:33.333%;} .month-block-inner{position:absolute; width:99.9%; height:99.9%; border-right:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1);} .month-data-label.overflow{text-overflow:ellipsis; white-space:nowrap; overflow:hidden!important} .month-data-container{overflow-x:hidden!important;} .monthly-calendar{position:relative; height:100%; top:42px;background:#fbfbfb;} .day-calendar{position:relative; height:100%;background:#fbfbfb;} .day-block{height:20%; float:left;} .day-block.blank{background:rgba(0,0,0,0.03);} .day-block-inner{border-right:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); position:relative} .day-block-number{position:absolute; bottom:7.5px; left:7.5px; font-weight:bold; opacity:.5} .month-data-container{position:absolute; top:43px; bottom:0; right:0; left:0; overflow:auto;padding:1px 0 0 1px;} .day-data-container{position:absolute; top:0; bottom:36px; right:0; left:0; overflow:auto;padding:1px 0 0 1px; overflow-x:hidden!important} .month-data-table{} .month-data-table td{ background:#fff; cursor:pointer} .calendar-year-control{width:66px; position:relative; margin:0 auto;text-transform:uppercase; padding:10px;} .calendar-year-next{position:absolute; top:12px; right:0; width:16px; height:16px; opacity:0} .calendar-year-prev{position:absolute; top:12px; left:0; width:16px; height:16px; opacity:0} .calendar-year-control:hover .calendar-year-button{opacity:1;} .month-label{padding:11px 15px; border-bottom:1px solid rgba(0,0,0,.05); display:block; text-transform:uppercase; text-align:center; font-size:11px; font-weight:900; position:relative; background:#f9f9f9; margin:1px 0 0 1px} .weekday-header{border-bottom:1px solid rgba(0,0,0,.1);display:block; text-transform:uppercase; text-align:center; font-size:11px; font-weight:900; position:relative; background:#fff; margin:0 0 0 0} .weekday-label{border-right:1px solid rgba(0,0,0,.1);padding:11px 15px 12px; display:block;} .month-add{width:21px; height:21px; position:absolute; top:11px; right:8px; opacity:0;} .month-label:hover .month-add{opacity:1;} .day-add{width:21px; height:21px; position:absolute; bottom:7.5px; right:7.5px; opacity:0; cursor:pointer!important; z-index:1} .day-block-inner:hover .day-add, .day-block-inner:hover .day-block-number{opacity:1;} .pan-table.pan-active th{cursor:ew-resize} .update-required{position:absolute; top:calc(50% - 41px);left:50%; transform:translate3d(-50%,-50%,0); max-width:640px; text-align:center; font-size:200%} .update-required h1{font-size:48px; margin-bottom:15px; line-height: 1em;} .update-required p{font-size:21px; line-height:150%; font-family:'Roboto Light', sans-serif; height:144px} .update-required .app-tile{ width: 480px; padding: 60px 46px; } .file-uploader tr .icon-delete-small{opacity:0;} .file-uploader tr:hover .icon-delete-small{opacity:1;} /*========================================================= // AUTO INSTALL /========================================================*/ .install-pulse-container{ height:5px; border-radius:2.5px; background:rgba(0,0,0,0.1); position:absolute; bottom:0; left:0; right:0; } .install-pulse-progress{ height:5px; border-radius:2.5px; width:25%; margin:0 auto; animation:pulse-progress 1.5s linear infinite; box-shadow:0 0 30px var(--primary-color); } #update-current{position:absolute; bottom:30px; left: 0; right: 0;} @keyframes pulse-progress{ 0%{ transform:translate3d(-400%,0,0); } 100%{ transform:translate3d(400%,0,0); } } /*========================================================= // DROP DOWNS, CHECKS AND POP OVERS /========================================================*/ .check-select, .auto-suggest, .dropdown-select{position:absolute; visibility:hidden; background:#fff; border:1px solid rgba(0,0,0,0.1); border-top:none; padding:10px; border-radius:0 0 5px 5px; opacity:0; transform:translate3d(0,-10%,0);z-index:9012!important;} .popover-select{position:fixed; background:rgba(0,0,0,.1); top:0; left:0; right:0; bottom:0; opacity:0; visibility:hidden;z-index:9012!important;} #popover-select-result{border-radius:15px; background:#fff; padding:15px; left:50%; top:50%; transform:translate(-50%,-50%); position:absolute; box-shadow:} .check-select.show, .auto-suggest.show, .popover-select.show, .dropdown-select.show{opacity:1; transform:translate3d(0,0,0); visibility:visible} .dropdown-select-item,.auto-suggest-item{padding:5px; border-bottom:1px solid rgba(0,0,0,0.1);} .auto-suggest-item.selected{background:rgba(0,0,0,0.02)} .td-ellipsis, .ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .ellipsis{display:inline-block;} /*========================================================= // PANELS /========================================================*/ .panels{overflow:hidden; position:relative;} .panel{position:absolute;width:100%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); z-index:0; visibility:hidden} .panel.show{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; z-index:1;visibility:visible} .panel.hide{-webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity:0; z-index:0} /*========================================================= // SECTION MENU /========================================================*/ .section-menu .view-section{display:none;} .section-menu .select-section{opacity:0;} .section-menu tr:hover td{cursor:pointer;} .section-menu tr:hover .select-section{opacity:.3} .menu-section.selected .select-section{display:none;} .menu-section.selected .view-section{display:block!important;} /*========================================================= // EDITOR CONTAINER /========================================================*/ .editor-main-container{ display:grid; grid-template-columns:212px 1fr; } .editor-main-menu-container{ min-height:calc(100vh - 123px); padding:12px; position: relative; } /*========================================================= // FONT ICON MENU /========================================================*/ .icon-menu li a{padding:15px 15px 15px 40px; display:block; position:relative;color: #2d2d2d;} .icon-menu li a:hover{background:#fbfbfb; text-decoration:none; color:#000} .icon-menu > li > a.selected{background:#6f6f6f; color:#fff; } .icon-menu .seperator{ background:rgba(0,0,0,.01); padding: 10px 15px; border-top: 1px solid rgb(0, 0, 0,.1); border-bottom: 1px solid rgb(0, 0, 0,.1); display:block; position:relative;color: #2d2d2d; } .icon-menu.compact .seperator{ border: none; padding: 8px 0; background: none; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.8; } .icon-menu .seperator i{top:9px!important} .icon-menu{ list-style: none; } .icon-menu.compact li a{padding:12px 16px 12px 36px; margin:0 0 4px} .icon-menu.compact .fa { position: absolute; top: 15px; left: 14px; width: 21px; height: 27px; text-align: center; font-size: 15px; } .icon-menu.compact a{ border-radius: var(--radius-medium); } .icon-menu li a ~ ul{display:none; list-style-type: none;} .icon-menu li a.selected ~ ul{display:block;} .icon-menu li ul li a.selected{background:rgba(0, 0, 0, 0.03); color:#000} /*========================================================= // RANDOM /========================================================*/ .menu-section.selected td{background:#fff!important; font-weight:bold;} .taxonomy-table-with-icon .cloud-file-feature{margin:0 0; border-radius:50%; border:none; box-shadow:none; background-size:100%} .taxonomy-table-with-icon .cloud-file-feature .cell-button{display:none!important;} .colour-pick{width:24px; height:24px; margin:0; display:block; cursor:pointer; float:left; transition: transform .15s,box-shadow .15s} .colour-pick:hover{box-shadow: 0 0 0 1px rgba(127,127,127,.3) inset; transform: scale(.8)} .grey-heading{padding:7.5px 7.5px; background:rgba(0,0,0,.01); border-bottom:1px solid rgba(0,0,0,0.1); text-transform:uppercase; font-family:'Roboto Bold', sans-serif} .red-text{color:#C0392B!important} .show-options-on-hover .options{opacity:0;} .show-options-on-hover:hover .options{opacity:1;} /*========================================================= // TABLET /========================================================*/ .tablet, .tablet body{ overflow-x:hidden; height:100%; } @media only screen and (max-width: 1024px) { html, body { overflow-x:hidden; height:100%; } .hide-on-tablet{display:none;} .container .pan-table{min-width:1280px} .container .stats-wrapper{} .container{overflow:auto;} user-tools{transform:translate3d(100%,0,0)} #stats-menu{min-width:300px!important; max-width:300px!important} #stats-main{margin-left:301px!important;} .dashboard-details{left:301px; top:157px} #checklist-sections{} #checklist-main{} .stat-block{min-width:0!important; padding:0 7.5px!important;} .stats-container{max-width:960px!important} .dot-tablet-menu{display:block;} user-tools.show{ background:#fff; right:41px;transform:translate3d(0%,0,0)} user-tools.show ul{display:block;} .stat-inner{padding:15px 10px} } @media only screen and (max-width: 800px) { #stats-menu{display:none} #stats-main{margin-left:0!important;} .dashboard-details{left:0; top:157px} .container {} .container .table{min-width:1024px} } /*========================================================= // ABOUT INFO /========================================================*/ #brainstem{position:fixed; background:#fff; top:0px; right:0px; padding:30px; width:360px; bottom:0; bottom:0; color:#666; z-index:10000} #brainstem h1{color:#000; margin:0 0 7px; font-weight:300} #brainstem h2{f color:#fff; margin:0px 0 7px; font-weight:bold; text-transform:uppercase} #brainstem h3{ color:#666; margin:0px 0 10px; padding:0 0 10px; border-bottom:1px solid rgba(0,0,0,.1)} #brainstem p{color:#666;} #brainstem strong{color:#000;} #brainstem-info{display:none;} #brainstem a{ color: #2d2d2d; } .machine{position:relative; max-width:580px; margin:0 auto; width:100%} .cog{position:absolute; background-size:100%; background-position:center center; background-repeat:no-repeat; animation:cog-turn 6s infinite linear;} .cog.reverse{ animation:cog-turn 6s infinite linear reverse;} .cog-1{background-image:url(images/machine/cog-1.png); width:24%; height:24%; top:15%} .cog-2{background-image:url(images/machine/cog-2.png); width:21.5%; height:21.5%; top:32.4%; left:28%} .cog-3{background-image:url(images/machine/cog-3.png); width:12%; height:12%; top:40%; left:12%} .cog-4{background-image:url(images/machine/cog-4.png); width:16.9%; height:16.9%; top:59.4%; left:67.5%} .cog-5{background-image:url(images/machine/cog-5.png); width:19.5%; height:19.5%; top:40.4%; left:60%} .cog-6{background-image:url(images/machine/cog-6.png); width:11.5%; height:11.5%; top:65.8%; left:55.4%} .cog-7{background-image:url(images/machine/cog-7.png); width:10.5%; height:10.5%; top:55.8%; left:49%} .cog-8{background-image:url(images/machine/cog-8.png); width:7.5%; height:7.5%; top:54.8%; left:41%} .cog-9{background-image:url(images/machine/cog-9.png); width:9%; height:9%; top:46%; left:50%} .cog-10{background-image:url(images/machine/cog-10.png); width:24%; height:24%; top:54%; left:5%; } .cog-11{background-image:url(images/machine/cog-11.png); width:6.5%; height:6.5%; top:59.4%; left:61.4%} .cog-12{background-image:url(images/machine/cog-8.png); width:7.5%; height:7.5%; top:74.8%; left:31%;} @-webkit-keyframes cog-turn { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } } @keyframes cog-turn { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .shake-no{animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both;} @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /*========================================================= // NEW /========================================================*/ .app-content{padding:15px;} .ui-button{ display: block; padding: 10px 15px; font-family: 'Roboto Bold', sans-serif; color: #fff; background: var(--primary-color); border-radius: 45px; margin: 10px 0; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; text-decoration: none!important; max-width: 240px; } .ui-button:hover{ box-shadow: 0 0 15px rgb(0, 0, 0,.03); } .ui-button.small{display:inline-block; padding:7px 15px; font-family:'Roboto Bold'; color:#fff; background:#2d2d2d; border-radius:5px; margin:5px; text-transform:uppercase} .h3-heading{ font-size:160%; margin-bottom:7.5px; font-weight:700} .media-transition{transition: 0.3s opacity linear; transform: translate3d(0,0,0);} .icon-placeholder{background:url('images/dark-blank-image.svg') center center no-repeat; background-size:100%;} /*========================================================= // SMALL TOOLBAR /========================================================*/ .small-toolbar-container{ right:0; left:0; z-index:2; border-bottom:1px solid rgba(0,0,0,.1); height:43px} .small-toolbar-inner{padding: 7.5px 4px 7.5px 0;} .small-toolbar-title{text-transform: uppercase;padding:3.5px 7.5px} .medium-toolbar-container *{font-size: 13px;} .medium-toolbar-container{ padding:15px; background:#fbfbfb; height:19px; border-bottom:1px solid rgba(0,0,0,.1); position:relative; text-transform: uppercase; } .medium-toolbar-container i{cursor: pointer;} .medium-toolbar-container.grid-layout{ display:grid; grid-template-columns: 1fr 240px 178px; column-gap: 15px; } .medium-toolbar-container .toolbar-search-box{position: relative; background:#fff; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; margin-top:-4px;} .medium-toolbar-container .toolbar-search-box i{position: absolute; right:8px; top:5px; font-size: 14px; color: #666;} .medium-toolbar-container .toolbar-search-box input{border: none; background:none; margin: 0 15px;} .medium-toolbar-container .column .toolbar-search-box{ padding: 4px; } .timeline-user-icon img{border-radius: 10%} .medium-toolbar-icon img{width: 100%; height: auto; border-radius: 5px;} .icon-option-menu li{ float: left; position: relative; text-align: center; width: 32px; text-align: center; height: 20px; display: flex; align-items: center; justify-content: center; } .icon-option-menu li i{color: #646464; opacity: 1; margin:0 auto; cursor: pointer; font-size: 19px;} .icon-option-menu li.separator{margin:0 5px; height: 21px; position: relative; width:0px} .icon-option-menu li.separator:before{content: ' '; position: absolute; width:1px; top:3px; bottom: 3px; background:rgba(0, 0, 0, 0.1);} /*======================================================= // BUTTONS /======================================================*/ .flat-button{ font-family: 'Roboto Bold'; text-transform: uppercase; display: block; padding: 7.5px; } /*======================================================= // CONTEXT DIALOG VIEW /======================================================*/ .context-dialog-header{padding:10px 15px;} .context-dialog{ background:#fff; position: absolute; z-index: 1; visibility: hidden; transform: translate3d(0,-10%,0); opacity: 0; box-shadow: 0 0 3px rgb(0, 0, 0,.3)} .context-dialog.show{transform: translate3d(0,0,0); opacity: 1; visibility: visible} /*======================================================= // CUSTOM TOOLBAR MENU /======================================================*/ .menu-control{position:static;} .menu-control .sub-menu{position:absolute; background:#fff!important; border:1px solid rgba(0,0,0,.1); border-top:none; display:none; box-shadow:2px 2px 0px rgba(0,0,0,.1)} .sub-menu .menu-control{display:block;} .display-menu{display:block!important;} .menu-split{border-bottom:1px solid rgba(0,0,0,.1);} /*======================================================= // MANAGABLE ACCOUNT LIST /======================================================*/ #managable-account-list{position:fixed; top:0; right:0px; bottom:0; background:#fff; width:320px; box-shadow:0 0 3px rgba(0,0,0,.2); visibility:hidden; opacity:0; z-index:4} #managable-account-list.show{ visibility:visible; opacity:1} #manage-accounts-taskbar .taskbar-icon{ height: 28px !important; width: 28px !important; margin: 6px; border-radius: 15%; } .account-list{padding:16px} .account-list.link{color:#2d2d2d!important} .account-list.link:hover{background:#fcfcfc; cursor:pointer} .account-list img{border-radius:5px;} .list-icon-grid{ display:grid; grid-template-columns:29px 1fr 29px; column-gap:10px; padding:15px; align-items:center; line-height:1.2em; } .list-icon-grid.selected, .list-icon-grid:hover{ background: rgb(0, 0, 0,.03); cursor: pointer; } .list-icon-grid .thumbnail{ width:29px; height:29px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,0.1) } .list-icon-grid img{ width:29px; height:29px; border-radius:50%; display:block; } .list-icon-grid i{ justify-self: center; font-size: 17px; } /*=========================================================================== // SIDE DIALOGS /==========================================================================*/ .side-info-dialog{background:#1f1f1f; position:fixed; top:0; right:0; bottom:0; width:40%; max-width:420px; left:auto; display: flex; align-items: center} .side-info-dialog .content{padding:30px; margin:0 auto; color:#fff} .side-info-dialog .icon{margin:0 auto 30px} .side-info-dialog .icon .fa{font-size:64px; display:inline} .side-info-dialog h1{margin-bottom:15px;} .side-info-dialog p{font-size:15px; line-height:1.5em} /*=========================================================================== // SPLASH SCREEN /==========================================================================*/ .center-self { left: 50%; top: 50%; transform: translate(-50%,-50%); position: absolute; } #splash-screen{position:fixed; top:0; left:0; right:0; bottom:0; z-index:2; background:#fff; height:100vh;transform:translate3d(0, 0%, 0) scale(1.2); opacity: 0;z-index:0!important} #splash-screen.show{ transform: translate3d(0%, 0, 0) scale(1); opacity: 1;z-index:10003!important} .beta-label{ text-transform: uppercase; font-size: 9px; color: #fff; background: #000; display: inline-block; padding: 4px 5px; border-radius: 3px; margin: 0 0 0 5px; vertical-align: super; line-height: 1em; font-family: 'Roboto Medium'; } /*=========================================================================== // INPUT LABELS /==========================================================================*/ fieldset.left-label span{ display: block; margin-right: 5px; border-right: 1px solid rgba(0,0,0,0.1); position: absolute; top: 0; left: 0; padding: 10px; background: rgba(0,0,0,0.01); } fieldset.left-label span .fa{ position:static; display:inline-block; font-size:14px; margin-right:2px } fieldset.left-label .inputs{margin-left:79px; width:calc(100% - 79px)} /*=========================================================================== // SIGN IN FORM /==========================================================================*/ #signin-icon{margin:0 auto 15px;} .password-meter{position:relative; text-align: center} .password-meter span{display: inline-block; height:5px; border-radius: 5px; width: 21%; margin: 1%; background:rgba(0,0,0,0.1)} #password-check-indicator, #password-confirm-indicator{ display: none;} #password-check-indicator.show, #password-confirm-indicator.show{display: block;} .password-meter.score-1 span:nth-of-type(1){ background:#E74C3C; } .password-meter p{color:#E74C3C;} .password-meter.score-2 span:nth-of-type(1), .password-meter.score-2 span:nth-of-type(2){ background:#E67E22; } .password-meter.score-2 p{color:#E67E22;} .password-meter.score-3 span:nth-of-type(1), .password-meter.score-3 span:nth-of-type(2), .password-meter.score-3 span:nth-of-type(3){ background:#F1C40F; } .password-meter.score-3 p{color:#F1C40F;} .password-meter.score-4 span{ background:#1ABC9C; } .password-meter.score-4 p{color:#1ABC9C;} .slide-info-container.center{ margin-bottom:30px; text-align:center; } .stand-alone{margin:0 auto; width:420px;background:#fff; padding:0; border:1px solid rgba(0,0,0,.1)} .widget-form.stand-alone{transition-property:opacity; opacity:0; z-index:0} .widget-form.stand-alone.show{opacity:1; z-index: 1;} .widget-form.stand-alone .inner{padding:45px 45px 15px} .widget-form.stand-alone .button-container{border-top:1px solid rgba(0,0,0,0.1); background:#fcfcfc; position:relative} @media screen and (max-width:641px){ .widget-form.stand-alone{width:100%; min-height: 90vh; position: absolute; top:0; left: 0; transform: none; padding:5vh 0} .widget-form.stand-alone .inner{padding:5vw;} .widget-form.stand-alone .button-container{position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;} } .ui-left-menu{width:50%;min-width:200px; max-width:200px; position:absolute; left:0; box-shadow:rgba(0, 0, 0, 0.3) 0px 3px 3px; z-index: 2; background:#fff;} .sub-toolbar { position: absolute; right: 197px; top: 13px; padding: 0 10px; display: none; } .tox-edit-area{overflow: hidden!important;} .tox-silver-sink{z-index: 10000!important;} .tox-tinymce{border-radius: 5px!important;} /*=========================================================================== // ICONS /==========================================================================*/ .app-icon-thumbnail{ border-radius:25%; width:100%; height:auto; border:1px solid rgba(0,0,0,0.1); display:block } .app-icon{ border-radius: 25%; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); overflow: hidden; } .app-icon .app-icon-thumbnail{border: none;} .account-icon{background: url(images/dark-blank-image.svg) center center no-repeat; background-size: 75%!important; overflow: hidden;} .account-icon{border-radius:25%!important; display:block; border:1px solid rgba(0,0,0,0.1);} .account-icon img{border-radius: 25%; width: 100%; height: auto; display: block;} .square-icon{border-radius:25%; width:100%; height:auto; border:1px solid rgba(0,0,0,0.1); display:block} /*=========================================================================== // LISTING GRID /==========================================================================*/ .listing-grid{ display: grid; grid-template-columns: repeat(auto-fit,minmax(264px,1fr)) } .listing-grid .item{ position: relative; border-right:1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 60px 15px; } .listing-grid .item.blank{ border-right:none; border-bottom: none; } .item-details h3{ font-size: 120%; margin: 0 0 0px; font-weight: normal!important; width: 100%; line-height: normal; } .item-icon{ width: 150px; height: 150px; margin: 0 auto 30px; border-radius: 30px; } .item-options{position: absolute; top: 15px; right: 15px; font-size: 23px; opacity: 0;} .item-icon img{border-radius: 30px; width: 100%; height: auto;} .item-state{ padding:15px; border-top: 1px solid rgba(0, 0, 0, 0); position: absolute; bottom: 0; left: 0; right: 0; } .item-state-text{opacity: 0;} .listing-grid .item:hover .item-state{border-top: 1px solid rgba(0, 0, 0, 0.1);} .listing-grid .item:hover .item-state-text, .listing-grid .item:hover .item-options {opacity: 1;} .item-state i{position: absolute; top: 15px; right: 15px; font-size: 17px;} .item-state.top{ border:none; display: grid; grid-template-columns: 25px 1fr; top:0; bottom: auto; } .listing-grid .item:hover .item-state.top{ border: none!important; } .item-state.top i{position: static!important;} .font-icon-tile.selected .fa{color: #fff;} .font-icon-tile:hover .fa{animation: 1s float-hover-center infinite; color: #fff;} @keyframes float-hover-center{ 0%{ transform:translate3d(-50%,-50%,0) } 50%{ transform:translate3d(-50%,-60%,0) } 100%{ transform:translate3d(-50%,-50%,0) } } @keyframes float-hover{ 0%{ transform:translate3d(0,0%,0) } 50%{ transform:translate3d(0,-10%,0) } 100%{ transform:translate3d(0,0%,0) } } /*=================================================== // MENU SELECTOR /===================================================*/ .menu-selector{z-index: 10; background:rgba(0,0,0,.3); position: fixed; top:0; left:0; right:0; bottom:0; visibility: hidden; z-index: -1;} .menu-selector.show{visibility: visible; z-index: 1000;} .menu-selector p{height: 15px; padding: 30px 0 0; font-size: 15px; line-height: 1.5em} .menu-selector h1{padding: 0 0 30px; text-align: center; text-transform: uppercase; font-size: 160%} .menu-selector-container{ position:absolute; width: 980px; height: auto; left:50%; top: 50%; transform: translate3d(-50%,-50%,0) scale(.8); border-radius: var(--radius); background: #fff; box-shadow:0 10px 30px rgba(0, 0, 0, 0.2); padding: 44px 28px; opacity: 0; } .menu-selector.show .menu-selector-container{ transform: translate3d(-50%,-50%,0) scale(1); opacity: 1; } .menu-selector ul,#wireframe-selection ul{ margin: 0 auto; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); grid-gap: 16px; justify-items: center; } .menu-selector ul li, #wireframe-selection ul li{ width: 102px; height: 50px; padding: 16px; border-radius: 5px; break-inside: avoid; position: relative; } .menu-selector ul li .wireframe-tile, .menu-selector ul li .menu-selector-tile, #wireframe-selection ul li .wireframe-tile{text-align: center; margin: 0!important; width: 100%!important; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); font-size: 13px; line-break: 1em} .menu-selector ul li .fa, #wireframe-selection ul li .fa{font-size: 21px; margin-bottom: 5px; color: #2babe2} .menu-selector ul li.disabled, #wireframe-selection ul li.disabled{filter: grayscale(1); opacity: 0.7; cursor: not-allowed!important} .menu-selector ul li:hover, #wireframe-selection ul li:hover, #wireframe-selection ul li.selected { background: #2babe2; cursor: pointer; } .menu-selector ul li:hover .wireframe-tile *, .menu-selector ul li:hover .menu-selector-tile *, #wireframe-selection ul li:hover .wireframe-tile *, #wireframe-selection ul li.selected .wireframe-tile *{ color: #fff!important; } .menu-selector ul li:hover .fa, #wireframe-selection ul li:hover .fa, #wireframe-selection ul li.selected .fa{animation: 1s float-hover infinite} @keyframes float-hover{ 0%{ transform:translate3d(0,0%,0) } 50%{ transform:translate3d(0,-10%,0) } 100%{ transform:translate3d(0,0%,0) } } /*=================================================== // Colors /===================================================*/ .bg-warning{background: var(--yellow)!important;} .warning-color{color: var(--yellow)!important;} tr:hover .warning-color, .warning-color:hover{color: #f39c12;} .bg-error{background: var(--red)!important;} .error-color{color: var(--red)!important;} tr:hover .error-color, .error-color:hover{color: #c0392b;} .bg-ok{background: var(--green)!important;} .ok-color{color: var(--green)!important;} tr:hover .ok-color, .ok-color:hover{color: #16a085} .bg-white{background:#fff} .bg-light-grey{background: #fefefe;} /*=================================================== // PREFORMATTED CODE /===================================================*/ .cli-terminal{ font: 14px/20px Roboto Mono,monospace; margin: 0 0 15px; padding: 15px; position: relative; background:#f1f3f4; border-radius:5px; color:#97999c } .terminal-success{color:green} .terminal-warning{color:orange} .terminal-error{color:red} .terminal::before { color: #bdbdbd; content: "$"; padding-right: 0; } pre.terminal,pre.syntax{ font: 14px/20px Roboto Mono,monospace; margin: 0 0 15px; overflow-x: auto; padding: 15px; position: relative; background:#f1f3f4; border-radius:5px } pre.terminal,pre.syntax{ margin: 0; } pre.code{ font: 14px/20px Roboto Mono,monospace; margin: 0 0 15px; overflow-x: auto; padding: 15px; position: relative; background:#f1f3f4; border-radius:5px } code{ padding: .2em .4em; margin: 0; font-size: 85%; background-color: rgba(27,31,35,.05); border-radius: 3px; font-family: monospace;; } .dot-flashing { position: relative; width: 2px; height: 2px; background-color: #f1f3f4; color: #f1f3f4; animation: dotFlashing 0.5s infinite; display: inline-block; margin-left: 4px; } .dot-flashing::before, .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0; } .dot-flashing::before { left: 7px; width: 2px; height: 2px; background-color: #f1f3f4; color: #f1f3f4; animation: dotFlashing 0.5s infinite; animation-delay: 0.1s; } .dot-flashing::after { left: 14px; width: 2px; height: 2px; background-color: #f1f3f4; color: #f1f3f4; animation: dotFlashing 0.5s infinite; animation-delay: 0.2s; } @keyframes dotFlashing { 0% { background-color: #f1f3f4; } 100%{ background-color:#97999c; } } .link{cursor: pointer;} .iti__flag-container{ z-index: 2; } .ui-border{border:1px solid rgba(0,0,0,0.1);} .ui-padding{padding:20px} .ui-padding-lr{padding:0 20px} .ui-padding-tb{padding:20px 0} .ui-padding-large{padding:30px} .ui-radius{border-radius:10px} .ui-list-item{ padding: 12px 0; border-top: 1px solid rgb(0, 0, 0,.1); font-size: 14px; } .ui-list .ui-list-item:first-of-type{border-top:none} .ui-icon-btn:hover, .ui-list-btn:hover{cursor:pointer; text-decoration: none;} .ui-icon-btn:hover, .ui-list-btn:hover, .ui-list-btn:hover *{color:var(--primary-color);} .ui-icon-preview img{width:100%; display:block} .ui-cursor-pointer{cursor:pointer} .ui-icon-preview.ui-cursor-pointer:hover{ border:1px solid var(--primary-color); } .ui-elevation-high{box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);}