body {
    /*font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
    font-family: Lato;
    color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    color: #00B7FF;
}

div.ex1 {
    background-color: lightblue;
    width: 300px;
    height: 300px;
    overflow: scroll;
    position: absolute;
    right: 0;
    bottom: 0;
}

#blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#6454F070, #6EE2F533, #6454F070);
}

#instructions {
    width: 100%;
    height: 100%;
    color: #ffffff;
    text-align: center;
    font-family: Arial;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    padding-top: 10%;
}

#cvsname {
    margin-bottom: 100px;
    font-size: 56px;
    text-overflow: ellipsis;
}

.profile {
    float: right;
}

.profile_in {
    float: right;
}

.profile_out {
    float: right;
}

.loader {
    display: block;
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    margin-bottom: auto;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#loadingpanel {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    cursor: pointer;
}
.loadingmess{
    text-align: center;
}
#overlogin {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    cursor: pointer;
    background-image: url('../../assets/Textures/Background.jpg');
    background-size: cover;
}

#popupspanel {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 5;
    cursor: pointer;
}

.searchlibarypanel{
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
#popuptable {
    width: 50%;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: auto;
    display: none;
}
.popuplogin{
    width: 30%;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: auto;
    display: block;
}
.popupregister{
    width: 30%;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: auto;
    display: none;
}

.popupuserinfor{
    width: 30%;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: none;
}
.popupverify{
    width: 30%;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: auto;
    display: none;
}

#logbox {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.0);
    z-index: 0;
    cursor: pointer;
}


/* The Modal (background) */

.modal {
    display: block;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    /* overflow: auto; // Enable scroll if needed */
    background-color: rgba(0, 1, 0, 0.0);
    overflow: hidden;
}


/* Modal Content */

.modal-content {
    margin: auto;
    padding: 0px;
    width: 100%;
    position: relative;
    background-color: rgba(0, 1, 0, 0.0);
}

.leftview {
    width: 30%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    /* background-color: rgb(46, 47, 75); 
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2), 0px 0px 5px 1px rgba(0, 0, 0, 0.19); */
    /*background-color: red;*/
}

.main3Dview {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    position: absolute;
    opacity: 1;
    overflow: hidden;
    border-left: 1px solid #808080 !important;
    border-left-width: 1px !important;
    border-left-style: double !important;
}

.second3Dview {
    width: 100%;
    height: 600px;
    /*background-color: yellow;*/
    left: 0;
    top: 0;
    position: absolute;
    opacity: 1;
}

.contentview {
    width: 100%;
    height: 25%;
    left: 0;
    bottom: 0;
    position: absolute;
    background-color: #2D2D44;
}

.pingtable {
    width: 100%;
    height: 100%;
    top: 40px;
    bottom: 0;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #2D2D44;
    scrollbar-width: none;
}

.pingtable::-webkit-scrollbar {
    display: none;
}

.menuleft {
    /* width: 100px; */
    top: 80px;
    left: 10px;
    position: absolute;
    opacity: 1;
    /* background-color: #5D5E79; */
}

.tabtop {
    /* width: 100px; */
    z-index: 4;
    top: 80px;
    position: absolute;
    right: 10px;
    /* background-color: #5D5E79; */
}

.menuright {
    width: 20%;
    top: 150px;
    right: 5px;
    position: absolute;
    /*background: #32334B;*/
    background: rgba(50, 51, 75, 0.4);
    /* box-shadow: 3px 3px 3px rgba(0, 0, 0, .2); */
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2), 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
    opacity: 1;
    padding: 20px;
}

.Curror3DView {
    width: 100px;
    height: 100px;
    top: 50px;
    right: -100px;
    position: absolute;
    opacity: 1;
    z-index: 100;
}

