/****************************************
*
* ABOUT THE FORM INPUT + BUTTON STYLING
*
****************************************/

/**************************************
* BUTTON ICON (top right corner)
**************************************/
.vtIconBtn {
    background: none;
    color: rgb(75, 75, 75);
    margin: auto 12px auto 12px;
    padding: 7px 0px 7px 7px;
    border-radius: 50px;
    border: none !important;
    outline: none !important;
}

.vtIconBtn i {
    font-size: 28px;
}

/* Rotate Effect when user Hover */
.vtIconZoom i {
    transition: 1s;
}

.vtIconZoom i:hover {
    transition: 0.3s;
    transform: scale(1.2);
}

/* Rotate Effect when user Hover */
.vtIconRot i {
    transition: 1.5s;
}

.vtIconRot i:hover {
    transition: 1.5s;
    transform: rotate(180deg);
}

/* Jump Effect when user Hover */
.vtIconJump i {
    transition: 0.8s;
}

.vtIconJump i:hover {
    transition: 0.8s;
    transform: translatey(-5px);
}


/**************************************
* PRIMARY BTN (dark blue background)
**************************************/
.vtPrimaryBtn {
    color: white;
    font-size: 13px;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
    padding: 7px 20px 7px 20px !important;
    border-radius: 35px;
    box-shadow: 0px 0px 2px 1px rgb(223, 223, 223) !important;
    background: #172D40;
    border: none;
    outline: none;
    transition: all 0.5s ease !important;
}

.vtPrimaryBtn:hover {
    color: white;
    background: #172D40;    
    box-shadow: 0px 0px 4px 1px rgb(138, 138, 138) !important;
    transition: all 0.5s ease !important;
    outline: none;
}

.vtPrimaryBtn:focus {
    outline: none;
}

.exportFormAs {
    font-size: 18px; 
    color: rgb(102, 102, 102);
}

/************************************************************
* TAB NOTIFICATION CIRCLE
************************************************************/
.tabNotification {
    background: #172D40; 
    font-weight: bold; 
    color: white;
}

/************************************************************
* BUTTONS
************************************************************/

.exportPDFBtn { background-color: rgba(244, 15, 2, 0.1); }
.exportPDFBtn i { color: #f40f02; }

.exportEXCELBtn { background-color: rgba(16, 124, 65, 0.1); }
.exportEXCELBtn i { color: #107c41; }

.exportWORDBtn { background-color: rgba(0, 90, 193, 0.1); }
.exportWORDBtn i { color: #005ac1; }

/* Spinning round and round while exporing */
@-webkit-keyframes rotating {    /* Safari and Chrome */
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}