/* latin-ext */
@font-face {
  font-family: 'Crete Round';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/creteround/v9/55xqey1sJNPjPiv1ZZZrxK1-4bHoLlxN.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crete Round';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/creteround/v9/55xqey1sJNPjPiv1ZZZrxK1-4b_oLg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Crete Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/creteround/v9/55xoey1sJNPjPiv1ZZZrxK110b3wKg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crete Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/creteround/v9/55xoey1sJNPjPiv1ZZZrxK170b0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: 'Crete Round', serif;
    color: black;
    height: 100%;
    width: 100%;
    background:white;
}

h1 {
    font-size: 1.4rem!important;
}
h2 {
    font-size: 1.2rem!important;
}

h3 {
    font-size: 1rem!important;
}

a {
    text-decoration: none;
    cursor: pointer
}

  a.Button:hover {
            border: solid 2px black;
            color: black;
        }

   .Button {
            border: solid 2px #336699;
            font-size: 14px;
            background-color: #336699;
            color: white;
            border-radius: 2px;
            padding: 3px;
            min-width:120px;
        }

  .Button:hover {
            border: solid 2px black;
            color: black;
        }
.nav-link {border-right:1px solid black;border-left:1px solid black;}

.dashlink, .dashlink:visited, .dashlink:hover {
    color:black!important;
}

.dashlink:hover {
    color:blue!important;
}


form, .ui-page {
    height: 100%;background:white;
}

.thetip {
    font-weight:normal;
    font-size:12px;
}

    .Statistics {
            margin: 3px;
            width: auto;
            border: solid 2px #c0c099;
            float: left;
            margin-bottom:40px;
        }
    
.PersonalQs {
            margin: 3px;
            padding: 4px;
            width: auto;
            border: solid 2px #99c0c0;
             float: right;
             min-width:250px;
             margin-bottom:40px;
        }

.DaysGoneBy {   margin: auto;
                margin-left:360px;
            padding: 4px;
            width: auto;
            border: solid 2px #99c0c0;
             position:absolute;
             min-width:250px;
             max-width:320px;
}

        .Menu {
            z-index:1;
            display: none;
            position: absolute;
            background: white;
            background-color:#c0c0c0;
            text-align:left;
            line-height:60%;
            border:#c0c0c0 2px solid;
            margin-left:45px;
        }
        .Menu a {
                padding-left:5px;padding-right:5px;font-weight:normal;
                font-size: 14px;
                color:white;
                display:block;
            }
        .Menu a:visited {
                color:white;
            }
        .Menu a:hover {
                color:blue;
                background-color:white;
            }
        .MenuContainer {
            display: block;
            position:absolute;
            cursor: pointer;
            padding-left: 5px;
            margin:auto;
        }
        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
            display: block;
        }
        /* Rotate first bar */
        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
            background-color:red;
        }
        /* Fade out the second bar */
        .change .bar2 {
            opacity: 0;
        }
        /* Rotate last bar */
        .change .bar3 {
            background-color:red;
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }


.Footer {
    position: fixed;
    min-height: 22px;
    left: 0px;
    bottom: 0px;
    background-color: #e4e5f9;
    width: 100%;
    padding-top: 4px;
    text-align: center;
    
}
    .Footer a {
        color:#272b6a !important
    }


.ErrorRed {color:red}

#LeftSide {
    float: left;
    width: calc(100% - 340px);
    min-width: 400px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    padding-left:10px;
}

#FullWidthDiv {
    width: calc(100% - 40px);
    min-width: 400px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    padding-left:10px;
}

#FormDiv {
    border: solid 1px white;
    height: calc(100% - 6px);
    max-height: calc(100% - 6px);
    width: calc(100% -6px);
}

    #FormDiv h1 {
        border-bottom: 2px solid #f0f0f0;
        vertical-align: middle;
        padding-bottom: 5px;
    }
    
        #Header1 {
  animation: 12000ms ease-out 12 color-change;
  animation-delay:500ms;margin-left:50px;font-size:45px;
}
                #Header2 {
  animation: 8000ms ease-in 16 color-change;
  animation-delay:1500ms;font-size:35px;
}
                #saying {
  animation: 15000ms ease-in 8 color-change;
  animation-delay:2500ms;display:block;text-align:right;
  padding-right:50px;
}
        