.menubottom {
    /* position: fixed;
    bottom: 0px;
    height: 8%;
    width: 100%;
    background-color: #2D2D44;
    z-index: 3;
    border-top: 1px solid #ccc!important;
    border-top-width: 1px !important;
    border-top-style: double !important;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
    /* margin-bottom: 0.51%; */
}

.menubottom_direct {
    height: 20%;
    width: 100%;
    z-index: 3;
}

.menubottom_direct_choose {
    background-color: #2D2D44;
    position: inherit;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 2px;
}

#m_settingBottom {
    height: 10%;
    bottom: 5%;
    left: 1%;
    position: absolute;
    opacity: 1;
}

#m_settingToothID {
    height: 10%;
    bottom: 5%;
    left: 1%;
    position: absolute;
    opacity: 1;
}

.verSplitLine {
    top: 0;
    left: 1000px;
    position: absolute;
}

.horSplitLine {
    top: 500px;
    left: 0px;
    position: absolute;
}

.topbar {
    position: absolute;
    top: 0;
    height: 40px;
    width: 100%;
    background-color: #2D2D44;
    z-index: 2;
    border-bottom: 1px solid #ccc!important;
    border-bottom-width: 1px !important;
    border-bottom-style: double !important;
    vertical-align: middle;
}
.headmenus{
    position: fixed;
    top: 40px;
    width: 100%;
    background-image: url(../../assets/Textures/Background.jpg);
    background-size: cover;
    z-index: 4;
    height: 100%;
}
.headmenutitle{
    height: 20%;
    margin-top: 4%;
    text-align: center;
}
.headmenusitem{
    height:40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headmenubottom{
    height:20%;
    text-align: center;
    margin-top: 8%;
}

.titelbar {
    border-bottom: 1px solid #ccc!important;
    border-bottom-width: 1px !important;
    border-bottom-style: double !important;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    /* font-size: x-large; */
}

.titelbar:hover {
    white-space:break-spaces ;
    /* font-size: large; */
}

.containercheckbox {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Hide the browser's default checkbox */

.containercheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
}


/* On mouse-over, add a grey background color */

.containercheckbox:hover input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.containercheckbox input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.containercheckbox input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.containercheckbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.containerID {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Hide the browser's default checkbox */

.containerID input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmarkID {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
}


/* On mouse-over, add a grey background color */

.containerID:hover input~.checkmarkID {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.containerID input:checked~.checkmarkID {
    background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmarkID:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.containerID input:checked~.checkmarkID:after {
    display: block;
}


/* Style the checkmark/indicator */

.containerID .checkmarkID:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.scrollcontent {
    /* background-color: #eee; */
    width: auto;
    height: auto;
    margin-bottom: 10px;
    /* border: 1px lightblue black; */
    overflow-y: scroll;
    max-height: 40%;
    /* Add the ability to scroll */
}


/* Hide scrollbar for Chrome, Safari and Opera */

.scrollcontent::-webkit-scrollbar {
    display: none;
}


/* Hide scrollbar for IE, Edge and Firefox */

.scrollcontent {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.homebtn {
    position: absolute;
    z-index: 3;
    left: 10px;
    margin: 2px;
    width: 34px;
    height: 34px;
    background-image: url("../../../assets/images/icon/Home_ICO.png");
    background-size: 34px;
    background-repeat: no-repeat;
}

.bgTopbar {
    z-index: 3;
    margin-left: 60px;
    vertical-align: middle;
    position: absolute;
    top: 2px;
    border-radius: 10px;
    width: 70%;
    height: 34px;
    background: #5D5E79;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menulink {
    position: absolute;
    left: 0;
    top: 0;
}

.menubuttons {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 0;
}

.myblock {
    position: relative;
    border-radius: 3%;
    background: rgba(250, 250, 250, 0.2);
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    bottom: 290%;
}

.mymainblock {
    background: rgba(250, 250, 250, 0.2);
    padding-left: 30%;
    padding-right: 30%;
}

.normal_text {
    color: white;
    opacity: 1;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choose_normal_text {
    color: white;
    opacity: 1;
    width: 100%;
    text-align: center;
    /* position: absolute;
    top: 6px;
    left: 0; */
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewbutton {
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 30%;
    padding-right: 30%;
}


/* .viewbutton :hover{  
    font-size: larger;
    color: darkorchid;
} */

.viewbutton :hover {
    font-size: larger;
    color: #ffffff;
    text-shadow: 2px 2px 5px rgb(233, 91, 91);
    /* background-color: #5252520a */
}

.viewbutton :active {
    color: #ffffff;
    transform: translateX(3px);
}

.viewbuttonChoose {
    padding-bottom: 3px;
    padding-top: 3px;
}

.viewbuttonChoose :hover {
    display: block;
    font-size: larger;
    color: #ffffff;
    text-shadow: 2px 2px 5px rgb(233, 91, 91);
    /* background-color: #5252520a */
}

.viewbuttonChoose :active {
    color: #ffffff;
    transform: translate(3px);
}

.box_narrow {
    height: 10px;
    width: calc(1.92098213 * 10px);
    /* tan(62.5)xH */
    background: linear-gradient(to bottom right, transparent 49%, #d1d2e9 50%) top left, linear-gradient(to top right, transparent 49%, #d1d2e9 50%) bottom left, linear-gradient(to bottom left, transparent 49%, #d1d2e9 50%) top right, linear-gradient(to top left, transparent 49%, #d1d2e9 50%) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    content: none;
}

.left_box_l {
    position: absolute;
    top: 10%;
    left: 6%;
}

.left_box_r {
    position: absolute;
    top: 10%;
    right: 6%;
}


/* hướng xa hàm bên trái */

.right_box_l {
    position: absolute;
    top: 28%;
    left: 6%;
}

.right_box_r {
    position: absolute;
    top: 28%;
    right: 6%;
}


/* hướng trong hàm bên trái */

.in_box_l {
    position: absolute;
    top: 46%;
    left: 6%;
}

.in_box_r {
    position: absolute;
    top: 46%;
    right: 6%;
}


/* hướng ngoài hàm bên trái */

.out_box_l {
    position: absolute;
    top: 63%;
    left: 6%;
}

.out_box_r {
    position: absolute;
    top: 63%;
    right: 6%;
}


/* hướng cắn hàm bên trái */

.on_box_l {
    position: absolute;
    top: 81%;
    left: 6%;
}

.on_box_r {
    position: absolute;
    top: 81%;
    right: 6%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    margin: 2px;
    /* width: 33.33%;
    padding: 10px;
    height: 10px; Should be removed. Only for demonstration */
}

.box_narrow_r {
    height: 10px;
    width: calc(1.92098213 * 10px);
    /* tan(62.5)xH */
    background: linear-gradient(to bottom right, transparent 49%, #d1d2e9 50%) top left, linear-gradient(to top right, transparent 49%, #d1d2e9 50%) bottom left, linear-gradient(to bottom left, transparent 49%, #d1d2e9 50%) top right, linear-gradient(to top left, transparent 49%, #d1d2e9 50%) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    float: right;
    content: none;
}

.choose_box_narrow_r {
    height: 10px;
    width: calc(1.92098213 * 10px);
    /* tan(62.5)xH */
    background: linear-gradient(to bottom right, transparent 49%, #d1d2e9 50%) top left, linear-gradient(to top right, transparent 49%, #d1d2e9 50%) bottom left, linear-gradient(to bottom left, transparent 49%, #d1d2e9 50%) top right, linear-gradient(to top left, transparent 49%, #d1d2e9 50%) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    float: right;
    position: absolute;
    top: 8px;
    right: 10%;
}

.choose_box_narrow {
    height: 10px;
    width: calc(1.92098213 * 10px);
    /* tan(62.5)xH */
    background: linear-gradient(to bottom right, transparent 49%, #d1d2e9 50%) top left, linear-gradient(to top right, transparent 49%, #d1d2e9 50%) bottom left, linear-gradient(to bottom left, transparent 49%, #d1d2e9 50%) top right, linear-gradient(to top left, transparent 49%, #d1d2e9 50%) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    position: absolute;
    top: 8px;
    left: 10%;
}

#switch {
    top: 50%;
    left: 50%;
    width: 75px;
    height: 40px;
}

.toggle {
    position: absolute;
    border: 2px solid #444249;
    border-radius: 20px;
    -webkit-transition: border-color .6s ease-out;
    transition: border-color .6s ease-out;
    box-sizing: border-box;
}

.toggle.toggle-on {
    border-color: rgba(137, 194, 217, .4);
    -webkit-transition: all .5s .15s ease-out;
    transition: all .5s .15s ease-out;
}

.toggle-button {
    position: absolute;
    top: 4px;
    width: 28px;
    bottom: 4px;
    right: 39px;
    background-color: #444249;
    border-radius: 19px;
    cursor: pointer;
    -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;
    transition: all .3s .1s, width .1s, top .1s, bottom .1s;
}

.toggle-on .toggle-button {
    top: 3px;
    width: 65px;
    bottom: 3px;
    right: 3px;
    border-radius: 23px;
    background-color: #89c2da;
    box-shadow: 0 0 16px #4b7a8d;
    -webkit-transition: all .2s .1s, right .1s;
    transition: all .2s .1s, right .1s;
}

.toggle-text-on {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    color: rgba(0, 0, 0, 0);
}

.toggle-on .toggle-text-on {
    color: #3b6a7d;
    -webkit-transition: color .3s .15s;
    transition: color .3s .15s;
}

.toggle-text-off {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    line-height: 36px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    cursor: pointer;
    color: #444249;
}

.toggle-on .toggle-text-off {
    color: rgba(0, 0, 0, 0);
}


/* used for streak effect */

.glow-comp {
    position: absolute;
    opacity: 0;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(75, 122, 141, .1);
    box-shadow: 0 0 12px rgba(75, 122, 141, .2);
    -webkit-transition: opacity 4.5s 1s;
    transition: opacity 4.5s 1s;
}

.toggle-on .glow-comp {
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}


/* open mouth Slider */

.openmouth_slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.openmouth_slider:hover {
    opacity: 1;
}

.openmouth_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.openmouth_slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}


/* teeth grow up Slider */
.teethGrowUp_slider {
    -webkit-appearance: none;
    width: 98%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin: auto;
}

.teethGrowUp_slider:hover {
    opacity: 1;
}

.teethGrowUp_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.teethGrowUp_slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.animationbuttons{
    margin: auto;
    width: 25%;
    display: flex;
    padding-top: 80px;
}

.animationbutton{
    border: solid;
    border-radius: 5px;
    width: 130px;
    height: 30px;
    color: #ffffffd1;
    white-space: nowrap;
    box-shadow: 0px 0px 0px, 0px 0px 4px;
    background-color: #747592;
    margin: 10px;
}

/* image profile */
.our-team {
    padding: 30px 0 40px;
    margin-bottom: 30px;
    background-color: #f7f5ec;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .our-team .picture {
    display: inline-block;
    height: 130px;
    width: 130px;
    margin-bottom: 50px;
    z-index: 1;
    position: relative;
  }
  
  .our-team .picture::before {
    content: "";
    width: 100%;
    height: 0;
    border-radius: 50%;
    background-color: #1369ce;
    position: absolute;
    bottom: 135%;
    right: 0;
    left: 0;
    opacity: 0.9;
    transform: scale(3);
    transition: all 0.3s linear 0s;
  }
  
  .our-team:hover .picture::before {
    height: 100%;
  }
  
  .our-team .picture::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1369ce;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  .our-team .picture img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s;
  }
  
  .our-team:hover .picture img {
    box-shadow: 0 0 0 14px #f7f5ec;
    transform: scale(0.7);
  }
  
  .our-team .title {
    display: block;
    font-size: 15px;
    color: #4e5052;
    text-transform: capitalize;
  }
  
  .our-team .social {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #1369ce;
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
  }
  
  .our-team:hover .social {
    bottom: 0;
  }
  
  .our-team .social li {
    display: inline-block;
  }
  
  .our-team .social li a {
    display: block;
    padding: 10px;
    font-size: 17px;
    color: white;
    transition: all 0.3s ease 0s;
    text-decoration: none;
  }
  
  .our-team .social li a:hover {
    color: #1369ce;
    background-color: #f7f5ec;
  }

  /* custom menu */


  
  .card-section {
    margin: 2% 0 20px 0;
    /* padding: 25px; */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .card-section > h1 {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .card-section > h4 {
    color: #999;
    margin-top: 3px;
    margin-bottom: 6px;
  }
  
  .card-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  
  .card {
    width: 15em;
    height: 27em;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.15);
    transform: scale3d(1, 1, 1);
    transition: all 0.2s ease-out, filter 0.75s ease-out;
    background: rgba(0,0,0,0.2);
    filter: grayscale(0.1) saturate(95%) brightness(95%) contrast(90%);
  }
  
  .card:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 15px rgba(0,0,0,0.3);
    filter: grayscale(0) saturate(105%) brightness(100%) contrast(100%);
    /* cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAKv2lDQ1BEaXNwbGF5AABIiaWWd1RT2RaH972phIQAAQSkhN6RIhBAeg1FkA6iEhJKKCGmoGBXBkdgVBARAXUER0UUHAsgY0UUK4oN+4AMKspzsGBD5V1giG/eW+/98/ZaZ93v7rvP7+x97jlrbQDqcBY3W4wqAmQLJKKIAG9mXHwCk/QEcKAAdKCAOYcrFnqFh4cAZlPPv9v7O4CMP29ajWv95/f/aUq8FDEXAAnHWMITc7Mx7sDGBa5QJAHAlWB+g0US4TgfxFhFhCWIccc4p03y3XFOnuShiZioCB8APIZkKocjSgOgUrEXZi43DdOhWmJsI+DxBRgnYuzOTefwMK7B2DI7O2ecL2BsmvwvOml/00yWaXI4aTKerGXCyL58sTCLkzdVJxl8gQ9iEEIWcEDm/v8tO0s6taYBNqjposCI8T3A9vBIZk6wjAXJs8OmmM+biJ/gdGlg9BRzxT4JU8zj+AbL5mbNDpniVL4/W6YjYUdNsSgnQqafIvaLnGKO6Pta0sxoL9m6KWyZZn56VOwU5/JjZk+xODMy+HuMj8wvkkbIck4V+ctq/Ov0Terz2bJ4SXpUoKxGzvfcUsRxshx4Kb5+Mr8gWhYjlHjL9IVZ4bL4lKwAmV+cGymbK8EO3/e54bL9yeAEhU8xeEEoxMECiIEAjG0hF+wlKYsl48n75AjzRPy0dAnTSyjMSmGyBVxrS6adjS0LYPxuTv7qtxETdw5RO/ndl7MLgPUeuwOl333J5QAthQDq97/7DLcD0AsAmtu5UlHupG/8XAMBu+90LEMN0MHOkilYgR04git4gh8EQRhEQTzMBy6kQzaIYBEshVVQCMWwETZDFeyAOtgLB+AQtMBxOAPn4TJch9vwAHphAF7CMLyHUQRBSAgNYSAaiC5ihFggdggLcUf8kBAkAolHkpA0RIBIkaXIGqQYKUOqkJ1IPfIrcgw5g1xEupF7SB8yiLxBPqM4lIqqoNqoMToDZaFeaDAahc5D09CFaD5agK5HK9FadD/ajJ5BL6O30V70JTqCA5w8Tg2nh7PCsXA+uDBcAi4VJ8ItxxXhKnC1uEZcG64TdxPXixvCfcIT8Qw8E2+Fd8UH4qPxXPxC/HJ8Cb4KvxffjO/A38T34Yfx3wg0ghbBguBCYBPiCGmERYRCQgVhN+Eo4RzhNmGA8J5IJKoRTYhOxEBiPDGDuIRYQtxGbCKeJnYT+4kjJBJJg2RBciOFkTgkCamQtJW0n3SKdIM0QPpIlifrku3I/uQEsoC8mlxB3kc+Sb5BfkYelVOUM5JzkQuT48nlyW2Q2yXXJndNbkBulKJEMaG4UaIoGZRVlEpKI+Uc5SHlrby8vL68s/wceb78SvlK+YPyF+T75D9RlanmVB9qIlVKXU/dQz1NvUd9S6PRjGmetASahLaeVk87S3tM+6jAULBWYCvwFFYoVCs0K9xQeEWXoxvRvejz6fn0Cvph+jX6kKKcorGijyJHcbliteIxxR7FESWGkq1SmFK2UonSPqWLSs+VScrGyn7KPOUC5Trls8r9DBzDgOHD4DLWMHYxzjEGVIgqJipslQyVYpUDKl0qw6rKqjNVY1QXq1arnlDtVcOpGaux1bLUNqgdUruj9nma9jSvaSnT1k1rnHZj2gf16eqe6inqRepN6rfVP2swNfw0MjVKNVo0HmniNc0152gu0tyueU5zaLrKdNfp3OlF0w9Nv6+FaplrRWgt0arTuqI1oq2jHaAt1N6qfVZ7SEdNx1MnQ6dc56TOoC5D112Xr1uue0r3BVOV6cXMYlYyO5jDelp6gXpSvZ16XXqj+ib60fqr9Zv0HxlQDFgGqQblBu0Gw4a6hqGGSw0bDO8byRmxjNKNthh1Gn0wNjGONV5r3GL83ETdhG2Sb9Jg8tCUZuphutC01vSWGdGMZZZpts3sujlq7mCebl5tfs0CtXC04Ftss+i2JFg6Wwosay17rKhWXla5Vg1WfdZq1iHWq61brF/NMJyRMKN0RueMbzYONlk2u2we2CrbBtmutm2zfWNnbse1q7a7ZU+z97dfYd9q/3qmxcyUmdtn3nVgOIQ6rHVod/jq6OQocmx0HHQydEpyqnHqYamwwlklrAvOBGdv5xXOx50/uTi6SFwOufzpauWa6brP9fksk1kps3bN6nfTd+O47XTrdWe6J7n/7N7roefB8aj1eOJp4Mnz3O35zMvMK8Nrv9crbxtvkfdR7w8+Lj7LfE774nwDfIt8u/yU/aL9qvwe++v7p/k3+A8HOAQsCTgdSAgMDiwN7GFrs7nsevZwkFPQsqCOYGpwZHBV8JMQ8xBRSFsoGhoUuin04Wyj2YLZLWEQxg7bFPYo3CR8Yfhvc4hzwudUz3kaYRuxNKIzkhG5IHJf5Pso76gNUQ+iTaOl0e0x9JjEmPqYD7G+sWWxvXEz4pbFXY7XjOfHtyaQEmISdieMzPWbu3nuQKJDYmHinXkm8xbPuzhfc37W/BML6As4Cw4nEZJik/YlfeGEcWo5I8ns5JrkYa4Pdwv3Jc+TV84bTHFLKUt5luqWWpb6PM0tbVPaYLpHekX6EN+HX8V/nRGYsSPjQ2ZY5p7MsazYrKZscnZS9jGBsiBT0JGjk7M4p1toISwU9i50Wbh54bAoWLRbjIjniVslKlgTdEVqKv1B2pfrnlud+3FRzKLDi5UWCxZfyTPPW5f3LN8//5cl+CXcJe1L9ZauWtq3zGvZzuXI8uTl7SsMVhSsGFgZsHLvKsqqzFVXV9usLlv9bk3smrYC7YKVBf0/BPzQUKhQKCrsWeu6dseP+B/5P3ats1+3dd23Il7RpWKb4oriLyXckks/2f5U+dPY+tT1XRscN2zfSNwo2Hin1KN0b5lSWX5Z/6bQTc3lzPKi8nebF2y+WDGzYscWyhbplt7KkMrWrYZbN279UpVedbvau7qpRqtmXc2HbbxtN7Z7bm/cob2jeMfnn/k/390ZsLO51ri2oo5Yl1v3dFfMrs5fWL/U79bcXbz76x7Bnt69EXs76p3q6/dp7dvQgDZIGwb3J+6/fsD3QGujVePOJrWm4oNwUHrwxa9Jv945FHyo/TDrcOMRoyM1RxlHi5qR5rzm4Zb0lt7W+NbuY0HH2ttc247+Zv3bnuN6x6tPqJ7YcJJysuDk2Kn8UyOnhaeHzqSd6W9f0P7gbNzZWx1zOrrOBZ+7cN7//NlOr85TF9wuHL/ocvHYJdallsuOl5uvOFw5etXh6tEux67ma07XWq87X2/rntV98obHjTM3fW+ev8W+dfn27Nvdd6Lv3O1J7Om9y7v7/F7Wvdf3c++PPlj5kPCw6JHio4rHWo9rfzf7vanXsfdEn2/flSeRTx70c/tf/iH+48tAwVPa04pnus/qn9s9Pz7oP3j9xdwXAy+FL0eHCv+h9I+aV6avjvzp+eeV4bjhgdei12NvSt5qvN3zbua79pHwkcfvs9+Pfij6qPFx7yfWp87PsZ+fjS76QvpS+dXsa9u34G8Px7LHxoQcEWeiFcBhA01NBXizB4AWD8C4DkCZO9k7Txgy2e9PEPw3nuyvJ8wRoK4HIGoJQMhVgK1VAMaYPh3rvcPpmN8VUHt72fjLxKn2dpNaVA+sNXk0NvbWFIBUCvC1dGxstG5s7GsdluwDgNN5kz37RAvTClg7NV5F99kM+Hf7JwgGCNR1aeCRAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAD4klEQVRYhcVXzU7jVhg9vr62cxMSYykaIoQIYpVsioZVparrCoTEC1Tdta+QZAOCDfEzdNc3QEViw65C6go0lapkFU0gQmGIZBwgxr73+naRGKUMzESjZOYs/X33O+f++nwaJoTrukwIsSWE2BBCFOM4npdS5gBA1/U+IeSWUtqmlB5TSo8qlUowSV3tcwn1en0lDMPdIAh+UEpZExXVtJAxdmpZ1l61Wn3/RQJc182EYbg/GAy2lVLGeIwQIgzDeKSUhgAghLA456k4jukzITydTh9alrVTqVQeJhZQr9dXHh4e/oiiqJh8MwwjcBznKp/Pf7Bt29e0/w9VSsH3fbvX673xPG+Rc86SmGma7Uwm88tLq/GRgIODg+/v7u5+H9vfqFAotJaWli50XY9fEvwcUkrS6XSWu93uqpTSHNXpZ7PZX2u12t+vCqjX6yv9fv/PhJwx5pdKpTPGWDgJ8XMEQZBqNptvgyCwRyL8XC63Va1WLz4S4Lpu5v7+/jhZ9lwud10ul99NOuvXIKUkjUZjrd/vLwDD7Zibm9tIzgRJEsMw3E/IGWP+NMgBQNf1uFwuv2OM+QAQRVExDMP9JE6A4dIPBoPt0YCoVCqdT4N8XMSoZgQAg8Fgu16vrzwJCMNwN7lqhUKhxRh7nBZ5AsbY48LCQgsAlFJGGIa7AKC5rss8z/tHKWUahhGsr6//Nc3Zj0NKSc7Ozn7knDNN00LHcdaIEGJLKWUCgOM4V7MiB4Zb4TjOFQAopSwp5RYRQmwkCfl8/sOsyF/i4JxvECFEERg+r7Zt+7MWYNu2TwgRACCEKJI4jucBwDCMx+fP6yygaRoMw3gEgDiO50ny6lFKp37yX0PyE5NS5sjnkmcNout6HwCEEKmvRSqEsIAnI0NuAYBznlJKzZxcKQXOeQoACCG3hFLaBoA4jqnv+/asBfi+byfGhVLaJpTS4yTY6/XezFrAOIdhGMeEUnqkaVoIAJ7nLUopZ3YwpZTE87xFYOgbdV0/IpVKJWCMnQIA55x1Op3lWQm4vLxcTqwaY+y0UqkEBAAsy9rTNI0DQLfbXQ2CYOo3IgiC1PX19SowNKuWZe0Bo99xtVp9n06nDwFASmk2m82309wKKSUZ1TQBIJ1OHyYG9YnEsqwd0zTbI7V2o9FYm4aIxJIlvtA0zbZlWTtJfBJTev6lBmUSU6qPDzg5Obnd3Nw855z/pJSyhBCpm5ubRSmlymazfULIRC+VlJJcXFwUW63Wd1EUZRLybDb7W61W+3c892s2Jj+Pz/yTAoBv3JqN45s1p8/hui6TUm5xzj/ZnhuGcazr+sTt+X9oFlYxBLYMrQAAAABJRU5ErkJggg==') 16 16, auto; */
  }
  
  .card > img {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -15%;
    z-index: -10;
    transform: scale(1.25);
    transition: all 0.2s ease-out, transform 0.2s ease-out, filter 0.75s ease-out;
    filter: blur(0px);
  }
  
  .card.blur > img {
    filter: blur(1px) grayscale(0.1) saturate(80%);
  }
  
  .card > .shineLayer {
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%);
    transition: all 0.2s ease-out;
  }

  .cornerstoneShowDicom {
    width: 100%;
    height: 100%;
    margin: 35px auto;
    z-index: 100;
    position: unset;
  }
  
  .cornerstoneElement {
    width: 56%;
    margin: auto;
    height: 100%;
    position: unset;
    background-color: black;
  }
  .dicomMenuLeft{
    position: absolute;
    right: 0px;
    width: 18%;
    height: 100%;
    left: 0px;
    background-color: #2a54646b;
    padding: 50px 20px 20px 20px;
  }
  .loadfiledicom{
      display: block;
      margin: auto;
  }
  .currentDicomFiles{
    width: 100%;
    background-color: rgb(145, 145, 145);
    height: 40%;
    margin-top: 10px;
  }
  .listUserDicom{
      width: 100%;
      background-color: rgb(145, 145, 145);
      height: 40%;
      margin-top: 40px;
  }
  .dicomContent{
      margin-top: 5px;
      width: 100%;
      height:100%;
      overflow: scroll;
  }
  .dicomfile{
      height: 20px;
      width: 1000px;;
      border-bottom-style: solid;
      overflow: hidden;
      background-color: #444249;
  }
  .dicomfile:hover{
      background-color: #3b6a7d;
  }
  .dicomFileTogge{
    background-color: #0fb6e9;
  }


  .menutext{
    left: 0;
    bottom: 10%;
    position: fixed;
    width: 100%;
    text-align: center;
    font-size: larger;
    text-transform: uppercase;
  }