/*
SHADOW 1: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

SHADOW 2: box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

SHADOW 3: box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

SHADOW 4: box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

SHADOW 5: box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
*/



#LoginBody {
    min-height: 100vh;
    background: white;
}

#LoginSec {
    height: 100vh;
    min-height: 500px;
    background: rgb(240,240,240);
}
#LoginInnerDiv {
    height: 250px;  
    background: white;
    width: 350px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin: 0 auto;
    position: relative;
}
#LoginInnerDiv h1 {
    color: dimgray;
    font-size: 24px;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase;
    margin: 0 0;

    padding-top: 60px;
}
#LoginInnerDiv i {
    position: absolute;
    height: 70px;
    width: 70px;
    background: #b41932;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border: solid 5px white;
    text-align: center;
    color: white;
    font-size: 35px;
    padding-top: 13px;
    top: -35px;
    left: calc((350px / 2) - 35px);
    

}
#LoginInnerDiv input {
    width: 270px;
    height: 45px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin: 0 auto;
    display: block;
    font-size: 23px;
    font-weight: 100;
    text-transform: uppercase;
    padding-top: 1px;
    margin-top: 10px;
    text-align: center;
    border-radius: 3px;

}
#LoginInnerDiv button {
    height: 50px;
    width: 230px;
    border: none;
    text-align: center;
    background: #b41932;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     color: white;
    font-size: 25px;
    font-weight: 200;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    padding-top: 5px;

}
#LoginInnerDiv button:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background: #ea2041;
    
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

#DashboardSec {
    height: 100%;
    background: white;
    min-height: 500px;
}

.DashboardItemDiv {
    width:25vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
        cursor: pointer;
    min-height: 500px;

}
.DashboardItemDivThree {
    width: 33.333vw;
  
}

.DashboardItemDiv:hover #DashboardItemBreak{
   width: 100px;
}

.DashboardItemDiv:hover .DashboardItemInnerDiv{
    background: rgba(180, 25, 50, 0.80);
}
#DashboardItemBackgroundImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    
}
.DashboardItemInnerDiv {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    background: rgba(180, 25, 50, 0.9);
    border-right: solid 5px #b41932;
}
#DashboardItemIcon {
    font-size: 30px;
    color: white;
    display: block;
    margin-top: 90px;
    margin-left: 30px;
    
}
#DashboardItemNewIcon {
    font-size: 13px;
    position: relative;
    top: -5px;
    left: 15px;
    background: white;
    border-radius: 100px;
    color: #b41932;
    padding: 3px 10px; 
    font-weight: 400;
  
}
#DashboardItemTitle {
    font-size: 30px;
    color: white;
    font-weight: 100;
    text-transform: uppercase;
    text-align: left;
    margin-left: 30px;
    line-height: 130%;
    margin-top: 40px;
    margin-bottom: 0px;
    max-width: 400px;
    
}
#DashboardItemBreak {
    height: 1px;
    background: white;
    width: 50px;
    display: block;
    margin-top: 20px;
    margin-left: 30px;
}
#DashboardItemP {
    color: white;
    font-weight: 200;
    font-size: 13px;
    padding-left: 40px;
    padding-right: 40px;
    text-align: left;
    margin-top: 20px;
    max-width: 400px;
    display: block;
}
.DashboardItemArrow {
    font-size: 30px;
    color: white;
    position: absolute;
    bottom: 25px;
    right: 30px;
    
}

#DashboardBody {
    display: none;
    width: calc(100% - 95px);
    height: 100%;
    opacity: 0;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;
    background: white;
    padding-top: 70px;
}

#TeleTitle {
    font-size: 45px;
    font-weight: 100;
    color: #b41932;
    text-align: center;
    padding-top: 30px;
}

#TeleTable {
  width: 1000px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    margin: 0 auto;
    
    min-height: 400px;
    margin-top: 30px;
    margin-bottom: 100px;
    overflow: hidden;
    border: solid 30px white;
}
#TeleTable th {
    font-weight: 400;
    color: dimgray;
    text-transform: uppercase;
}
#TeleTable i {
   color: #b41932;
}
#TeleTable b {
    font-weight: 400;
}
#TeleTable td {
    font-weight: 300;
}


#TeleSmall {
    font-size: 15px;
    color: gray;
    padding-top: 10px;
    padding-bottom: 10px;
}
#TeleTroubleButton {
    height: 50px;
    width: 400px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background: white;
    border: none;
    color: #b41932;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    padding-top: 14px;
    cursor: pointer;
}
#TeleTroubleButtonP {
    display: none;
    text-align: left;
    font-size: 14px;
    color: black;
    width: 80%;
    margin: 0 auto;
    text-transform: none;
    padding-top: 20px;
}


