@font-face {  
    font-family: "dearJoe 5 CASUAL"; /* font name for the feature use*/
    src: url("../font/DJ5CTRIAL.ttf"); /*non-IE*/  
}
@font-face {  
    font-family: "Century Gothic"; /* font name for the feature use*/
    src: url("../font/GOTHIC.ttf") format("truetype"); /*non-IE*/  
}
@font-face {  
    font-family: "Century Gothic"; /* font name for the feature use*/
    src: url("../font/GOTHICB.ttf") format("truetype"); /*non-IE*/  
    font-weight: bold;
}
@font-face {  
    font-family: "Century Gothic"; /* font name for the feature use*/
    src: url("../font/GOTHICBI.ttf") format("truetype"); /*non-IE*/
    font-style: italic, oblique;
    font-weight: bold;  
}
@font-face {  
    font-family: "Century Gothic"; /* font name for the feature use*/
    src: url("../font/GOTHICI.ttf") format("truetype"); /*non-IE*/
    font-style: italic, oblique;   
}
@font-face {  
    font-family: "Calibre"; /* font name for the feature use*/
    src: url("../font/Calibre-Light.otf") format("truetype"); /*non-IE*/
    font-weight: normal;
    font-style: normal;
}
@font-face {  
    font-family: "Calibre"; /* font name for the feature use*/
    src: url("../font/Calibre-Semibold.otf") format("truetype"); /*non-IE*/
    font-weight: bold;
    font-style: normal;
}
@font-face {  
    font-family: "Open Sans";
    font-style: regular;
    font-weight: normal;
    src: url("../font/OpenSans/OpenSans-Regular.ttf") format("truetype"); /*non-IE*/
}
@font-face {  
    font-family: "Alegreya";
    font-style: italic;
    font-weight: bold;
    src: url("../font/Alegreya/ALEGREYA-BOLDITALIC.OTF") format("opentype"); /*non-IE*/
}
@font-face {  
    font-family: "Alegreya";
    font-style: italic;
    font-weight: normal;
    src: url("../font/Alegreya/ALEGREYA-ITALIC.OTF") format("opentype"); /*non-IE*/
}
@font-face {  
    font-family: "Abbeyline";
    font-style: normal;
    font-weight: normal;
    src: url("../font/Abbeyline.ttf") format("truetype"); /*non-IE*/
}
@font-face {  
    font-family: "Myriad Pro";
    font-style: normal;
    font-weight: normal;
    src: url("../font/Myriad/MyriadPro-Regular.otf") format("opentype"); /*non-IE*/
}
.dropdown-backdrop{
    pointer-events:none;
}
body {
    padding-top: 50px;
    font-family: sans-serif;
}
.kennykee-footer {
    position: relative;
    float: right;
    clear: both;
    padding-right: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #585858;
    font-size: 11px;
}
.align-center{
    text-align: center;
}
.align-right{
    text-align: right;
}
.navbar-top-width{
    border: 0px;
}
.white-text{
    color: white !important;
}
.label-green{
    background-color: #468847;
    font-size: 13px;
    font-family: sans-serif;
}
.clear-both{
    clear:both;
}
@media screen and (max-width: 768px) {
    .menu-profile{
        float: left !important;
    }
}
.logout-link{
    color: cornflowerblue;
}
.logout-link:hover{
    color: aquamarine;
    text-decoration: none;
}
.header-link{
    color: #C8E5BC;
}
.header-link:hover, .header-link:active, .header-link:visited{
    color: #d9ffb3;
    text-decoration: none;
}
.main .page-header {
    margin-top: 15px;
}
.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}
/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}
/* Main content */
@media (min-width: 768px) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    } 
}
/* Placeholder dashboard ideas */
.placeholders {
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 {
    margin-bottom: 0;
}
.placeholder {
    margin-bottom: 20px;
}
.placeholder img {
    display: inline-block;
    border-radius: 50%;
}
.hero-unit {
    padding: 60px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    color: inherit;
    background-color: #eee;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.hero-unit h1 {
    margin-bottom: 0;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
    color: inherit;
    font-weight: bold;
}
.no-margin-top div, .no-margin-top{
    margin-top: 0px !important;
}
.no-margin-bottom div, .no-margin-bottom{
    margin-bottom: 0px !important;
}
.showing-box{
    font-weight: bold;
    font-family: -webkit-body;
}
.table-blue{
    font-family: sans-serif;
}
.table-blue th{
    background-color: #3a87ad;  
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    font-family: sans-serif;
    font-size: 16px;
}
.table-blue tr td input{
    margin-bottom: 0px;
}
.table-blue td:first-child, .table-blue th:first-child{
    text-align: center;
}
.table-blue tr:nth-child(even){
    background-color: #DFEFF0;
}
.alert-message-container{
    padding-left: 30px;
}
.alert-message-box{
    margin-top: 20px;
    margin-bottom: 0px;
}
.bs-callout {
    padding: 20px;
    margin: 10px 0px 15px 0px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #1b809e;
}
.bs-callout-minimal {
    padding-top: 5px;
    padding-bottom: 5px;   
}
.bs-callout h4{
    color: #1b809e;
}
.bs-callout-red{
    border-left-color: #ce4844;
}
.bs-callout-red h4{
    color: #ce4844;    
}
.button-height{
    min-height: 39px;
}
.green-text{
    color: #468847;
}
.blue-text{
    color: #337ab7;
}
.orange-text{
    color: #FFA500;
}
.red-text{
    color: #d43f3a;
}
.gray-text{
    color: #777;
}
.blue-background{
    background-color: #337ab7;
}
.vertical-top{
    vertical-align: top;
}
.vertical-middle{
    vertical-align: middle !important;
}
.table-2nd-right tr td:nth-child(2){
    text-align: right;
    font-weight: bold;
    vertical-align: middle;
}
.table-2nd-right tr td:nth-child(1){
    vertical-align: middle;
}
.font-14px{
    font-size: 14px;
}
.datepicker td{
    padding: 1px !important;
}
.record-delete{
    cursor: pointer;
}
.small-margin-top{
    margin-top: 5px;
}
.small-margin-bottom{
    margin-bottom: 10px !important;
}
.dropdown-margin-padding{
    margin-left:-15px; 
    clear:both; 
    padding-bottom: 10px;
}
.upload-inner{
    min-height: 450px;
}
.upload-box{
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.33);
    box-shadow: 0 0 50px rgba(0,0,0,0.33);
    padding: 4px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: dashed thin #585858;
    background-repeat: no-repeat;
    background-position:center;
    height: 375px;
}
.dropzone-box {
    border: 1px solid rgba(0,0,0,0.03);
    min-height: 300px !important;
    -webkit-border-radius: 15px !important;
    border-radius: 15px !important;
    background: rgba(0,0,0,0.03);
    padding: 23px;
}
.camera-watermark{
    position: absolute;
    font-size: 150px !important;
    z-index: 0;
    float: left;    
    color: #585858;
    opacity: 0.2;
    left: 43%;
    top: 35%;
}
.photo-header{
    padding: 6px 20px;
    font-size: 13px;
    font-weight: bold;
    background-color: #3a87ad;
    color: white;
    height: 42px;
    line-height: 30px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
}
.photo-header p{
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 200;
    line-height: 30px;
    margin: 0 0 10px;
}
.small-margin-right{
    margin-right: 5px;
}
.small-margin-left{
    margin-left: 5px;
}
.medium-margin-right{
    margin-right: 15px;
}
.fixed-110px{
    width: 110px;
}
.home-gallery-container{
    min-height: 300px;
    border: solid thin #ddd;   
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    position: relative;
}
.home-cell-container{
    position: absolute;
    top: 245px;
    left: 78px;
    width: 1777px;
    height: 759px;
    padding: 12.5px;
    text-align: center;
    box-sizing: content-box;
    display: table;
}
.cell-wrapper{
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}
.cell-unit{
}
.cell-unit-tool-box{
    position: absolute;
    border: solid 3px #1b809e;
    width: 100px;
    height: 50px;
    background-color: rgba(51,122,183,0.6);
    border-radius: 5px;
    box-sizing: border-box;
}
.unit-tool{
    color: white;
    text-align: center;
    width: 100%;
    display: table;
    cursor: pointer;
}
.unit-tool:hover{
    background-color: #5bc0de;   
}
.unit-tool div{
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}
.unit-tool-move{
    cursor: move;
}
.cell-highlight .cell-unit-highlight-placeholder{
    width: 100%;
    border: dashed 4px red;
    height: 100%;
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}
.cell-highlight-background .cell-unit-highlight-placeholder{
    background-color: rgba(255,0,0,0.2);
}
.pages-object .pages-item .tile-background-image{
    cursor: pointer;   
}
.pages-object .pages-item:hover{
    outline: solid thin blue;
}
.remove-link{
    border: solid thin #eea236;
    text-align: center;
    font-size: 20px;
    color: white;
    line-height: 40px;
    background-color: #f0ad4e;
    border-radius: 5px;
    cursor: pointer;
}
.popup-pages-item{
    
}
.pages-item{
    padding: 3px;
}
.pages-item .tile-background-image{
    cursor:move;
}
.pages-item:hover .tile-parent{
    box-shadow: 0 0 10px rgba(240, 173, 78, 1); 
    outline: 1px solid rgba(238, 162, 54, 1);
}
.pages-item-active{
    box-shadow: 0 0 5px rgba(240, 173, 78, 1); 
    border: 1px solid rgba(238, 162, 54, 1);
    border-radius: 5px;
}
.pages-thumbnail-parent{
    display: inline-block;
}
.page-highlight .pages-thumbnail .pages-thumbnail-image{
    border: dashed 3px red;
    background-size:contain;
}
.page-highlight-background .pages-thumbnail{
    box-shadow: 0 0 20px red;
    border: 2px solid red;
}
.pages-thumbnail-container{
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    font-size: 17px;
    line-height: 42px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    white-space: nowrap;
    border: solid 1px #3a87ad;
    border-radius: 0px;
    -webkit-transition: all 0.10s ease-in-out;
    -moz-transition: all 0.10s ease-in-out;
    -ms-transition: all 0.10s ease-in-out;
    -o-transition: all 0.10s ease-in-out;
    outline: none;
}
.pages-thumbnail-container .tile-background-image{
    border-radius: 0px;
}
.pages-triangle{
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 45px;
    border-top: 15px solid transparent;
    border-left: 30px solid rgba(58,135,173,0.9);
    border-bottom: 15px solid transparent;
}  
.pages-thumbnail{
    cursor: move;    
}
.pages-thumbnail-image{
    width: 183px;
    height: 113px;
    border-radius: 3px;
}
.pages-thumbnail:hover{
    box-shadow: 0 0 10px rgba(81, 203, 238, 1); 
    border: 1px solid rgba(81, 203, 238, 1);
}  
.pages-thumbnail-active .pages-active-border{
    display: block;
}
.pages-thumbnail-active .pages-thumbnail{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.pages-active-border{
    display: none;
    border: solid 1px #6767A8;
    background-color: #3a87ad;
    position: absolute;
    width: 185px;
    height: 22px;
    pointer-events: none;
    margin-top: -20px;
    font-size: 15px;
    color: white;
    font-weight: 600;
    text-align: center;
    line-height: 21px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 0 10px rgba(81, 203, 238, 1); 
}
.pages-reorder-button:hover + .pages-thumbnail{
    box-shadow: 0 0 10px rgba(81, 203, 238, 1); 
    border: 1px solid rgba(81, 203, 238, 1);
}
.pages-thumbnail-parent:hover .pages-reorder-button{
    display: block;
}
.pages-reorder-button{
    position: absolute;
    padding: 5px;
    background-color: rgba(58,135,173,1);
    border-radius: 3px;
    color: white;
    line-height: 20px;
    text-align: center;
    margin-top: 35px;
    margin-left: 75px;
    font-size: 28px;
    display: none;
    cursor: move;
}
.triangle-down {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-top: 30px solid rgba(58,135,173,0.9);
    position: absolute;
    margin-top: 118px;
    display: none;
} 
.page-content-container{
    border: solid thin #3a87ad;
    border-radius: 10px;
    clear: both;
    position: relative;
    margin-top: 10px;
    min-height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}
.page-not-found{
    display: none;
}
.element-data{
    border: none !important;
    outline: dashed 1px #337ab7;
    z-index: 10;
}
.element-data-preview{
    border: none !important;
}
.home-button, .return-button{
    width: 120px;
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    position: absolute;
    border: dashed 5px #337ab7;
    opacity: 0.8;
}
.forward-button{
    width: 54px;
    height: 83px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    position: absolute;
    border: dashed 5px #337ab7;
    opacity: 0.8;
}
.backward-button{
    width: 54px;
    height: 83px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    position: absolute;
    border: dashed 5px #337ab7;
    opacity: 0.8;
}
.element-image{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    position: absolute;
    left: 100px;
    top: 229px;
}
.element-video{
    position: absolute;
    left: 100px;
    top: 229px;
}
.element-video video{
    max-height: 100%;
    max-width: 100%;
}
.element-youtube{
    position: absolute;
    left: 100px;
    top: 229px;
}
.element-youtube iframe{
    height: 100%;
    width: 100%;
}
.element-text{
    width: 873px;
    height: 601px;
    position: absolute;
    left: 993px;
    top: 229px;
}
.element-text-content{
    height: 100%;
    width: 99%;
    background-color: transparent;
    overflow:overlay;
    overflow-x:hidden;
}
.element-text-content::-webkit-scrollbar-corner {
    background-color: white;
}
.element-text-content::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
}
.element-text-content::-webkit-scrollbar-thumb {
    border: 4px solid rgba(255,255,255,0);
    background-clip: content-box;
    background-color: #bfbfbf;
    border-radius: 10px;
}
.element-text-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background-color: white;
}
.element-option-box{
    position: absolute;
    margin-top: -41px;
    margin-left: -6px;
    min-width: 130px;
    z-index: 100;
    font-family: "open-sans";
    font-style: normal;
}
.ui-resizable-helper { 
    border: 2px dotted #00F; 
}
.element-move{
    cursor: move;
    position: absolute;
    top: -1px;
    left: -32px;
    z-index: 99;
    border: solid 1px #4cae4c;
    width: 30px;
    height: 30px;
    font-size: 16px;
    padding: 4px;
    background-color: #5cb85c;
    border-radius: 2px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}
