/* MAINLAYOUTSTYLESHEET | VARIOLINE | SCROLLBARS  */
::-webkit-scrollbar 
{
  -webkit-appearance: none;
  -moz-appearance: none;
   
   width: 6px;
}
::-webkit-scrollbar-thumb 
{
   background-color: rgba(0, 0, 0, .5);
}
/*GLOBAL FONT*/
@font-face 
{
    font-family:Roboto;
    src:url('/Fonts/MagistralC.ttf');

    font-weight:bold;
}
body, body.cls-cpanel-body, dt, label
{
    margin:0px !important;

    font-family:Roboto;
   
    color:black;
    
    overflow-x:hidden;
}
.cls-contents-toolbarmargin
{
    margin-top:90px;
}
/* <custom.cls-blackout> Note : ScreenPopup Layout */ 
div.cls-blackout 
{
    position:fixed;
    display:none;

    top:0px;
    left:0px;

    height:100%;
    width:100%;

    background-color:rgba(0,0,0,0.5);
    z-index:10000;
}
div.cls-blackout > div:nth-child(2) 
{
    max-width:280px;
    width:auto;   

    margin:10% auto;
    padding:10px;

    text-align:center;

    background-color:#E8E8E8;
    border-radius:10px;
}
/* <custom.cls-goto> Note : Page Goto T0p */
.cls-goto 
{
    display: none;
    position:fixed;

    bottom:48px;
    right:20px;

    padding:12px;

    color:white;
    background-color:black;

    border:1px solid black;
    border-radius:2px;

    opacity:0.6;
    cursor:pointer;

    z-index:1000;
}
/* <custom.cls-loader> */
div.cls-loader 
{
    display:none;

    width:15px;
    height: 15px;

    margin-top:30px;

    border: 4px solid #cccccc;
    border-radius: 50%;
    border-top: 4px solid #96AF19;
    border-bottom: 4px solid #96AF19;
    
   -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
/*Control Panel Stylesheet*/
body.cls-cpanel-body 
{
    background-color:#eae7e7;
}
body.cls-cpanel-body section 
{
    margin-left:-260px;
}
header.cls-cpanel-header, aside, div.cls-tabs, .cls-vmenu-dropdown dd ul, div.cls-blackout > div:nth-child(2)  
{
    background-color:white !important;
}
header div.cls-profile, .cls-close, .cls-counter  
{
    float:right;
    text-align:right; 
    
    padding:2px;  
}
aside
{
    display: none;
    
    position:fixed;
    left:0px;
    top:0px;

    width:200px;
    height:100%;
    
    padding:15px;

    overflow:scroll;
}
aside > div > ul > li
{
    display: block;

    width: calc(100% - 20px);
    
    padding: 10px;

    border-bottom: 1px solid rgba(0, 0, 0, .2);
}
#id-aside-titles
{
    display: none;

    padding: 25px;
}
/* TABS */
div.cls-tabs 
{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    
    overflow: hidden;
}
div.cls-tabs > ul
{
    display: table;
    table-layout: fixed;

    width: 100%;

    margin-top:0px;
}
div.cls-tabs > ul > li 
{
    display: table-cell;

    text-align:center;
}
div.cls-tabs button 
{
    float: left;
    
    width:100%;
    
    padding:20px 0px 20px 0px;

    border: none;
    border-bottom:1px solid white;

    background-color:#f5f5f5;

    outline:none;
    transition:0.5s;
    cursor:pointer;
}
div.cls-tabs button.active, div.cls-blackout > div:nth-child(1)   
{
    background-color:#96AF19;
    color:white;
}
.cls-counter
{
    font-family:Arial;
    
    border-radius:3px;

    background-color:red;
    color:white;
}
.cls-tabcontent 
{
    display: none;

    padding: 6px 12px;

    background-color:white;
}
div.cls-cpanel-pageheading 
{
    margin:80px 0px 80px 0px;
}
/*Website Stylesheet*/
body.cls-background, div.cls-background 
{
    background: url('/Images/Background/BackgroundGray.jpg');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* MAINLAYOUT (STYLESHEET) | VARIOLINE | CONTENTS (CONTAINER) */
/* SECTION */
section
{
    max-width:1024px;

    margin:0 auto;
    padding:15px;
}
/* HEADER - NAVIGATION | JOIN */
header
{   
    margin:0px 0px 40px 0px;

    background-color:#f3f3f3;
}
footer
{
    margin:40px 0px 0px 0px;
    padding:10px;
   
    background-color:#35373a;
}
header:after, footer:after, .cls-group:after, div.cls-sidebyside:after, div.cls-clients:after, div.cls-address:after  
{
    display:block;

    height: 0;
  
    visibility: hidden;
  
    content: "";
    clear: both;
  
    overflow: hidden;
}
/* DIV - SECTION | JOIN */
div, section, table 
{
    vertical-align:top;

    background-size:cover;
    background-position:bottom;
    background-repeat:no-repeat;
}
/* HELP MESSAGE PANEL */
div.cls-notes
{
    width:inherit;

    padding:20px;

    font-size:1.2em;

    background-color:#FDFE96;
}
/* IFRAME */
iframe 
{
    border:none;
}
/* <custom.cls-category-group> (SIBLINGS) */
div.cls-address 
{
    position:relative;
    
    font-size:0.9em;
    
    color:white !important;

    background-image:url('../Images/Background/BackgroundGreen.png');
}
div.cls-inline > div 
{
    display:inline-block;
}
div.cls-group > div > div
{
    display:inline-block;
}
div.cls-group > div:nth-child(1), div.cls-inlineleft, div.cls-sidebyside > div
{
    position:relative;
    float:left;
}
div.cls-group > div:nth-child(2)  
{
    position:relative;
    float:right;
}
table.cls-grid
{
    width:100%;
}
table.cls-grid.cls-inclpager tr:nth-child(even), table.cls-grid tr:nth-child(even)
{
    margin-top:20px;

    background-color:#f5f5f5;
}
table.cls-grid tr 
{
    padding:30px 0px;
}
table.cls-grid.cls-inclpager tr
{
    display:none;

    width:100%;
}
div.cls-overlay 
{
    position:absolute;

    top:0px;
    left:0px;

    min-height:100%;
    min-width:100%;

    mix-blend-mode: overlay;

    z-index:1;
}
.cls-sort-container
{
    width: 275px;
    height: 600px;

    background-color: #e2e2e2;

    overflow-y: auto;
}
ul.cls-clients > li > div 
{
    position:relative;
    display:inline-grid;
    
    width:250px;
    height:150px;

    border:1px solid #ebeaea;

    background-image:url('/Images/Background/BackgroundGray.jpg');
}
/* UNORDEREDLIST - ORDEREDLIST - <custom-cls-more> (SUBSIDAIRY)  | JOIN */
header ul.cls-hmenu > li:not(:last-child), header ol > li:not(:last-child)
{
    padding:0px 20px 20px 0px;

    margin-top:10px;
}
/* MAINLAYOUT (STYLESHEET) | VARIOLINE | LIST | LINKS */
ul, ol, dl 
{
    margin-bottom:0px;
    padding:0px 0px 0px 0px;

    list-style:none;
}
ul li 
{
    display:inline-block;
}
/* <custom.cls-dropdown> */
ul.cls-foam li
{
    display:block;

    margin:10px 0px 10px 0px;

    font-size:1.1em;
}
dl.cls-input-dropdown li.active, .cls-vmenu-dropdown li.active
{
    background-color:#31708f !important;
    color:white !important;
}
.cls-vmenu-dropdown > span:nth-child(1)
{
    padding:10px;
}
dl.cls-input-dropdown, .cls-vmenu-dropdown 
{
    position:relative;
    
    cursor:pointer;
}
dl.cls-input-dropdown dd ul, .cls-vmenu-dropdown dd ul 
{
    position:absolute;
    display:none;

    top:78%;
    left:0px;
    
    width:100%;
    max-height:300px;

    background-color:#f5f5f5;

    z-index:100;
    overflow:hidden;
    overflow-y:auto;
}
.cls-dropdown-shadow 
{
   -webkit-box-shadow: 9px 24px 20px -18px rgba(77,77,77,0.34);
   -moz-box-shadow: 9px 24px 20px -18px rgba(77,77,77,0.34);
    box-shadow: 9px 24px 20px -18px rgba(77,77,77,0.34);
}
dl.cls-input-dropdown dd ul li, .cls-vmenu-dropdown dd ul li, .cls-vmenu-dropdown ul li
{
    width:100%;

    padding:30px;

    border-bottom:1px solid #cccccc;

    cursor:pointer;
}
dl.cls-input-dropdown dd ul li:hover, .cls-vmenu-dropdown dd ul li:hover 
{
    color:black;
    background-color:#e8e6e6;
}
dl.cls-input-dropdown dd ul li:hover, input[type='submit']
{
    color:white;
    
    border:none;
    background-color:#96AF19;
} 
/* ANCHOR */
a 
{
    color:black;
    text-decoration:none;
}
a.cls-sub-anchor 
{
    text-decoration:underline;

    font-size:0.9em;
    color:blue;

    cursor:pointer;
}
a.cls-sub-anchor-cancel, a.cls-sub-anchor-submit
{
    display:none;
} 
span[contenteditable="true"]
{
    display: inline-block;
    width:400px;
    height:20px;

    padding:0px 0px 0px 0px;
    
    color:black;
    font-weight:bold;

    border-bottom:1px solid black;
    outline:none;

    overflow-y:hidden;
    overflow-x:auto;
}
span[contenteditable="false"] 
{
    color:black;

    font-weight:bold;
}

/* MAINLAYOUT (STYLESHEET) | VARIOLINE | TEXT-CONTAINERS */
/* HEADING */
.cls-heading 
{
    margin-left:20px !important;
}
h1 
{
    font-size:2.5em;
}
h2, p > span:nth-child(1)
{
    font-size:2em
}
p, p > span, span, input
{
    font-size:1.1em;
}
/* PARAGRAPH */
p 
{
    padding:20px;
    
    text-align:justify;
   
    overflow-y:hidden;
}
p span.cls-address 
{
    margin-left:30px;
}
/* SPAN */
label > span 
{
    font-size:0.8em;
}
label > span.cls-restrict-label 
{
    font-size:0.9em;
    font-style:italic;
}
.cls-cpanel-body span.material-icons
{
    padding:0px 20px 0px 20px;
}
span.material-icons, .cls-goto > span.material-icons 
{
    font-size:inherit;

    padding:0px 0px 0px 0px;
    vertical-align:bottom;
}
/* MAINLAYOUT (STYLESHEET) | VARIOLINE | INPUTS */
.cls-textarea
{
    width:400px;
    height:400px;

    padding:20px;

    font-family:Roboto;
    font-size:1.1em;

    white-space: normal;
    text-align: justify;

    border:none;
    border-bottom:1px solid gray;

    outline:none;
    resize:none;
}
input
{
    padding-left:5px;
    padding-right:5px;
}
.cls-textarea:valid,input:valid 
{
    border-bottom:1px solid green;
    
    transition:1s;
}
.cls-textarea:invalid, input:invalid 
{
    border-color:#e13801;
}
input, dl.cls-input-dropdown dt 
{
    width:400px;
    
    padding:20px;
}
input[type='text'].cls-input-inform 
{
    height:20px !important;
    
    font-size:1.5em;

    color:white;
    background-color:transparent !important;
}
/* custom CSS checkboxes */
input[type='checkbox'] 
{
    width:auto;
}
.cls-input-concheckbox input[type='checkbox'] 
{
    visibility:hidden;
}
.cls-input-concheckbox 
{
    position: relative;

	width: 100px;
	height: 40px;
	
    margin-top: 20px;

    background:#35373a;
	
    border-radius: 50px;
}
.cls-input-concheckbox:before 
{
    position: absolute;

    top: 10px;
	left: 13px;
    
    height: 2px;

	color: #96AF19;

    content: 'On';
}
.cls-input-concheckbox:after 
{
    position: absolute;

    height: 2px;

    top: 10px;
	left: 60px;

	content: 'Off';
	
	color: #cccccc;
}
.cls-input-concheckbox label 
{
	display: block;
    position: absolute;
	
    top: 9px;
    left: 12px;

    width: 30px;
	height: 22px;
	
    border-radius: 50px;

    background: white;

	transition: all .5s ease;
	
	z-index: 1;
	cursor: pointer;
}
.cls-input-concheckbox input[type=checkbox]:checked + label 
{
	left: 60px;
	
    background: #96AF19;
}
/* ------------------------------------------------------------ */
input, dl.cls-input-dropdown
{
    border:none;
    border-bottom:1px solid white;

    outline:none;
    transition:0.5s;
}
input[type='submit'], button.cls-buttons 
{
    width:100px;
    
    margin:30px 0px;
    padding:10px;
    
    text-align:center;
    font-size:1em;

    color:white !important;

    border-radius:3px;

    cursor:pointer;
}
input[type='search'], .cls-settingstoolbar 
{
    position:absolute;
    
    top:-1px;
    left:0px;

    width:100%;
    height:60px;
    
    background-color:#f1f1f1;
    border-bottom:none !important;
}
button.cls-buttons 
{
    color:black !important;

    background-color:transparent;

    border:1px solid #cccccc;
}
.cls-grid-button
{
    position:absolute;
    top:0px;
    right:0px;

    padding:20px 10px;

    color: #a94442;
    background-color: #f2dede;
    
    border:none;

    cursor:pointer;
}
.cls-grid-sub-button
{
    width:100px;
    height:40px;

    background-color:transparent;

    border:1px solid black;
    border-radius:4px;
}
button.cls-delete:hover 
{
    color: #a94442;
    
    background-color: #f2dede;

    border-color:#f2dede;

    cursor:pointer;
}
button.cls-alert:hover
{
    color: #31708f;
    
    background-color: #bce8f1;

    border-color:#bce8f1;

    cursor:pointer;
}
button.cls-update:hover 
{
    color: #31708f;
    
    background-color: #d9edf7;

    border-color:#d9edf7;

    cursor:pointer;
}
/* HELPING BANNERS */
.cls-input-helptag 
{
    margin:10px 0px 10px 0px;

    font-size:0.9em;
    
    color:darkgray;
}
div.cls-inform-panel
{
    display:none;
    visibility:hidden;

    position:absolute;
    top:22px;
    left:-6px;

    width:96%;

    padding:10px;

    font-size:0.6em;

    color:lightgray;
    background-color:rgba(0,0,0,0.7);
}
div.cls-inform-panel label 
{
    font-size:1.5em !important;
    font-weight:bold !important;
    
    color:white;
}
/* COLOR PICKER */
div.cls-color-picker
{
    width:30px;
    height:30px;
    
    background-color:#96AF19;
    border:4px solid black;
    
    cursor:pointer;
}
/* IMAGES */
img 
{
    width:100%;
}
img.cls-icon 
{
    height:25px !important;
    width:25px !important;
}
img.cls-icon-address 
{
    position: absolute;
    left: 12px;
    
    height: 30px;
    width:30px;
}
img.cls-icon-title 
{
    width:200px;

    margin-top:-12px;
}
img.cls-image-thumbnails 
{
    height:80px;
    width:200px;

    cursor:pointer;
}
img.cls-image-thumbnails-sort 
{
    height:auto;
    width:250px;

    opacity:0.9;
    cursor:move;
}
img.cls-image-thumbnails-sort:hover 
{
    opacity:1;
}
img.cls-opacity
{
    opacity:0.4;
}
img.cls-selected
{
    border:2px solid black;
}
img.cls_img_preview 
{
    margin-top:20px;
    padding:5px;

    background: #E8F4DE;
    
    border-radius:2px;

    cursor:pointer;
}
img.cls_img_preview[src='#'] 
{
    height:300px;
    width:98%;

    border:1px dashed black;
    border-radius:2px;
}
/* <custom.paging> */
.cls-pager
{
    margin: 40px 0px;
    padding-left:20px;
}
.cls-pager a 
{
    display: inline-block;

    padding: 15px 25px 15px 25px;

    text-decoration: none;

    color: black;
    
    border:1px solid #cccccc;

    cursor:pointer;
}
.cls-pager a.selected-page 
{
    background: #cccccc;
}
/* MAINLAYOUTSTYLESHEET | VARIOLINE | (TOGGLE) */
/* <custom.cls-show> */
.cls-show
{
    display:block !important;  
}
.cls-visibility 
{
    visibility:hidden !important;
}
.cls-hide 
{
    display:none !important;  
}
.cls-visibility-dropdown 
{
    visibility:visible !important;
}
.cls-exsits
{
    display:none;
    
    color:red;
}
@-webkit-keyframes spin 
{
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin 
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* BOOTSTRAP | ALERT */
label.cls-status 
{
    padding:5px;

    font-size:0.8em;

    border-radius:3px;
}
label.cls-status.cls-status-new
{
    color:black;
    background-color:#f7ee48;
}
label.cls-status.cls-status-read 
{
    color:black;
    background-color:#d9edf7;
}
.cls-enquiry-time
{
    color:white !important;
}
label.cls-status.cls-enquiry-time.cls-todays
{
    background-color:#EF1927;
}
label.cls-status.cls-enquiry-time.cls-yesterday
{
    background-color:#D45500;
}
label.cls-status.cls-enquiry-time.cls-month
{
    background-color: #9C27B0;
}
label.cls-status.cls-enquiry-time.cls-week
{
    background-color: #009688;
}
div.cls-popup
{
    display:none;

    position:fixed;
    bottom:0px;
    left:0px;
    
    width:100%;
    
    padding:15px;

    font-size:.9em;

    border-radius:5px;
}
div.cls-popup.cls-popup-success, label.cls-status-true
{
    color: #3c763d;
    background-color: #dff0d8;
    
    border-color: #d6e9c6;
}
div.cls-popup.cls-popup-error, label.cls-status-false
{
    color: #a94442;
    background-color: #f2dede;
    
    border-color: #ebccd1;
}
/* FOOTER */
footer, footer a   
{
    color:#cccccc !important;
}


/* RESPONSIVE TAGS */
@media screen and (max-width: 720px)
{
    .cls-hmenu > li
    {
        display: none;
    }
    #id-aside-titles
    {
        display: block !important;
    }
}
@media screen and (min-width: 720px)
{
    #id-aside-titles
    {
        display: none !important;
    }
}