/* Changes 2019 */
body, html {padding: 0; margin: 0; background: #f0f0f0; font-family: 'Roboto', sans-serif; background-image: url("ray02.jpg"); background-size: cover; background-repeat: no-repeat, no-repeat, no-repeat; height: 100%; overflow: hidden;}
.containerDNI {background-color: #fff; margin-top: 0em; width: 100%; margin: 0em auto 0 auto; border-radius: 10px; }

.containerPrograms {width: 100%; border-radius: 10px;}
.icon {width: calc(16.6666666% - 10px); height: 150px; font-size: 14px; text-align: center; padding: 1em; vertical-align: middle; transition: all .3s; margin-bottom: 10px; float: left; background: #eee; box-sizing: border-box; margin-right: 10px; border-radius: 10px;}
.icon:hover {background:#CCC; border-radius: 10px;}
.icon img {width:90px; height:90px; border-radius: 10px;}
.containerTop {width: 100%; float: left; background: #f0f0f0; box-sizing: border-box; }

.containerTopDNI {width: 100%; float: left; margin-top: -14em; box-sizing: border-box; position: fixed; top: 50%; transform: translate(0%, -50%);}
.containerCenterDNI {width: 100%; float: left; background: rgba(000, 000, 000, 0.5); padding: 2em; box-sizing: border-box; position: fixed; top: 50%; transform: translate(0%, -50%);}

.containerBottomDNI {width: 100%; float: left; margin-top: 11em; padding: 1em 2em; box-sizing: border-box; position: fixed; top: 50%; transform: translate(0%, -50%);}
.containerBottomDNI p {font-size: 12px; width: 100%; text-align: center; color: #ffffff;}
.containerBottomDNI a {color: #fff;}


/*  position: fixed; top: 30%; left: 50%; */

.cTLeft {width: 40%; float: left; padding: 6px 2em; box-sizing: border-box;}
.cTLeft img {width: 100%; float: left; margin-top: 0px;}
.cTRight {width: 60%; float: left; box-sizing: border-box; background: #7dc0f2; padding: 1em 2em; text-align: right; color: #fff;}
/* .containerCenter {width: 100%; float: left; background: #fff; padding: 2em; box-sizing: border-box; border-left: 3px solid #005a80; border-right: 3px solid #005a80; border-top: 3px solid #005a80; border-bottom: 3px solid #005a80; border-radius: 10px;} */
/* .containerCenter {width: 100%; float: left; background: #fff; padding: 2em; box-sizing: border-box; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } */

.containerCenter {width: 100%; float: left; background: rgba(200, 200, 100, 0.3); padding: 2em;}

.fieldWrapperDNI {width: 100%; float: left; margin-bottom: 20px; border-radius: .5em; min-width:350px;}
.fieldWrapperDNI p { width: 50%; float: left; text-align: right; box-sizing: border-box; padding-right: 10px; padding-top: 10px; border-radius: .5em; margin-left: -11em;}
.fieldWrapperDNI input { width: 300px; float: left; box-sizing: border-box; padding: 10px; border: 1px solid #ccc; background: #fff; font-family: 'Roboto', sans-serif; font-size: 14px; transition: all .3s; border-radius: .5em;}
.fieldWrapperDNI:last-child {margin-bottom: 0px; border-radius: 10px;}
.fieldWrapperDNI input:focus {outline: none; border: 1px solid #7dc0f2; border-radius: 10px;}
/* .fieldWrapperDNI input[type="submit"] {transition: all .3s; border: none; background: #7dc0f2; color: #fff; cursor: pointer; float: left; border-radius: 10px; margin-left: 50em;} */
.fieldWrapperDNI input[type="submit"] {border: none; background: #135aa8; color: #fff; cursor: pointer;}
.fieldWrapperDNI input[type="submit"]:hover {color: #fff; background: #1c8cee; border-radius: .5em;}




.cCInnerLeftDNI {float: left; width: 100%; box-sizing: border-box; color: #fff;}
.cCInnerRightDNI {float: left; width: 50%; box-sizing: border-box; padding: 0px; background: #eee;}

.containerBottom {width: 100%; float: left; background: #f0f0f0; padding: 1em 2em; box-sizing: border-box;}
p {margin: 0; font-size: 14px;}
.containerBottom p {font-size: 12px; width: 100%; text-align: center; color: #2b84d2;}
.containerBottom a {color: #fff;}

.cCInnerLeft {float: left; width: 75%; box-sizing: border-box; padding-left: 15%; padding-right: 5%;  color: #fff;}

.cCInnerRight {float: left; width: 25%; box-sizing: border-box; padding: 15px; background: #eee;}

.fieldWrapper {width: 100%; float: left; margin-bottom: 20px; border-radius: 10px;}

.fieldWrapper:last-child {margin-bottom: 0px; border-radius: 10px;}

.fieldWrapper p {width: 40%; float: left; text-align: right; box-sizing: border-box; padding-right: 10px; padding-top: 10px; border-radius: 10px;}

.fieldWrapper input {width: 60%; float: left; box-sizing: border-box; padding: 10px; border: 1px solid #ccc; background: #fff; font-family: 'Roboto', sans-serif; font-size: 14px; transition: all .3s; border-radius: 10px;}

.fieldWrapper input:focus {outline: none; border: 1px solid #7dc0f2; border-radius: 10px;}

.fieldWrapper input[type="submit"] {transition: all .3s; border: none; background: #7dc0f2; color: #fff; cursor: pointer; float: right; border-radius: 10px;}

.fieldWrapper input[type="submit"]:hover {color: #000; background: #ccc; border-radius: 10px;}

.cCInnerRight p:first-child {margin-bottom: 20px;}
.programsHeader {margin-bottom: 20px;}
/* .programsInner {position: absolute; left: 50%; top: 50%; width: 900px; transform: translate(-50%, -50%); margin: 0; padding: 1.5em; background: #005a80; border-radius: 10px;} *//* .programsInner {position: absolute; left: 50%; top: 50%; width: 900px; transform: translate(-50%, -50%); float: left; background: #fff; padding: 2em; box-sizing: border-box; border-left: 3px solid #005a80; border-right: 3px solid #005a80; border-top: 3px solid #005a80; border-bottom: 3px solid #005a80; border-radius: 10px;} */
.programsInner {position: absolute; left: 50%; top: 50%; width: 900px; transform: translate(-50%, -50%); float: left; background: #fff; padding: 2em; box-sizing: border-box; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); border-radius: 10px;}
.programsInner p {width: 100%; float: left; color: #fff; font-size: 16px; margin-bottom: 10px;}
/* Back-button */
.programsTopButtons {width: 100%; margin: 10px 0; float: left; border-radius: 10px;}
.programsTopButtons input {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: #7dc0f2; color: #fff; padding: 8px 12px; margin-right: 5px; border: none; transition: all .3s; cursor: pointer; font-size: 16px; border-radius: 10px;}
.programsTopButtons input:hover {background: #ccc; color: #000; border-radius: 10px;}
#programs {width: 100%; float: left; margin-bottom: 20px;}
.floatLeft {float: left; width: 100%; color: #2b84d2;}
.floatLeft a {color: #fff;}
.floatLeftBottom {float: left; width: 100%; color: #000; font-size: 14px;}
.floatLeftBottom img:hover {background: #ccc; color: #000; border-radius: 10px; cursor: pointer;}
.nohover { background-color: transparent; border: none;}
.programsBottom {font-size: 12px; width: 100%; text-align: center; color: #2b84d2;}
.infoText {float: left; width: 100%; color: #aaa; font-size: 12px;}

/* End of changes 2019 */

/* Changes 2022 */
#login {border: none !important; width: 100%; height: 100%; background: rgb(51,51,51); background-image: url("ray02.jpg"); background-size: cover; background-repeat: no-repeat, no-repeat, no-repeat;}
/* End of changes 2022 */

/* DNI Changes 2023 */
hr {height: 1px; border-width: 0; color: #ccc; background-color: #ccc;}
select {padding: 0; margin: 0; background: #ffffff; font-family: 'Roboto', sans-serif;}