/* CSS NIT TERROR */


/*
============================================
------------------ GENERAL -----------------
============================================
*/

header, footer, body { /* Header y footer */

    width: 100%;
    background: rgb(50, 75, 100);
    font-size: 14px;

}

* { /* Todo */

    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

/*
============================================
------------------ TEXTO -------------------
============================================
*/

.tred, .tred:hover { /* Texto rojo */

    color: red;

}

.tyellow, .tyellow:hover { /* Texto rojo */

    color: yellow;

}

.twhite, .twhite:hover { /* Texto de la web (general) */

    color: white;

}

.tblack, .tblack:hover { /* Texto de la web (general) */

    color: black;

}

.tobject { /* Texto de la web (general) */

    padding: 10px;

}

.tnunderline:hover {

    text-decoration: none;

}

/*
============================================
------------------ TITLE -------------------
============================================
*/

.title { /* Formato de texto del título */

    font-size: 27px;

}

.title2 { /* Formato de texto del título */

    font-size: 20px;

}

/*
============================================
----------------- HEADER -------------------
============================================
*/

.header { /* Formato de texto del título */

    font-size: 32px;

}

.header:hover {

    text-decoration: none;

}

/*
============================================
-------------------- NAV -------------------
============================================
*/

.custom-toggler .navbar-toggler-icon {

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

}

div.dropdown-menu {

    position: absolute;
    z-index: 10;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.8);
    list-style-type: none

}

/*
============================================
---------------- BACKGROUND ----------------
============================================
*/

.bggrey {

    background-color: grey;
    
}

.bgboxlight {

    background: rgb(0, 160, 200);
    background: rgba(0, 160, 200, 100%);

}

.bgcontent {

    background: rgb(255, 255, 255);

}

.bgboxdark { /* Incripciones y registros */

    background: rgb(90, 107, 200);

}

.bgtransparent {

    background-color: transparent;

}

.bglightblue-20 {

    background: rgb(0, 160, 200);
    background: rgba(0, 160, 200, 20%);

}

.bglightred-20 {

    background: rgb(200, 0, 0);
    background: rgba(200, 0, 0, 20%);

}

.bglightgreen-20 {

    background: rgb(0, 200, 0);
    background: rgba(0, 200, 0, 20%);

}

.bgbluegreen-20 {

    background: rgb(0, 200, 130);
    background: rgba(0, 200, 130, 20%);

}

.bglightred-50 {

    background: rgb(200, 0, 0);
    background: rgba(200, 0, 0, 40%);

}

.bclightgrey, .bclightgrey:hover { /* Texto de la web (general) */

    border-color: lightgrey;

}

/*
============================================
------------------- LINK -------------------
============================================
*/

.link {

    padding: 10px;

}

.link a {

    text-decoration: none;

}

.link:visited {

    text-decoration: none;

}

.link:hover {

}

div.link a:hover {

    text-decoration: none;

}

.link:active {

    text-decoration: none;

}

/*
============================================
---------------- ALINEACIÓN ----------------
============================================
*/

.pad {

    padding-left: 1%;
    padding-right: 1%;

}

.margins {

    margin: 0% 5%;

}

.topmargin {

    margin-top: 5px;

}

.bottommargin {

    margin-bottom: 5px;

}

/*
============================================
------------------ IMAGEN ------------------
============================================
*/

img.igLogo, img.webLogo, img.waLogo {
    
    max-height: 32px;
    width: auto;
    height: auto\9;

}


/*
============================================
----------------- DISPLAY ------------------
============================================
*/

.ocult {

    display: none;

}

.inline {

    display: inline-block;

}

.sdshow {

    display: none;

}

/*
============================================
------------------ BORDER ------------------
============================================
*/

.leftborder {

    border-left: solid black 1px;

}

.bottomborder {

    border-bottom: solid black 1px;

}

.invbottomborder {

    border-bottom-color: transparent;

}

.transparentborder {

    border: solid rgba(255, 255, 255, 0%) 1px;

}

.bcred, .bcred:hover { /* Texto rojo */

    border-color: red;

}

.bcyellow, .bcyellow:hover { /* Texto rojo */

    border-color: yellow;

}

.bcwhite, .bcwhite:hover { /* Texto de la web (general) */

    border-color: white;

}

.bcblack, .bcblack:hover { /* Texto de la web (general) */

    border-color: black;

}

/*
============================================
------------------ EDITOR ------------------
============================================
*/

[contenteditable][placeholder]:empty:before {

  content: attr(placeholder);
  position: absolute;
  color: grey;
  background-color: transparent;

}

.editor{

    height: 400px;
    display: block;
    border: 2px solid lightblue;
    margin-top: 4px;
    background-color: white;
    color: black;
    overflow: auto;

}

/*
============================================
----------------- NAV TAB ------------------
============================================
*/

.tabsHor .nav-tabs {

   overflow-x: auto;
   overflow-y:hidden;
   flex-wrap: nowrap;

}

/*
============================================
----------------- NAV TAB ------------------
============================================
*/

/* Anchura y Altura */
.custom-scroll ::-webkit-scrollbar {

  width: 5px;
  height: 5px;

}

/* Camino */
.custom-scroll ::-webkit-scrollbar-track {

  box-shadow: inset 0 0 10px lightgrey; 
  border-radius: 10px;

}
 
/* Línea */
.custom-scroll ::-webkit-scrollbar-thumb {

  background: grey; 
  border-radius: 10px;

}

/* línea :hover */
.custom-scroll ::-webkit-scrollbar-thumb:hover {

  background: #b30000; 

}

/*
============================================
-------------- ILLUMINATION ----------------
============================================
*/

.ilumina:hover {

    background: lightgrey;

}

/*
============================================
----------------- SCROLL -------------------
============================================
*/

.scroll {

    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

}

/*
============================================
--------------- SMALL DEVICES --------------
============================================
*/

@media screen and (max-width: 991px) {

    header, footer, body {

        font-size: 30px;

    }

    .header {

        font-size: 50px;

    }

    .title {

        font-size: 40px;

    }

    .title2 {

        font-size: 35px;

    }

    .sdocult {

        display: none;

    }

    .sdshow {

        display: block;

    }

    img.igLogo, img.webLogo, img.waLogo {
    
        max-height: 30px;
        width: auto;
        height: auto\9;

    }

    .progress {

        margin-top: 15px;

    }

}