@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Overpass:wght@600&family=Russo+One&family=Gochi+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
* {
    margin: 0;
    padding: 0;
}
.roboto {
    font-family: 'Roboto', sans-serif;
}
.poppins {
    font-family: 'Poppins', sans-serif;
}
.russo {
    font-family: 'Russo One', sans-serif;
}
.architects {
    font-family: 'Architects Daughter', sans-serif;
}
.gochi {
    font-family: 'Gochi Hand', sans-serif;
}
.body {
    background: transparent;
    font-family: 'Poppins', sans-sarif;
    padding: 10px;
    display: grid;
    place-items: center;
    /* min-height: 100vh;
    width: 100vw; */
    /* overflow: hidden; */
}
.styletext {
    color: black;
    text-shadow: #e0e0e0 1px 1px 0;
    font-family: 'Russo One', sans-serif;
}
.homepagebtn {
    float: left;
    background: linear-gradient(109.476575498932deg, rgba(86, 216, 228, 1) 5.911420204978038%, rgba(159, 1, 234, 1) 95.95534407027817%);
}
.containerregister {
    background: linear-gradient(106.85050265418704deg, rgba(245, 196, 207, 1) 12.604319180087849%, rgba(66, 82, 183, 1) 86.3232064421669%);
    border: 5px #8e44ad;
    border-style: double;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}