.container-simple-element{
    position: absolute;
    width: 1200px;
    height: 350px;
    left: 380px;
    top: 288px;
    z-index: 0;
}
.container-simple-element .tile-content{
    text-align: center;
    width: 100%;
}
.container-simple-element .tile-content .tile-simple-element{
    width: 180px;
    display: inline-block;
    background-color: white;
    margin: 15px;
    padding: 10px 20px 10px 20px;
    position: relative;
    vertical-align: middle;
}
.container-simple-element .tile-content .frame-box{
    background-image: url(../images/Image-Frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top right;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}
.container-simple-element .tile-content .tile-simple-element .photo{
    display: inline-block;
}
.container-simple-element .btn-group{
    position: absolute;
    margin-top: -60px;
    min-width: 140px;
}
.container-simple-element .top-container-btn{
    margin-top: -90px;
}
.container-simple-element .scroll-left{
    position: absolute;
    width: 54px;
    height: 83px;
    top: 450px;
    left: 250px;
}
.container-simple-element .scroll-right{
    position: absolute;
    width: 54px;
    height: 83px;
    top: 450px;
    left: 1660px;
}
.container-game-element{
    position: absolute;
    left: 180px;
    top: 180px; 
    width: 1680px;
    height: 350px;
}
.score-font-box{
    font-family: Abbeyline, 'Open Sans', sans-serif;
    font-size: 40px;
    color: #4c4c4d;   
    left: 1235px;
    top: 27px;
    position: absolute;
    width: 585px;
    height: 120px;
    text-align: right;
    font-weight: bold;
}
.score-font-box img{
    width: 66px;
    height: 60px;
    margin-left: 7px;
}
.score-font-box .score{
    font-family: Tahoma, 'Open Sans';
    font-style: italic;
    font-size: 50px;
}
.container-game-element .tile-parent{
    width: 285px;
    height: 369px;
    float: left;
    margin-right: 37px;
    margin-bottom: 30px;
    text-align: center;
}
.photo-viewport{
    position: absolute;
    left: 348px;
    top: 120px;
    width: 1239px;
    height: 646px;
    -webkit-box-shadow: 0 3px 2px #777;
    -moz-box-shadow: 0 3px 2px #777;
    box-shadow: 0 3px 2px #777;
    border-radius: 20px;
}
.photo-function{
    position: absolute;
    left: 1605px;
    top: 155px;
    height: 602px;
    width: 248px;
}
.photo-camera-button{
    position: absolute;
    left: 893px;
    top: 698px;
    width: 160px;
    height: 117px;
}
.photo-decoration-row{
    position: absolute;
    top: 827px;
    left: 0px;
    height: 200px;
    width: 1900px;
    overflow: hidden
}
.photo-decoration-row .decoration-scrollable{
    height: 100%;
}
.photo-decoration-row .side-padding{
    width: 203px;
    height: 200px;
    display: inline-block;
    float: left;
}
.photo-decoration-row .decoration-element{
    margin-left: 5px;
    margin-right: 5px;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    float: left;
    background-color: white;
}
.photo-arrow-left{
    position: absolute;
    left: 54px;
    top: 889px;
    width: 54px;
    height: 83px;
    z-index: 10;
}
.photo-arrow-right{
    position: absolute;
    left: 1810px;
    top: 889px;
    width: 54px;
    height: 83px;
    z-index: 10;
}
.placeholder-chat-form{
    width: 937px;
    height: 883px;
    left: 0px;
    top: 200px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    position: absolute;
}
.placeholder-chat-scroll{
    width: 178px;
    height: 337px;
    right: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    position: absolute;  
}
.placeholder-chat-message{
    left: 937px;
    top: 273px;
    width: 798px;
    height: 724px;
    position: absolute;
    font-family: "Century Gothic";
    overflow: auto;
}
.chat-user{
    background-image: url(../images/Chat-Box-User-Icon.png);    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    padding: 7px 55px 7px 7px;
    text-align: right;
    color: #14365d;
    font-size: 23px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: -10px;
}
.chat-message{
    font-size: 29px;
    color: #fcfcfd;
    padding: 10px 31px 10px 31px;
    background-color: #244f7a;
    border-radius: 29px;
}
.chat-date{
    font-size: 29px;
    color: #020202;
    padding: 7px;
}
.placeholder-chat-message::-webkit-scrollbar-corner {
    background-color: white;
}
.placeholder-chat-message::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
}
.placeholder-chat-message::-webkit-scrollbar-thumb {
    border: 4px solid rgba(255,255,255,0);
    background-clip: content-box;
    background-color: #bfbfbf;
    border-radius: 10px;
}
.placeholder-chat-message::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
.gallery-unit-parent{
    left: 59px;
    bottom: 34px;
    width: 1803px;
    height: 164px;
    position: absolute;
}
.gallery-unit-parent .gallery-unit-container{
    height: 164px;
    width: 245px;
    display: inline-block;
    margin-right: 33px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    -webkit-box-shadow: 6px 10px 26.73px 0.27px rgba(29,26,27,0.36);
    -moz-box-shadow: 6px 10px 26.73px 0.27px rgba(29,26,27,0.36);
    box-shadow: 6px 10px 26.73px 0.27px rgba(29, 26, 27, 0.36); 
    border: 1px solid rgba(255, 255, 255, 0.8);
    cursor: move;
    margin-bottom: 80px;
}
.gallery-unit-parent .gallery-unit-container .element-option-box {
    margin-left: 0px;
}
.gallery-display-container{
    left: 59px;
    top: 241px;
    width: 1830px;
    height: 569px;
    position: absolute;
    text-align: center; 
}
.gallery-display-container .left-unit{
    height: 569px;
    width: 842px;
    display: inline-block;
    position: relative;
    text-align: center;
    border: dashed 5px #337ab7;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    overflow:hidden;
    vertical-align: top;
}
.gallery-display-container .right-unit{
    height: 569px;
    width: 901px;
    display: inline-block;
    margin-left: 66px;
    overflow: auto;
    position: relative;
    border: dashed 5px #337ab7;
    text-align: left;
}
.gallery-display-container .right-unit::-webkit-scrollbar-corner {
    background-color: white;
}
.gallery-display-container .right-unit::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
}
.gallery-display-container .right-unit::-webkit-scrollbar-thumb {
    border: 4px solid rgba(255,255,255,0);
    background-clip: content-box;
    background-color: #bfbfbf;
    border-radius: 10px;
}
.gallery-display-container .right-unit::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background-color: white;
}
.gallery-display-container .single-unit{
    height: 569px;
    overflow: auto;
    text-align: left;
    border: dashed 5px #337ab7;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}
.gallery-element-attachment{
    -webkit-box-shadow: 6px 10px 26.73px 0.27px rgba(29,26,27,0.36);
    -moz-box-shadow: 6px 10px 26.73px 0.27px rgba(29,26,27,0.36);
    box-shadow: 6px 10px 26.73px 0.27px rgba(29, 26, 27, 0.36); 
}
.gallery-element .gallery-element-inner{
    height: 100%;
    width: 100%;    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}
.add-new-media{
    margin-top: 20%;
    display: inline-block;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
.dropdown-page-link{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #262626;
    white-space: nowrap;
}
.dropdown-page-link input{
    padding-left: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;   
}
.control-label{
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}
label {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    line-height: 20px;
}
.label-larger-font{
    font-size: 14px;
}
.alert-style{
    font-size: 13px;
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
    line-height: 20px;
}
.process-wait-message, .request-complete-message{
    font-size: 12px;
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
    line-height: 20px;
    color: #666;
    line-height: 20px;
}
div.required .control-label:before {
    content: '* ';
    color: #F00;
    font-weight: bold;
}
.modal-title{
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
    font-size: 21px;
}
.response-message-container{
    margin-bottom: 0px;
}
.departments-select-label{
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-top: 2px;
    text-align: center;
    font-size: 17px;
    line-height: 14px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #3a87ad;
    height: 30px;
    border-radius: 3px;
    padding: 8px 4px 2px 4px;
    min-width: 195px;
}
.departments-top-dropdown-container {
    margin-left: 210px;
}
.department-header{
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: 3px;
}
.tile{
    background-color: white;
    border: 1px solid #D2D2D2;
    margin: 14px 7px 0 7px;
    -webkit-box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, .33);
    box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, .33);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #E7E7E7;
    padding: 0px;
}
.tile-flipper{
    border-radius: 15px;
    position: relative;
}
.tile-gallery{
    border-radius: 8px;
    position: relative;
    margin: 0px;
}
.tile-gallery .tile-background-image{
    border-radius: 8px;
}
.tile-pages{
    border-radius: 3px;
}
.tile-pages .tile-background-image{
    border-radius: 3px;
}
.tile-move{
    cursor: move;
    position: relative;
    height: 185px;
    text-align: center;
}
.tile-move-free-height{
    position: relative;
    text-align: center;
}
.tile-cursor{
    cursor: move;
}
.tile-thumbnail{
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}
.tile-option{
    font-family: 'Helvetica', sans-serif;
    padding: 6px 14px 7px;
    background: #eaeaea;
    border-top: 1px solid #e7e7e7;
    color: #777;
    text-align: left;
}
.tile-option-flipmatch{
    position:absolute;
    bottom: 10px;
    width: 100%;
    z-index: 100;
}
.tile-content{
    font-family: 'Alegreya', sans-serif;
    font-style: italic;
    font-size: 28px;
    color: #7b644f;
    position: absolute;
}
.tile-home{
    min-height: 100px;
}
.tile-home .tile-flipper, .tile-home .tile-flipper .tile-thumbnail{
    border-radius: 0px;
}
.tile-home .tile-flipper{
    margin: 0px;
}
.tile-home .tile{
    box-shadow: none;
}
.tile-link{
    position: absolute;
}
.tile-outline{
    outline: dashed 1px #eea236;
}
.tile-link .tile{
    margin: 0px;  
    border-radius: 0px; 
    box-shadow:none;
    background: transparent;
    border: none;
}
.tile-link .box-shadow{
    box-shadow: 0px 0px 76px 1px rgba(247,247,205,1);
}
.tile-link .tile-background-image{
    border-radius: 0px;
}
.tile-link .function-parent{
    position: absolute;
    width: 100%;
    min-width: 350px;
    margin-top: -70px;
    left: 0px;
}
.container-tile-wrapper{
    position: relative;
}
.decoration-option-dropdown{
    cursor: pointer;
    display: inline-block;
}
.decoration-option-dropdown:hover{
    color:#222222;
}
.no-padding{
    padding: 0px;
}
.no-padding-left{
    padding-left: 0px;
}
.small-padding-left{
    padding-left: 5px;
}
.lock-image{
    position: absolute;
    bottom: 6px;
    right: 6px;
}
.lock-image img{
    max-width: 100%;
}
.lock-text{
    position: absolute;
    font-family: Alegreya;
    font-style: italic;
    font-weight: bold;
    color: #010101;
    opacity: 0.6;
    font-size: 53px;   
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(-15deg);
}
.lock-text:after {
    content: '';
    width: 90%;
    height: 4px;
    background: #010101;
    position: absolute;
    left: 5%;
    bottom: 30%;
    opacity: 0.6;
}
.lock-text:before {
    content: '';
    width: 90%;
    height: 4px;
    background: #010101;
    position: absolute;
    left: 5%;
    top: 30%;
    opacity: 0.6;
}
.photo-sender-description{
    padding: 5px 12px;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border-top: 1px solid rgb(231, 231, 231);
}
.upload-status{
    position: relative;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border-top: 1px solid rgb(231, 231, 231);
}
.upload-status-icon{
    padding-top: 5px;
}
.upload-status-text{
    display: inline-block;
    vertical-align: super;
}
.game-name{
    height: 33px; 
    display: table;
}
.game-name-text{
    vertical-align: middle; 
    display:table-cell
}
.correct-container{
    cursor: pointer;
    margin-bottom: 20px;
}
.button-tall{
    height: 70px;
}
.visibility-none{
    visibility: hidden;
    height: 10px;
}
.tile-background-image{
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border-radius: 15px;
}
.element-data .btn-primary{
    opacity: .4;
}
.element-data .btn-group:hover .btn-primary{
    opacity: 1;   
}
.element-data .btn-group:hover .dropdown-menu{
    z-index: 100;
}
.home-link-container{
    font-family: Abbeyline, 'Open Sans', sans-serif;
    font-size: 28px;
    color: #002f45;
    font-weight: bold;
    text-shadow: 0px 5px 5px rgba(65, 0, 28, 0.22); 
}
.home-link-container .element-move{
    text-shadow: none;
    font-family: Alegreya, sans-serif;
}
.selected-home-page{
    height: 30px;
    line-height: 30px;
    color: white;
    border: #990000;
    text-align: center;
    font-weight: bold;
    background-color: red;
}
.page-column{
    overflow: auto;
    max-height: 600px;
}
.page-column::-webkit-scrollbar-corner {
    background-color: white;
}
.page-column::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
}
.page-column::-webkit-scrollbar-thumb {
    border: 4px solid rgba(255,255,255,0);
    background-clip: content-box;
    background-color: #bfbfbf;
    border-radius: 10px;
}
.page-column::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background-color: white;
}