.coding-page #container-wrap{padding-top: 0;}
.coding-page .container-fluid, .coding-page #content{padding:0;}
#editor-box{margin-bottom: 0;} /*background-color: #4a4548;*/
#editor-box header {background-color: #f7f7f7; border-radius: 0;}
#editor-box .editor-controllers > ul > li > a {background-color: transparent;}
.inner-coding-area{display:flex;}
.lefttoolbar{width:50px; background: #fff; border-right: solid 1px #dadada;}
.lefttoolbar > .nav-bar > ul{display: flex; margin:0; padding: 0; list-style-type: none; flex-flow: row wrap; width:50px;}
.lefttoolbar  > .nav-bar > ul > li{display: flex; flex-flow: row wrap ; width: 100%; padding: 8px 10px;justify-content: center; border-bottom: solid 1px #dadada;}
.lefttoolbar > .nav-bar >ul > li > a,.lefttoolbar > .nav-bar >ul > li > span.logo {display: flex; width: 32px; height: 32px; text-align: center; align-items: center; justify-content: center;}
.lefttoolbar > .nav-bar >ul > li.active:not(.logo),.lefttoolbar > .nav-bar >ul > li.qactive,.lefttoolbar ul > li:not(.logo):hover{background: #f7f7f7;}
.lefttoolbar > .nav-bar >ul > li.chat.active{background: #4a4548;}
.lefttoolbar > .nav-bar >ul > li.chat path[fill]{fill: #7A7F8A;}
.lefttoolbar > .nav-bar >ul > li.chat.active path[fill]{fill: #ffffff;}
.content_wrap .btn,.content_wrap{padding:16px;}
.content_wrap .btn{border-radius: 0; border: none;}
.content_wrap .button5{border:dashed 1px #dadada}

.timer-bar{width:209px; padding-top: 30px; background-color: #f7f7f7; position: relative; display: flex; flex-flow: row wrap; justify-content: center; align-content:space-between;}
.timer-bar .timelabel{font-family: Lato; font-size: 24px; font-weight: bold;}
.webcam-section{background: #4a4548; width: 100%; padding: 2px;  height: 150px;margin-bottom:4px}
.webcam-section header{background: #4a4548; display:flex; color:#fff; padding: 6px 10px}
.webcam-section .video-blk{width:200px; margin:auto; height: 114px; background: #8a858d; color: #c2c2cc; align-items: center; justify-content: center; display: flex;    flex-flow: column wrap;}
.webcam-section.notes,.webcam-section.chatsection{position: relative; height: auto;}
.webcam-section.notes{padding:0; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);}
.webcam-section.notes.notesfixedpos {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; z-index: 1000;}
.webcam-section.chatsection.notesfixedpos{position: fixed;left: 50%; top: 50%; margin-left:-145px; margin-top:-218px; height:450px; width:290px;}
.cam-nav{display:flex;}
.webcam-section .textarea-blk{background: #fff; }
.webcam-section .textarea-blk textarea{width: 100%; padding:4px 8px; border: none; height: 120px; resize: none;}
.webcam-section.notesfixedpos textarea{height: 200px; resize:none;}
.mnusection > .btngroup8{margin-top: 36px; padding-bottom: 8px;}
.noquestion{margin-top:200px;}
.mnusection{width:307px; display: none; background: #f7f7f7;}
.mnusection .icon-cross{transform-origin: center; margin-right: 4px;}
.close-iocn.icon-cross:before, .close-iocn.icon-cross:after{height:14px}
.active .mnusection{width: 307px; display: block; background: #f7f7f7; flex-flow: row wrap; position: absolute; top: 0; bottom: 0; right: 0; left: 50px;}
.editor-box{width: calc(100% - 259px);}
.menusection .editor-box {width: calc(100% - 566px);}
.menusection .lefttoolbar{width:357px;}
.compile-cand{width: 10px;height: 10px;border-radius: 50%;background: #26d974;display: inline-block;margin-right: 5px;}

.cam-user:before{content:"";width: 10px;height: 10px;border-radius: 50%;background: #fff;display: inline-block;margin-right: 5px;}
.activeuser .cam-user::before,.video-div.activeuser .cam-user:before{background-color: #26d974;}
.interviewer-video-color.cam-user::before{background-color: #E02020;}
.cam-nav{display:flex; flex: 1; justify-content: flex-end; align-items: center;}


.webcam-section.collpase .name > span,.collpase .textarea-blk,.collpase .cam-nav {display: none;}
.webcam-section.collpase {width: 40px; height: 40px; float: right; margin-bottom: 16px; display: flex; justify-content: center;}
.webcam-section.collpase header{justify-content: center; align-items: center;}
.webcam-section.collpase header .name{height:15px; cursor: pointer;}
.bottom-action{padding:0; background: #f7f7f7; box-shadow: none; border-top: solid 1px #dadada;}
.face_msg,.precentrate{position: absolute; left: 0; right: 0; bottom: 51px; font-weight: bold;}
.face_msg{color:#26D974;}
.precentrate + .face_msg{bottom: 12px;}
/*.customctrlwrap, .compilectrlwrap{position: static; opacity: 1; height: 160px; display: none;}
.customctrlwrap{display: block;}
.customctrlwrap textarea{border:none; height: 160px; border-radius: 0; background-color: #4a4548; color: #8a858d; outline: none; box-shadow: none;}
*/
.bottom-action > ul{list-style-type: none; margin: 0; padding: 0;}
.bottom-action li{display: inline-block;}
.bottom-action li > a{display: block; padding:8px 20px; color:#8a858d; border-bottom: solid 2px transparent;}
.bottom-action li > a.active{color:#19171a; border-bottom-color: #d7263d;}
.ornode{display: block; margin: 16px 0;}
[data-ornode]{text-align: center; position: relative;}
[data-ornode]::after{content: ""; width: 100%; z-index: 1; height: 2px; background: #dadada; position: absolute; top:50%; margin-top:-1px; left:0; right:0;}
[data-ornode]::before{content: attr(data-ornode); color:#fff; line-height: 31px; background: #dadada; width: 31px; height: 31px; display: inline-block; border-radius: 50%; z-index: 2; position: relative;}
.webcam-section.chatsection{background:none; padding: 0; border-radius: 10px; z-index: 1000; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);}
.ui-draggable-dragging{border:dashed 1px #8a858d}
.chatsection header{padding:8px 16px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.chat-section{background: #eeeeee; min-height: 250px; padding:16px; max-height: 350px; overflow: auto;}
.curruser{text-align: right;}
.curruser .user{background-color:#e3fcee;}
.curruser .user:after{border-top-color:#e3fcee; right: -12px; left: auto;}
.user{text-align:left; display: inline-block; margin-bottom: 8px; position: relative; padding:1px 8px; background: #fff; color:#4a4548; border-radius: 3px; margin-left:12px;}
.user i{color: rgba(0, 0, 0, 0.54); font-size: 11px; margin-left: 8px; line-height: 14px;}
.user:after {content: "";border: solid 12px transparent;width: 0;height: 0;border-top-color: #fff;position: absolute; left: -12px; top: 0px;}
.chatctrl{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px; height: 150px;}
.chatctrl textarea{width:100%; border:none; background: #fff; min-height:150px; resize: none; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.chatctrl .chatenter{position: absolute; bottom: -25px; z-index: 1; right: 16px;}
[data-userdeficon]{display: inline-block; position: relative; font-style: normal; text-align: center;}
[data-userdeficon]::before{display:inline-block; content:""; content:attr(data-userdeficon); width:32px; height:32px; background: #bd10e0; line-height: 32px; margin-right: 8px; border-radius: 50%;}
.icon-user[data-userdeficon]::after{content: ""; width: 10px; height: 10px; border-radius: 50%; background:#26d974; display: inline-block; position: absolute; bottom: 0; right: 7px;}
.sharecontesturl .form1 button[type="button"]{padding:8px 12px; padding-top: 9px;}
.questionlist dt{border-bottom: solid 1px #f7f7f7;padding:13px 16px; padding-top: 12px; background: #ffffff; position: relative;}
.questionlist dt._lbcactivelabel > label.lblctrl{font-weight: normal; color:#4a4548; background-color: transparent;}
.questionlist dt > label:after{float: left; width:22px; height:21px; content:"";background-position: -170px 0px; background-image: url(images/tg_images_new/sprites.svg); background-repeat: no-repeat;}
.questionlist dt > label:before{width:28px; text-align: right; margin-right: 8px; height:21px; content:attr(data-index); display: inline-block;line-height: 31px; color:#19171a;}
.questionlist dt + dd{padding:8px 16px; background: #ffffff;}
.questionlist dt .tgicon{width:19px;height:19px;border: solid 1px #ccc;display:inline-block;margin-top: 4px;text-align: center;line-height: 14px; margin-left: 46px;}
.questionlist .popupinput:checked + dt > label:after{transform: rotate(180deg);background-position: -161px -11px; }
.questionlist dt:last-child,.questionlist .popupinput:checked + dt {border-bottom-color: transparent;}
.questionlist  .popupinput:checked + dt + dd{display: block; border-bottom: solid 1px #f7f7f7;}
.chatminimize > i{display: inline-block; width:12px; border-bottom: solid 1px #ffffff; height: 12px;}
.chatmaximize > i{display: inline-block; width:12px; border: solid 1px #ffffff; height: 12px;}
i.seticon {width: 32px; height: 32px; display: inline-block;}
.setting-icon {background-position: -168px -110px; transform: scale(0.9);}
i.seticon:hover,.open > a > i.seticon{background-color:#f7f7f7;}
i.seticon:hover:after,.open > a > i.seticon:after{color:#d7263d;}
i.seticon:after {content: ". . ."; transform: rotate(90deg); display: flex; line-height: 32px; transform-origin: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px; font-weight: bold; color:#dadada;}
.ques_nav .common-dropdown .delete-icon{transform: scale(0.8);}
.ques_nav .common-dropdown .dropdown-menu{top: 39px;right: -13px;width: 160px;}
.chatbox-section{height: 100%;}
.chatcollpase .chat-section, .chatcollpase .chatctrl {display: none;}
.chatsection.chatcollpase {position: absolute; bottom: 16px; width: calc(100% - 16px);}
a.mic path,a.camcorder g[fill]{fill:#8A858D}
a.mic:hover path,a.mic.silent path,a.camcorder:hover g[fill]{fill:#fff}
.toggle .second,.toggle.silent .first,.mic .second,.mic.silent .first,.camcorder .second,.camcorder.silent .first,.cam-nav > a.chatmaximize,.chatcollpase .chatminimize{display:none;}
.chatcollpase .cam-nav > a.chatmaximize,.toggle.silent .second,.mic.silent .second,.camcorder.silent .second{display:inline-block;}
html,body,#container-wrap,#content,#content > .container-fluid,#content > .container-fluid > .clearfix,.inner-coding-area{height: 100%;}
.ctrlcenter.text-left{    justify-content: flex-start;}
.ctrlcenter.text-left i{margin-right:0; align-self:flex-start;}
.timeclock{font-family: Lato; font-size: 56px; font-weight: 900; line-height: 40px;}
.interviewend-screen{min-height: 300px;}

.video-div .video-blk{width: 180px;height: 180px; color:#c2c2c2; font-weight: 300; border: solid 1px #dadada;background-color: #f7f7f7;display:flex;justify-content: center;margin: auto;align-content: center;align-items: center;flex-flow: column wrap; margin-bottom: 16px;}
.video-div .cam-user{color:#8a858d; font-size:12px;}
.video-div .cam-user:before{background-color: #dadada; width:8px; height: 8px;}
.\:modalwrap .wd40.roundblk{width:450px;height: 450px;border-radius: 50%;display: flex;justify-content: center;align-items: center;}

.dot-icon {position: relative; height: 24px;}
.dot-icon:after {content: "..."; position: absolute;top: 0;transform: rotate(90deg);font-size: 28px;bottom: 0;left: 0px;transform-origin: center;line-height: 0;color: #ddd;}
.open > .dot-icon{background:#f7f7f7; border-radius: 0;}
.open > .dot-icon:after{color:#d7263d;}
.disablectrl{pointer-events: none;}
.disablectrl ._bottom-section{pointer-events: all;}
.disablectrlInt .editor-controllers {display: none;}
.disablectrlInt .change-language-confirmation-testcase {pointer-events: none;}
.disablectrlCreator{opacity: 0.3;}


.posoverlay:checked + .nw-lbl.feeback{background-color: #19171a; color: #ffffff; border: solid 1px #19171a;}
.nw-lbl.feeback{background: #fff; color:#19171a; border:solid 1px #c2c2c2; border-radius: 3px; padding: 5px 6px;padding-bottom:2px;}

@keyframes mymove {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
   }
   .circle {animation: mymove 1.5s infinite;}

.chatcollpase{pointer-events: none;}

.interviewer:before {content: "";position: absolute;top: 0;bottom: 0;width: 4px;background: #E02020;left: 0; height:100%;}
.inter-cand:after {content: "";position: absolute;top: 0;bottom: 0;width: 4px;background: #26d974;left: 0; height:100%;}
.interviewer.inter-cand:before{top:50%; z-index:2; height:50%;}

@-webkit-keyframes shake {
    0% , to {-webkit-transform:translateZ(0); transform:translateZ(0)} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform:translate3d(-3px,0,0); transform:translate3d(-3px,0,0)}
    20%, 40%, 60%, 80%{-webkit-transform:translate3d(3px,0,0); transform:translate3d(3px,0,0)}
}
@keyframes shake{
    0%,to{-webkit-transform:translateZ(0); transform:translateZ(0)}
    10%,30%,50%,70%,90%{-webkit-transform:translate3d(-3px,0,0); transform:translate3d(-3px,0,0)}
    20%,40%,60%,80%{-webkit-transform:translate3d(3px,0,0); transform:translate3d(3px,0,0)}
}
.shake{-webkit-animation-name:shake;animation-name:shake; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; 
    -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;}
.user-profile > div{line-height: 14px;}

@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
div.common-message-box{z-index: 1001;}

.test-reverse-clock.success-msg { color:#02c54c;}
.test-reverse-clock.warning-msg { color:#FFC300;}
.test-reverse-clock.error-msg { color:#ff0000;}
.question-success-action .pass-icon {vertical-align: text-bottom;
width: 19px;
height: 16px;
display: inline-block;
background: url(images/tg_images_new/sprites.svg) -168px -240px no-repeat;
margin-left: 6px;
}

.compile-button-click-attr.disabled > span,.compile-button-click-attr.disabled > img {display:inline !important;}
.submit-button-click-attr > span{display: inline !important;}

/*--- Locked content --- */
#locked-content { display:table; width:87%; height:100%; position:absolute; top:0; background:url("https://www.techgig.com/files/contest_upload_files/disabled-bg.png") left top repeat; text-align:center; z-index : 99; }
#locked-content .locked-inner { display:table-cell; vertical-align:top;}
#locked-content .center-white-box { background:#fff; padding:25px 15px; width:400px; margin:200px auto; box-shadow:0 0 40px rgba(0, 0, 0, 0.1);}
#locked-content .center-white-box .button1 {min-width:120px;}


.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
  }
  
  .two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
      animation: dot 1.3s infinite;
      animation-delay: 0.2s;
  }
  
  .three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
     animation: dot 1.3s infinite;
     animation-delay: 0.3s;
  }
  
  @-webkit-keyframes dot {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @keyframes dot {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
  }
  .proccessing-color span {
      text-color:black;
  }
  #chat-body pre{padding:0;}