@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons-Regular.woff) format('woff'),
    url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

*{margin: 0px; font-family: 'Roboto', sans-serif; text-decoration: none; font-style: normal; outline: none !important; color: #415764; }
body{background: #f1f1f1; font-size: 15px; }

.app{position: fixed; height: 100%; width: 100%; display: grid; grid-template-columns: 280px 1fr;}

.menu_pan{height: 100%; background: white;}

.main_pan{height: 100%; background:;}
.main_menu{background: white; overflow: auto;}
.main_menu .small_menu{float: left; overflow: auto;}
.main_menu .small_menu a{display: block; padding: 19px; float: left; overflow: auto; font-weight: 900; font-size: 15px;}
.main_menu .small_menu a i{font-weight: 900; display: block; float: left; margin-right: 5px; font-size: 18px;}

.master_data{float: left; overflow: auto; padding-top: 11px;}
.master_data a{display: block; float: left; background: #FF006A; overflow: auto; color: white; padding: 7px; font-weight: 900; border-radius: 20px; padding-right: 15px; padding-right: 15px; margin-left: 12px;}
.master_data a i{float: left; color: white; display: block; font-weight: 900; font-size: 18px;}

.seem{position: fixed; height: 100%; width: 100%; background: #13191d; opacity: 0.8; z-index: 10; display: none;}

.filter{display: grid; grid-template-columns: 1fr 1fr 50px; padding: 10px; gap: 10px;}
.filter select{ padding: 5px;}
.filter option{ padding: 10px;}

.err{ background: #ffeef1; border: solid 1px #df455e; padding: 14px; display: inline-block; }
.err .error{color: #df455e; font-size: 42px; }

.wait{padding-top: 250px; text-align: center; }
.wait .wai{width: 80px;}
.okpay{display: block; float: right; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 30px; font-size: 12px; font-weight: 900; color: white; background: #12d76eff;}
.notpay{display: block; float: right; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 30px; font-size: 12px; font-weight: 900; color: #8da0ac; background: #E2E9F0;}

.view_add{position: fixed; height: 100%; width: 100%; background: white; z-index: 20; top: 100%; overflow: auto;}

.view{position: fixed; height: 100%; width: 100%; background: white; z-index: 20; top: 100%;  overflow: auto;}
.view_top_bar{overflow: auto; border-bottom: solid 1px #c4d2df; width: 100%; position: fixed; z-index: 21; background: white;}
.view_top_bar b{display: block; float: left; padding: 19px; font-size: 18px; font-weight: 900; color: #FF006A;}
.view_top_bar i{display: block; float: right; padding: 15px; font-size: 28px; font-weight: 900;}

.gr4{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;}

.open_view{ height: 100%; overflow: auto; text-align: center;}
.open_view .ico{display: inline-block; height: 100px; width: 100px; border-radius: 12px; overflow: hidden; background: silver; border:solid 5px white;}
.open_view .ico a{background: #415764; opacity: 0.6; height: 100%; width: 100%; display: inline-block; }
.open_view .ico a i{color: white; font-size: 35px;}
.open_view .ico em{padding: 8px; display: inline-block; color: white; background: #415764; opacity: 0.6; width: 100%;}

.open_view .icoo{display: inline-block; height: 200px; border-radius: 12px; overflow: hidden; background: silver; border:solid 5px white;}
.open_view .icoo a{background: #415764; opacity: 0.6; height: 100%; width: 100%; display: inline-block; }
.open_view .icoo a i{color: white; font-size: 35px;}
.open_view .icoo em{padding: 8px; display: inline-block; color: white; background: #415764; opacity: 0.6; width: 100%;}

.open{padding: 15px; padding-top: 25px; padding-bottom: 50px; }
.open h1{padding: 25px; font-weight: 900;}
.open h1 b{display: block; font-weight: 900; color: #FF006A; font-size: 17px;}
.idd p{text-align: right;}
.idd span{display: block; text-align: left; font-weight: 900;}
.inp{padding: 10px;}
.inp input{padding: 10px; border: solid 1px #415764;}

.butt{padding: 10px; padding-left: 25px; background: #E2E9F0; padding-right: 25px; border: 0px; font-weight: 900; font-size: 17px; border-radius: 20px;}

.view_in{display: grid; grid-template-columns: 1fr 3fr; height: 100%; }
.bd{font-weight: 900; color: #FF006A; font-size: 22px; display: block; padding-top: 10px;}
.loc{font-weight: 900; color: #415764; font-size: 22px; display: block; padding-top: 10px;}
.bd span{font-weight: 900; color: #415764; font-size: 22px; padding-top: 10px;}
.sep_v{height: 61px; }
.list_view{height: 100%; border-right: solid 1px #c4d2df; overflow: auto;}
.list_view a{display: block; padding: 10px; border-bottom: solid 1px #e0ebf5; font-weight: 900; overflow: auto;}
.list_view a i{display: block; height:50px; width:50px; background: #FFDFEC; float: left; border-radius: 50px; }
.list_view a span{display: block; float: left; padding: 10px; padding-top: 5px;}
.list_view a u{display: block; font-weight: normal; padding-top: 5px; color: #8da0ac;}

.menu_list{padding-right: 25px;}
.menu_list a{display: block; overflow: auto; border-radius: 0px 30px 30px 0px; padding-left: 20px; margin-bottom: 12.9px; }
.menu_list .ahome{display: block; background: #ffdfec; overflow: auto; border-radius: 0px 30px 30px 0px; padding-left: 20px; margin-bottom: 8px; }
.menu_list .ahome em{ color: #FF006A; }
.menu_list .ahome i{ color: #FF006A; }
.menu_list a i{font-weight: 600; padding: 12px; border-radius: 25px; float: left; color:; background: #ffdfec;}
.menu_list a em{font-weight: 900; padding: 14px; float: left;}

.search_pac{display: block; padding: 14px; float: left; overflow: auto; font-weight: 900; font-size: 15px;}
.search_pac i{font-weight: 900; display: block; float: left; margin-right: 5px; font-size: 20px; padding-top: 7px;}
.search_pac input{font-weight: 900; border: solid 1px #415764; font-size: 14px; padding: 7px; padding-left: 20px; padding-left: 20px; border-radius: 15px; background: url(../src/seek.png) no-repeat center right; background-size: auto 60%; }

.logo{padding: 20px; padding-top: 40px; font-weight: 900;}
.logo span{display: block; font-size: 18px; font-weight: 900; color: #FF006A;}

.footer{position: fixed; width: 100%; background: white; bottom: 0px;}
.footer span{display: block; float: right; padding: 10px; }

.gr2{display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.gr3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;}
.sh{box-shadow: 0px 5px 20px #d0d7d8;}

.split{height: 190px; overflow: auto;}

.pan_in{padding: 21px; padding-bottom: 5px;}
.card{ padding: 25px; background: white; border-radius: 15px;}
.card h2{ display: inline-block; padding-bottom: 15px; font-weight: 900;}
.card em{ display: block; padding-top: 12px; font-size: 22px; font-weight: 900;}
.card h2 i{ padding: 14px; background: pink; font-size: 25px; display: inline-block; border-radius: 25px; margin-right: 5px;}
.tito{ font-size:14px; font-weight: 900; padding: 10px; border-bottom: solid 1px #9fb5ca;}
.list_pan{background: white;}
.item{display: block; padding: 10px; border-bottom: solid 1px #c8e4ff; display: grid; grid-template-columns: 20px 1fr 1fr 30px;}
.item b{display: block; text-align: center; }

.carousel{background: transparent;}
.cardo{ padding: 20px; background: white; line-height: 26px; border-radius: 5px; width: 350px; margin-right: 16px;}
.cardo a{ display: inline-block; padding: 4px; padding-left: 16px; padding-right: 16px; border-radius: 20px; background: #e2e9f0; font-weight: 900; margin-top: 7px; }

*:focus{outline: none}

.card .h1{ border-bottom: solid 4px #e47ce4; }
.card .h1 i{ color: #cf66cf; background: #f5d5f5; }

.card .h2{ border-bottom: solid 4px #6aa9e4; }
.card .h2 i{ color: #5295d3; background: #c8e4ff; }

.card .h3{ border-bottom: solid 4px #bde476; }
.card .h3 i{ color: #a1ce4f; background: #ebffc5; }

.sh{box-shadow: 0px 2px 7px #b4c2c4;}

.forma{width: 500px; margin: auto;}
.forma i{display: block; padding-bottom: 12px;}
.forma p{ padding-top: 12px; line-height: 19px;}
.forma .in{display: grid; grid-template-columns: 1fr; gap: 3px; padding-top: 30px;}
.forma .in input{font-weight: 900; border: solid 1px white; background: white; font-size: 16px; padding: 17px; padding-left: 20px; padding-left: 20px; border-radius: 8px; margin-bottom: 12.5px; box-shadow: 0px 2px 7px #b4c2c4; color: #FF006A; box-sizing: border-box;}
.forma .in textarea{font-weight: 900; border: solid 1px white; box-shadow: 0px 2px 7px #b4c2c4; font-size: 14px; padding: 17px; padding-left: 20px; padding-left: 20px; border-radius: 8px; background-size: auto 60%; margin-bottom: 12.5px;}
.forma .in input:focus{ border: solid 1px #FF006A; }
.forma .in select{font-weight: 900; border: solid 1px #415764; font-size: 16px; padding: 17px; padding-left: 20px; padding-left: 20px; border-radius: 8px; background-size: auto 60%; margin-bottom: 12.5px; background: white;}
.pic_pic{ margin-bottom: 15px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px;}
.pic_pic label{height: 120px; padding: 15px;  border-radius: 10px; display: block; background:white; background-size: 70%; box-shadow: 0px 5px 20px #d0d7d8; text-align: center; overflow: hidden; text-align:center;}
.pic_pic label img{max-width: 100%; max-height: 100px; border-radius: 9px; padding-bottom: 15px;}
.cop{height: 0px;overflow: hidden;}
.forma .save_comm{display: inline-block; background: #FF006A; overflow: auto; color: white; padding: 12px; font-weight: 900; border-radius: 30px; padding-right: 25px; padding-left: 25px; margin-left: 12px; border: 0px;}
.loo{ }
.cn{text-align: center; }
.lo_img{width:40px; padding-top: 200px;}

.cen{padding: 20px; padding-top: 100px; text-align: center; font-size: 17px;}
.cen b{display: block; padding: 10px;}
.cen a{display: inline-block; background: #FF006A; box-shadow: 0px 5px 20px #d0d7d8; padding: 10px; color: white; font-weight: 900; padding-left: 20px; padding-right: 20px; border-radius: 25px;}

.loading{position: fixed; height: 100%; width: 100%; background: url(../lo.svg) no-repeat center center white; background-size: 40px auto; z-index: 30;}

.label_user{position: relative; top:-60px; display:inline-block; overflow: auto;  padding-left:16px; transition: all .3s ease; font-size:18px; cursor: text;}
.label_user b{background:white; display: block; padding:5px; float: left; }
.forma .label_user i{display: block; float: left; font-size: 30px; background:white; padding-bottom: 0px;}
.forma input:focus + label, .forma input:valid + label{top:-80px; font-size:14px;}
.forma input:focus{ font-size:18px;}
.forma input:focus + label b{color:#FF006A;}
.forma input:focus + label i{color:#FF006A;font-size: 22px;}

@media (max-width:500px ) {
	.forma{width: 100%; margin: auto; padding: 25px;}
}