#QALinkDiv {
    text-align: center;
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}
#QALinkDiv a{
  color: black;
        transition: all 0s;

}
#QALinkDiv li {
     max-width: 700px;
    margin: 0 auto;
    margin-top: 10px;
    color: gray;
    padding-right: 60px;
    text-align: left;
    padding-left: 10px;
        transition: all 0s;

    
}
#QALinkDiv i {
    font-size: 15px;
    color: #b41932;
    top: 3px;
    left: 7px;
    opacity: 0;
    transition: all 0s;
    position: relative;
}
#QALinkDiv a:hover {
       color: #b41932;
    content: 'HI';

}
#QALinkDiv li:hover i {
    opacity: 1;
}
#QATitle {
   font-size: 50px;
    font-weight: 100;
    color: #b41932;
    text-align: center;
    padding-top: 30px; 
}
#QASubtitle {
    font-size: 15px;
    color: dimgray;
    font-weight: 300;
    margin-top: -15px;
    
}

#HelpInnerDiv {
width: 800px;
    height: 400px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
    background: #b41932;
    margin-top: 30px;
    overflow: hidden;
    
}
#HelpDiv {
    width: 800px;
    height: 400px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
    background: #b41932;
    margin-top: 30px;
    
}
#HelpOuterDiv {
    min-height: 600px;
    height: calc(100vh - 60px)
    
}
#HelpTitle {
    font-size: 28px;
    font-weight: 300;
    margin:0 0;
    padding: 15px 0px;
    background: white;
    color: #b41932;
    border: solid 2px #b41932;
border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    
    
}
#HelpMFDiv {
    float: left;
    width: 300px;
    height: 300px;
    background: white;
overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    margin-top: 20px;
    margin-left: 20px;

}
#HelpMFDiv h1 {
    font-size: 23px;
    font-weight: 200;
    margin-top: 10px;
    margin-bottom: 0px;
    color: #b41932;
}
#HelpMFDiv span {
    display: block;
    font-weight: 300;
    font-size: 23px;
    text-transform: uppercase;
    padding-top: 5px;
}
#HelpMFDiv img {
    height: 125px;
    width: 125px;
    
    border: solid 5px white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    object-fit: cover;
    display: block;
    background: black;
    margin: 0 auto;
    border-radius: 50%;
margin-top: 10px

}
#HelpMFDiv button {
    height: 50px;
    width: 230px;
    background: #b41932;
    text-align: center;
    display: block;
    font-size: 25px;
    margin: 0 auto;
    color: white;
    font-weight: 200;
    padding-top: 7px;
    text-transform: uppercase;
    border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-top: 5px;
    cursor: pointer;
    border: none;

}
#HelpMFDiv button:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#HelpMFDiv small {
    display: block;
    clear: both;
    width: 100%;
    margin-top: 0px;
    font-size: 13px;
    font-weight: 300;
    color: dimgray;
}
#HelpMFDiv a {
    background: none;
    box-shadow: none;
    margin:  0 0;
    height: 0px;
    font-size: 11px;
    text-decoration: none;
    color: #b41932;
    padding-top: 5px;
    font-weight: 500;
    display: block;
    
     margin:  0 auto;
    width: 150px;
}
#HelpMFDiv a:hover {
    text-decoration: underline;
}
#HelpOtherDiv {
     float: left;
    width: calc(100% - 320px);
    overflow: hidden;
    height: 100%; 
}
#HelpOtherDiv h1 {
    font-size: 20px;
    font-weight: 200;
    margin-top: 30px; 
    color: white;
    
}
#HelpOtherDiv span {
    display: block;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
    padding-top: 5px;
}
#HelpOtherDiv button {
    height: 50px;
    width: 230px;
    background: white;
    text-align: center;
    display: block;
    font-size: 25px;
    margin: 0 auto;
    color: #b41932;
    font-weight: 200;
    padding-top: 7px;
    text-transform: uppercase;
    border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-top: 0px;
    cursor: pointer;
    border: none;

}
#HelpOtherDiv button:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#HelpOtherDiv a {
    background: none;
    box-shadow: none;
    margin:  0 0;
    height: 0px;
    font-size: 11px;
    text-decoration: none;
    color: white;
    padding-top: 3px;
    font-weight: 500;
    display: block;
    margin:  0 auto;
    width: 150px;
    
}
#HelpOtherDiv a:hover {
    text-decoration: underline;
}

