body,html { height: 100%; font-family: 'Sora', sans-serif; background-color: white; color: #444; font-size: 0.95rem; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; background-image: url("/css/images/bg.jpg");  height: 100%; overflow: auto;  background-position: center center;  background-size: cover; }
.page{ }
.dark{ color: rgb(0, 0, 0); background-color: rgba(0,0,0,0.4); }
.bg-dark{ background-image: url("/css/images/bg-dark.jpg"); }

/* HEADERS */
h1{ font-size: 2em; letter-spacing: 0.2em; font-weight: 600; font-family: 'Mitr', sans-serif;  font-weight: 500; }
h2{ font-size: 1.4em; font-weight: 700; opacity:0.9;  font-family: 'Mitr', sans-serif;  font-weight: 300; letter-spacing: 0.05em; }
h3{ font-size: 1.1em; padding:0; margin:0; opacity:0.6;  font-family: 'Mitr', sans-serif;   font-weight: 300; letter-spacing: 0.02em; color:rgb(27, 27, 27);}
h4{ font-size: 1em;  padding:0; margin:0; opacity:0.5;  font-family: 'Mitr', sans-serif;  font-weight: 300; letter-spacing: 0.02em; color:rgb(32, 32, 32);}
h5{ font-size:1em;   padding:0; margin:0; opacity:0.5;  font-family: 'Mitr', sans-serif;  font-weight: 300; letter-spacing: 0.05em; color:rgb(24, 24, 24);}
.dark h3{  color: rgba(255, 255, 255, 0.8); }
.dark h5{  color: rgba(255, 255, 255, 0.8); }
.dark h4{  color: rgba(255, 255, 255, 0.8); }



.bg-blur{ backdrop-filter: blur(6px); }

.iconify{ font-size: 1.25rem;   color:#12303b; opacity:0.7; cursor:pointer; }
.dark .iconify{  color:#959595; }
.far{ color: #12303b; }
.dark .far{  color:#BBB; }
.bi{ color: #12303b; }
.dark .bi{  color:#BBB; }
.dark .welcome_bg img{ background: white; }
.dark .text-dark{ color:#ddd !important; }
.dark .header-image{ background-color: white; }
.dark .btn-check:checked+.btn-outline-primary { background-color: #666; }

a{  text-decoration: none; color: inherit; }
a:hover{  text-decoration: none; color: inherit; }
i{ opacity:0.6; }
button{ border:none; }
.text-big{ font-size: 1.3em; }
.text-huge{ font-size:2em; }
/* LAYOUT */
.menu{ position:fixed; left:0px; top: 66px;px; background-color: #f1f1f118; width:250px; bottom:0px;     overflow-y: auto; overflow-x:hidden; }
.menu_btn{}
.menu1{ margin-left: -250px;}
.content{ position:fixed; left:250px; top:66px; bottom:0; right:0px; overflow: auto; background-color: rgba(255,255,255,0.4);  padding: 0px 24px;  }
.dark .content{ background-color: rgba(0,0,0,0.1) !important; }
.content1{ left:0px; padding:0;  }
.page{display: table; position:relative; width: 100%; } 
.side-bar{ display: table-cell; width:280px; vertical-align: top;}
.dark  .side-bar{ background: linear-gradient(180deg, rgba(100,100,100,0) 0%,  rgba(100,100,100,.6) 100%)  !important; }
.page-content{ display: table-cell; overflow: auto;}
.padding-content{ padding: 0 20px 20px; }
.content1 .padding-content{ padding: 0px; }
.padding-header{ /*padding-top: 65px;*/ }
.top-title{ height:95px;}
.header{ height:65px; display: table;}
.header-height{height:65px; } 
.bi{ font-size: 1em; line-height: inherit; vertical-align: top; }
.asIcon{ position:relative; height: 16px; width:16px; }
.header-image{ height: 40px; width: 40px;  }
.bg-cover{background-position: center center; background-size: cover;}
.text-selection{ color: rgba(0,0,0, 1); font-weight: bold; }
.dark .text-selection{ color:  rgba(255,255,255, 0.8); }
.badge{padding: 7px; font-size: 1em; }
.badge-disabled{ background-color:rgba(255,255,255, 0.5)  !important;  color:rgba(0,0,0, 0.5);}
.form-check-input:checked{   background-color:  #3a6963;  border-color:  rgba(125,125,125,0.8) ; } 
.form-control{ color: rgba(0,0,0,0.5); }
.dark .form-control{  background-color:  #222;  color:white; border-color:#666; }
.dark .form-check-input { background-color: rgba(255,255,255,.3); }
.ck-editor__editable{background-color:#CCC !important;}
.dark .ck-editor__editable{background-color:#666 !important;}



/* COLORS */
.bg-header{  background-color: rgba(255, 254, 254, 0.527); }
 .dark .bg-header{ background-color: rgba(183, 187, 202, 0.1); background: rgb(100,99,116);
background: linear-gradient(179.5deg, rgba(200,200,200,.2) 0%, rgba(200,200,200,0) 100%); }
.icon-header{width:20px; height: 20px; display: inline-block; }
.bg-header-template{ background-color: rgba(125,125,125,0.15);  }
.bg-primary{ background-color: rgb(256,256,256,0.4) !important; backdrop-filter: blur(6px); }
.bg-secondary{ background-color: rgba(255, 255, 255, 0.418) !important; }
.bg-dark{ background-color: rgba(167, 227, 255, 0.8) !important; color:white; }
.bg-info{ background-color: rgba(162, 229, 255, 0.3) !important; color:white; }
.dark .bg-primary{ background-color: rgba(26, 26, 26, 0.8) !important;}
.dark .bg-secondary{ background-color: rgba(15,15,15,.8) !important; }
.dark h2{color:#ddd;}
.dark label{color:#eee;}
.btn-primary{ background-color: #3a6963; border:none; }
.btn-secondary{ background-color: rgba(255,255,255,1); color:#999; border:solid 1px #999; }
.dark  .btn-primary{ background-color: rgba(0,0,0,0.5); color:rgba(255,255,255,70%); border:solid 1px rgba(255,255,255,70%); }
.dark  .btn-secondary{ background-color: rgba(0,0,0,1); color:#FFF; border:solid 1px #FFF; }
.btn-outline-primary { color: rgba(120,120,120,0.5); } 

.badge{ background-color: #3a6963;}

.projects_content{max-width: 1100px !important; margin: 0 auto;}
.border-primary{ border-color:rgba(0,0,0,0.15) !important; }
.dark .border-primary{ border-color:rgba(255,255,255,.3) !important; }

/* CARDS */
.card{ background-color: rgba(41, 106, 129, 0.04) !important;  border:none; border-radius: 0.2em; margin:10px;   }
.dark .card{background-color:  rgba(120,120,120,0.20); backdrop-filter: blur(6px);}
.card-title{ font-family: 'Mitr', sans-serif;  text-transform: uppercase; padding: 7px; background-color:rgba(0,0,0,0.075);  color:white; padding-left:10px; border-radius: 0.2em; letter-spacing:0.1em; }
.dark .card-title{background-color:  rgba(120,120,120,0.30); padding-left:10px; }
.card-body{ padding-top: 0px;    } 
.dark .card-body{ padding-top: 0px;  background: linear-gradient(105deg, rgba(217,231,235,.1) 0%, rgba(255,255,255,.0) 48%, rgba(217,231,235,.1) 100%)  !important;  } 

.app_list label{ font-size: 300; line-height: 1em; font-size: 0.8rem;}

/* FORMS */
.form-group{ margin-bottom: 10px; }
.form-control{ font-size: 0.85rem; line-height: 2em; }
label{ opacity: 0.5; font-size:0.8rem;  font-weight: 400; padding-left:6px; }
.btn{  text-transform: uppercase;  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; line-height: 2em;  }
.btn:hover { color: inherit;}
.btn-group{padding: 3px;  border-radius: 6px; }
.btn-group .btn{ line-height: 1em; font-size: 9px; border:none; }
.btn-group .btn .active{ line-height: 1em; font-size: 9px; background-color: #507D7D; }
.btn-group>:not(.btn-check)+.btn {  background-color:#DCDCDC; color: #9B9B9B; }
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle{ rgba(120,120,120,0.5); }
.btn-check:checked+.btn-outline-primary{  background-color:  #a7bbcc;  }
.btn-group label{ opacity: 1; }
.btn-outline-primary:hover { color: #fff; background-color: rgba(0,0,0,0.3); border-color: rgba(0,0,0,0.5); }
.btn-primary:hover { color: #fff; background-color: rgba(0,0,0,0.3); border-color: rgba(0,0,0,0.5); }
select{ background: url(/material/select_icon.png) no-repeat right #ddd; -webkit-appearance: none;padding-right: 15px !important;}
.select-small{ line-height: 1em; padding: 3px 15px 3px 5px !important; display:inline-block; }

/* LISTS */
.layout_card .list_container:after { content: "";  display: block;  }
.layout_card .list_container{ overflow: hidden; }
.layout_card .list_img:after { content: "";  display: block;  padding-bottom: 45%; }
.layout_card .list_img{  background-position: center center; background-size: cover; }
.layout_card .list_img_user{   width: 100px; height:100px; margin:1.5rem auto !important; }
.layout_card .list_container{ font-size: 1em; line-height: 1.5em;}
.layout_card .list_container h3{ font-size: 1.2em;}
.layout_list{ border-bottom: 1px solid rgba(100,100,100,0.5); }
.layout_list .list_img{  width: 100px; height:100px; background-position: center center; background-size: cover; border-radius: 50%; margin: 10px 30px; display: inline-block;   }
.list_description{ height:50px;}

/* NaV */
.nav{  margin:0; }
.nav-item{  line-height: 3.5em; text-transform: uppercase; color: #999; pooition:relative; }
.nav-item .active{ background-color: rgba(255,255,255,1); font-weight: bold; z-index:2; } 


/* IMAGE UPLOAD */ 
.image_upload { position:relative; width: 100%; max-width: 250px; margin:0 auto 15px; }
.image_upload_prev { position:relative; background-color: white; padding: 10px;  align-items: center; justify-content: center; display:flex;  }
.image_upload_prev_cont {background-color: rgba(0, 0, 0, 0.3); width:100%; margin: auto; z-index: 1; border: 2px dotted rgba(255, 255, 255, 0.3);  min-height:80px; }
.image_upload_prev img {  z-index: 2; display: block; width: 100%; max-width: 500px; height: auto;  margin: auto; }
.image_upload_drop{ position:absolute; top:0px;  width:100%; height: 100%;  z-index: 3; }
.image_upload_bar{ position:absolute; bottom:0; width:100%; border-bottom: 2px solid #00CCFF; display:none;}
.image_upload_input{  position:relative; width:auto;  margin-top: 7px;  }
.image_upload_input input{ width:100%; } 


/* VIDEO UPLOAD */ 
.video_upload { position:relative; width: 100%; max-width: 250px; margin:0 auto 15px; }
.video_upload_prev { position:relative; background-color: white; padding: 10px;  align-items: center; justify-content: center; display:flex;  }
.video_upload_prev_cont {background-color: rgba(0, 0, 0, 0.3); width:100%; margin: auto; z-index: 1; border: 2px dotted rgba(255, 255, 255, 0.3);  min-height:80px; }
.video_upload_prev img {  z-index: 2; display: block; width: 100%; max-width: 500px; height: auto;  margin: auto; }
.video_upload_drop{ position:absolute; top:0px;  width:100%; height: 100%;  z-index: 3; }
.video_upload_bar{ position:absolute; bottom:0; width:100%; border-bottom: 2px solid #00CCFF; display:none;}
.video_upload_input{  position:relative; width:auto;  margin-top: 7px;  }
.video_upload_input input{ width:100%; } 

/* DESIGN */ 
.cntb-design .cntb-prev{ border:dashed 1px #dedede; box-sizing: border-box;  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box; }
.cntb-prev-selected{ border:solid 2px #0000FF; }
.cntb-design .cntb-group{border:solid 1px #dedede; }
.cntb-group-flag{ display:none; }
.cntb-element-flag{ display:none; }
.cntb-design .cntb-group-flag{  display:block;  position:absolute; background: rgba(120,120,120,1); color:white; font-size: 9px; font-weight:bold; z-index:2; padding:1px 3px; top:-12px; }
.cntb-design .cntb-element-flag{  display:block;  position:absolute; background: rgba(120,120,120,1); color:white; font-size: 9px; font-weight:bold; z-index:2; padding:1px 3px; top:0px;}
/*.cntb-img{ height:100%; }*/



/* MODAL */
#modal_window{ position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.8); top:0px; left:0px; z-index:3; display:none; }
#modal_window_cont{ width:100%; max-width: 550px; }

/* LOGIN */
.login_bg { 
 /* background-image: url("/material/login/background2.jpg");  height: 100%;  background-position: center center; background-repeat: no-repeat;  background-size: cover; */
}
.welcome_bg { 
 /* background-image: url("/material/login/background2.jpg");  height: 100%;  background-position: center center; background-repeat: no-repeat;  background-size: cover; */
}
.bg-user{ height:200px;   margin-bottom: -70px; }

.cursor-pointer{ cursor: pointer; }





/* OPACITY */
.opacity-0 {  opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1.0; }

/* Z-INDEX */
.z-index-1 { z-index: 1; } 
.z-index-2 { z-index: 2; } 
.z-index-3 { z-index: 3; } 
.z-index-4 { z-index: 4; } 
.z-index-5 { z-index: 5; }