/* 
    Document   : reset
    Created on : May, 2019
    Author     : Desoft Corp
    Description:
        Purpose of the stylesheet follows.
*/
/*reset*/
html,body{height:100%;}
html,body,div,span,applet,object,iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input {margin:0;padding:0;border:0;outline:0;font-size:100%;}
em{font-size:14px;color: #999}
a:focus {outline:1px dotted invert;}
a{text-decoration:none;color: #2D75B2}
ol, ul {list-style:none;color:#707070;}
blockquote, q {}
blockquote:before, blockquote:after,
q:before, q:after {float:left;}
blockquote{margin-bottom:20px;color:#666;margin:0 30px 15px 30px;padding:0 0 0 10px;font-size:1.1em;border-left:2px solid #ddd;}
fieldset{border:1px solid #ccc;padding:10px;}
legend{font-size:14px;padding:5px 10px;background-color: #ccc}
:focus {outline:0;}
ins {text-decoration:none;}
del,.del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
.left{float:left;}
img.left{float:left;margin-right:10px;margin-bottom:10px;}
.right{float:right !important;}
.clear{clear:both;}
.center{text-align:center;margin:0 auto;display:inline-block;width:100%;}
.algright{text-align:right!important;}
.algleft{text-align:left!important;}
img{border:0;vertical-align:middle;}
.relative{position:relative;}
.abs-right{right:0;}
.abs-left{left:0;}
.alignTop{vertical-align:top;}
.alignBottom{vertical-align:bottom;}
.alignMiddle{vertical-align:middle;}
.spt-left{ margin-left:20px;}
.spt-right{ margin-right:20px;}
.spt-bottom{margin-bottom:20px;}
.spt-top{margin-top:20px;}
.spt-left-mini{margin-left: 5px}
.spt-right-mini{margin-right: 5px}
.sp-botom-mini{margin-bottom: 5px}
.reset-margin{margin: 0!important}
.color-accent{color:#f90aa2}
.color-primary{color:#3899ec}
.color-red{color: red;}
.color-green{color: green;}
.color-orange{color: orange;}

/*table*/

/*mobile*/
@media screen and (max-width: 800px){
    .hide-desktop{display: none;}
    .header-logo img{width: 90%;max-width: 200px}
    .column-2{width: 100%;margin: 10px 0;}
    .border-right{border-bottom: none/*1px solid #ccc*/;padding-bottom: 10px;margin-bottom: 10px}
    .title-regiter{margin-top: 20px;display: inline-block}
    .mobile-br{display: block}
    .btn_mob_large{display: block!important;width: 100%!important}
    .profile_initial{display: none;}
    .profile,.profile_info > h2,.profile_contact{text-align: center!important}
    .acct_blk{margin: 0 5px!important;}
    .tab_navigation .tab_items li a{font-size: 14px!important;}
    
    .wrap-block .block-3-6,.wrap-block .block-3-5{display: inline-block;width: 31%;float: left;padding: 7px 1%;overflow: hidden}
    .wrap-block .block-2-3-5{display: inline-block;width: 50%;float: left;padding: 12px 0;overflow: hidden}
    .block-info{font-size: 16px;}
    
    .acct_blk > span{font-size: 16px!important}
    
}

.wrap-block{display: inline-block;width: 98%;padding: 10px 1%;cursor: pointer;border-radius: 8px;}
.wrap-block.wrap-block-dark{background-color: #f8f8f8}
.wrap-block:hover{background-color: #f1f1f1}
.wrap-block { -webkit-tap-highlight-color: #f1f1f1;}
.block-color *{color: #fff!important;}
.block-tl{display: inline-block;width: 100%;text-transform: uppercase;font-size: 13px;color: #888}
.block-info{display: inline-block;width: 100%;/*white-space: nowrap;overflow: hidden;text-overflow: ellipsis;*/}
.block-color .block-info{font-weight: 700;}
.color-amount{background-color: #2D75B2;}
.color-paid{background-color: #4B4B4D;}
.color-balance{background-color: #00A859;}
.color-due{background-color: #ED3237;}

.block-3{display: inline-block;width: 31%;float: left;padding: 12px 1%;}
.block-2{display: inline-block;width: 48%;float: left;padding: 12px 1%;}

.block-2-1{display: inline-block;width: 68%;float: left;padding: 12px 1%;}
.block-1-2{display: inline-block;width: 28%;float: left;padding: 12px 1%;}

/*desktop*/
@media screen and (min-width: 800px){ 
    .hide-mobile{display: none}
    .header-logo img{width: 200px;}
    .header-right{font-size: 16px;/*line-height: 44px*/}
    .column-5{display: inline-block;width: 19%;float: left;margin-right: 1%}
    .column-4{display: inline-block;width: 24%;float: left;margin-right: 1%}
    .column-3{display: inline-block;width: 32%;float: left;margin-right: 2%}
    .column-2{display: inline-block;width: 49%;float: left;margin-right: 1%}
    .column-1-2{display: inline-block;width: 29%;float: left;margin-right: 2%}
    .column-2-1{display: inline-block;width: 69%;float: left;}
    .border-right{border-right: 1px solid #ccc;margin-right: 20px;padding-right: 20px}
    .title-regiter{margin-top: 110px;}
    .profile{text-align: center}
    
    
    .wrap-block .block-3-6{display: inline-block;width: 14.5%;float: left;padding: 12px 1%;overflow: hidden}
    .wrap-block .block-3-5,.wrap-block .block-2-3-5{display: inline-block;width: 18%;float: left;padding: 12px 1%;overflow: hidden}
    .wrap-block .block-3-6{display: inline-block;width: 14%;float: left;padding: 12px 1%;overflow: hidden}
    .block-tl{display: inline-block;width: 100%;font-size: 13px;text-transform: uppercase}
    .block-info{font-size: 18px}
    
}
/*css*/
body {
    font-size: 14px;
    font-family: 'Roboto',Arial, Helvetica, sans-serif;
    color: #162d3d;
    margin: 0 auto;
    height: 100%;
}
.wrap-page{display: block;width: 98%;margin: 0 auto;max-width: 1100px;}
hr{width: 100%;
            height: 1px;
            display: block;
            margin: 10px auto;
            background-color: #ddd;border: 0}
.main-ligth{
    background-color: #f0f4f7;
}
.main{background: #c8dfde;
      background: -webkit-linear-gradient(left, #c8dfde , #edddd4);
      background: -o-linear-gradient(right, #c8dfde, #edddd4);
      background: -moz-linear-gradient(right, #c8dfde, #edddd4);
      background: linear-gradient(to right, #c8dfde , #edddd4);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8dfde', endColorstr='#edddd4',GradientType=0 );}  
.main-dark {    
    background: #76abcc;
    background: -moz-linear-gradient(top, #76abcc 20%, #446786 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#76abcc), color-stop(100%,#446786));
    background: -webkit-linear-gradient(top, #76abcc 20%,#446786 100%);
    background: -o-linear-gradient(top, #76abcc 20%,#446786 100%);
    background: -ms-linear-gradient(top, #76abcc 20%,#446786 100%);
    background: linear-gradient(top, #76abcc 20%,#446786 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76abcc', endColorstr='#446786',GradientType=0 );
}
p{font: 14px "Roboto",Arial;line-height: 24px;color: #666}
h1,h2,h3,h4,h5{font-family: "Roboto",Arial;font-weight: 300}
h1{font-size: 32px;line-height: 36px}
h2{font-size: 22px;line-height: 26px}
h3{font-size: 18px;line-height: 20px}
h4{font-size: 16px;line-height: 18px}
h1.large{font-size: 42px;line-height: 46px;}
a{color: #3899ec}
#content,#header,#footer{display: inline-block;width: 100%;}
#content{margin: 30px auto;}
/*header*/
#header{background-color: #fff;padding: 7px 0;display: inline-block;width: 100%;box-shadow: 0 1px 5px 0 rgba(41,85,115,.21);}
.header-logo{display: inline-block;width: 48%}
.header-right{display: inline-block;width: 50%;text-align: right}

.profile{background-color: #606062;display: inline-block;width: 100%;padding: 10px 0}
.profile_picture{color: #fff;font-size: 40px;display: inline-block;vertical-align: middle}
.profile_initial {
    background-color: #f90aa2;
    font: 32px Arial;
    color: #fff;
    width: 60px;
    height: 60px;
    text-align: center;
    border: 4px solid #fff;
    border-radius: 50%;
    line-height: 60px;
    margin: 0 16px 0 0;
}
.profile_info{color: #fff;display: inline-block;vertical-align: middle;}
.profile_info > h2{font-size: 32px;line-height: 38px;font-weight: 500;text-align: left}
.profile_contact{display: inline-block;width: 100%;text-align: left}
.profile_contact li{display: inline-block;color: #f1f1f1;margin-right: 10px;padding-right: 10px;border-right: 1px solid #f1f1f1}
.profile_contact li:last-child{border-right: none;margin-right: 0;padding-right: 0}

.acct_blk{display: inline-block;padding: 15px;margin: 0 10px;background-color: #fff;border-radius: 8px;text-align: center}
.acct_blk > span{font-weight: 700;font-size: 18px}
/*footer*/
.copy{color: #999;font-size: 13px}

/*block*/
.blk-left,.blk-left-width{display: inline-block}
.blk-left-width{width: 100%}
.blk{display: block}
.wrinlineblk {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
}
.wrap-inline-block-align-top {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: 100%;
}
.blkleftstr {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.block-left-start-top{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    overflow: hidden;
}
/*cols*/
.wrap-columns{display: inline-block;width: 100%;margin-bottom: 10px}
.column-half{display: inline-block;width: 49%;float: left;margin-right: 1%}
.wrap-columns .column-2:last-child,.wrap-columns .column-3:last-child,.column-half:last-child{margin-right: 0;}

.bloquet{display: inline-block;margin: auto;background-color: rgba(255,255,255,1);padding: 25px 5%;width: 90%;border-radius: 18px;}
/*login*/
.wrap-icon-user{font-size: 120px;text-align: center;}
#btn_login{display: inline-block;width: 50%}
.wrap-content-login{display: inline-block;width: 96%;max-width: 900px;margin: 0 auto}
.wrap-content-register{display: inline-block;width: 96%;max-width: 500px;margin: 0 auto}

/*form*/
input.hasDatepicker{
    background-image: url(../images/icon/ic_calendar.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 24px;
}
.label-auto label,.label-auto input[type=text],.label-auto input[type=password],.label-auto input[type=number],.label-auto select {width: auto!important;}
.label-auto label{margin-right: 5px}
.label-width label{width: 100%}
.holder{display: inline-block;width: 100%;margin-bottom: 10px;}
input[type="checkbox"]{width: auto!important;margin-right: 10px;}
input[type=text], input[type=password], input[type=number] {
    background-color: #f8f8f8;
    border-bottom: 1px solid #D1D2D2;
    padding: 10px 2%;
    width: 95%;
    font-size: 16px;
    display: inline-block;
    border-radius: 0;
    font-weight: 300;
}
input[type=text]:hover, input[type=password]:hover, input[type=number]:hover{border-bottom: 1px solid #000}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus{border-bottom: 1px solid #3899ec}
textarea {
    background: #f1f1f1;
    padding: 10px 2%;
    display: inline-block;
    border: 0;
    width: 96%;
    font: 14px "Roboto";
    resize: none;
    border-radius: 4px;
}
label,.label {
    font-weight: 300;
    text-align: left;
    line-height: 38px;
    color: #162d3d;
    display: inline-block;
}
.required{position: relative;padding-left: 10px;}
.required:before{color: red;content: '*';width: 16px;height: 16px;position: absolute;left: 0;}
input[type=button], input[type=submit], input[type=reset],button,a.btn {
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    background-color: #3899ec;
    color: #f1f1f1;
    border: 1px solid #3899ec;
    margin: 10px 0;
    border-radius: 1000px;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover,button:hover,a.btn:hover{opacity: 0.7}
.btn_red{
    background: red!important;
    border: 1px solid red!important;
    color: #fff!important;
}
.btn_green{
    background: rgb(41,171,105)!important;
    border: 1px solid rgb(41,171,105)!important;
    color: #fff!important;
}
.btn_accent{
    background: #f90aa2!important;
    border: 1px solid #f90aa2!important;
}
.btn_small{
    padding: 3px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    background-color: orange;   
    border: 1px solid orange;
    color: #fff;
    border-radius: 4px;
}
select {
    padding: 10px 2%;
    width: 95%;
    margin: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../images/icon/ic_select.png)no-repeat 98% center #eee;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
}
input:focus,textarea:focus,button:focus{outline:medium none;}
.btn_nice_wh{border: 1px solid #3899ec;color: #3899ec;padding: 10px 16px;border-radius: 18px;display: inline-block}
.btn_nice_wh:hover,.btn_nice_wh.active{background-color: #3899ec;text-decoration: none;color: #fff}
.label-info{display: block;width: 94%;background: #f1f1f1;padding: 8px 3%;border-radius: 4px;min-height: 16px;font-size: 16px;}
.label-info-auto{display: inline-block;background: #f1f1f1;padding: 8px;border-radius: 4px;min-height: 16px;font-size: 16px;}
.ctrlBtn {
    display: inline-block;
    text-align: center;
    padding: 4px;
    margin: 0 0 0 5px;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

/*messages*/
.form_error{background-color: rgb(255, 200, 200);color: rgb(183, 32, 32);display: block;border: 1px solid rgb(234, 151, 151);padding: 5px 10px;margin-bottom: 7px}
.error{	
    border: #ea9797 1px solid;
    background-color: #ffc8c8; background-image: url("../images/box-icons/box-error.png");background-repeat: no-repeat;background-position: 10px center;
    color: #b72020;
}
.ok{
    background-image: url("../images/box-icons/box-ok.png");background-repeat: no-repeat;background-position: 10px center;
    border: #9ed47f 1px solid; background-color: #e3ffcd;
    color: #268f1d;
}
.warning{
    background-image: url("../images/box-icons/box-cancel.png");background-repeat: no-repeat;background-position: 10px center;
    border: #eac45c 1px solid; background-color: #fff0bc;
    color: #b14e0a;
}
.notify{
    background-image: url("../images/box-icons/box-notify.png");background-repeat: no-repeat;background-position: 10px center;
    border: #4e99e5 1px solid; background-color: #a5cff3;
    color: #0a5db1;
}
.msg_tip{
    display:none;
    position:fixed;
    padding:10px 30px 10px 70px;
    top:10px;
    right:10px;
    z-index: 3000;  	
    box-shadow: 1px 1px 10px #999999;
    height: 50px;
    font-weight: bold;
}
.msg{
    padding:10px 20px 10px 70px;
    text-align:center;	
    box-shadow: 1px 1px 10px #999999;
    min-height: 50px;
    font-weight: bold;
    max-width: 240px;
    display: inline-block;
}
.msg_tip span{position: absolute;right: 10px;top: 10px;cursor: pointer}
/*ajax form*/
.my_loading{display: inline-block;width: 100%;min-width: 32px;height: 32px;text-align: center;margin: 0 auto;background-image: url(../images/icon/loading.gif);background-position: center;background-repeat: no-repeat;background-size: 32px 32px;}
.overlay{position: absolute;width: 100%;height: 100%;background-color: rgba(255,255,255,0.6);left: 0;top: 0;background-image: url(../images/icon/loading.gif);background-size: 100px 100px;background-position: center center;background-repeat: no-repeat;}
/*popup*/
.wrap-popup{background: #fff;border-radius: 0 0 8px 8px;padding: 10px}
.pp_overlay{background-color:rgba(0,0,0,0.7);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7c000000', endColorstr='#7c000000');display:none;left:0;position:fixed;top:0;width:100%;height:100%;z-index:9999;overflow:auto;}
.appendedContainer{position:absolute;z-index:10000;left:50%;top:0;display:none;}
.bar-title{padding-bottom:8px;position:relative;display:block;background: #f1f1f1;padding: 10px;border-radius: 8px 8px 0 0;border-bottom: 1px solid #ddd}
.p_title{font:22px Arial;display:inline-block;max-width: 85%}
.btn-close{display: inline-block;float: right;color: #666;font-size: 16px;width: 16px;height: 16px;padding: 5px;text-align: center; }
/*tabs*/
.tab_navigation{display: inline-block;width: 100%;margin: 10px 0;/*border:1px solid #ddd;background: #606062;*/border-radius: 8px;}
.tab_navigation .tab_items{display: inline-block;margin: 5px 5px 0 5px;width: 100%;white-space: nowrap;overflow-y: auto;padding: 0 0 16px 0;}
.tab_navigation .tab_items li{display: inline-block;}
.tab_navigation .tab_items li a{display: inline-block;padding: 15px;border-radius: 4px 4px 0 0;font-size: 14px;color: #fff;text-transform: uppercase}
.tab_navigation .tab_items li a.active,.tab_navigation .tab_items li a:hover{background: #f90aa2;color: #fff}
.tab_navigation .tab_content{display: inline-block;width: 96%;background: #fff;padding: 10px 2%;border-radius: 0 0 8px 8px}