@keyframes color-change {
0% {color: #0000FF;}
5% {color: #0033FF;}
10% {color: #0066FF;}
15% {color: #0099FF;}
20% {color: #00FFFF;}
25% {color: #00FFCC;}
30% {color: #00FF99;}
35% {color: #00FF66;}
40% {color: #00FF33;}
45% {color: #00FF00;}
50% {color: #000000;}
55% {color: #300000;}
60% {color: #500000;}
65% {color: #800000;}
70% {color: #A00000;}
75% {color: #C00000;}
80% {color: #FF0000;}
85% {color: #FF3300;}
90% {color: #FF6600;}
95% {color: #FF9900;}
100% {color: #0000FF;}
}


#saying {
    color: darkblue;
    width: 100%;
    display: block;
    font-size: 14px;
    text-align: right;
    margin: 0px;
}

#Questions {
    display: none;
}

#Header {
    width: 40%;
    display: inline-block;
    padding-left: 20px;cursor:pointer;
}

#RightSide {
    padding: 0px;
    max-width: 320px;
    width: 320px;
    float: right;
    text-align: center;
}

#fvwQuestion {
    width: 98%;
}


#lblUserOut {
    color: blue;
}

.dropEffect-10 {background-color: #000000;color: White;}
.dropEffect-9 {background-color: #330000;color: White;}
.dropEffect-8 {background-color: #660000;color: White;}
.dropEffect-7 {background-color: #990000;color: White;}
.dropEffect-6 {background-color: #CC0000;color: White;}
.dropEffect-5 {background-color: #FF0000;color: White;}
.dropEffect-4 {background-color: #FF3300;color: White;}
.dropEffect-3 {background-color: #FF6600;color: White;}
.dropEffect-2 {background-color: #FF9900;color: White;}
.dropEffect-1 {background-color: #FFCC00;color: White;}

.dropEffect0 {background-color: #0000FF;color: White;}
.dropEffect1 { background-color: #0033FF;color: White;}
.dropEffect2 {background-color: #0066FF;color: White;}
.dropEffect3 {background-color: #0099FF;color: White;}
.dropEffect4 {background-color: #00CCFF;color: White;}
.dropEffect5 {background-color: #00FFFF;color: White;}
.dropEffect6 {background-color: #00FFCC;color: White;}
.dropEffect7 {background-color: #00FF99;color: White;}
.dropEffect8 {background-color: #00FF66;color: White;}
.dropEffect9 {background-color: #00FF33;color: White;}
.dropEffect10 {background-color:#00FF00;color: White;}

.effect-10 {color: #FF00FF;}
.effect-9 {color: #C71585;}
.effect-8 {color: #FF007F;}
.effect-7 {color: #FF0000;}
.effect-6 {color: #FF2400;}
.effect-5 {color: #E52B50;}
.effect-4 {color: #C04000;}
.effect-3 {color: #FFD700;}
.effect-2 {color: #5D8AA8;}
.effect-1 {color: #007FFF;}
.effect0 {color: #0000FF;}
.effect1 {color: #77B5FE;}
.effect2 {color: #008080;}
.effect3 {color: #6666FF;}
.effect4 {color: #3333FF;}
.effect5 {color: #0066FF;}
.effect6 {color: #0066CC;}
.effect7 {color: #008000;}
.effect8 {color: #3EB489;}
.effect9 {color: #00FF00;}
.effect10 {color: #66FF00;}

.dayeffect-10 {background-color:#f0f0f0;border:solid 2px  #FF00FF!important;}
.dayeffect-9 {background-color:#f0f0f0;border:solid 2px  #C71585!important;}
.dayeffect-8 {background-color:#f0f0f0;border:solid 2px  #FF007F!important;}
.dayeffect-7 {background-color:#f0f0f0;border:solid 2px  #FF0000!important;}
.dayeffect-6 {background-color:#f0f0f0;border:solid 2px  #FF2400!important;}
.dayeffect-5 {background-color:#f0f0f0;border:solid 2px  #E52B50!important;}
.dayeffect-4 {background-color:#f0f0f0;border:solid 2px  #C04000!important;}
.dayeffect-3 {background-color:#f0f0f0;border:solid 2px  #FFD700!important;}
.dayeffect-2 {background-color:#f0f0f0;border:solid 2px  #5D8AA8!important;}
.dayeffect-1 {background-color:#f0f0f0;border:solid 2px  #007FFF!important;}
.dayeffect0 {background-color:#f0f0f0;border:solid 2px  #0000FF!important;}
.dayeffect1 {background-color:#f0f0f0;border:solid 2px  #77B5FE!important;}
.dayeffect2 {background-color:#f0f0f0;border:solid 2px  #008080!important;}
.dayeffect3 {background-color:#f0f0f0;border:solid 2px  #6666FF!important;}
.dayeffect4 {background-color:#f0f0f0;border:solid 2px  #3333FF!important;}
.dayeffect5 {background-color:#f0f0f0;border:solid 2px  #0066FF!important;}
.dayeffect6 {background-color:#f0f0f0;border:solid 2px  #0066CC!important;}
.dayeffect7 {background-color:#f0f0f0;border:solid 2px  #008000!important;}
.dayeffect8 {background-color:#f0f0f0;border:solid 2px  #3EB489!important;}
.dayeffect9 {background-color:#f0f0f0;border:solid 2px  #00FF00!important;}
.dayeffect10 {background-color:#f0f0f0;border:solid 2px  #66FF00!important;}

.effect-10 :visited {    color: #000000;}
.effect-9 :visited {    color: #330000;}
.effect-8 :visited {    color: #660000;}
.effect-10:visited {    color: #FF00FF;}
.effect-9 :visited {    color: #C71585;}
.effect-8 :visited {    color: #FF007F;}
.effect-7 :visited {    color: #990000;}
.effect-6 :visited {    color: #CC0000;}
.effect-5 :visited {    color: #FF0000;}
.effect-4 :visited {    color: #FF3300;}
.effect-3 :visited {    color: #FF6600;}
.effect-2 :visited {    color: #FF9900;}
.effect-1 :visited {    color: #6600FF;}
.effect0 :visited {    color: #0000FF;}
.effect1 :visited {    color: #0033FF;}
.effect2 :visited {    color: #9966FF;}
.effect3 :visited {    color: #6666FF;}
.effect4 :visited {    color: #3333FF;}
.effect5 :visited {    color: #0066FF;}
.effect6 :visited {    color: #0066CC;}
.effect7 :visited {    color: #00FF99;}
.effect8 :visited {    color: #00FF66;}
.effect9 :visited {    color: #00FF33;}
.effect10 :visited {    color: #00FF00;}


  .ckeditor {
            width: calc( 100% - 360px);
            height: 300px;
            margin:auto;

        }
     #DashDiv {
            text-align: left;
            width: calc( 100% - 380px);
            margin: auto;
            margin-left: 10px;
        }

            #DashDiv .ui-btn {
                width: 264px !important
            }

.NarrowText {
    width:130px !Important
}

/* For Desktop View */
@media screen and (min-width: 1024px) {
    #FormDiv {
        background-color: white;
    }
     #Header1 {
            margin-left:50px;
        }
}

#LoginForm {text-align:center;width:280px;max-width:280px;border:solid:3px #c0c0c0;display:none;}

/* For Tablet View */
@media screen and (min-device-width: 640px) and (max-device-width: 1024px) {
    .HeaderLine {width:100%;display:inline-block;text-align:center; }
    #FormDiv {
        background-color: white;
    }
    #LoginForm {text-align:center;width:100%;max-width:100%;}

    #RightSide {
        padding: 10px;
        max-width: 98%;
        width: 98%;
        float: none;
        text-align: center;
    }

    #LeftSide {
        float: none;
        width: 95%;
        min-width: 320px;
        margin: 0px;
        padding: 0px;
        text-align: right;
        padding-left:0px;
    }

    #TheList {
        padding-left: 15px;
    }

    #fvwQuestion {
        width: 98%;
    }
    #Header1 {
            margin-left:50px;
        }

}

/* for desktop narrow */

@media screen and (min-width: 420px) and (max-width: 768px) {
    .HeaderLine {width:100%;display:inline-block;text-align:center; }

  #Header1 {
            margin-left:50px;
        }
      .ckeditor {
            width: 100%);
            height: 300px;
        }
    #DashDiv {
        width: 100%;
    }
    #LoginForm {text-align:center;width:100%;max-width:100%;}
    #Header {
        width: 100%;
        display: block;
        padding-left: 0px;
    }

    #saying {
        width: 100%;
        display: block;
        text-align: right;
    }

    #RightSide {
        padding: 10px;
        max-width: 98%;
        width: 98%;
        float: none;
        text-align: center
    }

    #LeftSide {
        float: none;
        width: 95%;
        min-width: 310px;
        margin: auto;
        padding: 0px;
        text-align: center;
    }

    #TheList {
        padding-left: 15px;
    }

    .PersonalQs {width:calc(100% - 12px);float:none;}

    .Statistics {width:calc(100% - 12px);float:none;}

    .Message {
        display:block;
        width:320px;
    }
    
}
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-width: 640px) {
    .HeaderLine {width:100%;display:inline-block;text-align:center; }
    .Menu {
        width:80%;
    }
        .Menu a {
            font-size:30px;
            line-height:130%
        }
      .ckeditor {
            width: 100%);
            height: 300px;
        }
    #DashDiv {
        width: 100%;
    }
    #LoginForm {text-align:center;width:100%;max-width:100%;}
    #Header {
        width: 100%;
        display: block;
        padding-left: 0px;
    }

    #saying {
        width: 100%;
        display: block;
        text-align: center;
    }

    #RightSide {
        padding: 10px;
        max-width: 98%;
        width: 98%;
        float: none;
        text-align: center
    }

    #LeftSide {
        float: none;
        width: 95%;
        min-width: 310px;
        margin: auto;
        padding: 0px;
        text-align: center;
    }

    #TheList {
        padding-left: 15px;
    }

    .PersonalQs {width:calc(100% - 12px);float:none;}

    .Statistics {width:calc(100% - 4px);float:none;}

    .Message {
        display:block;
        width:320px;
    }
    
}

.InputButton {
  display: inline-block;
  padding: 0.55rem 0.75rem;
  border-radius: 10rem;
  color: black;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin:8px;
  background-color:#4393FF;
  
}
.InputButton:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue/*#0cf*/;
  border-radius: 10rem;
  z-index: -2;
}
.InputButton:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: green /*   #008fb3 */;
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
}
.InputButton:hover {
  color: white;
  background-color:#336699;
}
.InputButton:hover:before {
  width: 100%;
}