/*COMMON CSS==================================================*/
*, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{font-size:10px; width:100%; height:100%;}
body{height:100%; width:100%; font-family:'Roboto', sans-serif; font-weight:300; overflow:hidden; font-size:1.3rem; background-image:url(../images/lightbg.jpg); background-repeat:no-repeat; background-position:left top; background-size:cover;}
body,html,div,p,span,ul,li,ol,a,img,iframe,i,h1,h2,h3,h4,h5,h6{margin:0px; padding:0px; outline:0px; border:0px; text-decoration:none; list-style-type:none;}
/*----------*/
a{-webkit-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s;}
a:hover{color:#26104C;}
a img{border:0px;}

/*HEADING ELEMENTS=========================================================*/
h1,h2,h3,h4,h5,h6{float:left; width:100%; font-weight:300;}
h1{font-size:2.6rem;}
h2{font-size:2.4rem;}
h3{font-size:2.2rem;}
h4{font-size:2.0rem;}
h5{font-size:1.8rem;}
h6{font-size:1.6rem;}
p{float:left; width:100%; margin:0 0 15px 0; padding:0; line-height:1.6rem;}

/*FORM ELEMENTS============================================================*/
input,textarea,select,form,label,button,div.select-box, div.select-box select,i.chk,i.rdo{margin:0px; padding:0px; outline:none; font-size:1.3rem; font-weight:400; font-family:'Roboto', sans-serif;}
/*----------*/
input[type=text], input[type=password], input[type=number], textarea{float:left; width:100%; padding:10px; border-width:1px; border-style:solid; resize:none; -webkit-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-appearance: none; -moz-appearance: none; appearance: none;     border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;}
	input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus{
		border-color: #4A2C7D !important;
	}

/*----------*/
textarea{height:100px; overflow:auto; overflow-y:auto; scrollbar-width:thin;}
/*----------*/
input[xtype=date],
input[xtype=time],
input[xtype=datetime]{background-repeat:no-repeat; background-position:calc(100% - 10px) center; background-size:15px; min-width:110px; padding-right:32px;}
/*----------*/
input[xtype=date]{background-image:url(../images/ico-date.png);}
input[xtype=time]{background-image:url(../images/ico-time.png);}
input[xtype=datetime]{background-image:url(../images/ico-date-time.png); background-size:18px;}
/*----------*/
label{float:left; width:100%; min-height:20px; font-weight:500; text-transform:uppercase;}
/*----------*/

div.select-box{float:left; min-width:50px; width:100%; position:relative; border-width:1px; border-style:solid; overflow:hidden; -webkit-transition:all ease-in-out 0.3s; transition:all ease-in-out 0.3s;}
div.select-box select{float:left; width:100%; padding:10px; outline:none; border:0; background:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;}
div.select-box select option{padding:5px 10px; border:0px; cursor:pointer; border-width:1px; border-style:solid;}
div.select-box:after{content:'\f0d7'; right:0px; top:0px; width:35px; height:100%; font-family:'FontAwesome'; position:absolute; pointer-events:none; display:flex; justify-content:center; align-items:center; font-size:1.6rem; line-height:1; -webkit-transition:all ease-in-out 0.3s; transition:all ease-in-out 0.3s;}

/*ERROR MESSAGE==============================================================*/
p.e{margin:1px 0; padding:0; font-size:1.1rem; line-height:1.2rem; color:#26104C; font-weight:normal;}
.err input[type=text],
.err input[type=password],
.err textarea,
.err .mx-list,
.err .select-box{border:1px solid #26104C !important;}

/*BTN CSS====================================================================*/
.btn{display:inline-block; height:28px; min-width:80px; line-height:28px; padding:0px 8px; border:0px; cursor:pointer; text-transform:uppercase; transition:all ease-in-out 0.3s; vertical-align:top; text-align:center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;}
.btn i, .btn.fa{font-size:1.4rem;}
.btn:hover, .btn.l:hover{background:#26104C !important;}
.btn:before{font-family:'FontAwesome';}
.btn.ico{min-width:1px; height:auto; font-size:20px;}
.btn.ico:hover{background-color:transparent !important;}

/*----------*/
.btn.b,
.btn.l.b {padding:12px;}

.fs{font-size:1.1rem !important;}

/*BUTTON CSS====================================================================*/
.button{display:inline-block; height:28px; line-height:28px; padding:0px 8px; border:0px; cursor:pointer; text-transform:uppercase; transition:all ease-in-out 0.3s; vertical-align:top; text-align:center;}
.button:hover, .button.l:hover{background:#26104C !important;}

/*ADD AND DEL BUTTON CSS==================================================*/
a.del,a.add{display:inline-block; width:25px; height:25px; position:relative; vertical-align:middle;}
a.del:before, a.del:after,a.add:before,a.add:after{content:""; position:absolute; left:50%; top:50%; transition:all ease-in-out 0.3s;}
a.del:hover,a.add:hover{background:#26104C !important;;}
a.del:before,a.del:after{ width:1px; height:15px; margin-left:-0.5px; margin-top:-7.5px; }
a.del:before{transform:rotate(45deg)}
a.del:after{transform:rotate(-45deg)}
a.del:hover:before{transform:rotate(-45deg);}
a.del:hover:after{transform:rotate(45deg);}
/*----------*/
a.del.rl,
a.del.rs{background:#26104C; border-radius:100%; -webkit-border-radius:100%; position:absolute;}
a.del.rl{right:-12px !important; top:-13px !important;}

a.del.rs{width:15px; height:15px; right:-7px; top:-7px;}
a.del.rs:before, a.del.rs:after{height:9px; margin-left:-0.5px; margin-top:-4.5px;}

/*ADD BUTTON CSS==================================================*/
a.add:after{width:1px; height:15px; margin-top:-7.5px; margin-left:-1px;}
a.add:before{width:15px; height:1px; margin-top:-1px; margin-left:-7.5px;}
 a.add:hover:after, a.add:hover:before{transform:rotate(180deg);}
/* ul.main-nav li ul li:hover a.add:after, ul.main-nav li ul li:hover a.add{transform:rotate(180deg);} */

.mxcon{display: inline-block;width: 10px; height: 10px; float: right; margin-top: 21px; margin-right: 10px;}
.mxcon.dev, .mxcon.demo{border: 1px solid #26104C;opacity: 0.5;}
.mxcon.live {border: 1px solid green;opacity: 0.7;}

/*SCROLL BAR CSS===================================*/
::-webkit-scrollbar{width:4px;height:4px;}

/*FIELD SET CSS==================================================*/
fieldset{float:left; width:calc(100% - 20px); margin-left:10px; border:1px solid #dcdcdc; padding:10px;}
fieldset legend{font-size:1.8rem;}
fieldset legend h3{font-size:100%}

/*PROGRESS BAR====================================================*/
div#psloader{display:none; position:fixed; width:100%; height:100%; overflow:auto; overflow-y:auto;scrollbar-width:thin; left:0; top:0; display:flex; justify-content:center; align-items:center; z-index:10012;}
div#psloader{display:block; position:absolute;}
div#mxmsg{display:none; min-height:30px; min-width:100%; padding:10px; text-align:center; vertical-align:middle; font-size:2.0rem; color:#26104C; background-color:#222222;}
div.progress{display:block; width:100%; height:1px; margin:0; padding:0; position:absolute; top:50%; background:#26104C;}
div.progress span{float:left; height:1px; width:0%; background-color:#dc0000;}
.spinner div{position:absolute; width:100px; height:100px; background-size:cover; background-color:rgba(0,0,0,0.9);background-image:url(../../uploads/setting/logo-m.png); background-repeat:no-repeat; box-shadow:inset 0 0 20px rgba(220,0,0,0.4); font-size:1.8rem; line-height:1.8rem; text-align:right; vertical-align:top; color:#dc0000; padding:3px;}
.spinner .f1{-webkit-transform:translateZ(50px); -ms-transform:translateZ(50px); transform:translateZ(50px);}
.spinner .f2{-webkit-transform:rotateY(90deg) translateZ(50px); -ms-transform:rotateY(90deg) translateZ(50px); transform:rotateY(90deg) translateZ(50px);}
.spinner .f3{-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(50px); -ms-transform:rotateY(90deg) rotateX(90deg) translateZ(50px); transform:rotateY(90deg) rotateX(90deg) translateZ(50px);}
.spinner .f4{-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(50px); -ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(50px); transform:rotateY(180deg) rotateZ(90deg) translateZ(50px);}
.spinner .f5{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(50px); -ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(50px); transform:rotateY(-90deg) rotateZ(90deg) translateZ(50px);}
.spinner .f6{-webkit-transform:rotateX(-90deg) translateZ(50px); -ms-transform:rotateX(-90deg) translateZ(50px); transform:rotateX(-90deg) translateZ(50px);}
.spinner{-webkit-animation:spincube 8s ease-in-out infinite; animation:spincube 8s ease-in-out infinite; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform-origin:50px 50px 0; -ms-transform-origin:50px 50px 0; transform-origin:50px 50px 0; position:absolute; left:50%; top:50%; margin-top:-150px; margin-left:-50px;}

@-webkit-keyframes spincube{
	16%{-webkit-transform:rotateY(-90deg);}
	33%{-webkit-transform:rotateY(-90deg) rotateZ(90deg);}
	50%{-webkit-transform:rotateY(180deg) rotateZ(90deg);}
	66%{-webkit-transform:rotateY(90deg) rotateX(90deg);}
	83%{-webkit-transform:rotateX(90deg);}
}
@keyframes spincube{
	16%{-ms-transform:rotateY(-90deg); transform:rotateY(-90deg);}
	33%{-ms-transform:rotateY(-90deg) rotateZ(90deg); transform:rotateY(-90deg) rotateZ(90deg);}
	50%{-ms-transform:rotateY(180deg) rotateZ(90deg); transform:rotateY(180deg) rotateZ(90deg);}
	66%{-ms-transform:rotateY(90deg) rotateX(90deg); transform:rotateY(90deg) rotateX(90deg);}
	83%{-ms-transform:rotateX(90deg); transform:rotateX(90deg);}
}

/*MX DIALOGUE==================================================*/
div.mxdialog{display:none; position:fixed; width:100%; height:100%; overflow:auto; overflow-y:auto;scrollbar-width:thin; left:0; top:0; display:flex; justify-content:center; align-items:center; z-index: 10011;}
div.mxdialog div.body{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; max-height:90%; padding:0; position:relative; min-width:300px; max-width:60%;}
div.mxdialog div.content{ float:left; width:100%; margin:0px; padding:16px; max-height:75vh; overflow:auto; overflow-y:auto;scrollbar-width:thin; font-size: 1.4rem;line-height: 1.8rem;}
div.mxdialog div.mx-btn{ float:left; width: 100%; text-align:center; padding-top: 16px;}
div.mxdialog .btn{ margin: 0px 2px;}
div.mxdialog h2{margin:0; padding:0; font-size:1.6rem; font-weight:500; text-transform:uppercase;}
div.mxdialog ul{display:flex; flex-flow:row wrap; flex-flow:row wrap;}
div.mxdialog ul li.cta{ text-align:center;}
div.mxdialog ul li{ width:calc(100% - 5px); margin-bottom:10px;}
div.mxdialog ul li.c2{width:calc(50% - 5px);}
div.mxdialog ul li.c3{width:calc(33.3333% - 5px);}
div.mxdialog ul li.c4{width:calc(25% - 5px);}
div.mxdialog ul li.c2,
div.mxdialog ul li.c3,
div.mxdialog ul li.c4{margin-right:5px;}
div.mxdialog.mx-file-browser div.body{padding:10px;}
div.mxdialog form.wrap-data{overflow:auto;}
div.mxdialog.mx-file-browser div.body{max-width:90%;}

body .ui-widget-content{max-height:192px; overflow-y:auto; overflow-x:hidden;}

/*THEME COLOR ACCORDING TO CLIENT LOGO*/
/*BACKGROUND COLOR==================================================*/
div.nav-left:after,
ul.main-nav li ul li:hover a.add:before,
ul.main-nav li ul li:hover a.add:after,
ul.main-nav li ul li.active a.add:before,
ul.main-nav li ul li.active a.add:after,
ul.main-nav li:hover > a.add,
ul.main-nav li.active > a.add,
ul.main-nav li:hover > a.down-arrow,
ul.main-nav li.active > a.down-arrow,
div.mxpaging a:hover,
div.mx-file-upload div.drop:hover,
div.veiw-edit div.ve-wrap a.view:hover,
div.veiw-edit div a.edit:hover,
div.veiw-edit div.ve-wrap a:hover,
i.rdo input:checked ~ em,
i.chk input:checked ~ em,
div.core-nav li.theme a:hover,
div.core-nav li.font a:hover,
div.core-nav li.theme a.active,
div.core-nav li.font a.active{background-color:#26104C !important;}
/*FONT COLOR==================================================*/
h1.pg-ttl,
ul.main-nav li ul li:hover a,
ul.main-nav li ul li.active a,
ul.main-nav li ul li.active a.add,
div.mxdialog h2,
.tbl-list .btn.ico:hover,
.tbl-list .btn.ico.active{color:#26104C !important;}
/*BORDER COLOR==================================================*/
i.rdo input:checked ~ em,
i.chk input:checked ~ em{border:1px solid #26104C;}

/*----------*/
.mxdialog a.del{right:5px; top:5px; position:absolute;}
/* div.mxdialog div.content{ text-align:center;} */
div.mxdialog h2{ background:#222222; padding:8px; margin:0;}
body.moderate div.mxdialog h2 { background:#666666;}
/*----------*/
body.light div.mxdialog h2 { background:#cccccc;}
/*----------*/
body.dark .ui-menu .ui-menu-item-wrapper{color:#cccccc;}
body.dark .ui-state-active,
body.dark .ui-widget-content .ui-state-active,
body.dark .ui-widget-header .ui-state-active,
body.dark a.ui-button:active,
body.dark .ui-button:active,
body.dark .ui-button.ui-state-active:hover{background: #000000;}
/*----------*/
body.dark .cke_dialog_title{color:#26104C;}
/*----------*/
body .ui-state-active,
body .ui-widget-content .ui-state-active{border:1px solid transparent; color:#000000;}
body .ui-widget-header .ui-state-active,
body a.ui-button:active,
body .ui-button:active,
body .ui-button.ui-state-active:hover{border: 1px solid #26104C;color:#26104C;}
/*----------*/
body .ui-state-highlight,
body .ui-widget-content .ui-state-highlight,
body .ui-widget-header .ui-state-highlight{border: 1px solid #26104C; background: #26104C;}