.hide {
    display: none;
    visibility: hidden;
}
.validity {
    color: #fff;
    text-align: center;
    height: 22px;
    background-size: 50px;
}
.validity p {
    background-color: #d0bdf4;
    color: #494d5f;
    font-size: 15px;
    width: 50%;
    margin: auto;
    border-radius: 5px;
}
.logoleft,
.logoright {
    display: grid;
    place-items: center;
    text-align: center;
    border: 2px dotted #130f40;
    cursor: pointer;
    background-color: #686de0;
    color: #fff;
    border-radius: 10px;
}
.subdomain {
    width: 100%;
    height: auto;
    background: linear-gradient(109.476575498932deg, rgba(226, 235, 239, 1) 5.911420204978038%, rgba(208, 218, 224, 1) 95.95534407027817%);
    border-radius: 20px;
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    letter-spacing: 1px;
    padding: 5px;
}
.urlcopybtn {
    text-decoration: none;
    margin-left: 10px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px;
    border: none;
    background: linear-gradient(109.476575498932deg, rgba(86, 216, 228, 1) 5.911420204978038%, rgba(159, 1, 234, 1) 95.95534407027817%);
    box-shadow: 1px 5px 5px #30336b;
}
.urlcopybtn:hover {
    background: linear-gradient(93.17983011986416deg, rgba(86, 216, 228, 1) 8.158857979502196%, rgba(159, 1, 234, 1) 35.83089311859443%);
}
.submitbtn {
    margin-left: 30px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px;
    border: none;
    background: linear-gradient(87.33257467859107deg, rgba(159, 1, 234, 1) 9.881039531478777%, rgba(86, 216, 228, 1) 53.878111273792086%);
    box-shadow: 1px 5px 5px #30336b;
    transition-duration: 5s;
    transition-delay: 2s;
}
.submitbtn:hover {
    background: linear-gradient(-259.82125448301946deg, rgba(159, 1, 234, 1) 52.7086383601757%, rgba(86, 216, 228, 1) 84.9194729136164%);
}
label {
    margin: 0 10px;
}
input {
    border: none !important;
    outline: none !important;
}
#ed {
    font-size: 12px;
}
.logotop {
    width: 100%;
    height: 150px;
}
.centercontain {
    margin-top: 3px !important;
    width: 100%;
}
.nameofiti {
    position: relative;
}
.sfbtnnameofiti {
    position: absolute;
    top: 0;
    right: 0;
}
.sfbtnnameofiti button {
    border: 1px solid royalblue;
    font-size: 10px;
    height: 20px;
    width: 20px;
}
#itiname {
    text-align: center;
    height: 95px;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 25px;
    margin-bottom: 10px;
}
.pimageupload {
    cursor: pointer;
    width: 100%;
    height: 150px;
    border: 2px dotted green;
    text-align: center;
    display: grid;
    place-items: center;
    background-image: url("principal.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    background-color: #95afc0;
}
.pimageupload span {
    color: mistyrose;
    background-color: #000;
    padding: 5px;
    opacity: 0.54;
}
.principalmsg {
    cursor: text;
    text-align: center;
    border: none;
    width: 100%;
    height: 158px;
    resize: none;
    outline: none;
    position: relative;
}
.pmsg {
    position: relative;
}
.sfbtnprincipalmsg {
    position: absolute;
    bottom: 0;
    right: 0;
}
.sfbtnprincipalmsg button {
    font-family: 'Courier New', sans-serif;
    border: 1px solid royalblue;
    font-size: 10px;
    height: 20px;
    width: 20px;
}
.listprincipal {
    padding: 5px 1px;
    width: 100%;
    outline: none;
    border: none;
    background-color: #A28089;
    color: #edf7f9;
    border-radius: 5px;
}
.ccright {
    padding: 5px 1px;
    width: 100%;
    margin: 2px;
    outline: none;
    background: linear-gradient(109.476575498932deg, rgba(47, 128, 140, 1) 5.911420204978038%, rgba(99, 36, 126, 1) 95.95534407027817%);
    color: #edf7f9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.staff,
.trainees {
    cursor: pointer;
    width: 100%;
    height: 100px;
    display: grid;
    place-items: center;
    background-color: lightgray;
    position: relative;
}
.notice {
    cursor: pointer;
    margin-top: 20px;
}
#textareanotice {
    width: 300px;
    height: 200px;
    outline: none;
    padding: 5px;
}

.sfbtnnotice {
    position: absolute;
    top: 0;
    right: 0;
}
.sfbtnnotice button {
    font-family: 'Courier New', sans-serif;
    border: 1px solid royalblue;
    font-size: 10px;
    height: 20px;
    width: 20px;
}
.noticeboard span {
    position: absolute;
    top: 0;
    font-size: 18px;
    left: 50%;
    transform: translate(-50%);
}
.bottombtn {
    position: absolute;
    bottom: 0;
}
.footerarea {
    margin: 20px 0;
    align-items: center;
    text-align: center;
}
.footerarea button {
    border: none;
    width: 50%;
    padding: 10px;
    color: #fff;
    background: linear-gradient(109.476575498932deg, rgba(1, 96, 186, 1) 5.911420204978038%, rgba(0, 0, 0, 1) 95.95534407027817%);
    border-radius: 30px;
    box-shadow: 1px 5px 5px #30336b;
}
.dummystaff {
    height: 70px;
    width: 50px;
    background-color: #a28089;
    background-image: url("staff.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    position: absolute;
    left: 100px;
    top: 5px;
    text-align: center;
    font-weight: bold;
}
.dummystaff span:nth-child(1) {
    position: absolute;
    bottom: -12px;
    left: 25%;
    font-size: 9px;
}
.dummystaff span:nth-child(2) {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 9px;
}
.dummytrainee {
    background-image: url("avatar.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 70px;
    width: 50px;
    background-color: #a28089;
    float: left;
    position: absolute;
    left: 100px;
    top: 5px;
    text-align: center;
    font-weight: bold;
}
.dummytrainee span:nth-child(1) {
    position: absolute;
    bottom: -12px;
    left: 25%;
    font-size: 9px;
}
.dummytrainee span:nth-child(2) {
    position: absolute;
    bottom: -20px;
    left: 25%;
    font-size: 9px;
}
.implinks {
    cursor: pointer;
    background: linear-gradient(109.476575498932deg, rgba(236, 236, 236, 1) 5.911420204978038%, rgba(195, 229, 248, 1) 95.95534407027817%);
    border-radius: 10px;
    text-align: center;
    padding: 5px;
}
.pgallery {
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    background: linear-gradient(109.476575498932deg, rgba(229, 221, 204, 1) 5.911420204978038%, rgba(113, 190, 194, 1) 95.95534407027817%);
}
.impdocs {
    cursor: pointer;
    background: linear-gradient(109.476575498932deg, rgba(231, 244, 245, 1) 5.911420204978038%, rgba(78, 240, 250, 1) 95.95534407027817%);
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    /* height: 200px; */
}
.implinks span,
.impdocs span,
.pgallery span {
    display: block;
    padding: 10px;
    color: #ffffff;
    letter-spacing: 2px;
    border-radius: 50%;
}
.implinks span {
    background: linear-gradient(117.63074603564246deg, rgba(1, 96, 186, 1) 54.226451927769645%, rgba(0, 0, 0, 1) 100.11530014641288%);
}
.impdocs span {
    background: linear-gradient(-245.52590012616378deg, rgba(0, 0, 0, 1) -1.6453147877013166%, rgba(1, 96, 186, 1) 60.05993777452416%);
}
.pgallery span {
    background: linear-gradient(117.63074603564246deg, rgba(1, 96, 186, 1) 54.226451927769645%, rgba(0, 0, 0, 1) 100.11530014641288%);
}
.tv,
.lud {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
    background-image: url("bgfoot.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 3px solid rgba(34, 236, 68, 0.849);
    border-radius: 50%;
    cursor: not-allowed;
}
.containerelements {
    background: linear-gradient(109.476575498932deg, rgba(248, 198, 215, 1) 5.911420204978038%, rgba(175, 233, 249, 1) 95.95534407027817%);
    background-position: center;
    background-size: 100%;
}
.containerelement {
    text-align: center;
    background: linear-gradient(109.476575498932deg, rgba(236, 236, 236, 1) 5.911420204978038%, rgba(195, 229, 248, 1) 95.95534407027817%);
    background-position: center;
}
.containerelement h2 {
    padding: 20px;
    font-family: Arial, sans-serif;
}
.form-check input[type="checkbox"] {
    height: 30px;
    width: 30px;
}
.elementsbtn {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50% !important;
    padding: 5px !important;
    color: seashell !important;
    font-weight: bold !important;
    outline: none;
    border: 2px solid goldenrod !important;
}
.addrowbtn {
    float: right;
    background-image: url("btnbgelements.png");
}
.subbtn {
    background-image: url("subbtn.png");
}
.editbtn,
.editbtnpl,
.editbtnNB,
.editbtnIL,
.editbtnABT,
.resetbtn {
    background-image: url("editbtn.png");
}
.delbtn {
    background: linear-gradient(112.42586192135172deg, rgba(152, 39, 9, 1) 42.436401903367496%, rgba(0, 2, 0, 1) 100.4227672035139%);
}
.stleftlogodiv {
    position: relative;
}

.imgdisplay {
    height: 80px;
    width: 80px;
}
.leftlogoimagestatic {
    z-index: -1;
    opacity: 0;
    top: 0;
    position: absolute;
}
#ul {
    font-size: 12px;
}
.resize {
    resize: none !important;
}
/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}
#textarea {
    /* resize: none; */
    font-size: 12px;
    height: 100%;
    border: none;
    outline: none;
    width: 100%;
    text-align: center;
}
.datefiled {
    text-align: left;
}
#fromdate {
    margin-bottom: 2px;
}
#sonwb {
    font-size: 11px;
}
.logout {
    font-size: 12px;
    padding: 2px 5px;
    background-color: red;
    color: honeydew;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    position: absolute;
    right: 5px;
}
#ex1 {
    height: 200px;
    width: 500px;
    background-color: lightsalmon;
    color: black;
}
.smb {
    color: white;
}
.fpassdiv{
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 10px;
}
.fpassanchor{
    text-decoration: underline;
    color: red;
    font-size: small;
}