#HelpOtherDiv img {
    height: 110px;
    width: 110px;
    border-radius: 50%;
    border:solid 5px white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-left: 10px;
    margin-right: 10px;
    object-fit: cover;
    margin-top: 0px;

}
#HelpOtherDiv small {
    display: block;
    clear: both;
    width: 100%;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 300;
    color: white;
    padding-bottom: 5px;
    opacity: white;
}

#PluggedInDiv {
    background: #b41932;
    width: 800px;
    height: 100px;
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    
}
#PluggedInDiv h1 {
    color: white;
    font-size: 28px;
    font-weight: 100;
    float: left;
    padding-left: 30px;
    margin-top: 23px;
    margin-bottom: 0px;
    
}
#PluggedInDiv h2 {
    color: white;
    font-size: 17px;
    font-weight: 300;
    float: left;
    padding-left: 50px;
    margin-top: 3px;
    text-align: right;
    width: 527px;

    
}
#PluggedInDiv button {
    height: 50px;
    width: 200px;
    font-size: 19px;
    color: #b41932;
    font-weight: 300;
    background: white;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    margin-top: 25px;
}
#PluggedInDiv button:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}


@media only screen and (max-width:1250px) {
    
    #DashboardSec {
        display: block;
        height: auto;
        margin-top: 50px;
    }
    .DashboardItemDiv {
      width: 100vw;
        height: 450px;
        min-height: 0px;
        display: block;
        overflow: hidden;
    }
    #DashboardBody {
        
        width: 100vw;
    }
 
    #HelpOuterDiv {
        height: calc(100vh - 160px)
    
    }
    .DashboardItemArrow {
        bottom: 15px;
    }
    
    #DashboardSec {
            padding-top: 10px;

    }
    
     #QATitle {
        font-size: 40px;
        width: 85%;margin: 0 auto;
        margin-top: 20px;
    }
    #QASubtitle {
        width: 85%;
        margin: 0 auto;
        margin-top: 15px;
    }
    
    #TeleTitle {
          font-size: 35px;
        width: 85%;margin: 0 auto;
        margin-top: 20px;
    }
    #TeleSmall {
        width: 85%;
        margin: 0 auto;
        margin-top: 15px;
        display: block;
    }
    #TeleTroubleButton {
        width: 300px;
        font-size: 15px;
        padding-top: 8px;
        line-height: 120%;
    }
    #TeleTroubleButtonP {
        font-size: 13px;
        line-height: 120%;
    }
    #TeleTableScrollDiv {
        width: 100%;
        overflow-y: scroll;
        padding: 0 50px;
     
    }
  
    
    
}

@media only screen and (max-width:900px) {
    
    #HelpDiv {
         width: 95%;
        height: 780px;
        max-width: 400px;
    }
    #HelpInnerDiv {
        width: 95%;
        height: 780px;
        margin-top: 120px;
        max-width: 400px;
    }
    #HelpTitle {
        padding: 20px 20px;
    }
    #HelpMFDiv {
        float: none;
        margin: 0 auto;
        margin-top: 30px;
    }
    #HelpOtherDiv {
        float: none;
        width: 95%;
        margin: 0 auto;
        height: auto;
        padding-bottom: 30px;
    }
    #HelpOtherDiv a {
        margin-top: 7px;
    }
    #HelpOtherDiv img {
        width: 90px;
        height: 90px;
        margin: 0 3px;
    }
    #HelpOtherDiv small {
        font-size: 12px;
        margin-bottom: 7px;
    }
    #HelpOtherDiv span {
        width: 250px;
        margin: 0 auto;
        font-size: 23px;
        line-height: 120%;
    }
    
    #PluggedInDiv {
        width: 95%;
        max-width: 400px;
        overflow: hidden;
        margin-top: 40px;
        height: auto;
    }
    #PluggedInDiv h1{
        float: none;
        width: 95%;
        margin: 0 auto;
        padding: 0;
        padding-top: 15px;
        font-size: 27px;
        font-weight: 300;
    }
    #PluggedInDiv h2{
        float: none;
        width: 90%;
        margin: 0 auto;
        padding: 0;
        padding-top: 5px;
        font-size: 15px;
        font-weight: 300;
        text-align: center;
    }
    #PluggedInDiv button {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    #LoginInnerDiv {
        width: 310px;
    }
    #LoginInnerDiv i {
    left: calc((310px / 2) - 35px);

    }
    
   
   
    
    
}

@media only screen and (max-width:450px) {
    #DashboardSec {
            padding-top: 0px;

    }
    
}