body,html { height: 100%; font-family: 'Montserrat', sans-serif; color: black; font-size: 0.9rem;  background-color: #f0f0f0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }
.dark{ background-color: #111 !important; color: white; }


/* HEADERS */
h1{ font-size: 28px; letter-spacing: 0.03em; font-weight: 600; }
h2{ font-size: 18px; line-height: 25px; letter-spacing: 0.02em; }
h3{ font-size: 15px; color: rgba(125,125,125,0.8); text-transform: uppercase; padding:0; margin:0; }
h4{ font-size: 12px;  text-transform: uppercase;  padding:0; margin:0; color: rgba(125,125,125,0.8);}
h5{ font-size: 12px;  text-transform: uppercase;  padding:0; margin:0; color: rgb(0, 0, 0); }
.dark h5{  color: rgba(255,255,255,.8); }
.dark h4{  color: rgba(255,255,255,.8); }



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; }
#cke_1_contents a { text-decoration: underline;}
/* LAYOUT */
.menu{ position:absolute; left:0px; top: 55px; background-color: #FFFFFFAA; width:62px; bottom:0px;}
.menu-button-section-parent{ text-align: center; padding: 8px 0; }
.dark .menu{ background-color: #000000AA; }
.menu_btn{}
.menu_icon{ opacity: 0.5; margin: 5px; width:30px;  }
.dark .menu_icon{ -webkit-filter: invert(100%); filter: invert(100%);}
.menu1{ margin-left: -250px;}
.menu-button-selected{ background-color: rgba(0, 0, 0, 0.04) !important; }
.menu-button-selected .menu_icon{ opacity:1; }
.content{ position:fixed; left:63px; top:55px; bottom:0; right:0px; overflow: auto; background-color: rgba(255,255,255,0.4);  padding-top: 5px;  }
.dark .content{ background-color: rgba(0,0,0,0.9) !important; }
.content1{ left:0px; padding:0;  }
.page{display: table; width: 100%; height: 100%;  } 
.side-bar{ display: table-cell; width:280px; vertical-align: top;  }
.page-content{ display: table-cell; overflow: auto;}
.padding-content{ /*padding: 0 60px;*/ }
.padding-header{ /*padding-top: 65px;*/ }
.top-title{ height:95px; padding: 0 20px; }
.header{ height:55px; 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: 30px; width: 35px; margin-top:-4px; }
.bg-cover{background-position: center center; background-size: cover;}
.text-selection{ color: rgba(0,0,0, 0.8); }
.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.3)  !important;  color:rgba(0,0,0, 0.3);}
.form-check-input:checked{  background-color: rgba(125,125,125,0.8); border-color:  rgba(125,125,125,0.8) ; } 
.dark .form-control{ background-color: rgba(125,125,125,0.3); color:white; border-color:#666; }
.dark .form-check-input { background-color: #527d7d; }
select.form-select.form-select-sm { padding-right: 30px !important;}
.ck-editor__editable{background-color:#CCC !important;}
.dark .ck-editor__editable{background-color:#666 !important;}
/* COLORS */
.bg-header{ background-color:#999;  }
.dark .bg-header{ background-color:#93adad44; }
.icon-header{width:20px; height: 20px; display: inline-block; }
.bg-header-template{ background-color: rgba(125,125,125,0.15);  }
.bg-primary{ background-color:  rgba(253, 253,253,0.8) !important; }
.bg-secondary{ background-color: #e1e1e1 !important; }
.bg-dark{ background-color: rgba(125,125,125,0.8) !important; color:white; } 
.dark .bg-dark{ background-color: rgba(0,0,0,0) !important; }
.bg-info{ background-color: rgba(125,125,125,0.3) !important; color:white; }
.dark .bg-primary{ background-color: rgba(35,35,35,.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: #527d7d; border:none; }
.btn-secondary{ background-color: rgba(255,255,255,1); color:#999; border:solid 1px #999; }
.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: rgba(120,120,120,0.5);}
.dataTables_length { display: none;}

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

/* CARDS */
.card{background-color:  rgba(90,90,90,0.07); border:none; border-radius: .5em;margin: 10px; padding:5px 0;}
.dark .card{background-color:  rgba(120,120,120,0.30);}
.card-title{ text-transform: uppercase; background-color:  rgba(120,120,120,.2); padding:8px 15px; }
.dark .card-title{background-color:  rgba(120,120,120,0.30); padding-left:10px; }
.card-body{ padding-top: 0px; } 
#menu_site{ background-color: white; z-index: 10; } 
.dark #menu_site{ background-color: black;} 
#menu_site .card{background-color:  rgba(120,120,120,0); }
#menu_site .card-title{background-color:  rgba(120,120,120,0); font-weight: 500; padding-top: 10px; font-size: 0.85rem;  }
#menu_site h4{line-height: 1.3em;  }
#menu_content{ position:relative;}
#menu_content h3{  line-height: 1.3em;  }
#menu_content i{ line-height: 0.5em;} 
#projects_content{padding: 0 0 0 20px; overflow-x: hidden; }
.square:before{ content: "";  display: block; padding-top: 100%;  }
/* FORMS */
.form-group{ margin-bottom: 16px; }
.form-control{ font-size: 11px; line-height: 2em; }
label{ opacity: 0.5; text-transform: uppercase; font-size: 11px; font-weight: 600; 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: #527d7d; }
.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(/css/icons/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; }
.block-highlight{ z-index: 40; position:absolute; left:0; top:0; width:100%; height: 100%; }
.block-highlight:hover{ box-shadow: inset 0px 0px 15px #9999FF;  }

/* 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: 100%; }
.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_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; border:2px dashed #999; }
.image_upload_prev { position:relative; background-color: transparent !important; 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;}


/* 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("/css/images/background.jpg");  height: 100%;  background-position: center center; background-repeat: no-repeat;  background-size: cover;
}
.welcome_bg {  background-image: url("/css/images/welcome.jpg"); background-position: center center; background-repeat: no-repeat;  background-size: cover; padding: 100px 0; }
.welcome-name{ font-size: 30px; font-weight: 500; text-align: center; padding: 50px 0;  }
.dark .welcome_bg {  background-image: url("/css/images/welcome_dark.jpg");  height: 100%;  background-position: center center; background-repeat: no-repeat;  background-size: cover; }
.dark .bg-white{ background-color: #FFFFFF33 !important; }
.bg-user{ height:200px;   margin-bottom: -70px; }
#user_image_welcome{width: 85% !important; margin: 0 auto;}
#breadcrumb_content{ color:white; }
.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; } 

.ck.ck-editor__top.ck-reset_all {
  z-index: var(--ck-z-modal);
  position: sticky;
	top:-22px;
}
  .ck .ck-sticky-panel__placeholder{top:100px !important;}
  .ck-sticky-panel__content, .ck-sticky-panel__content_sticky{top:50px !important;}
  
/* BOTONES ADMIN AC*/
.boton_home_activo, .boton_carrusel_activo{background-color:#000; color:#FFF;}

.link-selected{ filter: contrast(1.75) brightness(20%); font-weight: bold !important; border-bottom:1px solid #00000011;  background-color:#00000022; }
.dark .link-selected{ background-color:#666;  filter: contrast(1.75) ; }
.project_list_item{  margin-bottom: 20px;  height:270px; border-radius:10px; margin-left: 10px; margin-right: 10px; overflow: hidden; padding-top: 150px; }
.project_list_title_project{ padding:1px 6px; background-color: #999; font-weight:bold; color:white; border-radius:3px;  text-transform: uppercase; width:fit-content;   font-size: 13px; margin: 15px 15px 0px;   }
.project_list_title{ margin:10px 15px; font-size: 18px;   }
.project_list_item_img{ position:absolute; left:0px; top:0px; width:100%;  height:150px; object-fit: cover; }
.color-verde{color: #93adad;}


.design_template-container{ position:absolute; top:0px; left:0px; z-index:41; width:auto; transform: translate(-50%, 0);left: 50%; -ms-transform: translate(-50%, 0); text-align: center; pointer-events:none; overflow:hidden; height:50px; height:300px;  }
.design_template-button{ position:relative; top:5px; left:0px; z-index:41; width:100%; text-align: center; pointer-events:all; opacity:0.7;  cursor:pointer;     width: fit-content; margin: 0 auto; }
.design_template-controls_cont{ position:relative;   width:390px;  display: inline-block; z-index:2000; margin:0 auto; pointer-events:all;  backdrop-filter: blur(6px); display:none; }
.design_template-controls{ position:absolute; width:390px;margin: 20px 0; padding:20px; }
.design_template-controls button{  pointer-events:all;  }
.design_template-controls-im{height:150px; overflow: hidden; }
.design_template{ overflow: hidden; margin-top:15px;  height: 100%; }
.button_delete_template{ pointer-events:all;     z-index: 50;  }


#cke_1_top {position:sticky; top: -20px; z-index: 1;}


.menucomp-button{ font-size: 11px; }
.nav-item .active{ color: #333; position:relative; }
.nav-item .active:after{ content:"▂▂"; position:absolute; top:20px; left:50%; transform: translate(-50%,0%)!important; }
.dark .nav-item .active{ color: white; }



/* Tooltip container */
.toolt{
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.toolt .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgba(33, 33, 33, 0.7);
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  top: 5px;
  left: 105%;
  z-index: 130;
}

/* Show the tooltip text when you mouse over the tooltip container */
.toolt:hover .tooltiptext {
  visibility: visible;
}